/* ============================================================
   PEKNÉ KÚRENIE – CUSTOM CSS
   Web: pekne-kurenie.sk
   Súbor: /user/documents/upload/CSS/pk-custom.css
   Autor: Adrian Forrai
   Verzia: 2026-05-20 20:41 SELČ, Bratislava
   Popis:
   Prehľadná verzia CSS pre hlavičku, menu, logo, tlačidlá,
   piktogramové benefit bannery, bannery, zľavový kupón
   a skrytie pätičky.
   ============================================================ */


/* ============================================================
   01 PREMENNÉ FARIEB A ROZMEROV
   ============================================================ */

:root {
  --r: #D71920;
  --d: #E53935;
  --h: #A80F16;
  --t: #2b2d38;

  --gr: linear-gradient(-72deg, #A80F16 0%, #D71920 48%, #E53935 100%);
  --grh: linear-gradient(-72deg, #8F0F16 0%, #B51218 50%, #D71920 100%);

  --cg: linear-gradient(-72deg, #11ce31ff, #06932cff);
  --cgh: linear-gradient(-72deg, #06932cff, #047824);

  --hh: 170px;
  --ld: 130px;
  --br: 15px;
}


/* ============================================================
   02 DESKTOP HLAVIČKA A FIXNÉ MENU
   ============================================================ */

@media (min-width: 768px) {
  body {
    padding-top: var(--hh) !important;
  }

  #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(43, 45, 56, .12) !important;
  }

  #header .header-top,
  #header .header-bottom,
  #header .navigation-wrapper {
    background: #fff !important;
  }

  #header:after {
    background: var(--gr) !important;
  }

  .navigation-in {
    background: transparent !important;
  }

  .navigation-in > ul > li > a,
  .navigation-in > ul > li > a:visited,
  .submenu-arrow:after,
  .menu-helper:after {
    color: #fff !important;
    font-weight: 700 !important;
  }

  .navigation-in > ul > li > a:hover,
  .navigation-in > ul > li:hover > a,
  .navigation-in > ul > li.exp > a,
  .navigation-in > ul > li.active > a {
    color: #fff !important;
    background: var(--grh) !important;
  }
}


/* ============================================================
   03 LOGO
   ============================================================ */

@media (min-width: 768px) {
  #header .site-name,
  #header .site-name a,
  #header .site-name-wrapper,
  #header .logo {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #header .site-name img,
  #header .site-name a img,
  #header .site-name-wrapper img,
  #header .logo img,
  .site-name img {
    height: var(--ld) !important;
    max-height: var(--ld) !important;
    width: auto !important;
    object-fit: contain !important;
  }
}


/* ============================================================
   04 TLAČIDLÁ – VŠEOBECNÉ
   ============================================================ */

.btn,
.button,
a.btn,
input[type=button],
input[type=submit],
button,
.add-to-cart-button,
.cart-table .btn,
.quantity .increase,
.quantity .decrease {
  border-radius: var(--br) !important;
}

.btn-primary,
.button-primary,
input[type=submit],
button[type=submit],
.search-form button,
.search-form .btn,
.search button,
.search .btn,
.search-input button,
.search-input .btn {
  background: var(--gr) !important;
  border-color: var(--r) !important;
  color: #fff !important;
  border-radius: var(--br) !important;
  font-weight: 700 !important;
}

.btn-primary:hover,
.button-primary:hover,
input[type=submit]:hover,
button[type=submit]:hover,
.search-form button:hover,
.search-form .btn:hover,
.search button:hover,
.search .btn:hover,
.search-input button:hover,
.search-input .btn:hover {
  background: var(--grh) !important;
  border-color: var(--h) !important;
  color: #fff !important;
}


/* ============================================================
   05 TLAČIDLÁ – VLOŽIŤ DO KOŠÍKA
   ============================================================ */

.add-to-cart-button,
.btn.add-to-cart-button,
.p-detail .add-to-cart-button,
.products-block .add-to-cart-button {
  background: var(--cg) !important;
  border-color: #06932cff !important;
  color: #fff !important;
  border-radius: var(--br) !important;
  font-weight: 700 !important;
}

.add-to-cart-button:hover,
.btn.add-to-cart-button:hover,
.p-detail .add-to-cart-button:hover,
.products-block .add-to-cart-button:hover {
  background: var(--cgh) !important;
  border-color: #06932cff !important;
  color: #fff !important;
}


/* ============================================================
   06 ODKAZY A HORNÁ LIŠTA
   ============================================================ */

#header,
.top-navigation-bar,
.top-navigation-bar a,
.header-top,
.header-top a {
  color: var(--t);
}

#header a:not(.navigation-in > ul > li > a):hover,
.top-navigation-bar a:hover,
.header-top a:hover {
  color: var(--r) !important;
}

.header-top .contact-box a[href^=mailto],
.top-navigation-bar a[href^=mailto],
.header-top .contact-box a[href^=tel],
.top-navigation-bar a[href^=tel] {
  color: var(--r) !important;
  font-weight: 700 !important;
}

a {
  color: var(--r);
}

a:hover {
  color: var(--h);
}


/* ============================================================
   07 SYSTÉMOVÉ SPRÁVY A TOP BANNER
   ============================================================ */

.site-msg,
.site-message,
.top-banner,
.user-action-visible .user-action-tabs li.active {
  background: var(--gr) !important;
  color: #fff !important;
}


/* ============================================================

   08 PEKNÉ KÚRENIE – BENEFIT BANNERY TITULKA / KOŠÍK

   Autor: Adrian Forrai

   Verzia: 2026-05-20 21:09 SELČ, Bratislava

   Popis:

   Piktogram je vo vnútri obdĺžnika pri texte.

   ============================================================ */

.pk-cart-benefit{

  display:flex!important;

  align-items:center!important;

  gap:8px!important;

  width:100%!important;

  min-height:86px!important;

  padding:10px 12px!important;

  border-radius:14px!important;

  background:linear-gradient(90deg,#ffffff 0%,#fff4f5 62%,#f8d7da 100%)!important;

  border:none!important;

  box-shadow:none!important;

  outline:none!important;

  box-sizing:border-box!important;

  overflow:hidden!important;

  font-family:Arial,Helvetica,sans-serif!important;

}

.pk-cart-benefit:before,

.pk-cart-benefit:after{

  content:none!important;

  display:none!important;

}

.pk-cart-benefit-icon{

  width:58px!important;

  height:58px!important;

  min-width:58px!important;

  max-width:58px!important;

  max-height:58px!important;

  border-radius:50%!important;

  overflow:hidden!important;

  display:flex!important;

  align-items:center!important;

  justify-content:center!important;

  background:transparent!important;

  border:none!important;

  box-shadow:none!important;

  outline:none!important;

  flex:0 0 58px!important;

}

.pk-cart-benefit-icon img{

  width:58px!important;

  height:58px!important;

  min-width:58px!important;

  max-width:58px!important;

  min-height:58px!important;

  max-height:58px!important;

  object-fit:contain!important;

  display:block!important;

  border:none!important;

  box-shadow:none!important;

  outline:none!important;

  border-radius:0!important;

  transform:none!important;

  filter:none!important;

}

.pk-cart-benefit-content{

  display:flex!important;

  flex-direction:column!important;

  justify-content:center!important;

  align-items:flex-start!important;

  text-align:left!important;

  min-width:0!important;

  width:auto!important;

}

.pk-cart-benefit-title{

  width:100%!important;

  margin:0 0 4px 0!important;

  padding:0!important;

  font-size:13px!important;

  line-height:1.25!important;

  font-weight:800!important;

  color:#2b2d38!important;

  text-align:left!important;

  letter-spacing:0!important;

}

.pk-cart-benefit-content p{

  width:100%!important;

  margin:0!important;

  padding:0!important;

  font-size:13px!important;

  line-height:1.35!important;

  font-weight:500!important;

  color:#2b2d38!important;

  text-align:left!important;

}

@media(max-width:520px){

  .pk-cart-benefit{

    min-height:76px!important;

    padding:9px 10px!important;

    gap:8px!important;

  }

  .pk-cart-benefit-icon{

    width:54px!important;

    height:54px!important;

    min-width:54px!important;

    max-width:54px!important;

    max-height:54px!important;

    flex:0 0 54px!important;

  }

  .pk-cart-benefit-icon img{

    width:54px!important;

    height:54px!important;

    min-width:54px!important;

    max-width:54px!important;

    min-height:54px!important;

    max-height:54px!important;

  }

  .pk-cart-benefit-title,

  .pk-cart-benefit-content p{

    font-size:13px!important;

  }

}

/* ============================================================
   09 BANNERY
   ============================================================ */

.extended-banner-title,
.banner-wrapper h2,
.banner-wrapper h3,
.banners-row h2,
.banners-row h3 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
  line-height: 1.08 !important;
  color: #242631 !important;
}

.banner-wrapper,
.banners-row .banner,
.extended-banner {
  border-radius: 20px !important;
  overflow: hidden !important;
  transition: .28s ease !important;
}

.banner-wrapper:hover,
.banners-row .banner:hover,
.extended-banner:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 38px rgba(36, 38, 49, .13) !important;
}

