/****************************************************
  TYPOGRAPHY / GLOBAL
****************************************************/

/* Use Source Sans 3 for body, Roboto for headings */
:root {
  --template-body-font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --template-headings-font: "Roboto", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Global font application */
html, body, p, li,
h1,h2,h3,h4,h5,h6,
button, input, select, textarea,
nav, .nav, .menu, .breadcrumbs,
.btn, .button,
.product .name, .price, .category-title {
  font-family: var(--template-body-font) !important;
}

h1,h2,h3,h4,h5,h6,
.category-title,
.product .name {
  font-family: var(--template-headings-font) !important;
}

/* Hide header title (under logo) */
h1.header-title {
  display: none !important;
}

/* Global background */
html,
body {
  background-color: #F7F1E6 !important;
}

/* Common Shoptet wrappers transparent */
.overall-wrapper,
#content-wrapper,
.content-wrapper,
#content,
main#content,
.container,
.footer,
#footer {
  background: transparent !important;
}

/* Content max width */
@media (min-width: 1200px) {
  .overall-wrapper .container,
  #content-wrapper.container.content-wrapper {
    width: min(1418px, calc(100% - 40px)) !important;
    max-width: 1418px !important;
    margin-left: auto;
    margin-right: auto;
  }
}


/****************************************************
  HERO BANNER
****************************************************/

/* 1 banner per row, aligned with content width */
.banners-top {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  width: min(1418px, calc(100% - 1px)) !important;
  margin: 0 auto !important;
}

.banners-top .banner-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 5px;
  box-sizing: border-box;
}

.banners-top .banner-wrapper > a {
  display: block;
  width: 100%;
  aspect-ratio: 2508 / 1400;
  border-radius: 10px;
  overflow: hidden !important;
}

.banners-top .banner-wrapper > a > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 60% !important;
}

/* Show only first banner */
.banners-top .banner-wrapper:not(:first-child) {
  display: none !important;
}

/* Slightly different crop focus on mobile */
@media (max-width: 768px) {
  .banners-top .banner-wrapper > a > img {
    object-position: center 65% !important;
  }
}

/* Cap banner height on large screens */
@media (min-width: 1440px) {
  .banners-top .banner-wrapper > a {
    aspect-ratio: auto !important;
    height: clamp(320px, 40vh, 520px) !important;
    max-height: 520px !important;
    overflow: hidden !important;
  }

  .banners-top .banner-wrapper > a > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 60% !important;
  }
}


/****************************************************
  WELCOME BLOCK UNDER HERO
*****************************************************/

.welcome-wrapper {
  background: #F7F1E6 !important;
}

.welcome-wrapper .welcome {
  max-width: 960px !important;
  margin: 0 auto 56px !important;
  padding: 48px 16px 40px !important;
  text-align: center !important;
}

.welcome-wrapper .welcome h1 {
  font-family: var(--template-headings-font) !important;
  font-size: 36px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #3A2A1E !important;
  margin: 0 0 8px !important;
}

/* Single golden underline */
.welcome-wrapper .welcome h1::after {
  content: "" !important;
  display: block !important;
  width: 120px !important;
  height: 3px !important;
  margin: 8px auto 14px !important;
  border-radius: 999px !important;
  background: #C98B2A !important;
}

/* Kill any built-in line */
.welcome-wrapper .welcome h1::before {
  content: none !important;
  display: none !important;
}

.welcome-wrapper .welcome p {
  font-family: var(--template-body-font) !important;
  font-size: 20px !important;
  line-height: 1.6 !important;
  color: #3A2A1E !important;
  margin: 0 auto !important;
}

/* Responsive tweaks for welcome block */
@media (max-width: 768px) {
  .welcome-wrapper .welcome {
    padding: 32px 16px 32px !important;
    margin-bottom: 40px !important;
  }

  .welcome-wrapper .welcome h1 {
    font-size: 26px !important;
  }

  .welcome-wrapper .welcome p {
    font-size: 16px !important;
  }

  .welcome-wrapper .welcome h1::after {
    width: 90px !important;
    margin: 6px auto 10px !important;
  }
}


/****************************************************
  FOOTER
****************************************************/

#footer,
#footer .footer-section,
#footer .footer-bottom,
#footer .footer-bottom-inner,
#footer .footer-inner {
  background: #2A1E16 !important;
}

#footer,
#footer a,
#footer p,
#footer li,
#footer h1,#footer h2,#footer h3,#footer h4,#footer h5,#footer h6 {
  color: #F2E9D8 !important;
}


/****************************************************
  PRODUCT GRID LAYOUT
****************************************************/

