/* ============================================================
   PEKNÉ KÚRENIE – CUSTOM CSS
   Web: pekne-kurenie.sk
   Súbor: /user/documents/upload/CSS/pk-custom.css
   Autor: Adrian Forrai
   Verzia: 2026-05-21 09:50 SELČ, Bratislava
   Popis:
   Prehľadná verzia CSS pre hlavičku, menu, logo, tlačidlá,
   piktogramové benefit bannery, bannery, zľavový kupón,
   mobilné menu 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
   ============================================================ */

.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
   Verzia: 2026-05-21 10:18 SELČ, Bratislava
   Popis:
   Návrat mobilnej hlavičky do stavu ako o 8:16.
   Bez zásahu do mobilného headeru, ikon, košíka, loga a menu.
   ============================================================ */

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

  #content h1,
  .content h1,
  .content-inner h1,
  .p-detail h1,
  .p-detail-inner h1,
  .p-detail-inner-header h1,
  .p-detail-info h1,
  .product-top h1,
  .product-detail h1,
  .p-detail-title,
  .product-title {
    font-size: 30px !important;
    line-height: 1.14 !important;
    margin-top: 12px !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.4px !important;
  }

  .stars-wrapper,
  .stars,
  .p-code,
  .p-detail-info .stars-wrapper,
  .p-detail-info .p-code {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
  }

  .p-detail-inner-header,
  .p-detail-info,
  .p-detail-info-wrapper {
    margin-bottom: 10px !important;
  }

  .p-image-wrapper,
  .p-detail-inner .p-image,
  .image360,
  .p-thumbnails-wrapper {
    margin-top: 8px !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;
}
/* ============================================================
   13 OPRAVA PRESVITANIA OBSAHU CEZ MOBILNÉ MENU
   Autor: Adrian Forrai
   Verzia: 2026-05-21 10:17 SELČ, Bratislava
   Popis:
   Bez zásahu do zatvorenej mobilnej hlavičky.
   Oprava iba pozadia otvoreného mobilného menu.
   ============================================================ */

@media (max-width: 767px) {
  .navigation-window,
  .menu-level-1,
  .menu-level-2,
  .menu-level-3 {
    background: #ffffff !important;
  }

  .navigation-window {
    z-index: 99999 !important;
  }

  .navigation-window .navigation-in {
    background: #ffffff !important;
  }

  .navigation-window .navigation-in:before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: -100vh !important;
    left: 0 !important;
    background: #ffffff !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }

  .navigation-window .navigation-in,
  .navigation-window .navigation-in > ul,
  .navigation-window .navigation-in > ul > li,
  .navigation-window .navigation-in > ul > li > a {
    position: relative !important;
    background: #ffffff !important;
    z-index: 2 !important;
  }

  .homepage-box,
  .banners-row,
  .banner-wrapper,
  .extended-banner,
  .carousel,
  .carousel-inner {
    z-index: 1 !important;
  }
}