.banner-wrapper img,
.banners-row .banner img,
.extended-banner img {
  border-radius: 20px !important;
  transition: .35s ease !important;
}

.banner-wrapper:hover img,
.banners-row .banner:hover img,
.extended-banner:hover img {
  transform: scale(1.035) !important;
  filter: contrast(1.05) saturate(1.08) !important;
}


/* ============================================================
   10 ZĽAVOVÝ KUPÓN
   ============================================================ */

.discount-coupon {
  background: transparent !important;
  color: var(--t) !important;
  margin: 24px 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.discount-coupon form,
.discount-coupon .form-group {
  margin: 0 !important;
}

.discount-coupon .discount-coupon-title,
.discount-coupon > span,
.discount-coupon > a,
.discount-coupon label,
.discount-coupon .toggle-window-arr {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 14px 18px !important;
  background: #fff !important;
  color: var(--t) !important;
  border: 1px solid rgba(215, 25, 32, .18) !important;
  border-radius: var(--br) !important;
  box-shadow: 0 8px 22px rgba(43, 45, 56, .08) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.discount-coupon .discount-coupon-title:before,
.discount-coupon > span:before,
.discount-coupon > a:before,
.discount-coupon label:before,
.discount-coupon .toggle-window-arr:before {
  content: "%";
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  background: var(--gr) !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 14px !important;
}

.discount-coupon input[type=text],
.discount-coupon input[type=search] {
  height: 46px !important;
  border: 1px solid #ddd !important;
  border-radius: var(--br) !important;
  padding: 0 15px !important;
  background: #fff !important;
  color: var(--t) !important;
}

.discount-coupon .btn,
.discount-coupon button,
.discount-coupon input[type=submit] {
  height: 46px !important;
  background: var(--gr) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--br) !important;
  font-weight: 800 !important;
  padding: 0 18px !important;
}

.discount-coupon .btn:hover,
.discount-coupon button:hover,
.discount-coupon input[type=submit]:hover {
  background: var(--grh) !important;
  color: #fff !important;
}


/* ============================================================
   11 MOBILNÉ ÚPRAVY
   ============================================================ */

@media (max-width: 767px) {
  .extended-banner-title,
  .banner-wrapper h2,
  .banner-wrapper h3,
  .banners-row h2,
  .banners-row h3 {
    font-size: 22px !important;
    line-height: 1.12 !important;
  }
}


/* ============================================================
   12 SKRYTIE SHOPTET / APOLLO PÄTIČKY
   ============================================================ */

#signature,
.signature,
#footer #signature,
#footer .signature,
.footer-credits,
.footer-signature,
.shoptet-signature,
.created-by-shoptet {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.copyright a[href*=shoptet],
#footer .copyright a[href*=shoptet],
.footer-bottom .copyright a[href*=shoptet],
.footer-bottom a[title*=Shoptet] {
  display: none !important;
  visibility: hidden !important;
}