/* Global wrapper for product lists */
.products-block,
.products {
  width: 100% !important;
  max-width: 1418px !important;
  margin: 0 auto 60px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Mobile: 1 card per row */
@media (max-width: 767px) {
  .products-block .product,
  .products .product {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Tablet: 2 cards per row */
@media (min-width: 768px) and (max-width: 991px) {
  .products-block,
  .products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 24px auto 60px !important;
  }

  .products-block .product,
  .products .product {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
}

/* Desktop: 3 cards per row (your “good” layout) */
@media (min-width: 992px) {
  .products-block,
  .products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: center !important;
    gap: 20px !important;
    margin: 24px auto 60px !important;
  }

  .products-block .product,
  .products .product {
    width: auto !important;
    max-width: 370px !important;
    flex: 0 0 auto !important;
  }
}

/* Give "Novinky" heading some breathing room */
.products-block {
  margin-top: 24px !important;
}

/* Show hover UI outside card when hovering */
.products-block .product:hover .p,
.products .product:hover .p {
  overflow: visible !important;
  position: relative !important;
  z-index: 5;
}

/* Kill Shoptet's "reveal on hover" behaviour on desktop */
@media (min-width: 992px) {
  .products-block .p .p-bottom,
  .products-block .p .price-additional,
  .products-block .p .p-code,
  .products-block .p .price-original,
  .products-block .p .stars,
  .products-block .p .stars-label {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}


/****************************************************
  PRODUCT CARD SHELL + IMAGE
****************************************************/

/* Card shell */
.products-block .product .p,
.products .product .p {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  height: 100% !important;

  background-color: #ffffff !important;
  border-radius: 20px !important;
  padding: 0 0 24px !important;   /* no padding above image */

  box-shadow: 0 6px 18px rgba(0,0,0,0.10) !important;
  overflow: hidden !important;

  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease !important;
}

/* Hover: stronger shadow */
.products-block .product:hover .p,
.products .product:hover .p {
  box-shadow: 0 18px 32px rgba(0,0,0,0.22) !important;
}

/* Kill any template pseudo-elements on the card */
.products-block .product .p::before,
.products-block .product .p::after,
.products .product .p::before,
.products .product .p::after {
  content: none !important;
  display: none !important;
}

/* Image wrapper: full-width top, rounded only on top */
.products-block .product .p-image,
.products .product .p-image {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
  border-radius: 20px 20px 0 0 !important;
  overflow: hidden !important;
}

/* === IMPORTANT FIX: image NEVER CROPS ===================
   - height:auto, not fixed
   - object-fit:contain so whole photo is visible
   ====================================================== */
.products-block .product .p-image img,
.products .product .p-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;                 /* <-- key: no fixed height */
  object-fit: contain !important;          /* show whole photo */
  object-position: center center !important;
  transition: transform 0.25s ease !important;
}

/* Image hover zoom (clipped by card radius) */
.products-block .product:hover .p-image img,
.products .product:hover .p-image img {
  transform: scale(1.03) !important;
}

/* NOVINKA flags in top-right corner */
.products-block .product .flags,
.products .product .flags {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 2;
}

/* Styled NOVINKA badge */
.products-block .product .flag-new,
.products .product .flag-new {
  background: linear-gradient(160deg, #8EDF34, #63AB1A) !important;
  color: #ffffff !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
}


/****************************************************
  CARD INNER CONTENT (TITLE, PRICE, AVAILABILITY)
****************************************************/

/* Inner content under image */
.products-block .product .p-in,
.products .product .p-in {
  background: transparent !important;
  padding: 18px 24px 0 !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

.products-block .product .p-in::before,
.products-block .product .p-in::after,
.products .product .p-in::before,
.products .product .p-in::after {
  content: none !important;
  display: none !important;
}

/* Product title */
.products-block .product .p-name,
.products .product .p-name {
  display: inline-block;
  margin-bottom: 6px !important;
}

/* Un-crop titles / 2 lines */
@media (min-width: 480px) {
  .products-block .product .p-name,
  .products .product .p-name {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: 2.8em !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }
}

.products-block .product .p-name span,
.products .product .p-name span {
  font-family: var(--template-headings-font) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #3A2A1E !important;
}

/* Title hover color */
.products-block .product:hover .p-name span,
.products .product:hover .p-name span,
.products-block .product .p-name:hover span,
.products .product .p-name:hover span {
  color: #C98B2A !important;
}

/* Price block */
.products-block .product .p-in .prices,
.products .product .p-in .prices {
  margin: 2px 0 0 !important;
  padding: 0 !important;
}

/* Price typography (Roboto) */
.products-block .product .price-final strong,
.products .product .price-final strong {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #2A1E16 !important;
}

.products-block .product .price-final .pr-list-unit,
.products .product .price-final .pr-list-unit {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #7A6F63 !important;
  margin-left: 2px !important;
}

/* Subtle separator under price */
.products-block .product .p-in .prices::after,
.products .product .p-in .prices::after {
  content: "" !important;
  display: block !important;
  width: 45% !important;
  height: 1px !important;
  margin: 6px auto 4px !important;
  background: #F0E5D5 !important;
}

/* Availability text */
.products-block .product .availability,
.products .product .availability {
  margin-top: 0 !important;
  font-size: 12px !important;
}

/* Default availability badge = red pill (out of stock etc.) */
.products-block .product .availability .show-tooltip,
.products .product .availability .show-tooltip {
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: #FBEAEA !important;
  color: #C53333 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

/* Ignore inline strong color – use our pill colors instead */
.products-block .product .availability strong,
.products .product .availability strong {
  color: inherit !important;
}

/* Special case: when inline style uses #3c840f (Skladom), make pill green */
.products-block .product .availability strong[style*="#3c840f"] .show-tooltip,
.products .product .availability strong[style*="#3c840f"] .show-tooltip {
  background: #E6F7E6 !important;
  color: #2F8A2F !important;
}


/****************************************************
  CARD BOTTOM AREA (TOOLS / BUTTON)
****************************************************/

.products-block .product .p-bottom,
.products .product .p-bottom {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 16px !important;
  position: static !important;
}

.products-block .product .p-bottom::before,
.products-block .product .p-bottom::after,
.products .product .p-bottom::before,
.products .product .p-bottom::after {
  content: none !important;
  display: none !important;
}

/* Tools wrapper */
.products-block .product .p-tools,
.products .product .p-tools {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 12px 0 0 0 !important;
  text-align: center !important;
}

/* No pseudo-elements on tools */
.products-block .product .p-tools::before,
.products-block .product .p-tools::after,
.products .product .p-tools::before,
.products .product .p-tools::after {
  content: none !important;
  display: none !important;
}

/* Center the form inside tools */
.products-block .product .p-tools form,
.products .product .p-tools form {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
}


/****************************************************
  ADD-TO-CART BUTTON – BROWN BASE, GREEN HOVER + ICON
****************************************************/

/* Base button style */
.products-block .product .add-to-cart-button,
.products-block .product button.add-to-cart-button,
.products-block .product .btn.btn-cart,
.products .product .add-to-cart-button,
.products .product button.add-to-cart-button,
.products .product .btn.btn-cart {
  width: 180px !important;
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 5px !important;
  box-sizing: border-box !important;

  background-color: #2A1E16 !important;  /* header brown */
  color: #F4D189 !important;             /* golden text */
  border: none !important;

  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;

  box-shadow: 0 6px 14px rgba(0,0,0,0.16) !important;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease !important;
}

/* Hover – green like your screenshot + white text */
.products-block .product .add-to-cart-button:hover,
.products-block .product button.add-to-cart-button:hover,
.products-block .product .btn.btn-cart:hover,
.products .product .add-to-cart-button:hover,
.products .product button.add-to-cart-button:hover,
.products .product .btn.btn-cart:hover {
  background-color: #0BA326 !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.25) !important;
  transform: translateY(-1px) !important;
}

/* Active state – slight press */
.products-block .product .add-to-cart-button:active,
.products-block .product button.add-to-cart-button:active,
.products-block .product .btn.btn-cart:active,
.products .product .add-to-cart-button:active,
.products .product button.add-to-cart-button:active,
.products .product .btn.btn-cart:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.20) !important;
}

/* Focus-visible for keyboard */
.products-block .product .add-to-cart-button:focus-visible,
.products .product .add-to-cart-button:focus-visible {
  outline: 2px solid #2A1E16 !important;
  outline-offset: 3px !important;
}


/* PRICE – stronger and bigger */
.products-block .product .price-final strong,
.products .product .price-final strong{
  font-size: 24px !important;      /* bigger */
  font-weight: 800 !important;     /* bolder */
  letter-spacing: 0.02em !important;
}

.products-block .product .price-final .pr-list-unit,
.products .product .price-final .pr-list-unit{
  font-size: 15px !important;
}






/****************************************************
  PRODUCT DETAIL – USE BEIGE BACKGROUND
****************************************************/

/* whole product-detail area */
.p-detail,
.p-detail-inner,
#product-detail-form {
  background-color: #F7F1E6 !important;   /* your site beige */
}

/* kill any white panels / borders / shadows on the form */
#product-detail-form {
  border: none !important;
  box-shadow: none !important;
}

/* columns inside – keep them transparent so beige shows through */
#product-detail-form .p-image-wrapper,
#product-detail-form .p-info-wrapper,
#product-detail-form .p-detail-top,
#product-detail-form .p-details,
#product-detail-form .p-details-bottom,
#product-detail-form .p-final-price-wrapper,
#product-detail-form .add-to-cart {
  background: transparent !important;
}

/* MAIN LAYOUT – full-width block with some vertical spacing */
.p-detail-inner {
  width: 100%;
  max-width: 100%;
  margin: 40px auto 50px;   /* adjust if you want less vertical gap */
}

/* first row = image + info – closer together, aligned at the top */
.p-detail-inner > .row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: 48px;          /* gap between image and info */
  margin-left: 0;
  margin-right: 0;
}


/* make sure image is aligned left (not centered weirdly) */
.p-detail-inner .p-image-wrapper {
  text-align: left;
}

/* on tablets/mobiles stack image on top, text under */
@media (max-width: 991px) {
  .p-detail-inner > .row {
    display: block;
  }

  .p-detail-inner .p-image-wrapper,
  .p-detail-inner .p-info-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .p-detail-inner .p-info-wrapper {
    margin-top: 24px !important;
  }
}

/**********************************************************
  PRODUCT DETAIL – CARD + TABS (like jalapeño)
**********************************************************/

/* Whole wrapper becomes the white card */
.shp-tabs-wrapper.p-detail-tabs-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 40px auto 60px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    padding: 32px 40px 40px;
    box-sizing: border-box;
}

/* Kill the inner row side gaps so card edges are smooth */
.shp-tabs-wrapper.p-detail-tabs-wrapper > .row {
    margin-left: 0;
    margin-right: 0;
}

/**********************************************************
  TABS HEADER (inside the card)
**********************************************************/

/* top bar that holds the tabs */
.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tabs-row.responsive-nav {
    background: transparent;
    padding: 0 0 12px;
    border-bottom: 1px solid #ececec;      /* line under tabs like on jalapeño */
    display: flex;
    align-items: center;
}

/* holder – just a flex container, no background/pills */
.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tabs-holder {
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    width: 100%;
    display: flex;
    justify-content: center;               /* center Popis / Recepty */
}

/* hide burger on desktop */
@media (min-width: 992px) {
    .shp-tabs-wrapper.p-detail-tabs-wrapper .navigation-btn {
        display: none !important;
    }
}

/* UL with tabs */
.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tabs {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tab {
    margin: 0;
}

/* links – no pills, just text with underline */
.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tab-link {
    position: relative;
    display: inline-block;
    padding: 0 4px 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    background: transparent;
    text-align: center;

    color: #7a7a7a;                        /* inactive text */
    transition: color 0.2s ease;
}

/* underline "bar" – we color it on hover/active */
.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tab-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: transparent;
    transition: background-color 0.2s ease;
}

/* hover state */
.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tab-link:hover {
    color: #556fd1;
}
.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tab-link:hover::after {
    background: #556fd1;
}

/* active tab */
.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tab.active .shp-tab-link,
.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tab-link[aria-expanded="true"] {
    color: #556fd1;                        /* blue like jalapeño */
}
.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tab.active .shp-tab-link::after,
.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tab-link[aria-expanded="true"]::after {
    background: #556fd1;
}

/**********************************************************
  CONTENT AREA – same card, no second box
**********************************************************/

/* main content container under tabs */
.shp-tabs-wrapper.p-detail-tabs-wrapper #tab-content {
    background: transparent;               /* use card background */
    border-radius: 0;
    box-shadow: none;
    padding: 24px 0 0;
    margin-top: 0;
}

/* inner content */
.shp-tabs-wrapper.p-detail-tabs-wrapper .detail-tab-content {
    padding: 0;
    margin: 0;
}

/* example heading styling */
.shp-tabs-wrapper.p-detail-tabs-wrapper .detail-tab-content h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

/**********************************************************
  MOBILE – tabs
**********************************************************/

@media (max-width: 767px) {
    .shp-tabs-wrapper.p-detail-tabs-wrapper {
        padding: 24px 18px 28px;
        border-radius: 18px;
    }

    .shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tabs {
        gap: 24px;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: auto;
    }

    .shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tab-link {
        font-size: 14px;
    }
}

/**********************************************************
  WIDTH FIX – make inner tab content full card width
**********************************************************/

/* kill any inner max-width / auto-centering */
.shp-tabs-wrapper.p-detail-tabs-wrapper #tab-content,
.shp-tabs-wrapper.p-detail-tabs-wrapper .tab-content,
.shp-tabs-wrapper.p-detail-tabs-wrapper .tab-pane,
.shp-tabs-wrapper.p-detail-tabs-wrapper .detail-tab-content {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* if there's an extra .row inside, remove its side gaps too */
.shp-tabs-wrapper.p-detail-tabs-wrapper #tab-content > .row,
.shp-tabs-wrapper.p-detail-tabs-wrapper .detail-tab-content > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* KILL ALL BORDERS AROUND THE TABS HOLDER */
.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tabs-holder,
.shp-tabs-wrapper.p-detail-tabs-wrapper .shp-tabs-holder * {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/**********************************************************
  RIGHT COLUMN ORDERING + TYPOGRAPHY
**********************************************************/

/* make right column vertical stack */
#product-detail-form .p-info-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: 520px;
}

/* 1) Názov produktu – top */
#product-detail-form .p-info-wrapper > h1 {
  order: 1;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 8px 0;
}

/* 2) Kód produktu (p-detail-top) – UNDER title */
#product-detail-form .p-info-wrapper > .p-detail-top {
  order: 2;
  font-size: 13px;
  color: #808080;
  margin: 0 0 8px 0;
}

/* 3) Podrobný popis blok – text 18px */
#product-detail-form .p-info-wrapper > .p-details {
  order: 3;
  max-width: 460px;
  font-size: 18px;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

/* nadpis "Podrobný popis" */
#product-detail-form .p-info-wrapper > .p-details h3:first-child {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

/* 4) BLOK cena + dostupnosť – jeden riadok, 2 stĺpce */
#product-detail-form .p-info-wrapper > div.price.price-table {
  order: 4;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;   /* šírka podľa obsahu */
  column-gap: 48px;
  align-items: baseline;
  margin-top: 18px;
  margin-bottom: 6px;
}

/* ľavý stĺpec – cena */
#product-detail-form .p-info-wrapper > div.price.price-table > .p-final-price-wrapper {
  display: block;
}

/* pravý stĺpec – dostupnosť */
#product-detail-form .p-info-wrapper > div.price.price-table > .availability-wrapper {
  display: block;
  text-align: left;
}

/* labely "Cena" a "Dostupnosť" – BLACK text */
#product-detail-form .p-info-wrapper > div.price.price-table > .p-final-price-wrapper::before,
#product-detail-form .p-info-wrapper > div.price.price-table > .availability-wrapper::before {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #000000;
  margin-bottom: 2px;
}
#product-detail-form .p-info-wrapper > div.price.price-table > .p-final-price-wrapper::before {
  content: "Cena";
}
#product-detail-form .p-info-wrapper > div.price.price-table > .availability-wrapper::before {
  content: "Dostupnosť";
}

/* samotná cena – väčšia */
#product-detail-form .p-info-wrapper
  > div.price.price-table
  > .p-final-price-wrapper
  > strong
  > span {
  font-size: 26px;
  font-weight: 700;
}

/* 5) Množstvo + tlačidlo Do košíka – tesnejšie pri sebe */
#product-detail-form .p-info-wrapper > div.add-to-cart {
  order: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/* 6) Kategória + ikony TLAČ / OPÝTAŤ SA – skryť */
#product-detail-form .p-info-wrapper > .p-details-bottom,
#product-detail-form .p-info-wrapper > .link-icons {
  display: none;
}

/* === RESPONSIVE (mobil) === */
@media (max-width: 768px) {

  #product-detail-form .p-info-wrapper {
    max-width: 100%;
  }

  #product-detail-form .p-info-wrapper > h1 {
    font-size: 24px;
  }

  #product-detail-form .p-info-wrapper > .p-details {
    max-width: 100%;
  }

  #product-detail-form .p-info-wrapper > div.price.price-table {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  #product-detail-form .p-info-wrapper > div.add-to-cart {
    flex-direction: column;
    align-items: stretch;
  }

  #product-detail-form .p-info-wrapper > div.add-to-cart > button {
    width: 100%;
    text-align: center;
  }

  #product-detail-form .p-info-wrapper .quantity {
    justify-content: center;
  }
}

/****************************************************
  QUANTITY STYLING
****************************************************/

/* wrapper (.quantity) */
#product-detail-form .p-info-wrapper .quantity {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 10px !important;      /* rectangle-ish */
  border: 1px solid #d0d4e4;
  background-color: #ffffff;
  overflow: hidden;
  padding: 0;
}

/* vstup množstva */
#product-detail-form .p-info-wrapper .quantity input {
  width: 110px;
  height: 45px;                        /* match button height */
  text-align: center;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 18px;                     /* bigger number */
  font-weight: 600;
  color: #222;
  padding: 0 40px;                     /* miesto pre minus/plus po stranách */
}

/* mínus / plus tlačidlá – Shoptet ich má ako buttony vedľa inputu */
#product-detail-form .p-info-wrapper .quantity button {
  width: 34px;
  height: 45px;                        /* match input height */
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* deliace čiary medzi mínus / input / plus */
#product-detail-form .p-info-wrapper .quantity button:first-child {
  border-right: 1px solid #e2e5ee;
}
#product-detail-form .p-info-wrapper .quantity button:last-child {
  border-left: 0 !important;          /* no right border */
}

/* === Make - / + icons bigger & clearer === */
#product-detail-form .p-info-wrapper .quantity .increase::before,
#product-detail-form .p-info-wrapper .quantity .decrease::before {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c7e8f;   /* darker grey like on their site */
  font-weight: 700;
  line-height: 1;
  font-size: 14px; /* base size for small screens */
}

/* bigger icons on wider screens */
@media (min-width: 480px) {
  #product-detail-form .p-info-wrapper .quantity .increase::before,
  #product-detail-form .p-info-wrapper .quantity .decrease::before {
    font-size: 18px;
  }
}

/****************************************************
  PRODUCT PAGE – QUANTITY BORDER THICKNESS
****************************************************/

#product-detail-form .p-info-wrapper .amount,
#product-detail-form .p-info-wrapper .amount input,
#product-detail-form .p-info-wrapper .amount button,
#product-detail-form .p-info-wrapper .quantity,
#product-detail-form .p-info-wrapper .quantity input,
#product-detail-form .p-info-wrapper .quantity button {
    border-width: 2px !important;    /* make stroke stronger */
}

/****************************************************
  ADD TO CART BUTTON – COLOR + SHAPE
****************************************************/

#product-detail-form .p-info-wrapper .add-to-cart > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 45px;
    padding: 10px 46px;
    border-radius: 8px !important;    /* rectangle, not pill */
    border: none;

    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-align: center;

    background: #2b2119;              /* dark brown */
    color: #ffd98a;                    /* warm yellow text */
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);

    cursor: pointer;
    transition:
        background-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .08s ease;
}

/* hover / focus – bright green, white text */
#product-detail-form .p-info-wrapper .add-to-cart > button:hover,
#product-detail-form .p-info-wrapper .add-to-cart > button:focus {
    background: #16a34a;              /* green like your example */
    color: #ffffff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

/* disabled state */
#product-detail-form .p-info-wrapper .add-to-cart > button:disabled {
    background: #9ca3af;
    color: #f9fafb;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/****************************************************
  AVAILABILITY PILLS
****************************************************/

/* base pill shape */
#product-detail-form .availability-wrapper .availability-label {
    display: inline-block;
    padding: 6px 22px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    box-shadow: none;

    background-color: transparent !important; /* reset inline */
}

/* OUT OF STOCK – element with inline bg #d00000 */
#product-detail-form .availability-wrapper
.availability-label[style*="#d00000"] {
    background-color: #ffe8ea !important;   /* light red */
    color: #c03232 !important;
}

/* IN STOCK / other states – anything that is NOT that red */
#product-detail-form .availability-wrapper
.availability-label:not([style*="#d00000"]) {
    background-color: #e6f7ea !important;   /* light green */
    color: #21863b !important;
}








/* FIX: shrink gap between image and text on desktop  */
@media (min-width: 992px) {

  /* let the right column use the full flex width */
  #product-detail-form > .p-info-wrapper {
    max-width: none !important;   /* override our 520px */
    flex: 1 1 0 !important;       /* allow it to grow next to the image */
  }

  /* optionally also reduce the column gap a bit */
  .p-detail-inner > .row {
    column-gap: 24px !important;  /* was 48px – tighten it */
  }
}











/* remove fixed width of the description block */
#product-detail-form .p-info-wrapper > .p-details {
  max-width: none !important;
  width: 100% !important;
}





/* PRODUCT INTRO TEXT – match YOGY size */
#product-detail-form .p-info-wrapper > .p-details,
#product-detail-form .p-info-wrapper > .p-details p {
    font-size: 18px !important;
    line-height: 1.6 !important;
}
















/****************************************************
  PRICE / AVAILABILITY TYPOGRAPHY TWEAKS
****************************************************/

/* "CENA" + "DOSTUPNOSŤ" headings – 20px, bold */
#product-detail-form .p-info-wrapper > div.price.price-table > .p-final-price-wrapper::before,
#product-detail-form .p-info-wrapper > div.price.price-table > .availability-wrapper::before {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #000000 !important;        /* keep them strong black */
}

/* Actual price – 28px like Yogy */
#product-detail-form .p-info-wrapper
  > div.price.price-table
  > .p-final-price-wrapper
  > strong
  > span {
    font-size: 28px !important;
    font-weight: 700 !important;
}

/* Availability pill text (SKLADOM / MOMENTÁLNE NEDOSTUPNÉ) – 16px */
#product-detail-form .availability-wrapper .availability-label {
    font-size: 16px !important;
    font-weight: 700 !important;
}



/****************************************************
  PRODUCT TITLE SIZE
****************************************************/
#product-detail-form .p-info-wrapper > h1 {
    font-size: 36px !important;
    line-height: 1.15;    /* keep same line-height */
    font-weight: 700;
}



@media (min-width: 992px) {
    #product-detail-form .p-info-wrapper {
        padding-left: 30px !important;
    }
}






/* MOBILE ONLY – add padding around the product detail content */
@media (max-width: 767px) {
  #product-detail-form,
  .p-detail-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}











/* MOBILE – FORCE: image first, title under image, left aligned (works for both DOM variants) */
@media (max-width: 767px) {

  /* make the whole form a vertical stack */
  #product-detail-form{
    display:flex !important;
    flex-direction:column !important;
  }

  /* the whole product “top section” */
  #product-detail-form > .p-detail-inner{
    order:1 !important;
  }

  /* inside top section: stack image + info */
  #product-detail-form .p-detail-inner > .row,
  #product-detail-form .p-detail-inner .row{
    display:flex !important;
    flex-direction:column !important;
  }

  /* image first */
  #product-detail-form .p-image-wrapper{
    order:1 !important;
  }

  /* info second + mobile edge padding */
  #product-detail-form .p-info-wrapper{
    order:2 !important;
   }

  /* TITLE CASE A: h1 is inside p-info-wrapper */
  #product-detail-form .p-info-wrapper > h1{
    font-size:24px !important;
    font-weight:700 !important;
    text-align:left !important;
    margin:16px 0 10px !important;
  }

  /* TITLE CASE B: h1 is direct child of form */
  #product-detail-form > h1{
    order:2 !important;              /* put it right after p-detail-inner */
    font-size:24px !important;
    font-weight:700 !important;
    text-align:left !important;
  }
}










/****************************************************
  MOBILE TYPO – cena/dostupnosť + price + availability
*****************************************************/
@media (max-width: 767px) {

  /* "CENA" + "DOSTUPNOSŤ" headings */
  #product-detail-form .p-info-wrapper > div.price.price-table
    > .p-final-price-wrapper::before,
  #product-detail-form .p-info-wrapper > div.price.price-table
    > .availability-wrapper::before {
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  /* actual price (e.g. €200 / ks) */
  #product-detail-form .p-info-wrapper
    > div.price.price-table
    > .p-final-price-wrapper
    > strong
    > span {
    font-size: 20px !important;
    font-weight: 700 !important;
  }

  /* availability text/pill (SKLADOM / MOMENTÁLNE NEDOSTUPNÉ) */
  #product-detail-form .availability-wrapper .availability-label {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
}








/****************************************************
  TABLET + MOBILE – keep price/availability + buttons in 2 columns
****************************************************/

/* Tablet + Mobile (<= 991px): 2 columns for price/availability + row for buttons */
@media (max-width: 991px) {

  /* small breathing room from screen edges */
  #product-detail-form .p-info-wrapper {
   
    max-width: 100% !important;
  }

  /* CENA + DOSTUPNOSŤ side-by-side */
  #product-detail-form .p-info-wrapper > div.price.price-table{
    grid-template-columns: 1fr 1fr !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    align-items: start !important;
  }

  /* Quantity + button side-by-side */
  #product-detail-form .p-info-wrapper > div.add-to-cart{
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  /* keep quantity compact, button natural width (not stretched 100%) */
  #product-detail-form .p-info-wrapper .quantity{
    flex: 0 0 auto !important;
  }
  #product-detail-form .p-info-wrapper > div.add-to-cart > button{
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
}

/****************************************************
  MOBILE TYPO (<= 767px) – sizes you asked for
  CENA/DOSTUPNOSŤ: 16px
  price: 20px
  SKLADOM / NEDOSTUPNÉ: 16px
****************************************************/
@media (max-width: 767px) {

  /* CENA / DOSTUPNOSŤ headings */
  #product-detail-form .p-info-wrapper > div.price.price-table
    > .p-final-price-wrapper::before,
  #product-detail-form .p-info-wrapper > div.price.price-table
    > .availability-wrapper::before{
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  /* actual price */
  #product-detail-form .p-info-wrapper
    > div.price.price-table
    > .p-final-price-wrapper
    > strong > span{
    font-size: 20px !important;
  }

  /* availability pill text */
  #product-detail-form .availability-wrapper .availability-label{
    font-size: 16px !important;
  }
}




















/* =========================================================
   HEADER: MINIMAL SAFE CSS (NO NAVIGATION-BUTTONS STYLES)
   ========================================================= */

/* 1) Remove Shoptet forced header padding */
#header{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) Keep menu row visible */
#header nav#navigation{
  display: block !important;
  position: relative !important;
}
#header nav#navigation .menu-level-1{
  display: flex !important;
}

/* 3) Header-top layout (logo | search | buttons) */
#header .container.navigation-wrapper > .header-top{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: nowrap !important;
  padding: 15px 0 !important;
}

/* Logo */
#header .header-top .site-name img{
  display: block !important;
  max-height: 64px !important;
  width: auto !important;
  height: auto !important;
}

/* =========================================================
   SEARCH (490px, radius 8)
   ========================================================= */
#header .header-top .search{
  flex: 0 0 490px !important;
  max-width: 490px !important;
}

/* fieldset wrapper */
#header .header-top .search form.search-form fieldset{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #dfe3ea !important;
  border-radius: 8px !important;
  background: #F5F6F8 !important;
  overflow: visible !important;
}

/* input */
#header .header-top .search form.search-form input.js-search-input{
  width: 100% !important;
  height: 50px !important;
  padding: 10px 50px 10px 12px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 8px !important;
}

/* submit button */
#header .header-top .search form.search-form button[type="submit"]{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}

/* =========================================================
   WHISPERER DROPDOWN (YOGY-like styling)
   ========================================================= */
#header .header-top .search .search-whisperer{
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 8px) !important;
  width: 100% !important;
  z-index: 99999 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18) !important;
  overflow: hidden !important;
}

#header .header-top .search .search-whisperer .search-whisperer-ul-group ul{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#header .header-top .search .search-whisperer ul li a{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  text-decoration: none !important;
}

#header .header-top .search .search-whisperer ul li a:hover{
  background: rgba(85, 94, 209, 0.18) !important;
}

#header .header-top .search .search-whisperer .search-whisperer-image img{
  width: 54px !important;
  height: 54px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

#header .header-top .search .search-whisperer .p-name{
  color: #0F0F0F !important;
  font-family: Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

#header .header-top .search .search-whisperer .availability-label{
  font-family: Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

#header .header-top .search .search-whisperer .price.price-final{
  margin-left: auto !important;
  color: #000000 !important;
  font-family: Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

#header .header-top .search .search-whisperer .search-whisperer-btn{
  padding: 14px 16px 16px !important;
  background: #ffffff !important;
}
#header .header-top .search .search-whisperer .search-whisperer-btn .btn{
  width: 100% !important;
  border-radius: 999px !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 992px){
  #header .container.navigation-wrapper > .header-top{
    flex-wrap: wrap !important;
  }
  #header .header-top .search{
    flex: 1 1 100% !important;
    max-width: 100% !important;
    order: 3 !important;
  }
}











/* === HARD DISABLE the 1st nav button (search toggle) === */
#header > .container.navigation-wrapper > .header-top > .navigation-buttons > a:nth-child(1){
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* extra safety: if Shoptet forces it back on hover/focus */
#header > .container.navigation-wrapper > .header-top > .navigation-buttons > a:nth-child(1):hover,
#header > .container.navigation-wrapper > .header-top > .navigation-buttons > a:nth-child(1):focus,
#header > .container.navigation-wrapper > .header-top > .navigation-buttons > a:nth-child(1):active{
  display: none !important;
  pointer-events: none !important;
}










/* SHOW login text (sr-only) */
#header .header-top .navigation-buttons > a[data-testid="signin"] .sr-only,
#header .header-top .navigation-buttons > a[data-target="login"] .sr-only{
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap !important;

  display: inline !important;

  font-family: Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}

/* put text before icon */
#header .header-top .navigation-buttons > a[data-testid="signin"],
#header .header-top .navigation-buttons > a[data-target="login"]{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-direction: row-reverse !important; /* text first, icon after */
}










/* =========================================================
   NAV MENU (#navigation) – hover + active color, 16px, CAPS
   ========================================================= */

/* base style */
#navigation .menu-level-1 > li > a{
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}

/* hover */
#navigation .menu-level-1 > li > a:hover{
  color: #D9AF49 !important;
}

/* active/current page item (Shoptet can mark it different ways) */
#navigation .menu-level-1 > li.active > a,
#navigation .menu-level-1 > li.selected > a,
#navigation .menu-level-1 > li.current > a,
#navigation .menu-level-1 > li > a[aria-current="page"],
#navigation .menu-level-1 > li > a[aria-current="true"]{
  color: #D9AF49 !important;
}

/* if your theme wraps the text in <b> (as in your screenshot), keep it consistent */
#navigation .menu-level-1 > li > a > b{
  font-weight: inherit !important;
}
#navigation .menu-level-1 > li.active > a > b,
#navigation .menu-level-1 > li.selected > a > b,
#navigation .menu-level-1 > li.current > a > b,
#navigation .menu-level-1 > li > a:hover > b{
  color: #D9AF49 !important;
}





/* Mobile + Tablet ONLY */
@media (max-width: 992px){
  #header{
    max-height: 220px !important;
    height: auto !important;
  }
}











/* Mobile + Tablet ONLY — KEEP (must not change) */
@media (max-width: 992px){
  #header{
    max-height: 220px !important;
    height: auto !important;
  }
}

/* =========================================================
   TABLET (768–1024): NO hamburger + show desktop menu row
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px){

  /* 0) Make sure header isn't clipping the nav */
  #header,
  #header .container.navigation-wrapper{
    overflow: visible !important;
  }

  /* 1) Stack header-top + nav row */
  #header .container.navigation-wrapper{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #header .container.navigation-wrapper > .header-top{
    order: 1 !important;
  }

  /* 2) FORCE nav visible as normal row (not off-canvas) */
  #header nav#navigation{
    order: 2 !important;

    display: block !important;
    position: relative !important;   /* IMPORTANT: static sometimes collapses in Shoptet */
    width: 100% !important;

    height: auto !important;
    max-height: none !important;
    overflow: visible !important;

    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    background: transparent !important; /* kill white strip */
    border: 0 !important;
    box-shadow: none !important;
    z-index: 999 !important;
  }

  /* inner wrapper often gets hidden on tablet */
  #header nav#navigation .navigation-in{
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* 3) Horizontal menu row */
  #header nav#navigation .menu-level-1{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 24px !important;

    margin: 0 !important;
    padding: 5px 0 5px !important; /* +5px bottom padding */
    width: 100% !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  #header nav#navigation .menu-level-1 > li{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* 4) HIDE hamburger + any navigation trigger variants */
  #header .header-top .navigation-buttons a[data-testid="hamburgerMenu"],
  #header .header-top .navigation-buttons a[data-target="navigation"],
  #header .header-top .navigation-buttons a.navigation-btn,
  #header .header-top .navigation-buttons a.menu-trigger,
  #header .header-top .navigation-buttons a[href*="#navigation"],
  #header .header-top .navigation-buttons a[aria-controls*="navigation"],
  #header .header-top .navigation-buttons .navigation-btn,
  #header .header-top .navigation-buttons .menu-trigger{
    display: none !important;
  }

  /* 5) Kill mobile helper rows/close buttons that belong to popup menu */
  #header .menu-helper,
  #header .navigation-close,
  #header nav#navigation .menu-helper,
  #header nav#navigation .navigation-helper,
  #header nav#navigation .login,
  #header nav#navigation .login-wrapper,
  #header nav#navigation .user-menu{
    display: none !important;
  }

  /* 6) Link colors: WHITE base, GOLD active/current (NO hover gold) */
  #header nav#navigation .menu-level-1 > li > a,
  #header nav#navigation .menu-level-1 > li > a > b,
  #header nav#navigation .menu-level-1 > li > a *{
    color: #ffffff !important;
  }

  #header nav#navigation .menu-level-1 > li.active > a,
  #header nav#navigation .menu-level-1 > li.selected > a,
  #header nav#navigation .menu-level-1 > li.current > a,
  #header nav#navigation .menu-level-1 > li > a[aria-current="page"],
  #header nav#navigation .menu-level-1 > li > a[aria-current="true"],
  #header nav#navigation .menu-level-1 > li.active > a *,
  #header nav#navigation .menu-level-1 > li.selected > a *,
  #header nav#navigation .menu-level-1 > li.current > a *{
    color: #D9AF49 !important;
  }
}


/* =========================================================
   TABLET: remove the extra login row under menu ("Prihlásenie")
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px){

  /* Common Shoptet user/login strip under navigation */
  #header nav#navigation .navigation-user,
  #header nav#navigation .navigation-user-in,
  #header nav#navigation .navigation-tools,
  #header nav#navigation .navigation-tools-in,
  #header nav#navigation .top-navigation,
  #header nav#navigation .top-navigation-in,
  #header nav#navigation .menu-user,
  #header nav#navigation .menu-user-in,
  #header nav#navigation .nav-user,
  #header nav#navigation .user-bar,
  #header nav#navigation .user-bar-in{
    display: none !important;
  }

  /* If it's literally a separate UL row inside nav, hide all except the main menu */
  #header nav#navigation ul:not(.menu-level-1){
    display: none !important;
  }
}





--------------------------------------------





@media (max-width: 767px){
  .login-window,
  #login,
  [data-target="login"]{
    outline: 8px solid lime !important;
  }
}









/* =========================================================
   MOBILE HAMBURGER MENU: FULL SCREEN (100vw x 100vh)
   + remove side paddings + min-height 600px
   Works with Shoptet: body/html gets .navigation-window-visible
   ========================================================= */
@media (max-width: 767px){

  /* When menu is open, do NOT let header constraints mess with it */
  .navigation-window-visible #header{
    max-height: none !important;     /* your 220px header cap must NOT clip the overlay */
    height: auto !important;
    overflow: visible !important;
  }

  /* Force the nav overlay itself to cover the whole screen */
  .navigation-window-visible #header nav#navigation{
    position: fixed !important;
    inset: 0 !important;             /* top/right/bottom/left = 0 */
    width: 100vw !important;
    height: 100vh !important;

    max-width: none !important;
    max-height: none !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    background: #ffffff !important;
    z-index: 50 !important;
  }

  /* The inner wrapper you highlighted: div.navigation-in.menu */
  .navigation-window-visible #header nav#navigation > .navigation-in.menu{
    width: 100% !important;
    max-width: none !important;

    padding: 0 !important;           /* IMPORTANT: kills side padding */
    margin: 0 !important;

    min-height: 600px !important;    /* your requirement */
    background: #ffffff !important;
  }

  /* Make the UL full width, no inset spacing */
  .navigation-window-visible #header nav#navigation .menu-level-1{
    display: block !important;       /* override your global flex */
    width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    list-style: none !important;
  }

  .navigation-window-visible #header nav#navigation .menu-level-1 > li{
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid #e6e6e6 !important;
  }

  .navigation-window-visible #header nav#navigation .menu-level-1 > li > a{
    display: block !important;
    width: 100% !important;

    padding: 16px 18px !important;  /* keeps nice spacing but not "container inset" */
    margin: 0 !important;

    background: transparent !important;
  }

  /* If the text is wrapped in <b>, keep it consistent */
  .navigation-window-visible #header nav#navigation .menu-level-1 > li > a > b{
    color: inherit !important;
    font-weight: inherit !important;
  }

  /* Kill the extra row inside the menu (your "Prihlásenie" row) */
  .navigation-window-visible #header nav#navigation .menu-helper,
  .navigation-window-visible #header nav#navigation .navigation-helper,
  .navigation-window-visible #header nav#navigation .login,
  .navigation-window-visible #header nav#navigation .login-wrapper,
  .navigation-window-visible #header nav#navigation .user-menu,
  .navigation-window-visible #header nav#navigation .navigationActions{
    display: none !important;
  }

  /* Make sure the close button stays visible */
  .navigation-window-visible #header nav#navigation .navigation-close{
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }
}






/* MOBILE ONLY: change header height ONLY (no layout / no offsets) */
@media (max-width: 767px){
  #header{
    height: 110px !important;
    max-height: 110px !important;
  }
}
/* MOBILE ONLY: change header height ONLY (no layout / no offsets) */
@media (max-width: 767px){
  #header{
    height: 110px !important;
    max-height: 110px !important;
  }
}


/* MOBILE ONLY: hide search bar in header */
@media (max-width: 767px){
  #header .header-top .search{
    display: none !important;
  }
}
















/* =========================================================
   MOBILE MENU like YOGY (header stays visible)
   - header is fixed 110px (your current setup)
   - menu opens under header, full width/height
   Requires: body/html gets .navigation-window-visible when open
   ========================================================= */
@media (max-width: 767px){

  :root{ --mobileHeaderH: 110px; }

  /* When menu is open, keep header above it */
  .navigation-window-visible #header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--mobileHeaderH) !important;
    z-index: 1000001 !important;
  }

  /* The nav overlay becomes the area UNDER the fixed header */
  .navigation-window-visible #header nav#navigation{
    position: fixed !important;
    top: var(--mobileHeaderH) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    height: calc(100vh - var(--mobileHeaderH)) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    z-index: 1000000 !important;
  }

  /* Inner wrapper: remove any container padding that causes inset */
  .navigation-window-visible #header nav#navigation .navigation-in.menu{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  /* Menu list -> vertical */
  .navigation-window-visible #header nav#navigation .menu-level-1{
    display: block !important;   /* overrides your global flex */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .navigation-window-visible #header nav#navigation .menu-level-1 > li{
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1.5px solid #000000 !important;
  }

  .navigation-window-visible #header nav#navigation .menu-level-1 > li > a{
    display: block !important;
    width: 100% !important;
    padding: 18px 18px !important;
    margin: 0 !important;

    background: transparent !important;
    color: #111 !important;
    text-decoration: none !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
  }

  /* if labels are wrapped in <b> */
  .navigation-window-visible #header nav#navigation .menu-level-1 > li > a > b{
    color: inherit !important;
    font-weight: inherit !important;
  }

  /* Hide extra helper rows inside the nav (if present) */
  .navigation-window-visible #header nav#navigation .menu-helper,
  .navigation-window-visible #header nav#navigation .navigationActions,
  .navigation-window-visible #header nav#navigation .navigation-user,
  .navigation-window-visible #header nav#navigation .login,
  .navigation-window-visible #header nav#navigation .login-wrapper,
  .navigation-window-visible #header nav#navigation .user-menu{
    display: none !important;
  }

  /* YOGY-like: highlight the hamburger button area when menu is open */
  .navigation-window-visible #header .header-top .navigation-buttons a[data-testid="hamburgerMenu"],
  .navigation-window-visible #header .header-top .navigation-buttons a[data-target="navigation"],
  .navigation-window-visible #header .header-top .navigation-buttons a[aria-controls*="navigation"]{
    background: #556fd1 !important;  /* YOGY-ish blue */
    color: #fff !important;
  }

  /* If the close "X" is inside the menu, keep it visible */
  .navigation-window-visible #header nav#navigation .navigation-close{
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
  }
}














/* =========================================================
   MOBILE MENU: correct layout ALWAYS + slide in/out BOTH ways
   (Fixes "items break while leaving")
   ========================================================= */
@media (max-width: 767px){

  /* --- PANEL: always full width so it can animate out --- */
  #header nav#navigation{
    position: fixed !important;
    top: 110px !important;                 /* your fixed mobile header height */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;               /* overrides Shoptet width:0 */
    max-width: 100vw !important;
    height: calc(100vh - 110px) !important;

    background: #fff !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    /* slide state (closed by default) */
    transform: translateX(100%) !important;
    transition: transform .5s cubic-bezier(.4,0,.2,1) !important;

    will-change: transform;
    backface-visibility: hidden;

    z-index: 1000000 !important;
    pointer-events: none !important;       /* only clickable when open */
    display: block !important;             /* prevent display:none killing animation */
  }

  /* OPEN state */
  .navigation-window-visible #header nav#navigation{
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  /* --- IMPORTANT: menu layout must be vertical ALWAYS (even when closing) --- */
  #header nav#navigation .navigation-in.menu{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  #header nav#navigation .menu-level-1{
    display: block !important;             /* overrides your global flex */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #header nav#navigation .menu-level-1 > li{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e9e9e9 !important;
  }

  #header nav#navigation .menu-level-1 > li > a{
    display: block !important;
    width: 100% !important;
    padding: 18px 18px !important;
    margin: 0 !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  /* if Shoptet wraps text in <b> */
  #header nav#navigation .menu-level-1 > li > a > b{
    font-weight: inherit !important;
    color: inherit !important;
  }

  /* hide that extra helper/login row inside nav */
  #header nav#navigation .navigationActions,
  #header nav#navigation .menu-helper,
  #header nav#navigation .navigation-user,
  #header nav#navigation .login,
  #header nav#navigation .login-wrapper,
  #header nav#navigation .user-menu{
    display: none !important;
  }
}














/* =========================================================
   MOBILE: popups (login + cart) must start UNDER fixed header
   Header height = 110px
   ========================================================= */
@media (max-width: 767px){
  :root{ --mobileHeaderH: 110px; }

  /* The popup panel itself */
  .popup-widget-inner{
    position: fixed !important;
    top: var(--mobileHeaderH) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - var(--mobileHeaderH)) !important;

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* If some wrapper also forces full-screen from top:0, offset it too */
  .popup-widget,
  .popup-widget-wrapper,
  .popup-widget-content{
    top: var(--mobileHeaderH) !important;
    height: calc(100vh - var(--mobileHeaderH)) !important;
  }
}
















@media (max-width: 767px){
  :root{ --mobileHeaderH: 110px; --cartCtaH: 64px; }

  /* keep space so content doesn't hide under the fixed bars */
  .popup-widget-inner.cart-widget-inner{
    padding-bottom: calc(var(--cartCtaH) + 64px) !important;
  }

  /* FIX: show "Dopravu máte zadarmo!" above the CTA */
  .popup-widget-inner.cart-widget-inner .cart-free-shipping{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--cartCtaH) !important;   /* sits above the button */
    z-index: 1000003 !important;
    background: #fff !important;
    padding: 10px 14px !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
  }

  /* CTA stays fixed at bottom */
  .popup-widget-inner.cart-widget-inner .cart-widget-button{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1000004 !important;
    background: #fff !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  /* make sure CTA is full width */
  .popup-widget-inner.cart-widget-inner #continue-order-button{
    display:block !important;
    width:100% !important;
    text-align:center !important;
  }
}




/* MOBILE: force cart CTA button to be visible */
@media (max-width: 767px){

  /* the button wrapper */
  .cart-widget-button{
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    z-index: 9999999 !important;     /* <- most important */
    background: #fff !important;

    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  /* the actual button/link */
  .cart-widget-button #continue-order-button{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}



.cart-table tr td,
.cart-table tr td.cart-p-image{
  background: transparent !important;
}



ol.cart-header li a,
ol.cart-header li strong{
  background: transparent !important;
}



.radio-wrapper{
  background: transparent !important;
}




.popup-widget-inner,
.popup-widget::before{
  background: #F7F1E6 !important;
}
















/* =========================================================
   BENEFIT ICONS (product detail)
   - MOBILE: icon on top, text under
   - TABLET: icon left, text right (2x2)
   ========================================================= */

/* MOBILE */
@media (max-width: 767px){

  #content .benefitBanner.position--benefitProduct{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 18px !important;

    width: 100% !important;
    max-width: 720px !important;
    margin: 24px auto !important;

    padding: 0 16px !important;
    box-sizing: border-box !important;

    justify-items: center !important;
  }

  #content .benefitBanner.position--benefitProduct .benefitBanner__item{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;

    width: 100% !important;
    max-width: 320px !important;

    padding: 10px 8px !important;
    margin: 0 !important;
    min-height: 150px !important;
    box-sizing: border-box !important;
  }

  #content .benefitBanner.position--benefitProduct .benefitBanner__picture{
    width: 75px !important;
    height: 75px !important;
    margin: 0 0 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #content .benefitBanner.position--benefitProduct .benefitBanner__img{
    width: 75px !important;
    height: 75px !important;
    max-width: 75px !important;
    max-height: 75px !important;
    object-fit: contain !important;
    display: block !important;
  }

  #content .benefitBanner.position--benefitProduct .benefitBanner__title{
    margin: 0 0 6px 0 !important;
  }
  #content .benefitBanner.position--benefitProduct .benefitBanner__desc{
    margin: 0 !important;
  }
}


/* TABLET */
@media (min-width: 768px) and (max-width: 1024px){

  #content .benefitBanner.position--benefitProduct{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 28px !important;

    width: 100% !important;
    max-width: 900px !important;  /* tablet can be wider than mobile */
    margin: 24px auto !important;

    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* icon LEFT, text RIGHT */
  #content .benefitBanner.position--benefitProduct .benefitBanner__item{
    display: grid !important;
    grid-template-columns: 64px 1fr !important;
    column-gap: 14px !important;

    align-items: center !important;
    text-align: left !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;

    padding: 6px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #content .benefitBanner.position--benefitProduct .benefitBanner__picture{
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #content .benefitBanner.position--benefitProduct .benefitBanner__img{
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    display: block !important;
  }

  #content .benefitBanner.position--benefitProduct .benefitBanner__title{
    margin: 0 0 4px 0 !important;
  }
  #content .benefitBanner.position--benefitProduct .benefitBanner__desc{
    margin: 0 !important;
  }
}





/* Fix useless bottom padding under buy section (tablet + desktop) */
@media (min-width: 768px){
  body .p-detail div.pr-action,
  body .p-detail form.pr-action{
    padding-bottom: 5px !important;
  }
}







/* TABLET + DESKTOP: never hide header on scroll */
@media (min-width: 768px){
  #header{
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;

    transform: none !important;
    transition: none !important;
  }

  /* kill common "scroll state" classes Shoptet/theme adds */
  html.scrolled #header,
  html.scrolled-down #header,
  html.scrolled-up #header,
  body.scrolled #header,
  body.scrolled-down #header,
  body.scrolled-up #header{
    transform: none !important;
    top: 0 !important;
  }
}









/* =========================================================
   STICKY FOOTER (when page has little content)
   ========================================================= */

/* Make the whole page at least viewport height */
html, body{
  height: 100% !important;
}

/* Shoptet wrapper = vertical flex layout */
body{
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

/* This is the main “page content wrapper” in Shoptet */
.overall-wrapper{
  flex: 1 0 auto !important;   /* take remaining space */
  display: flex !important;
  flex-direction: column !important;
}

/* Footer sits at the bottom when content is short */
#footer{
  flex-shrink: 0 !important;
  margin-top: auto !important;
}







/* HOMEPAGE benefit banner: REAL 2x2 (fixes ::before/::after breaking the grid) */
@media (max-width: 991px){

  /* 1) REMOVE the pseudo-elements that are stealing grid cells */
  body .benefitBanner.position--benefitHomepage.container::before,
  body .benefitBanner.position--benefitHomepage.container::after{
    content: none !important;
    display: none !important;
  }

  /* 2) Force 2 columns */
  body .benefitBanner.position--benefitHomepage.container{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  /* 3) Each item = 1 cell (no spanning) */
  body .benefitBanner.position--benefitHomepage.container > .benefitBanner__item{
    grid-column: auto / span 1 !important;
    grid-row: auto !important;

    margin: 0 !important;
    width: auto !important;
    max-width: none !important;

    float: none !important;
    clear: none !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}




@media (min-width: 768px){
  #content-wrapper,
  .content-wrapper{
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}




#footer .custom-footer__search{
  display: none !important;
}



@media (min-width: 992px) {
  .is-windows .popup-widget.login-widget { top: 65px; }
  .is-windows .popup-widget.cart-widget { top: 65px; }

  .is-windows .user-action-cart,
  .is-windows .user-action-login {
    transform: translateX(210px);
  }
}
















/* =========================================================
   TABLET: popups (login + cart) must start UNDER fixed header
   Header height = 220px
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px){
  :root{ --tabletHeaderH: 220px; }

  /* The popup panel itself */
  .popup-widget-inner{
    position: fixed !important;
    top: var(--tabletHeaderH) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - var(--tabletHeaderH)) !important;

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* If some wrapper also forces full-screen from top:0, offset it too */
  .popup-widget,
  .popup-widget-wrapper,
  .popup-widget-content{
    top: var(--tabletHeaderH) !important;
    height: calc(100vh - var(--tabletHeaderH)) !important;
  }
}



/* Cart widget backgrounds → transparent */
.cart-widget,
.cart-widget-button{
  background-color: transparent !important;
}






body .category-header{
  background-color: transparent !important;
}