/* Khalis Herb additions on top of the licensed Suxnix health-supplement
   template - only the small set of site-wide components this page reuses
   (trust ticker, header search dropdown, cart/account links). Kept separate
   from the template's own style.css to avoid touching licensed template
   files directly. */

.trust-bar {
  position: relative;
  z-index: 3;
  overflow: hidden;
  color: #fff;
  background: #0d3323;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Homepage "Natural Care for Real Routines" section - the template's own
   .tg-supplement-shape uses right:12%/top:2%, tuned for its own wide
   illustration; here the shape is nested inside .tg-supplement-img instead
   so it centers directly behind our (narrower, transparent) product photo
   regardless of image size. Copy column is also sized up a step past the
   template default so it carries equal visual weight next to the bigger
   product shot. */
#ingredient .tg-supplement-img { position: relative; }
#ingredient .tg-supplement-shape {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: 1050px;
  max-width: 220%;
}
#ingredient .tg-supplement-shape img { width: 100%; height: auto; }
#ingredient .tg-supplement-img img { position: relative; z-index: 1; }
#ingredient .tg-section-title .title { font-size: 60px; }
#ingredient .tg-supplement-content p { width: 100%; font-size: 18px; line-height: 1.7; }
@media (max-width: 991px) {
  #ingredient .tg-section-title .title { font-size: 42px; }
  #ingredient .tg-supplement-content p { font-size: 16px; }
}
@media (min-width: 992px) {
  #ingredient .tg-supplement-content { margin-left: -50px; }
}

/* Product names (PainO+, JOSH+, Volume+, ...) all share a trailing "+" as
   a brand accent - sized up wherever a product name is shown, site-wide. */
.plus-accent {
  display: inline-block;
  font-size: 1.35em;
  font-weight: 800;
  line-height: 1;
  color: var(--tg-secondary-color, #63af21);
  transform: translateY(0.05em);
}
/* The template's own .tg-features-area carries margin-top:-110px so its
   cards float up over a hero that's followed by nothing else - here the
   hero is followed by the banner's own slide bar plus this trust ticker,
   so that overlap would swallow both entirely (it did, silently) instead
   of just lightly overlapping the bottom of the banner image. Dropped so
   the ticker (and the banner's slide-bar dots) actually stay visible. */
.tg-features-area { margin-top: 0 !important; }

/* The template's own .home-shop-thumb is built for a tiny 126x190px badge
   photo sitting inside a decorative background shape - it hard-codes both
   dimensions, so an inline max-height on the <img> alone does nothing (a
   fixed height wins over a max-height cap). Recommended Products needs a
   normal, much larger product photo, so the whole thumb box is freed up
   here instead. */
.kh-recommended-shop .home-shop-thumb { max-width: 100%; margin: 0 0 30px; }
.kh-recommended-shop .home-shop-thumb > a { min-height: auto; margin: 0 auto; }
.kh-recommended-shop .home-shop-thumb img {
  display: inline-block;
  height: auto;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  object-position: center;
}
.kh-recommended-shop .shop-thumb-shape { display: none; }

/* Same issue, different component: .tg-shop-thumb (Our Range) hard-codes
   min-height:391px with object-fit:cover, which also wins over an inline
   max-height - Our Range's images were silently stuck at 391x313 instead
   of the intended larger size. Matched to Recommended Products' 420px. */
#supplement .tg-shop-thumb img {
  height: auto;
  min-height: 0;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
}

/* Full-bleed carousel strip - the section title above stays inside the
   normal .container, but the row of cards itself runs edge to edge instead
   of sitting inside the container's own side gutters. */
.kh-recommended-shop-bleed { width: 100vw; margin-left: calc(50% - 50vw); padding: 0 20px; }
.kh-recommended-shop-bleed .row { margin-left: 0; margin-right: 0; }

/* Equal-height cards regardless of content (rating present or not, product
   vs bundle) - .slick-track is plain display:block here (this template
   never makes it flex), so Slick never actually equalizes .slick-slide
   heights on its own; measured directly, slides in the same row differed
   by up to ~70px depending on whether a card happened to have a rating
   badge. Forcing .slick-track itself to stretch-flex is what actually
   equalizes every .slick-slide (confirmed: within 1px of each other
   afterwards). .home-shop-item can't just be height:100% of that slide
   though - it carries the template's own margin: 106px 0 50px (for its
   overlapping thumbnail photo), and a percentage height never accounts
   for a child's own margin, so the two would silently disagree by
   exactly that ~156px. flex: 1 1 auto instead correctly subtracts that
   margin from the space it's given, which plain height:100% cannot do. */
.kh-recommended-shop .slick-track { display: flex; align-items: stretch; }
.kh-recommended-shop .slick-slide { height: auto; display: flex; flex-direction: column; }
.kh-recommended-shop .home-shop-item { display: flex; flex-direction: column; flex: 1 1 auto; height: auto; }
.kh-recommended-shop .home-shop-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.kh-recommended-shop .shop-content-bottom { margin-top: auto; padding-top: 16px; }
/* .shop-content-bottom is display:flex with no justify-content set, so the
   template's default (flex-start) left-aligns its single "View Product"
   button instead of centering it - the template itself never hits this,
   since its own markup always pairs the button with a circular .cart icon
   to its left, which this site's cards never use. Every .shop-content-bottom
   on the site (here and product.html's related-products carousel,
   script.js) is a single centered button, so this is safe unscoped. */
.shop-content-bottom { justify-content: center; }
/* Same issue, same fix, for the star-rating row right above it - display:flex
   with no justify-content also left-aligns this instead of centering. */
.home-shop-rating { justify-content: center; }

/* The template's "Bundle" ribbon (.new) is scoped to .tg-shop-thumb, which
   this component never uses (it's .home-shop-thumb) - so the badge here
   rendered with no styling at all: no position, no background, normal
   font-weight. Gave it the same overlay treatment .tg-shop-thumb .new uses
   elsewhere on the site, with a bold weight to match how prominent the
   product name below it reads. */
.home-shop-thumb .new {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  padding: 4px 11px;
  color: #fff;
  background: var(--tg-secondary-color, #0D9B4D);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* Recommended Products carousel arrows - rebuilt to use the exact same
   solid-circle button as the testimonials carousel (.kh-review-carousel,
   further down this file) instead of the template's own faint-circle-
   behind-a-giant-icon-glyph treatment, so both carousels' arrows look and
   behave identically site-wide. content:none on the ::before removes that
   old circle entirely since the button itself is now the circle. */
.related-product-active .slick-arrow,
.home-shop-active .slick-arrow,
.kh-cart-bundle-grid .slick-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 12px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  color: #fff;
  background: var(--tg-secondary-color, #0D9B4D);
  border: 0;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
  transition: background .2s ease, transform .2s ease;
}
.related-product-active .slick-arrow.slick-next,
.home-shop-active .slick-arrow.slick-next,
.kh-cart-bundle-grid .slick-arrow.slick-next {
  left: auto;
  right: 12px;
}
.related-product-active .slick-arrow::before,
.home-shop-active .slick-arrow::before,
.kh-cart-bundle-grid .slick-arrow::before {
  content: none;
}
.related-product-active .slick-arrow:hover,
.home-shop-active .slick-arrow:hover,
.kh-cart-bundle-grid .slick-arrow:hover,
.related-product-active .slick-arrow:focus-visible,
.home-shop-active .slick-arrow:focus-visible,
.kh-cart-bundle-grid .slick-arrow:focus-visible {
  background: var(--tg-primary-color, #FAA432);
  transform: translateY(-50%) scale(1.06);
}
@media (max-width: 767.98px) {
  .related-product-active .slick-arrow,
  .home-shop-active .slick-arrow,
  .kh-cart-bundle-grid .slick-arrow {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}
.trust-ticker { display: flex; width: 100%; min-height: 46px; align-items: center; overflow: hidden; }
/* Admin > Banners > Homepage strip sets --trust-ticker-speed inline
   (renderTrustStrip() in script.js) - 22s stays as the fallback for before
   that JS runs, or if it's ever omitted. */
.trust-ticker-track { display: flex; width: max-content; align-items: center; animation: khTrustTicker var(--trust-ticker-speed, 22s) linear infinite; white-space: nowrap; will-change: transform; }
/* Pauses on hover/keyboard-focus - either pointer is actually over the
   strip, or a focusable child (none today, but future-proof) is focused. */
.trust-ticker:hover .trust-ticker-track,
.trust-ticker-track:focus-within { animation-play-state: paused; }
/* Each .trust-ticker-set must be two pixel-identical copies for the -50%
   loop below to be seamless. They used to be forced to 100vw each so a
   handful of items would still spread across a wide screen - but 100vw is
   measured including the (hidden) width behind the scrollbar on desktop
   browsers, so the two copies didn't actually line up: once per 22s loop,
   right at this seam, the gap between them visibly glitched. Sizing each
   set to its own content removes the viewport dependency entirely.
   padding-right only (not both sides) supplies the one gap before each
   repeat, matching the `gap` used between items within a set - padding on
   both sides would double that gap right at the seam between repeats. */
.trust-ticker-set { display: flex; flex: 0 0 auto; align-items: center; gap: 4vw; gap: clamp(24px, 4vw, 64px); padding-right: 4vw; padding-right: clamp(24px, 4vw, 64px); }
.trust-ticker-set span { position: relative; flex: 0 0 auto; color: rgba(255, 255, 255, 0.94); font-size: 1.3vw; font-size: clamp(0.82rem, 1.3vw, 0.98rem); font-weight: 700; letter-spacing: 0.02em; font-family: var(--tg-heading-font-family); }
.trust-ticker-set span::before { display: inline-block; width: 8px; height: 8px; margin-right: 12px; background: #FAA432; border-radius: 50%; content: ""; vertical-align: 0.08em; }
@keyframes khTrustTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .trust-ticker-track { animation: none; flex-wrap: wrap; justify-content: center; padding-block: 12px; white-space: normal; }
  .trust-ticker-set { flex-wrap: wrap; justify-content: center; }
  .trust-ticker-set[aria-hidden="true"] { display: none; }
}
@media (max-width: 640px) {
  .trust-ticker { min-height: 44px; }
  /* Was hardcoded to 16s regardless of the admin's speed setting - matches
     the desktop rule's var() now, so the setting actually applies on
     mobile too. */
  .trust-ticker-track { animation-duration: var(--trust-ticker-speed, 16s); }
  .trust-ticker-set { flex: 0 0 auto; width: auto; justify-content: flex-start; gap: 30px; padding: 0 30px 0 0; }
  .trust-ticker-set[aria-hidden="true"] { display: flex; }
}

.kh-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 40;
  max-width: 420px;
  margin: 0 auto;
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid #e5e9e1;
  border-radius: 10px;
  box-shadow: 0 20px 44px rgba(18, 51, 38, 0.14);
  text-align: left;
}
.kh-search-result { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; color: #222; text-decoration: none; }
.kh-search-result:hover { background: #f2f6e9; }
.kh-search-result img { width: 40px; height: 40px; object-fit: contain; background: #f6f8f1; border-radius: 6px; }
.kh-search-empty { margin: 0; padding: 10px; color: #777; font-size: 0.9rem; }

.catalog-empty { flex: 1 1 100%; padding: 40px; color: #777; text-align: center; }

/* ===== Homepage depth sections ===== */
.kh-section-intro {
  max-width: 660px;
  margin: 18px auto 0 !important;
  color: #66716b;
  font-size: 1rem;
  line-height: 1.7;
}
.kh-home-features {
  padding: 115px 0 90px;
  background: #fff;
}
.kh-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 75%;
  margin: 0 auto;
}
.kh-feature-card {
  position: relative;
  min-height: 214px;
  overflow: hidden;
  padding: 38px 34px 34px;
  background: #fff;
  border: 1px solid #e3e9df;
  border-radius: 10px;
  box-shadow: 0 14px 38px rgba(13, 51, 35, 0.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kh-feature-card-image {
  display: flex;
  padding: 0;
}
.kh-feature-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kh-feature-card:hover {
  border-color: rgba(13, 155, 77, .35);
  box-shadow: 0 22px 50px rgba(13, 51, 35, 0.11);
  transform: translateY(-6px);
}
.kh-feature-number {
  position: absolute;
  top: 20px;
  right: 24px;
  color: rgba(13, 51, 35, .08);
  font-family: var(--tg-heading-font-family);
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
}
.kh-feature-icon {
  display: grid;
  width: 62px;
  height: 62px;
  margin-bottom: 24px;
  place-items: center;
  color: #fff;
  background: var(--tg-secondary-color, #0d9b4d);
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(13, 155, 77, .22);
  font-size: 28px;
}
.kh-feature-card h3 {
  margin: 0 0 12px;
  color: var(--tg-heading-font-color, #0d3323);
  font-size: 1.35rem;
}
.kh-feature-card p { margin: 0; color: #66716b; line-height: 1.7; }

.kh-kicker {
  display: block;
  margin-bottom: 12px;
  color: var(--tg-primary-color, #faa432);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kh-bundle-copy h2 {
  margin: 0 0 22px;
  color: #fff;
  font-size: 5vw; font-size: clamp(2.35rem, 5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.025em;
}
.kh-text-link { color: var(--tg-secondary-color, #0d9b4d); font-weight: 800; text-decoration: none; }
.kh-text-link i { margin-left: 7px; font-size: .8em; transition: transform .2s ease; }
.kh-text-link:hover i { transform: translateX(4px); }

.kh-order-journey { padding: 110px 0; background: #fff; }
.kh-journey-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #dce4dc; border-bottom: 1px solid #dce4dc; }
.kh-journey-step { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px; padding: 38px 34px; border-right: 1px solid #dce4dc; }
.kh-journey-step:last-child { border-right: 0; }
.kh-journey-step > span { color: var(--tg-secondary-color, #0d9b4d); font-family: var(--tg-heading-font-family); font-size: 4.2rem; font-weight: 700; line-height: 1; }
.kh-journey-step h3 { margin: 0 0 10px; color: #0d3323; font-size: 1.35rem; }
.kh-journey-step p { margin: 0; color: #66716b; line-height: 1.65; }

.kh-bundle-callout { padding: 0 0 110px; background: #fff; }
.kh-bundle-inner {
  position: relative;
  display: grid;
  min-height: 430px;
  overflow: hidden;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  padding: 55px 6vw; padding: 55px clamp(30px, 6vw, 80px);
  background: linear-gradient(112deg, #168b4c 0%, #0d633b 55%, #0d3323 100%);
  border-radius: 18px;
}
.kh-bundle-inner::after { position: absolute; right: -110px; bottom: -180px; width: 520px; height: 520px; border: 70px solid rgba(255,255,255,.06); border-radius: 50%; content: ""; }
.kh-bundle-copy { position: relative; z-index: 2; }
.kh-bundle-copy h2 { max-width: 700px; font-size: 4.3vw; font-size: clamp(2.2rem, 4.3vw, 4rem); }
.kh-bundle-copy p { max-width: 570px; margin: 0 0 28px; color: #dce9e2; font-size: 1.05rem; line-height: 1.7; }
.kh-bundle-copy .tg-btn { color: #0d3323; background: #fff; }
.kh-bundle-copy .tg-btn:hover { color: #fff; background: var(--tg-primary-color, #faa432); }
.kh-bundle-art { position: relative; z-index: 2; height: 330px; }
.kh-bundle-art img { position: absolute; bottom: -30px; height: 350px; object-fit: contain; filter: drop-shadow(0 24px 22px rgba(0,0,0,.28)); }
.kh-bundle-art img:first-child { left: 7%; transform: rotate(-7deg); }
.kh-bundle-art img:last-child { right: 4%; height: 325px; transform: rotate(8deg); }

@media (max-width: 991px) {
  .kh-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-journey-grid { grid-template-columns: 1fr; }
  .kh-journey-step { border-right: 0; border-bottom: 1px solid #dce4dc; }
  .kh-journey-step:last-child { border-bottom: 0; }
  .kh-bundle-inner { grid-template-columns: 1fr; }
  .kh-bundle-art { display: none; }
}
@media (max-width: 575px) {
  .kh-home-features, .kh-order-journey { padding: 80px 0; }
  .kh-bundle-callout { padding-bottom: 80px; }
  .kh-feature-grid { grid-template-columns: 1fr; }
  .kh-feature-card { min-height: 0; padding: 32px 28px; }
  .kh-journey-step { padding: 30px 8px; }
  .kh-bundle-inner { min-height: 0; padding: 48px 28px; border-radius: 12px; }
}

/* The template hides .shop-content-bottom .btn until hover (paired with a
   circular cart-icon button we don't use) - that leaves no visible call to
   action at all on touch devices with no hover state, so show it always. */
.shop-content-bottom .btn {
  opacity: 1 !important;
  visibility: visible !important;
  margin-left: 0 !important;
}
.home-shop-content { padding-bottom: 6px; }

.kh-cart-link {
  position: relative;
  display: inline-flex;
}
.kh-cart-link .js-cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--tg-secondary-color);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
}

/* Cart/Login nav items are appended to .navigation so the template's own
   main.js auto-clones them into the mobile off-canvas menu (it clones
   .menu-area .main-menu wholesale); hidden on desktop where the icon-based
   header-action already covers cart/account. */
@media (min-width: 1200px) {
  .mobile-only-link { display: none !important; }
}

.kh-account-icon svg, .kh-search-toggle svg, .kh-cart-link svg { width: 20px; height: 20px; }

/* The template's .nav-logo img{width:160px} fights our own max-height
   sizing on the real (square, transparent-canvas) Khalis Herb logo,
   stretching it out of proportion - let height drive it instead. */
.nav-logo img { width: auto !important; }
.kh-brand-lockup { display: inline-flex !important; align-items: center; gap: 10px; text-decoration: none; }
.kh-brand-lockup img { width: auto !important; height: 66px; max-width: none; flex: 0 0 auto; object-fit: contain; }
/* Wordmark text retired in favor of a larger standalone logo mark - kept in
   the markup (not deleted) so it can come back with a CSS-only change. */
.kh-brand-lockup > span { display: none; }
.mobile-menu .kh-brand-lockup { padding: 8px 12px; background: #fff; border-radius: 8px; }
.mobile-menu .kh-brand-lockup img { height: 46px; }

/* Floating WhatsApp action. The legacy stylesheet used to own this rule;
   Suxnix pages do not load that stylesheet, so keep the component here too.
   Sized and right-aligned to exactly match .scroll-top (the "back to top"
   arrow, style.css: 50px/right:30px desktop, 35px/right:15px at its own
   <=767.98px breakpoint in responsive.css - matched here rather than at
   this file's own 575px breakpoint so the two stay identical at every
   width in between, not just past 575px) so the pair reads as one matched
   set, not two different-sized buttons stacked on top of each other.
   Starts at bottom:30px - the same spot .scroll-top will itself occupy
   once it appears - since the arrow is hidden until the page is scrolled,
   nothing else wants that spot yet. script.js adds .is-raised at the exact
   same scroll position main.js reveals the arrow at (245px), sliding
   WhatsApp up to bottom:100px with the same 1s ease timing .scroll-top
   itself uses for its own reveal, so the two buttons move as one
   coordinated motion instead of WhatsApp sitting pre-emptively out of the
   way the whole time. */
.floating-order {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 99;
  display: inline-flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  background: #25d366;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 16px 34px rgba(37, 211, 102, .36);
  text-decoration: none;
  transition: bottom 1s ease, transform .18s ease, box-shadow .18s ease;
}
.floating-order.is-raised { bottom: 100px; }
.floating-order:hover { color: #fff; box-shadow: 0 20px 40px rgba(31, 122, 70, .32); transform: translateY(-3px); }
.floating-order svg { display: block; width: 26px; height: 26px; fill: currentColor; stroke: none; }
.floating-order svg path { fill: currentColor !important; stroke: none !important; }

@media (max-width: 767.98px) {
  /* Matches .scroll-top's own breakpoint and sizing exactly (responsive.css). */
  .floating-order { right: 15px; bottom: 15px; width: 35px; height: 35px; }
  .floating-order svg { width: 18px; height: 18px; }
  .floating-order.is-raised { bottom: 70px; }
}

@media (max-width: 575px) {
  .kh-brand-lockup { gap: 7px; }
  .kh-brand-lockup img { height: 50px; }
}

/* Keep the template's mobile trigger pinned to the viewport-side of the
   header. A wide page child must never be able to push it off canvas. */
@media (max-width: 1199.98px) {
  .tg-menu-area .col-12 { position: relative; }
  .tg-menu-area .menu-wrap { min-width: 0; padding-right: 68px; }
  .tg-menu-area.menu-area .mobile-nav-toggler {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 12;
    float: none;
    margin: 0;
    transform: translateY(-50%);
  }
}

/* Shared product-catalog card - script.js auto-populates any
   [data-products-catalog] / [data-recommended-products] container (products
   listing, recommended-products strips, bundles, etc) with this exact
   markup, so it's styled once here rather than per page. */
.products-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.product-catalog-card {
  position: relative;
  display: grid;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5eaee;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(7, 28, 31, 0.06);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-catalog-card:hover {
  box-shadow: 0 20px 44px rgba(7, 28, 31, 0.12);
  transform: translateY(-4px);
}
.product-catalog-media {
  display: grid;
  min-height: 240px;
  place-items: center;
  padding: 20px;
  background: #fff;
  position: relative;
}
.product-catalog-media img {
  max-width: 80%;
  max-height: 210px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.product-catalog-copy {
  display: grid;
  gap: 6px;
  padding: 18px 20px 22px;
  text-align: center;
}
.product-catalog-name {
  color: var(--tg-heading-font-color, #222);
  font-family: var(--tg-heading-font-family, sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
}
.product-catalog-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.82rem;
}
.product-catalog-rating-stars { color: var(--tg-primary-color, #FAA432); letter-spacing: 1px; }
.product-catalog-rating-count { color: #777; }
.product-catalog-price {
  color: var(--tg-secondary-color, #0D9B4D);
  font-size: 0.95rem;
  font-weight: 700;
}
.product-promo-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  background: var(--tg-primary-color, #FAA432);
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.catalog-not-found { padding: 60px 20px; color: #777; text-align: center; }
.catalog-not-found a { color: var(--tg-secondary-color, #0D9B4D); font-weight: 800; }
@media (max-width: 900px) {
  .products-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .products-catalog-grid { grid-template-columns: 1fr; }
}

/* ===== Product detail page (product.html) =====
   Ported from the site's own product-detail component system (order card,
   accordion, reviews, recommended products) onto Suxnix's color tokens -
   script.js's data-product-* wiring drives all of this regardless of visual
   theme, so only the look changes here, not the markup contract. */
.product-view {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(340px, 0.82fr);
  gap: 5vw; gap: clamp(30px, 5vw, 64px);
  padding: 40px 5vw 5vw; padding: 40px clamp(18px, 5vw, 72px) clamp(40px, 5vw, 60px);
  background: #fff;
}
/* Product gallery (main photo stage + thumbnail row). product.html's markup
   (the only page that uses any of these classes - checked via grep) always
   wraps this in .inner-shop-details-flex-wrap, so these are written as one
   direct, single-source implementation instead of a generic base layout
   plus a second override block for that wrapper - the two drifted out of
   sync with each other more than once (stale width caps, a border-radius
   only one of the two layers set), which is exactly the failure mode of
   maintaining a layout in two places at once.

   Sizing rule: the stage and each thumbnail are both fixed frames (object-
   fit: contain on every image inside them) - an uploaded photo of any real
   size or aspect ratio is scaled to fit inside without cropping or
   distorting it, and never changes the frame's own size. No border on
   either; the active thumbnail is shown via opacity only, not a line. */
.product-view-gallery { display: block; }
.inner-shop-details-img-wrap { background: #f7f7f7; border-radius: 8px; overflow: hidden; }
.product-view-stage { position: relative; }
.product-view-stage-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 580px;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}
.product-view-stage-inner img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transition: opacity 200ms ease;
}
.product-view-stage-inner.is-loading { background: linear-gradient(100deg, #f0f0f0 30%, #f5f5f5 50%, #f0f0f0 70%); background-size: 200% 100%; animation: khImgShimmer 1.3s ease-in-out infinite; }
.product-view-stage-inner.is-loading img { opacity: 0; }
@keyframes khImgShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.product-view-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.product-view-thumbs[hidden] { display: none; }
.product-view-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
  padding: 6px;
  background: #fff;
  border: none;
  opacity: .65;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.product-view-thumb:hover, .product-view-thumb.is-active { opacity: 1; }
.product-view-thumb img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

@media (max-width: 900px) {
  .product-view-stage-inner { height: 440px; }
  .product-view-thumb { width: 76px; height: 76px; }
}
@media (max-width: 560px) {
  .product-view-stage-inner { height: 320px; }
  .product-view-thumb { width: 64px; height: 64px; }
}
/* Product detail header (product.html's .inner-shop-details-content): name,
   then this subtitle, then star rating - admin-entered via Product Manager's
   "Product subtitle" field, hidden entirely (via the [hidden] attribute set
   in product.html's own script) when a product doesn't have one. */
.product-subtitle { margin: 6px 0 0; color: #696868; font-size: 1.02rem; line-height: 1.5; }
.product-subtitle[hidden] { display: none; }
.product-subtitle strong { color: var(--tg-heading-font-color, #222); font-weight: 700; }

/* Compact selectable offer cards under the COD/advance-payment note on
   product.html - populated from a product's admin-linked Promotions/Bundles
   (Product Manager -> Offers / Promotions). Border-free, matching this
   page's established compact-card look (see the gallery thumbnail cleanup
   above); hidden entirely via [hidden] when a product has no active offers. */
.product-offer-box { margin-top: 14px; }
.product-offer-box[hidden] { display: none; }
.product-offer-box-title { margin: 0 0 8px; font-size: 0.85rem; font-weight: 600; color: #696868; text-transform: uppercase; letter-spacing: 0.03em; }
.product-offer-cards { display: flex; flex-direction: column; gap: 8px; }
.product-offer-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #F6F8F5;
  border-radius: 10px;
  transition: background-color 0.15s ease;
}
.product-offer-card.is-selected { background: #EAF6EE; }
.product-offer-card-image { flex: 0 0 auto; width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: #fff; }
.product-offer-card-label { flex: 1 1 auto; font-size: 0.92rem; font-weight: 600; color: var(--tg-heading-font-color, #222); }
.product-offer-card-price { font-size: 0.92rem; font-weight: 700; color: var(--tg-secondary-color, #0D9B4D); white-space: nowrap; }
.product-offer-card-price s { font-weight: 400; color: #9b9b9b; margin-right: 4px; }
.product-offer-card-save { display: block; font-size: 0.74rem; color: #9b9b9b; white-space: nowrap; }
.product-offer-card-btn {
  flex: 0 0 auto;
  padding: 6px 16px;
  border: none;
  border-radius: 20px;
  background: var(--tg-secondary-color, #0D9B4D);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.product-offer-card-btn:hover { background: var(--tg-primary-color, #FAA432); }
@media (max-width: 575px) {
  .product-offer-card { flex-wrap: wrap; }
}

/* Star rating moved above the product name - the vendor rule's margin-top
   (meant for sitting below the title) would otherwise push this block away
   from the top of the content column; zeroed here since it's now the first
   element instead. */
.inner-shop-details-meta-top ul li { margin-top: 0; }
.inner-shop-details-meta-top { margin-bottom: 4px; }

/* Both quantity steppers on the site (.quickview-cart-plus-minus - the -/+
   overlay buttons used on product.html and the quick-view modal, and
   .quantity-control - the plain input used on the homepage featured-product
   card) are type="number" inputs with custom increment/decrement buttons
   already providing that control, so the browser's own small up/down
   spinner arrows are redundant and, on .quickview-cart-plus-minus
   specifically, visually clash with the custom + button already occupying
   that same corner. Centered text (already set in style.css) is unaffected
   by removing the spinner - the value just no longer loses space to it. */
.quickview-cart-plus-minus input[type="number"],
.quantity-control input[type="number"] {
  -moz-appearance: textfield;
}
.quickview-cart-plus-minus input[type="number"]::-webkit-outer-spin-button,
.quickview-cart-plus-minus input[type="number"]::-webkit-inner-spin-button,
.quantity-control input[type="number"]::-webkit-outer-spin-button,
.quantity-control input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-view-info { min-width: 0; }
.product-view-info h1 { margin: 6px 0 0; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 4vw; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.15; }
.product-view-info > p { max-width: 520px; margin: 14px 0 0; color: #777; font-size: 1.02rem; line-height: 1.6; }
.product-view-info .product-order-card { margin-top: 22px; }
.product-view-rating { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #777; font-size: 0.9rem; text-decoration: none; }
.product-view-rating-stars { color: var(--tg-primary-color, #FAA432); letter-spacing: 1px; font-size: 1.05rem; }
.product-view-rating:hover .product-view-rating-count { text-decoration: underline; }
.eyebrow { display: block; margin: 0 0 4px; color: var(--tg-secondary-color, #0D9B4D); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.product-order-card { display: grid; gap: 14px; max-width: 520px; margin-top: 24px; padding: 22px; background: #fff; border: 1px solid #e5eaee; border-radius: 8px; box-shadow: 0 10px 30px rgba(7,28,31,.06); }
.variant-options { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-option { min-height: 42px; padding: 0 18px; color: var(--tg-heading-font-color, #222); background: #F5F5F5; border: 1px solid #e5eaee; border-radius: 999px; cursor: pointer; font-weight: 800; }
.variant-option[aria-pressed="true"] { color: #fff; background: var(--tg-secondary-color, #0D9B4D); border-color: var(--tg-secondary-color, #0D9B4D); }
.variant-option:disabled { color: #6f7771; background: #f1f2f0; border-color: #d5d8d4; text-decoration: line-through; }
.product-price { color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 3vw; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; line-height: 1.05; }
.quantity-control { display: flex; align-items: center; gap: 12px; color: var(--tg-heading-font-color, #222); font-weight: 800; }
.quantity-control input { width: 86px; min-height: 44px; padding: 8px 12px; border: 1px solid #e5eaee; border-radius: 8px; }
.cod-note { margin: 0; color: #777; font-size: 0.86rem; }
.js-add-to-cart { min-height: 50px; padding: 0 28px; color: #fff; background: var(--tg-secondary-color, #0D9B4D); border: none; border-radius: 999px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: background .15s ease; }
.js-add-to-cart:hover { background: var(--tg-primary-color, #FAA432); }

.details-accordion { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #e5eaee; border-radius: 8px; box-shadow: 0 10px 30px rgba(7,28,31,.06); margin: 0 5vw 40px; margin: 0 clamp(18px, 5vw, 72px) 40px; }
.details-accordion details { border-bottom: 1px solid #e5eaee; }
.details-accordion details:last-child { border-bottom: 0; }
.details-accordion summary { position: relative; display: flex; align-items: center; min-height: 80px; padding: 22px 60px 22px 30px; color: var(--tg-heading-font-color, #222); cursor: pointer; font-family: var(--tg-heading-font-family); font-size: 1.25rem; font-weight: 700; line-height: 1.1; list-style: none; }
.details-accordion summary::-webkit-details-marker { display: none; }
.details-accordion summary::after { position: absolute; top: 50%; right: 30px; width: 14px; height: 14px; border-right: 3px solid var(--tg-secondary-color, #0D9B4D); border-bottom: 3px solid var(--tg-secondary-color, #0D9B4D); content: ""; transform: translateY(-65%) rotate(45deg); transition: transform 160ms ease; }
.details-accordion details[open] summary::after { transform: translateY(-35%) rotate(225deg); }
.details-panel { padding: 0 30px 30px; color: #777; }
.details-panel > p { max-width: 980px; margin: 0; color: #777; font-size: 1rem; white-space: pre-line; }

.product-reviews-section { padding: 6vw 5vw; padding: clamp(50px, 6vw, 80px) clamp(18px, 5vw, 72px); background: #fff; border-top: 1px solid #e5eaee; }
.product-reviews-section > h2 { margin: 0 0 30px; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 3vw; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.product-reviews-layout { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 40px; }
.product-reviews-summary { display: grid; gap: 8px; height: max-content; padding: 24px; border: 1px solid #e5eaee; border-radius: 8px; }
.product-reviews-summary strong { color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 1.3rem; line-height: 1.3; }
.product-reviews-summary .review-stars-row { color: var(--tg-primary-color, #FAA432); font-size: 1.1rem; letter-spacing: 2px; }
.product-reviews-summary span, .product-reviews-summary p { color: #777; font-size: 0.9rem; }
.product-reviews-summary p { margin: 10px 0 4px; line-height: 1.5; }
.product-reviews-summary .button.primary { display: inline-block; margin-top: 6px; padding: 12px 22px; color: #fff; background: var(--tg-secondary-color, #0D9B4D); border-radius: 999px; text-decoration: none; font-weight: 800; }
.product-reviews-list { display: grid; align-content: start; gap: 16px; min-height: 140px; }
.reviews-empty-note { margin: 0; color: #777; line-height: 1.6; }

/* ===== Homepage customer comments carousel ===== */
.kh-home-reviews-carousel-section { position: relative; padding: 9vw 0; padding: clamp(76px, 9vw, 110px) 0; background: #fff; overflow: hidden; }
.kh-home-reviews-carousel-section::before { content: none; }
.kh-home-reviews-carousel-section .container { position: relative; z-index: 1; width: 100%; max-width: 1400px; }
.kh-home-reviews-carousel-section .tg-section-title { padding-right: 20px; padding-left: 20px; }
.kh-home-reviews-carousel-section .tg-section-title.white .sub-title { color: #63af21; }
.kh-home-reviews-carousel-section .tg-section-title .title.white-text { color: var(--tg-heading-font-color, #222); }
/* Testimonials use the same card as Popular & Trending / Our Range / Bundle deals: white card,
   1px #e5eaee border, 14px radius, soft lift on hover, centred copy. They used to be small
   fixed 194px squares with a heavy drop shadow floating on a patterned full-width background.
   Three cards across on desktop (two on tablets, one on phones), same 14px gutters and equal
   heights as the bundle slider; the carousel itself (arrows, autoplay) is unchanged. */
.kh-review-carousel-shell { position: relative; width: 100%; padding: 0; }
/* 64px gutters left and right hold the arrows, so they never sit on a card */
.kh-review-carousel { margin: 0; padding: 0 64px; }
/* vertical room so the hover lift and shadow aren't clipped by Slick's overflow:hidden list */
.kh-review-carousel .slick-list { margin: -8px -14px -30px; padding: 8px 0 30px; }
.kh-review-carousel .slick-track { display: flex !important; align-items: stretch; }
.kh-review-carousel .slick-slide { display: flex !important; float: none; height: auto !important; padding: 0 14px; }
.kh-review-carousel .slick-slide > div { display: flex !important; width: 100%; height: auto; }
.kh-review-slide { display: flex; width: 100%; height: auto; }
.kh-home-review-card {
  display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; min-height: 0; padding: 24px 16px; overflow: hidden;
  text-align: center; background: #fff; border: 1px solid #e5eaee; border-radius: 14px; box-shadow: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.kh-home-review-card:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .1); transform: translateY(-3px); }
.kh-home-review-card .tg-testimonial-content { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.kh-home-review-card .tg-testimonial-content .rating { margin: 0; color: var(--tg-primary-color, #FAA432); font-size: .95rem; letter-spacing: 3px; }
.kh-home-review-card .tg-testimonial-content .title { margin: 0; color: #222; font-family: var(--tg-heading-font-family); font-size: 1.2rem; font-weight: 600; line-height: 1.2; text-transform: none; overflow-wrap: anywhere; }
.kh-home-review-card .kh-home-review-headline { margin: 0; color: #222; font-size: .88rem; font-weight: 700; line-height: 1.3; }
.kh-home-review-card .kh-home-review-comment { display: -webkit-box; margin: 0; overflow: hidden; color: #777; font-size: .88rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }
.kh-home-review-card .tg-testimonial-content .tg-testi-avatar-info { width: 100%; margin: auto 0 0; padding-top: 14px; color: #0D9B4D; border-top: 1px solid #e5eaee; font-size: .8rem; font-weight: 800; }
/* Same solid green circle arrows as the other sliders, on the LEFT and RIGHT in the carousel's own gutters. */
.kh-review-carousel .slick-arrow { position: absolute; z-index: 3; top: 50%; bottom: auto; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; color: #fff; background: var(--tg-secondary-color, #0D9B4D); border: 0; border-radius: 50%; font-size: 1.25rem; line-height: 1; transform: translateY(-50%); cursor: pointer; box-shadow: 0 12px 26px rgba(0, 0, 0, .24); transition: background .2s ease, transform .2s ease; }
.kh-review-carousel .slick-arrow::before { content: none; }
.kh-review-carousel .slick-prev { left: 0; right: auto; }
.kh-review-carousel .slick-next { left: auto; right: 0; }
.kh-review-carousel .slick-arrow:hover,
.kh-review-carousel .slick-arrow:focus-visible { background: var(--tg-primary-color, #FAA432); transform: translateY(-50%) scale(1.06); }
.kh-review-carousel .slick-arrow.slick-disabled { opacity: .35; cursor: default; }
.kh-review-carousel .slick-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 34px 0 0; padding: 0; list-style: none; }
.kh-review-carousel .slick-dots li { margin: 0; line-height: 1; }
.kh-review-carousel .slick-dots button { display: block; width: 9px; height: 9px; padding: 0; overflow: hidden; color: transparent; background: rgba(13, 51, 35, .28); border: 0; border-radius: 999px; font-size: 0; transition: width .2s ease, background .2s ease; }
.kh-review-carousel .slick-dots .slick-active button { width: 24px; background: var(--tg-primary-color, #FAA432); }
@media (max-width: 767px) {
  .kh-review-carousel { padding: 0 48px; }
  .kh-review-carousel .slick-arrow { width: 40px; height: 40px; font-size: 1rem; }
}
.review-card { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid #eef1ef; }
.review-card:last-child { border-bottom: none; }
.review-card strong { color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 1.05rem; }
.review-card .review-stars-row { color: var(--tg-primary-color, #FAA432); letter-spacing: 2px; }
.review-card p { margin: 0; color: #333; line-height: 1.6; }
.review-card-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; }
.review-meta { color: #777; font-size: 0.84rem; }
.reviews-pagination { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.reviews-page-btn { min-width: 36px; height: 36px; padding: 0 10px; color: var(--tg-heading-font-color, #222); background: #fff; border: 1px solid #e5eaee; border-radius: 8px; font-size: 0.9rem; cursor: pointer; }
.reviews-page-btn.is-active { color: #fff; background: var(--tg-primary-color, #FAA432); border-color: var(--tg-primary-color, #FAA432); }
.review-form-panel { max-width: 640px; margin: 5vw auto 0; margin: clamp(36px, 5vw, 56px) auto 0; }
.review-form-panel h3 { margin: 0 0 16px; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 2.4vw; font-size: clamp(1.3rem, 2.4vw, 1.6rem); text-align: center; }
.review-form { display: grid; gap: 18px; }
.review-form .button.primary { min-height: 50px; padding: 0 28px; color: #fff; background: var(--tg-secondary-color, #0D9B4D); border: none; border-radius: 999px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.form-hint { color: #777; font-weight: 500; }
.review-form input[type="file"] { padding: 10px; background: #fff; border: 1px dashed #e5eaee; border-radius: 6px; font-size: .88rem; }
.review-privacy-note { margin: 0; color: #777; font-size: .82rem; line-height: 1.6; }
.review-privacy-note a { color: var(--tg-secondary-color, #0D9B4D); }
.star-rating-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; width: max-content; }
.star-rating-input input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.star-rating-input label { cursor: pointer; color: #e5eaee; font-size: 32px; line-height: 1; transition: color 120ms ease; }
.star-rating-input label::before { content: "★"; }
.star-rating-input input:checked ~ label, .star-rating-input label:hover, .star-rating-input label:hover ~ label { color: var(--tg-primary-color, #FAA432); }
.form-status { padding: 12px 16px; border-radius: 8px; background: #f5f5f5; }

.recommended-products-section { padding: 6vw 5vw; padding: clamp(50px, 6vw, 80px) clamp(18px, 5vw, 72px); background: #F5F5F5; border-top: 1px solid #e5eaee; }
.recommended-products-section > h2 { margin: 0 0 26px; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 3vw; font-size: clamp(1.6rem, 3vw, 2.2rem); text-align: center; }
.recommended-products-scroller { position: relative; display: flex; align-items: center; gap: 14px; }
.recommended-products-row { display: flex; flex: 1; gap: 20px; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none; }
.recommended-products-row::-webkit-scrollbar { display: none; }
.recommended-products-row .product-catalog-card { flex: 0 0 auto; width: 22vw; width: clamp(200px, 22vw, 260px); scroll-snap-align: start; }
.recommended-products-arrow { display: inline-flex; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; color: var(--tg-heading-font-color, #222); background: #fff; border: 1px solid #e5eaee; border-radius: 999px; box-shadow: 0 10px 30px rgba(7,28,31,.06); cursor: pointer; }
.recommended-products-arrow:hover { color: #fff; background: var(--tg-primary-color, #FAA432); }
.recommended-products-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.catalog-not-found { padding: 60px 20px; color: #777; text-align: center; }

.form-row { display: grid; gap: 7px; min-width: 0; }
.form-row label { color: var(--tg-heading-font-color, #222); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.form-row input:not([type="checkbox"]):not([type="radio"]), .form-row select, .form-row textarea { width: 100%; min-height: 48px; padding: 12px 14px; color: #222; background: #fff; border: 1px solid #e5eaee; border-radius: 8px; outline: none; }
.form-row textarea { min-height: 132px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--tg-secondary-color, #0D9B4D); box-shadow: 0 0 0 4px rgba(13,155,77,0.12); }
@media (max-width: 900px) {
  .product-view { grid-template-columns: 1fr; }
  .product-reviews-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .star-rating-input label { font-size: 28px; }
}

/* ===== Cart / checkout / account commerce pages =====
   Ported the same way as the product-detail block above - script.js's cart
   and checkout rendering (renderCart, etc) generates this exact markup
   regardless of visual theme. */
.commerce-page { padding: 6vw 5vw 9vw; padding: clamp(38px, 6vw, 76px) clamp(18px, 5vw, 72px) clamp(64px, 9vw, 110px); }
.commerce-hero { max-width: 980px; margin: 0 auto 5vw; margin: 0 auto clamp(28px, 5vw, 48px); }
.commerce-hero h1 { margin: 0; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 5vw; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; }
.commerce-hero p:not(.eyebrow) { max-width: 760px; color: #777; font-size: 1.8vw; font-size: clamp(1rem, 1.8vw, 1.15rem); }
.cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 4vw; gap: clamp(24px, 4vw, 46px); max-width: 1160px; margin: 0 auto; align-items: start; width: 100%; min-width: 0; }
.track-order-layout { width: 100%; max-width: 560px; margin: 0 auto; }
.track-order-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.cart-items, .checkout-card, .cart-summary, .admin-card { background: #fff; border: 1px solid #e5eaee; border-radius: 8px; box-shadow: 0 10px 30px rgba(7,28,31,.06); }
.cart-items { display: grid; gap: 16px; background: transparent; border: 0; box-shadow: none; }
.cart-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px; background: #fff; border: 1px solid #e5eaee; border-radius: 8px; }
.cart-item img { width: 96px; height: 110px; object-fit: contain; background: #F5F5F5; border-radius: 8px; }
.cart-item h2, .cart-summary h2, .checkout-card h2 { margin: 0; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 1.15rem; }
.cart-item h2 a, .checkout-line a { color: inherit; }
.cart-item p { margin: 4px 0 0; color: #777; }
.cart-item strong, .checkout-line-row strong { color: var(--tg-heading-font-color, #222); }
.cart-item s, .checkout-line-row s { color: #777; font-weight: 700; text-decoration-thickness: 2px; }
.cart-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.cart-controls label { display: inline-flex; align-items: center; gap: 8px; color: var(--tg-heading-font-color, #222); font-weight: 800; }
.cart-controls input { width: 76px; min-height: 40px; padding: 6px 10px; border: 1px solid #e5eaee; border-radius: 8px; }
.cart-controls button { color: #cb3421; background: transparent; border: 0; cursor: pointer; font-weight: 800; }
.cart-summary, .checkout-card { display: grid; gap: 18px; padding: 3vw; padding: clamp(20px, 3vw, 28px); }
.summary-row { display: flex; justify-content: space-between; gap: 16px; color: #777; }
.summary-row strong { color: var(--tg-heading-font-color, #222); white-space: nowrap; }
.promotion-saving strong { color: var(--tg-secondary-color, #0D9B4D); }
.checkout-line { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #e5eaee; }
.checkout-line img { width: 56px; height: 64px; object-fit: contain; background: #F5F5F5; border: 1px solid #e5eaee; border-radius: 8px; }
.checkout-line-body { display: grid; gap: 6px; min-width: 0; }
.checkout-line:last-child { padding-bottom: 0; border-bottom: 0; }
.checkout-line-row { display: flex; justify-content: space-between; gap: 16px; color: #777; }
.checkout-line-row strong { display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
.checkout-line-row s { font-size: 0.82rem; font-weight: 700; }
.checkout-line small { display: block; margin-top: 5px; color: #6c7886; line-height: 1.45; }
.checkout-total { padding-top: 14px; border-top: 1px solid #e5eaee; }
.checkout-total strong { font-size: 1.25rem; }
.cod-note, .form-help { margin: 0; color: #777; font-size: 0.86rem; }
.empty-cart { padding: 34px; text-align: center; }
.cart-bundle-components { display: grid; gap: 4px; margin-top: 10px; padding: 10px 12px; background: #eef7e6; border-left: 4px solid #b89236; border-radius: 8px; font-size: .88rem; }
.cart-bundle-components b { color: var(--tg-secondary-color, #0D9B4D); }
.span-full { grid-column: 1 / -1; }
.honeypot { position: absolute; left: -9999px; }
.button.primary, .checkout-button, .js-checkout-submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 28px; color: #fff; background: var(--tg-secondary-color, #0D9B4D);
  border: none; border-radius: 999px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; cursor: pointer;
}
/* Hover handled by the unified sweep effect further down this file. */
.button.primary.is-disabled { pointer-events: none; opacity: .5; }
.button.ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; color: var(--tg-heading-font-color, #222); background: #fff; border: 1px solid #e5eaee; border-radius: 999px; font-weight: 800; text-decoration: none; }
@media (max-width: 900px) {
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 72px minmax(0,1fr); }
  .cart-item strong { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  #sticky-header, .main-area, .kh-page-header, .footer-style-two { width: 100vw; max-width: 100vw; }
  .commerce-page { width: 100vw; max-width: 100vw; padding: 38px 16px 64px; overflow: hidden; }
  .commerce-hero, .cart-layout, .checkout-layout,
  .cart-layout > *, .checkout-layout > * { width: calc(100vw - 32px); max-width: calc(100vw - 32px); min-width: 0; }
  .commerce-hero h1, .commerce-hero h2, .commerce-hero p,
  .empty-cart h2, .cart-summary, .cart-summary * { overflow-wrap: anywhere; }
  .empty-cart { width: 100%; padding: 28px 12px; }
  .empty-cart h2 { font-size: 1.85rem; }
  .summary-row, .checkout-line-row { flex-wrap: wrap; }
  .summary-row strong, .checkout-line-row strong { white-space: normal; text-align: right; }
  .cart-summary, .checkout-card { padding: 22px 18px; }
  .cart-summary .button, .checkout-card .button { width: 100%; max-width: 100%; white-space: normal; text-align: center; }
}

/* ===== Checkout page (checkout.html) ===== */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid[hidden] { display: none; }
.payment-methods, .payment-providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; }
.payment-method-option, .provider-option { position: relative; display: flex; align-items: center; min-width: 0; min-height: 76px; padding: 15px; border: 1px solid #e5eaee; border-radius: 8px; background: #fff; cursor: pointer; }
.payment-method-option:has(input:checked), .provider-option:has(input:checked) { border-color: var(--tg-secondary-color, #0D9B4D); box-shadow: 0 0 0 2px rgba(13,155,77,.14); }
.payment-method-option input, .provider-option input { width: 20px; height: 20px; margin: 0 12px 0 0; accent-color: var(--tg-secondary-color, #0D9B4D); }
.payment-method-option span { display: grid; gap: 4px; min-width: 0; }
.payment-method-option strong, .provider-option span { color: var(--tg-heading-font-color, #222); font-weight: 800; }
.payment-method-option small { color: #777; line-height: 1.45; }
.payment-method-details { display: grid; gap: 14px; padding: 16px; background: #F5F5F5; border-left: 4px solid var(--tg-secondary-color, #0D9B4D); }
.payment-method-details[hidden], .payment-method-option[hidden], .provider-option[hidden] { display: none; }
.payment-method-details p { margin: 0; color: #777; line-height: 1.55; }
.payment-confirmation { display: flex; align-items: flex-start; gap: 10px; color: var(--tg-heading-font-color, #222); font-weight: 700; line-height: 1.45; }
.payment-confirmation a { color: var(--tg-secondary-color, #0D9B4D); text-decoration: underline; }
.form-row .checkout-inline-checkbox { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; color: #777; font-size: 0.86rem; font-weight: 500; letter-spacing: normal; text-transform: none; line-height: 1.4; }
.checkout-inline-checkbox input { flex: 0 0 auto; margin-top: 3px; }
.checkout-policy-links { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 18px; border-top: 1px solid #e5eaee; }
.checkout-policy-links a { color: #777; font-size: 0.86rem; text-decoration: underline; }
.checkout-policy-links a:hover { color: var(--tg-secondary-color, #0D9B4D); }
.payment-confirmation input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; accent-color: var(--tg-secondary-color, #0D9B4D); }
.payment-providers legend, .payment-reference-label { color: var(--tg-heading-font-color, #222); font-weight: 800; }
.payment-providers legend { grid-column: 1 / -1; margin-bottom: 2px; }
.provider-option { min-height: 56px; }
.payment-reference-label { display: grid; gap: 7px; }
.payment-reference-label input { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #e5eaee; border-radius: 8px; background: #fff; font: inherit; }
.provider-instructions { padding: 12px; color: var(--tg-heading-font-color, #222) !important; background: #fff; border: 1px solid #e5eaee; white-space: pre-line; }
.payment-policy { font-size: .9rem; color: #777; }
.advance-saving strong { color: var(--tg-secondary-color, #0D9B4D); }
.advance-saving[hidden] { display: none; }
.checkout-payment-section h2, .checkout-card h2 { margin: 26px 0 14px; }
.checkout-card h2:first-child { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 700px) {
  .form-grid, .payment-methods, .payment-providers { grid-template-columns: 1fr; }
}

/* ===== Contact page (contact.html) ===== */
.contact-page { padding: 5vw 5vw 9vw; padding: clamp(32px, 5vw, 64px) clamp(18px, 5vw, 72px) clamp(54px, 9vw, 100px); background: #fff; }
.contact-hero { position: relative; display: grid; grid-template-columns: minmax(0, 620px) minmax(360px, 520px); align-items: start; width: min(100%, 1240px); margin: 0 auto; justify-content: center; gap: 4vw; gap: clamp(28px, 4vw, 52px); padding-bottom: 5vw; padding-bottom: clamp(34px, 5vw, 56px); border-bottom: 1px solid #e5eaee; }
.contact-hero h1 { color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); }
.contact-hero-copy { max-width: 620px; }
.contact-hero p { margin: 18px 0 0; font-size: 1.05rem; }
.contact-hero-panel { position: relative; display: grid; align-content: center; overflow: hidden; padding: 30px; color: #222; background: #fff; border: 1px solid #e5eaee; border-radius: 8px; box-shadow: 0 26px 70px rgba(7,28,31,0.08); }
.contact-hero-panel h2 { margin: 6px 0 0; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 3vw; font-size: clamp(1.5rem, 3vw, 1.9rem); }
.contact-hero-panel strong { display: flex; align-items: center; gap: 10px; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 1.3rem; }
.contact-hero-panel strong svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--tg-secondary-color, #0D9B4D); stroke-width: 1.6; }
.contact-hero-panel > p { margin: 10px 0 0; color: #777; }
.contact-hours { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #e5eaee; }
.contact-hours div { display: grid; gap: 4px; }
.contact-hours dt { color: var(--tg-secondary-color, #0D9B4D); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.contact-hours dd { margin: 0; color: var(--tg-heading-font-color, #222); font-weight: 800; }
.contact-hours dd a { color: inherit; }
.contact-prep, .contact-faq { margin-top: 7vw; margin-top: clamp(46px, 7vw, 78px); max-width: 1240px; margin-left: auto; margin-right: auto; }
.contact-prep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.contact-prep-grid article { position: relative; overflow: hidden; padding: 26px; background: #fff; border: 1px solid #e5eaee; border-radius: 8px; box-shadow: 0 14px 34px rgba(7,28,31,0.06); }
.contact-prep-grid span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--tg-heading-font-color, #222); background: #fff; border: 1px solid rgba(13,155,77,0.28); border-radius: 50%; font-size: 0.78rem; font-weight: 900; }
.contact-prep-grid h3 { margin: 18px 0 8px; color: var(--tg-heading-font-color, #222); font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.contact-prep-grid p { margin: 0; color: #777; }
.faq-list { display: grid; gap: 12px; max-width: 900px; }
.faq-list details { background: #fff; border: 1px solid #e5eaee; border-radius: 8px; box-shadow: 0 8px 20px rgba(7,28,31,0.05); }
.faq-list summary { position: relative; padding: 20px 52px 20px 22px; color: var(--tg-heading-font-color, #222); cursor: pointer; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; top: 50%; right: 22px; color: var(--tg-primary-color, #FAA432); font-size: 1.35rem; line-height: 1; transform: translateY(-50%); }
.faq-list details[open] summary::after { content: "-"; }
.faq-list p { margin: 0; padding: 0 22px 22px; color: #777; }
.faq-list a { color: var(--tg-secondary-color, #0D9B4D); }
.section-heading { max-width: 640px; margin: 0 auto 30px; text-align: center; }
.section-heading h2 { color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); }
.section-heading p { color: #777; }
@media (max-width: 900px) {
  .contact-hero, .contact-prep-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .contact-page { width: 100vw; max-width: 100vw; padding: 38px 16px 64px; overflow: hidden; }
  .contact-hero, .contact-hero-copy, .contact-hero-panel,
  .contact-form, .contact-form > *, .contact-prep, .contact-faq,
  .contact-prep-grid, .contact-prep-grid > *, .faq-list { width: calc(100vw - 32px); max-width: calc(100vw - 32px); min-width: 0; }
  .contact-page h1, .contact-page h2, .contact-page h3,
  .contact-page p, .contact-page a { overflow-wrap: anywhere; }
  .contact-hero-panel { padding: 24px 20px; }
  .contact-hero-action, .contact-submit { max-width: 100%; white-space: normal; text-align: center; }
  .section-heading h2 { font-size: 2rem; }
  .contact-prep-grid article { padding: 24px 20px; }
}

/* ===== About page (about.html) ===== */
.about-page { padding: 6vw 5vw 9vw; padding: clamp(38px, 6vw, 76px) clamp(18px, 5vw, 72px) clamp(54px, 9vw, 100px); background: #fff; }
.hero-actions, .contact-strip-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.about-hero, .about-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 6vw; gap: clamp(28px, 6vw, 78px); }
.about-hero { align-items: center; padding-bottom: 7vw; padding-bottom: clamp(48px, 7vw, 82px); border-bottom: 1px solid #e5eaee; }
.about-hero-copy { max-width: 760px; }
.about-page h1, .about-page h2, .about-page h3 { margin: 0; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); line-height: 1.15; }
.about-page h1 { font-size: 5.5vw; font-size: clamp(2.2rem, 5.5vw, 3.2rem); }
.about-page h2 { font-size: 4vw; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.about-page h3 { font-size: 1.2rem; line-height: 1.22; }
.about-page p { color: #777; }
.about-hero-subtitle { margin: 14px 0 0; color: var(--tg-heading-font-color, #222); font-size: 2vw; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 800; }
.about-hero-copy > p:not(.eyebrow):not(.about-hero-subtitle) { max-width: 650px; margin: 18px 0 0; font-size: 1.04rem; }
.about-quality-visual img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 20px 44px rgba(7,28,31,0.1); }
.about-mission, .about-heritage, .about-difference, .prepared-care, .about-cta { margin-top: 8vw; margin-top: clamp(54px, 8vw, 94px); }
.about-quality { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 460px); align-items: center; gap: 6vw; gap: clamp(28px, 6vw, 78px); margin-top: 8vw; margin-top: clamp(54px, 8vw, 94px); }
.about-quality-copy p:not(.eyebrow) { max-width: 520px; margin: 14px 0 0; font-size: 1.04rem; }
.about-quality-visual { justify-self: center; width: 100%; max-width: 420px; }
.heritage-grid, .about-card-grid, .care-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.about-card-grid, .care-step-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.heritage-grid article { padding: 4vw 28px; padding: clamp(26px, 4vw, 40px) 28px; text-align: center; background: #F5F5F5; border: 1px solid #e5eaee; border-radius: 8px; }
.heritage-grid h3 { margin-top: 0; }
.heritage-grid p { margin: 12px 0 0; font-size: 0.98rem; color: #777; }
.about-card-grid article, .care-step-grid article { position: relative; overflow: hidden; padding: 26px; background: #fff; border: 1px solid #e5eaee; border-radius: 8px; box-shadow: 0 14px 34px rgba(7,28,31,0.06); transition: transform 160ms ease, box-shadow 160ms ease; }
.about-card-grid article:hover, .care-step-grid article:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(7,28,31,0.1); }
.about-card-grid h3, .care-step-grid h3 { margin-top: 0; }
.about-card-grid p { margin: 12px 0 0; }
.about-card-grid span, .care-step-grid span { color: var(--tg-primary-color, #FAA432); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.08em; }
.care-step-grid article { display: grid; align-content: center; justify-items: center; min-height: 190px; text-align: center; }
.care-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 22px; color: #fff; background: var(--tg-secondary-color, #0D9B4D); border-radius: 50%; box-shadow: 0 14px 30px rgba(7,28,31,0.16); }
.care-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.care-icon svg path { fill: none !important; stroke: currentColor !important; }
.about-cta { align-items: center; padding: 5vw; padding: clamp(26px, 5vw, 44px); background: linear-gradient(145deg, #0d3323, #0D9B4D); border-radius: 8px; }
.about-cta .eyebrow { color: var(--tg-primary-color, #FAA432); }
.about-cta h2, .about-cta p { color: #fff; }
.about-cta p { max-width: 680px; margin: 12px 0 0; color: rgba(255,255,255,0.85); }
.about-cta .contact-strip-actions { justify-content: flex-end; margin-top: 0; }
.about-cta .button.ghost { color: #fff; background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
@media (max-width: 900px) {
  .about-hero, .about-cta, .about-quality { grid-template-columns: 1fr; }
  .heritage-grid, .about-card-grid, .care-step-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .heritage-grid, .about-card-grid, .care-step-grid { grid-template-columns: 1fr; }
}

/* ===== Bundles page (bundles.html) ===== */
.bundle-store-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.bundle-store-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5eaee; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 50px rgba(7,28,31,.07); transition: transform .25s ease, box-shadow .25s ease; }
.bundle-store-card:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(7,28,31,.11); }
/* Centered to match "Our Range"'s own product cards (.tg-shop-item.text-center)
   - was left-aligned (justify-items: start), inconsistent with every other
   card style on the site. */
.bundle-store-copy { display: grid; justify-items: center; gap: 8px; padding: 18px 20px 22px; background: #fff; text-align: center; }
.bundle-store-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.bundle-store-price s { color: #9a9a9a; font-size: .84rem; }
.bundle-store-price strong { color: var(--tg-heading-font-color, #222); font-size: 1.15rem; font-weight: 900; }
.bundle-store-copy h2 { margin: 0; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 1.3vw; font-size: clamp(1rem, 1.3vw, 1.1rem); font-weight: 700; line-height: 1.35; }
.bundle-store-copy .button { margin-top: 6px; width: fit-content; }
.bundle-store-visual { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #F5F5F5; cursor: pointer; }
.bundle-store-badge { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 6px 12px; color: var(--tg-heading-font-color, #222); background: #fff; border: 1px solid #e5eaee; border-radius: 999px; font-size: .68rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.bundle-store-save-badge { position: absolute; z-index: 2; top: 14px; right: 14px; padding: 6px 11px; color: var(--tg-secondary-color, #0D9B4D); background: rgba(255,255,255,.94); border: 1px solid #e5eaee; border-radius: 999px; font-size: .68rem; font-weight: 900; box-shadow: 0 6px 16px rgba(7,28,31,.1); }
.bundle-store-visual > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .4s ease; }
.bundle-store-visual:hover > img { transform: scale(1.07); }
.bundle-auto-collage { display: flex; align-items: end; justify-content: center; width: 100%; height: 100%; padding: 24px 18px; transition: transform .4s ease; }
.bundle-store-visual:hover .bundle-auto-collage { transform: scale(1.05); }
.bundle-auto-collage img { width: min(46%, 150px); height: 230px; margin: 0 -8px; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(20,20,20,.18)); }
.bundle-auto-collage img:nth-child(2) { z-index: 1; height: 250px; }
.kh-bundle-help-visual { background: radial-gradient(circle at 50% 35%, #f4ead4 0 34%, transparent 35%), linear-gradient(135deg, #0d9b4d, #0d3323); }
.bundle-store-copy p { margin: 0; color: #777; line-height: 1.6; }
@media (max-width: 900px) { .bundle-store-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .bundle-store-grid { grid-template-columns: 1fr; } }

/* Bundles have no dedicated detail page, so the review summary/list/write-a-
   review form lives inline per card behind this native <details> toggle -
   the inner [data-product-reviews] block reuses product.html's own Reviews-
   tab styling (.reviews-summary-row, .reviews-comment, .add-review, etc.
   from the template's own style.css), this only styles the toggle itself. */
/* Trigger button on each bundle card - opens the one shared, full-size
   review panel below the bundle grid (#bundle-reviews-panel in
   bundles.html, styled right below) rather than a review block squeezed
   into the card itself. */
.bundle-reviews-trigger { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 2px; padding: 0; background: none; border: 0; color: var(--tg-secondary-color, #0D9B4D); font-weight: 700; font-size: .88rem; cursor: pointer; }
.bundle-reviews-trigger:hover { text-decoration: underline; }

/* Shared bundle reviews panel - full width, sized/spaced like
   product.html's own Reviews tab (.product-desc-content, .reviews-*,
   .add-review etc. are that same template styling, unmodified). */
#bundle-reviews-panel { background: #f9f9f7; border-top: 1px solid #e5eaee; }
.bundle-reviews-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.bundle-reviews-panel-head h2 { margin: 0; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 2.4vw; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.bundle-reviews-panel-close { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; padding: 0; color: #777; background: #fff; border: 1px solid #e5eaee; border-radius: 50%; cursor: pointer; transition: background .2s ease, color .2s ease; }
.bundle-reviews-panel-close:hover { color: #fff; background: var(--tg-secondary-color, #0D9B4D); }

/* ===== Cart bundle deals: Suxnix package-card layout, live API content ===== */
.kh-cart-bundle-deals { padding: 9vw 0 9vw; padding: clamp(72px, 9vw, 116px) 0 clamp(76px, 9vw, 120px); background: #fff; }
.kh-cart-bundle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 28px; }
/* Once there are more bundles than fit in one row, script.js hands this
   same element to Slick instead of letting the grid above wrap them onto a
   second row - one scrollable row with arrows, same as every other
   carousel on the site, however many bundles get added later. The grid
   rule above is only the pre-JS/fallback layout; .slick-initialized
   (added by Slick itself) switches it to block so Slick's own slide
   positioning takes over cleanly instead of fighting the grid. Equal-
   height slides and the slide gutter use the exact technique already
   proven on .kh-recommended-shop/.kh-review-carousel elsewhere in this
   file. */
.kh-cart-bundle-grid.slick-initialized { display: block; }
.kh-cart-bundle-grid .slick-list { margin: 0 -14px; }
.kh-cart-bundle-grid .slick-track { display: flex; align-items: stretch; }
.kh-cart-bundle-grid .slick-slide { height: auto; display: flex; flex-direction: column; padding: 0 14px; }
/* Every bundle card is gray at rest and turns green only on :hover,
   reverting the instant the cursor leaves - the card JS flags for the
   single highest-saving bundle (.is-best-value) used to force its ribbon/
   border/price green permanently instead, which looked like a stuck hover
   state that never reverted. Removed that override so every card behaves
   identically, hover-triggered only. */
.kh-cart-bundle-card { display: flex; flex-direction: column; min-width: 0; padding-top: 48px; }

.kh-cart-bundle-box { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 28px 22px 22px; background: #fff; border: 4px solid #818181; border-radius: 6px; text-align: center; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.kh-cart-bundle-card:hover .kh-cart-bundle-box { transform: translateY(-3px); border-color: var(--tg-secondary-color, #0D9B4D); box-shadow: 0 20px 44px rgba(7, 28, 31, .09); }

.kh-cart-bundle-card-heading { min-height: 126px; }
.kh-cart-bundle-card-heading > span { display: block; color: #222; font-size: .85rem; font-weight: 800; text-transform: uppercase; }
.kh-cart-bundle-card-heading h3 { margin: 5px 0 8px; color: #222; font-family: var(--tg-heading-font-family); font-size: 3vw; font-size: clamp(1.8rem, 3vw, 2.35rem); font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.kh-cart-bundle-card-heading p { margin: 0; color: #555; font-size: .84rem; font-weight: 700; line-height: 1.45; }
.kh-cart-bundle-card-heading p span { margin: 0 3px; color: #a5a5a5; }
.kh-cart-bundle-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 265px; margin: 18px 0 20px; padding: 12px; background: radial-gradient(circle, rgba(13, 155, 77, .16) 0, rgba(13, 155, 77, 0) 68%); overflow: hidden; }
.kh-cart-bundle-image > img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.kh-cart-bundle-image .bundle-auto-collage { align-items: center; padding: 0; }
.kh-cart-bundle-image .bundle-auto-collage img { max-height: 230px; object-fit: contain; }
.kh-cart-bundle-price { display: flex; align-items: center; justify-content: center; margin-top: auto; }
.kh-cart-bundle-price strong { color: #222; font-family: var(--tg-heading-font-family); font-size: 4vw; font-size: clamp(2.2rem, 4vw, 3.05rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.kh-cart-bundle-price span { margin-left: 9px; color: #666; font-size: .85rem; font-weight: 700; line-height: 1.12; text-align: left; text-transform: uppercase; }
.kh-cart-bundle-total { margin: 10px 0 0; color: #818181; font-family: var(--tg-heading-font-family); font-size: 1.05rem; font-weight: 600; text-transform: uppercase; }
.kh-cart-bundle-saving { display: grid; gap: 3px; margin: 12px 0 20px; color: var(--tg-secondary-color, #0D9B4D); }
.kh-cart-bundle-saving strong { font-family: var(--tg-heading-font-family); font-size: 1.85rem; line-height: 1.1; text-transform: uppercase; }
.kh-cart-bundle-saving span { font-size: .9rem; font-weight: 700; }
.kh-cart-bundle-button { display: block; width: 100%; margin-top: auto; padding: 12px 14px 10px; color: #fff; background: var(--tg-secondary-color, #0D9B4D); border: 2px solid var(--tg-secondary-color, #0D9B4D); border-radius: 5px; font-family: var(--tg-heading-font-family); font-size: 1.35rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; cursor: pointer; transition: color .2s ease, background .2s ease; }

/* Hover handled by the unified sweep effect further down this file. */
@media (max-width: 991px) {
  .kh-cart-bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .kh-cart-bundle-deals { padding-top: 64px; }
  .kh-cart-bundle-grid { grid-template-columns: 1fr; gap: 32px; }
  .kh-cart-bundle-card { padding-top: 44px; }

  .kh-cart-bundle-box { padding: 24px 16px 18px; }
  .kh-cart-bundle-card-heading { min-height: 0; }
  .kh-cart-bundle-image { height: 240px; }
}

.form-status { margin: 0; padding: 14px 16px; color: var(--tg-heading-font-color, #222); background: #eef7e6; border: 1px solid rgba(13,155,77,0.24); border-radius: 8px; font-size: 0.94rem; font-weight: 700; }
.form-status[data-status="success"] { color: #141414; background: #eef8f1; border-color: rgba(13,155,77,0.28); }
.form-status[data-status="error"] { color: #5d3510; background: #fff6e5; border-color: rgba(250,164,50,0.32); }

.link-button { display: inline; padding: 0; border: none; background: none; color: var(--tg-secondary-color, #0D9B4D); font: inherit; text-decoration: underline; cursor: pointer; }
.link-button:hover, .link-button:focus-visible { color: var(--tg-heading-font-color, #222); }

/* ===== Order confirmation page ===== */
.legal-page { padding: 6vw 5vw 9vw; padding: clamp(38px, 6vw, 76px) clamp(18px, 5vw, 72px) clamp(64px, 9vw, 110px); background: #fff; }
.legal-hero { width: min(100%, 980px); margin: 0 auto; padding-bottom: 5vw; padding-bottom: clamp(28px, 5vw, 48px); }
.legal-hero h1 { margin: 0; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 5vw; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; }
.legal-hero p { max-width: 720px; margin: 20px 0 0; color: #777; font-size: 1.05rem; }
.button.on-light { color: var(--tg-heading-font-color, #222); border-color: #e5eaee; }
.confirmation-panel { display: grid; gap: 18px; padding: 5vw; padding: clamp(28px, 5vw, 46px); background: #fff; border: 1px solid #e5eaee; border-radius: 8px; box-shadow: 0 10px 30px rgba(7,28,31,.06); }
.order-reference { display: grid; gap: 4px; padding: 18px; background: #F5F5F5; border: 1px solid #e5eaee; border-radius: 8px; }
.order-reference span { color: #777; font-weight: 800; }
.order-reference strong { color: var(--tg-heading-font-color, #222); font-size: 1.35rem; }
.order-tracker { display: flex; align-items: flex-start; gap: 4px; margin: 0; padding: 8px 4px; list-style: none; }
.order-tracker li { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.order-tracker li:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: calc(50% + 26px); width: calc(100% - 52px); height: 2px; background: #e5eaee; }
.order-tracker li.is-done:not(:last-child)::after { background: var(--tg-secondary-color, #0D9B4D); }
.order-tracker-dot { z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; background: #fff; border: 2px solid #e5eaee; border-radius: 50%; color: #e5eaee; }
.order-tracker-dot svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.order-tracker li.is-done .order-tracker-dot { background: var(--tg-secondary-color, #0D9B4D); border-color: var(--tg-secondary-color, #0D9B4D); color: #fff; }
.order-tracker li.is-current .order-tracker-dot { border-color: var(--tg-secondary-color, #0D9B4D); color: var(--tg-secondary-color, #0D9B4D); box-shadow: 0 0 0 4px rgba(13,155,77,.16); }
.order-tracker-copy { display: grid; gap: 2px; }
.order-tracker-label { color: #777; font-size: .8rem; font-weight: 700; }
.order-tracker li.is-done .order-tracker-label, .order-tracker li.is-current .order-tracker-label { color: var(--tg-heading-font-color, #222); }
.order-tracker-time { color: #777; font-size: .66rem; font-weight: 600; white-space: nowrap; }
.order-tracker-cancelled { padding: 14px 18px; color: #952d2d; background: #fdf1f1; border: 1px solid #e7b8b4; border-radius: 8px; font-weight: 700; }
.order-tracker-note { padding: 14px 18px; color: #1c3f66; background: #eef3fb; border: 1px solid #bcd3ee; border-radius: 8px; font-weight: 700; }
.confirmation-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.confirmation-promotions { display: grid; gap: 6px; width: min(100%, 520px); margin: 16px auto; padding: 14px 16px; color: #075c3a; background: #e6f8ef; border-radius: 10px; }
.confirmation-review-prompt { display: grid; gap: 8px; margin: 18px 0; padding: 18px 20px; background: #F5F5F5; border-radius: 10px; }
.confirmation-review-prompt strong { color: #222; font-size: 1.02rem; }
.confirmation-review-prompt p { margin: 0; color: #777; }
.confirmation-review-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.confirmation-order-summary { display: grid; gap: 10px; width: min(100%, 620px); margin: 20px auto 0; padding: 18px; text-align: left; background: #fff; border: 1px solid #e5eaee; border-radius: 10px; }
.confirmation-order-summary h2 { margin: 0 0 4px; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); }
.confirmation-order-summary > div { display: flex; justify-content: space-between; gap: 16px; }
.confirmation-order-summary s { color: #777; }
.confirmation-order-total { padding-top: 10px; border-top: 1px solid #e5eaee; }
.order-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.order-detail-grid p { display: grid; gap: 4px; margin: 0; padding: 14px; background: #F5F5F5; border: 1px solid #e5eaee; border-radius: 8px; }
.order-detail-grid strong { color: var(--tg-heading-font-color, #222); }
@media (max-width: 860px) { .order-detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .order-detail-grid { grid-template-columns: 1fr; } }

/* The template's own decorative white torn-paper cutout under the sticky
   nav (.tg-menu-area::before, header_shape.png) is a fixed graphic that
   only looks right over a dark top-of-banner photo - it clashes with
   lighter or differently-composed banners, so it's removed site-wide
   rather than tied to one specific banner's colors. */
.tg-menu-area::before { content: none !important; }

/* The template's own .breadcrumb-bg points at a dimension-placeholder demo
   image (video_bg.jpg, literally reads "1920X700") - its dark overlay alone
   doesn't fully hide the placeholder text, so it was visibly bleeding
   through. Override with a real photo instead of the placeholder. */
.breadcrumb-bg {
  background-image: url(../hero-banner.jpg) !important;
  /* Site-wide: template default was 230px/150px; first pass shrunk to 70%
     (161px/105px), this pass shrinks that further by another 40%. */
  padding: 97px 0 63px !important;
}

/* Breadcrumb header band used across inner pages. */
.kh-page-header {
  background: var(--tg-secondary-color, #0D9B4D);
  padding: 70px 0;
  text-align: center;
  color: #fff;
}
.kh-page-header h1 { color: #fff; margin: 0 0 10px; font-family: var(--tg-heading-font-family); }
.kh-page-header .kh-breadcrumb { color: rgba(255,255,255,0.85); font-size: 0.95rem; }
.kh-page-header .kh-breadcrumb a { color: #fff; text-decoration: underline; }

/* The template's own .sticky-menu rule (style.css) replays a 1s fadeInDown
   keyframe - opacity 0 to 1 - every single time the class is re-added,
   and main.js used to add/remove it on every scroll tick with no state
   guard, so any jitter around the threshold restarted that fade from
   invisible repeatedly - read as the header blinking. main.js now only
   toggles on an actual state change and drives its own slide-in via an
   inline transform (see tgSetStickyHeader), so the keyframe restart is
   disabled here and this only supplies the transition it animates with. */
#sticky-header {
  transition: box-shadow .3s ease;
}
#sticky-header.sticky-menu {
  animation: none !important;
  transition: transform .32s cubic-bezier(.22, .68, 0, 1), box-shadow .3s ease;
}
/* header-fixed-height is the spacer that keeps page content from jumping
   the instant the header leaves normal flow for position:fixed - without
   a transition here that reserved height snaps in in one frame, so the
   content below still jerks down abruptly even though the header itself
   now slides in smoothly. header-top-fixed used to be toggled alongside
   it (adding a second, unrelated 138px spacer meant for a different
   header variant this site doesn't use) which nearly doubled that jump;
   main.js no longer touches it, and it's hidden here as a safety net. */
#header-fixed-height {
  overflow: hidden;
  transition: height .32s cubic-bezier(.22, .68, 0, 1);
}
#header-top-fixed {
  display: none !important;
}

/* my-account.php: sidebar-nav dashboard (Profile / Orders / Addresses /
   Password) instead of stacking every section on one long page. Panes are
   toggled by script.js based on the URL hash - kh-account-tab.js's job -
   so a page load with no JS (or JS still loading) still shows the Profile
   pane by default via [hidden] below rather than every pane at once. */
.kh-account-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.kh-account-nav { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 18px; padding: 22px; background: #fff; border: 1px solid #e5eaee; border-radius: 12px; }
.kh-account-nav-user { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #e5eaee; }
.kh-account-avatar { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; color: #fff; background: var(--tg-secondary-color, #0D9B4D); border-radius: 50%; font-size: 1.1rem; }
.kh-account-nav-user strong { display: block; color: var(--tg-heading-font-color, #222); font-size: .95rem; }
.kh-account-nav-user small { display: block; margin-top: 2px; color: #777; font-size: .8rem; word-break: break-all; }
.kh-account-nav nav { display: flex; flex-direction: column; gap: 4px; }
.kh-account-nav nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--tg-heading-font-color, #222); border-radius: 8px; font-weight: 600; font-size: .92rem; text-decoration: none; transition: background .2s ease, color .2s ease; }
.kh-account-nav nav a i { flex: 0 0 18px; color: #999; font-size: .9rem; text-align: center; transition: color .2s ease; }
.kh-account-nav nav a:hover { background: #f5f5f5; }
.kh-account-nav nav a.is-active { color: var(--tg-secondary-color, #0D9B4D); background: rgba(13, 155, 77, .1); }
.kh-account-nav nav a.is-active i { color: var(--tg-secondary-color, #0D9B4D); }
.kh-account-signout { padding-top: 16px; border-top: 1px solid #e5eaee; }
.kh-account-panes > [data-kh-account-pane][hidden] { display: none; }
@media (max-width: 991px) {
  .kh-account-layout { grid-template-columns: 1fr; }
  .kh-account-nav { position: static; }
  .kh-account-nav nav { flex-direction: row; flex-wrap: wrap; }
  .kh-account-nav nav a { flex: 1 1 auto; justify-content: center; }
}

/* Order slide bar (the cart drawer) - script.js already builds and drives
   this in full (ensureCartDrawer/renderCartDrawer/showCartDrawer, wired to
   every Add to Cart button and the header cart icon further down this
   file) using the same .cart-drawer-* markup as the AZ Herbal Care build
   this was ported from. What was missing was this CSS: those rules lived
   only in the project's old root styles.css, which no page here links
   anymore after the Suxnix rebuild, so the drawer existed in the DOM with
   the "open" class applied but no positioning/transform rules to actually
   slide it into view - it silently rendered inline instead of as an
   overlay. Colors below are Khalis Herb's own tokens (var(--tg-*), the
   same #e5eaee/#777 already used elsewhere in this file), not the old
   --pine/--leaf/--ink custom properties that CSS variables just above.*/
body.nav-open,
body.cart-drawer-open {
  overflow: hidden;
}
body.nav-open::before,
body.cart-drawer-open::before {
  content: "";
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 1040;
  background: rgba(18, 32, 25, .42);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.cart-added-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  width: min(92vw, 400px);
  height: 100dvh;
  color: var(--tg-heading-font-color, #222);
  background: #fff;
  box-shadow: -24px 0 70px rgba(18, 51, 38, .18);
  transform: translateX(105%);
  transition: transform 240ms ease;
}
body.cart-drawer-open .cart-added-drawer { transform: translateX(0); }
.cart-drawer-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 22px 22px 16px; border-bottom: 1px solid #e5eaee; }
.cart-drawer-head h2 { margin: 0; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: 1.4rem; line-height: 1.05; }
.cart-drawer-close { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; color: var(--tg-heading-font-color, #222); background: #f5f5f5; border: 1px solid #e5eaee; border-radius: 999px; cursor: pointer; font-size: 1.5rem; line-height: 1; }
.cart-drawer-shipping { flex: 0 0 auto; padding: 10px 22px 8px; background: #f5f5f5; border-bottom: 1px solid #e5eaee; }
.cart-drawer-shipping p { margin: 0 0 6px; color: var(--tg-heading-font-color, #222); font-size: .88rem; }
.cart-drawer-shipping strong { color: var(--tg-secondary-color, #0D9B4D); }
.cart-drawer-shipping.is-complete p { color: var(--tg-secondary-color, #0D9B4D); }
.cart-drawer-shipping-track { height: 6px; background: rgba(13, 155, 77, .12); border-radius: 999px; overflow: hidden; }
.cart-drawer-shipping-fill { height: 100%; width: 0%; background: var(--tg-secondary-color, #0D9B4D); border-radius: 999px; transition: width 240ms ease; }
.cart-drawer-items { display: grid; align-content: start; gap: 14px; flex: 1 1 auto; min-height: 0; padding: 18px 22px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #e5eaee transparent; }
.cart-drawer-items::-webkit-scrollbar { width: 6px; }
.cart-drawer-items::-webkit-scrollbar-thumb { background: #e5eaee; border-radius: 999px; }
.cart-drawer-empty { margin: auto 0; color: #777; text-align: center; }
.cart-drawer-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.cart-drawer-item img { width: 64px; height: 72px; object-fit: contain; background: #f5f5f5; border: 1px solid #e5eaee; border-radius: 8px; }
.cart-drawer-item-info { display: grid; gap: 2px; min-width: 0; }
.cart-drawer-item-info strong { overflow: hidden; color: var(--tg-heading-font-color, #222); font-size: .94rem; text-overflow: ellipsis; white-space: nowrap; }
.cart-drawer-item-info span { color: #777; font-size: .82rem; }
.cart-drawer-item-price { color: var(--tg-heading-font-color, #222) !important; font-weight: 600; }
.cart-drawer-item-price s { margin-right: 4px; color: #777 !important; font-weight: 400; }
.cart-drawer-item-controls { display: flex; grid-column: 2; align-items: center; justify-content: space-between; margin-top: 2px; }
.cart-drawer-qty-stepper { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px; border: 1px solid #e5eaee; border-radius: 999px; }
.cart-drawer-qty-stepper button { display: grid; width: 18px; height: 18px; place-items: center; padding: 0; color: var(--tg-heading-font-color, #222); background: none; border: 0; font-size: 1rem; line-height: 1; cursor: pointer; }
.cart-drawer-qty-stepper button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cart-drawer-qty-stepper span { min-width: 14px; text-align: center; font-size: .88rem; font-weight: 600; }
.cart-drawer-item-remove { display: grid; width: 30px; height: 30px; place-items: center; color: #777; background: none; border: 0; cursor: pointer; }
.cart-drawer-item-remove svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cart-drawer-item-remove:hover { color: var(--tg-heading-font-color, #222); }
.cart-drawer-recommend { flex: 0 0 auto; padding: 4px 22px 18px; border-top: 1px solid #e5eaee; }
.cart-drawer-recommend-title { margin: 18px 0 10px; color: var(--tg-heading-font-color, #222); font-weight: 600; }
/* One scrollable row instead of each recommended product stacking on its
   own line - with up to 4 items, stacked rows made this block tall enough
   to crowd out .cart-drawer-items' scroll area above it (flex:1 1 auto;
   min-height:0 just shrinks to whatever's left), making the actual cart
   lines hard to see without scrolling a near-zero-height sliver first. */
.cart-drawer-recommend-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.cart-drawer-recommend-list::-webkit-scrollbar { display: none; }
.cart-drawer-recommend-card { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; width: 180px; color: inherit; text-decoration: none; }
.cart-drawer-recommend-card img { width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain; background: #f5f5f5; border: 1px solid #e5eaee; border-radius: 8px; }
.cart-drawer-recommend-info { display: grid; gap: 1px; min-width: 0; }
.cart-drawer-recommend-card strong { overflow: hidden; color: var(--tg-heading-font-color, #222); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.cart-drawer-recommend-card span { color: #777; font-size: .8rem; }
.cart-drawer-summary { flex: 0 0 auto; padding: 0 22px; }
.cart-drawer-summary:empty { display: none; }
.cart-drawer-summary .summary-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; font-size: .92rem; }
.cart-drawer-summary .checkout-total { padding-top: 7px; border-top: 1px solid #e5eaee; font-size: 1.05rem; font-weight: 700; }
.cart-drawer-actions { display: grid; flex: 0 0 auto; gap: 10px; padding: 18px 22px 22px; }
.cart-drawer-actions .button.is-disabled { pointer-events: none; opacity: .5; }
@media (max-width: 560px) {
  .cart-added-drawer { width: min(94vw, 360px); }
  .cart-drawer-head, .cart-drawer-shipping, .cart-drawer-items, .cart-drawer-summary, .cart-drawer-actions { padding-right: 18px; padding-left: 18px; }
}

/* Promotion popup + homepage promo banner. script.js builds this markup on
   every page, but the rules only existed in the old root styles.css, which no
   Suxnix page links - so the popup rendered as raw unstyled text after the
   footer. Colors are Khalis Herb's own tokens (green #0D9B4D, ink #222). */
.promotion-popup-backdrop { position: fixed; z-index: 10000; top: 0; right: 0; bottom: 0; left: 0; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(20, 20, 20, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: .22s ease; }
.promotion-popup-backdrop.is-visible { opacity: 1; visibility: visible; }
.promotion-popup { position: relative; width: min(760px, calc(100vw - 36px)); max-width: 100%; box-sizing: border-box; min-height: 410px; background: #fff; border: 1px solid #e5eaee; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 90px rgba(20, 20, 20, .28); transform: translateY(18px) scale(.97); transition: .22s ease; }
.promotion-popup-backdrop.is-visible .promotion-popup { transform: none; }
.promotion-popup-body { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(280px, 1.15fr); max-height: min(92vh, 700px); overflow-y: auto; }
.promotion-popup-body > * { min-width: 0; }
.promotion-popup-close { position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; width: 40px; height: 40px; place-items: center; padding: 0; color: #222; background: #f4f7f5; border: 1px solid #e5eaee; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.promotion-popup-visual { position: relative; display: grid; place-items: center; min-height: 330px; padding: 42px 24px 24px; background: linear-gradient(160deg, #fbfaf7, #f1efe8); }
.promotion-popup-visual span { position: absolute; top: 22px; left: 20px; max-width: calc(100% - 80px); padding: 8px 14px; color: #fff; background: #0D9B4D; border-radius: 999px; font-size: .88rem; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.promotion-popup-visual img { width: 100%; height: 300px; object-fit: contain; filter: drop-shadow(0 20px 22px rgba(20, 20, 20, .16)); }
.promotion-artwork-duo { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; }
.promotion-artwork-duo img { width: 46%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(20, 20, 20, .16)); }
.promotion-artwork-plus { flex: 0 0 auto; color: #777; font-size: 1.6rem; font-weight: 800; }
.promotion-popup-copy { display: grid; align-content: center; gap: 12px; min-width: 0; padding: 42px; }
.promotion-popup-copy p { margin: 0; color: #0D9B4D; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.promotion-popup-copy h2 { margin: 0; color: #222; font-size: 4vw; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; overflow-wrap: anywhere; }
.promotion-popup-copy strong { color: #0D9B4D; font-size: 1.15rem; }
.promotion-popup-copy > span { color: #777; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; max-height: 34vh; overflow-y: auto; }
.promotion-popup-copy a { display: inline-flex; justify-content: center; width: fit-content; margin-top: 7px; padding: 14px 22px; color: #fff; background: #0D9B4D; border-radius: 999px; font-weight: 900; text-decoration: none; }
.promotion-hero-banner { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) auto; align-items: center; gap: 4vw; gap: clamp(24px, 4vw, 52px); width: min(1180px, calc(100% - 32px)); min-height: 220px; margin: 22px auto; padding: 28px 4vw; padding: 28px clamp(26px, 4vw, 48px); background: #fff; border: 1px solid #e5eaee; border-radius: 24px; box-shadow: 0 20px 50px rgba(20, 20, 20, .08); overflow: hidden; }
.promotion-banner-image { display: grid; place-items: center; height: 190px; background: linear-gradient(160deg, #fbfaf7, #f1efe8); border-radius: 16px; }
.promotion-banner-image img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(20, 20, 20, .14)); }
.promotion-banner-copy { display: grid; gap: 8px; }
.promotion-banner-copy > span { width: max-content; padding: 9px 15px; color: #fff; background: #0D9B4D; border-radius: 999px; font-size: 1.5vw; font-size: clamp(.78rem, 1.5vw, .9rem); font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.promotion-banner-copy p { margin: 0; color: #0D9B4D; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.promotion-banner-copy h2 { max-width: 620px; margin: 0; color: #222; font-size: 3.6vw; font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.06; }
.promotion-banner-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 26px; color: #fff; background: #0D9B4D; border-radius: 999px; font-weight: 900; text-decoration: none; white-space: nowrap; }
@media (max-width: 980px) { .promotion-hero-banner { grid-template-columns: 110px 1fr; } .promotion-banner-cta { grid-column: 1 / -1; } }
@media (max-width: 650px) {
  .promotion-hero-banner { grid-template-columns: 86px 1fr; gap: 14px; min-height: 0; padding: 16px; }
  .promotion-banner-image { height: 88px; }
  .promotion-popup-body { grid-template-columns: minmax(0, 1fr); }
  .promotion-popup { width: calc(100vw - 36px); }
  .promotion-popup-visual { min-height: 220px; }
  .promotion-popup-visual img { height: 190px; }
  .promotion-popup-copy { padding: 28px; }
}
@media (max-height: 520px) { .promotion-popup { min-height: 0; } .promotion-popup-body { max-height: 94vh; } .promotion-popup-visual { min-height: 0; padding: 18px 20px 10px; } }

/* Torn-paper edge under the page-header band. The image is 37px tall inside a
   36px box with background-repeat: repeat and centre positioning, so at
   fractional zoom / device pixel ratios the browser tiles it vertically and a
   hairline of the previous tile's white paper shows as a white line above the
   torn edge. Repeat across only, anchored to the bottom. */
.breadcrumb-bg::after,
.testimonial-bg::after {
  background-repeat: repeat-x !important;
  background-position: left bottom !important;
}

/* "Popular & Trending" homepage strip (renderPopularProducts() in script.js).
   Ported from the AZ Herbal Care sister project, re-pointed at Khalis Herb's
   own color tokens (green #0D9B4D, ink #222, muted #777, line #e5eaee) since
   this page never loads the old root styles.css these classes originally
   lived in - same reason the promotion popup needed its own copy here. */
.kh-popular-section { padding: 0 0 60px; }
.popular-flag { padding: 3px 10px; border-radius: 999px; background: #d8342c; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.popular-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 26px; }
/* The flex fallback for 1-2 picks (so they land centered instead of
   stretching across an otherwise-empty 3-column grid) left each card's
   width unconstrained - a flex item with no basis sizes to its own content
   (image/description), which came out to ~740px per card here, so two
   cards (1480px) could never fit side by side in the ~1110px row and
   wrapped to stack vertically instead. Capped to the same per-card width
   the 3-column grid would give a full row, so 1-2 cards sit centered on
   one line instead of overflowing onto their own. */
.popular-grid[data-count="1"] .popular-card,
.popular-grid[data-count="2"] .popular-card {
  flex: 0 1 350px;
  max-width: 350px;
}
.popular-grid[data-count="1"], .popular-grid[data-count="2"] { display: flex; justify-content: center; flex-wrap: wrap; }
.popular-card { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid #e5eaee; border-radius: 14px; background: #fff; color: #222; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.popular-card:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .1); transform: translateY(-3px); }
.popular-media { position: relative; display: block; flex: 0 0 auto; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.popular-media img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; padding: 2%; object-fit: contain; }
.popular-flag { position: absolute; top: 12px; left: 12px; z-index: 1; }
.popular-copy { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; gap: 10px; padding: 6px 22px 26px; text-align: center; }
.popular-name { color: #222; font-family: var(--tg-heading-font-family, "Oswald", sans-serif); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.popular-price { color: #0D9B4D; font-weight: 800; font-size: 1.1rem; }
.popular-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #777; font-size: .92rem; line-height: 1.55; }
.popular-cta { margin-top: auto; padding: 11px 26px; border-radius: 999px; background: #0D9B4D; color: #fff; font-weight: 700; font-size: .9rem; }
@media (max-width: 1000px) {
  /* flex-wrap: nowrap is required here, not just implied by not mentioning
     it - .popular-grid[data-count="1"/"2"] above sets flex-wrap: wrap for
     its own (desktop) centered-fallback layout, and that selector matches
     here too (media queries don't change which selectors match, only which
     rules apply on top) at equal specificity, so without overriding it
     explicitly, "wrap" carried over onto this mobile carousel: with only
     2 cards and ~78vw each, they wrapped into two left-aligned, stacked
     rows with empty space beside each one instead of forming the single
     horizontally-scrollable row this carousel is built for - confirmed
     directly (both cards measured at the same x position, stacked in y). */
  .popular-grid, .popular-grid[data-count] { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
  .popular-grid .popular-card, .popular-grid[data-count] .popular-card { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; }
}

/* Unified hover effect for every primary call-to-action button on the site -
   a circle sweeps up from below and fills the button with the accent orange,
   matching the "View Product" buttons on the Recommended Products carousel
   (.btn-two, Suxnix's own component, left as-is below - everything else here
   is re-pointed at the exact same mechanic so every button behaves the same
   way on hover). Each button keeps its own resting color; only the sweep
   destination color is shared. requires position:relative + overflow:hidden
   on the button itself to contain the circle, and z-index:1 so its own text/
   icon stays above the ::before layer. */
.tg-btn,
.popular-cta,
.promotion-banner-cta,
.home-bundle-shop,
.button.primary,
.checkout-button,
.cart-btn,
.kh-cart-bundle-button {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color .3s ease;
}
.tg-btn::before,
.popular-cta::before,
.promotion-banner-cta::before,
.home-bundle-shop::before,
.button.primary::before,
.checkout-button::before,
.cart-btn::before,
.kh-cart-bundle-button::before {
  content: "";
  position: absolute;
  top: 110%;
  left: 50%;
  z-index: -1;
  width: 200%;
  height: 200%;
  background: var(--tg-primary-color, #FAA432);
  border-radius: 50%;
  transform: translateX(-50%);
  transition: top .8s ease;
}
.tg-btn:hover::before,
.popular-cta:hover::before,
.promotion-banner-cta:hover::before,
.home-bundle-shop:hover::before,
.button.primary:hover::before,
.checkout-button:hover::before,
.cart-btn:hover::before,
.kh-cart-bundle-button:hover::before {
  top: -40%;
}
.tg-btn:hover,
.popular-cta:hover,
.promotion-banner-cta:hover,
.home-bundle-shop:hover,
.button.primary:hover,
.checkout-button:hover,
.cart-btn:hover,
.kh-cart-bundle-button:hover {
  color: #fff;
}
/* .home-bundle-shop's own arrow span and .kh-cart-bundle-button's small text
   must ride above the sweep too, same reason the button text does. */
.home-bundle-shop span,


/* The template's own .inner-shop-perched-info > .cart-btn:hover rule
   (style.css) is more specific than the unified sweep rule above and would
   otherwise win for background/border-color, producing an instant flat
   color-snap underneath the slower sweep circle instead of letting the
   sweep alone show. Neutralized here at matching specificity so only the
   sweep effect is visible. */
.inner-shop-perched-info > .cart-btn:hover {
  background: var(--tg-secondary-color, #0D9B4D);
  border-color: var(--tg-secondary-color, #0D9B4D);
}

/* One single look for every primary button site-wide: solid brand green at
   rest, a yellow circle sweeping up to fill it on hover. Two groups of
   buttons needed fixing up to match:
   (1) .tg-btn ("View Product" on Our Range, "Shop Now"/"Learn More", About
       page buttons) used the template's own green gradient background,
       which looked inconsistent next to every solid-color button elsewhere
       - flattened to the same solid green, and its own gradient-shift hover
       rule (style.css) neutralized so only the shared sweep below shows.
   (2) .btn-two (Recommended Products carousel, bundle "View Bundle" cards)
       rested on orange with a green hover sweep (Suxnix's own component) -
       recolored to match: green at rest, yellow sweep on hover, same as
       everything else. */
.tg-btn {
  background-image: none;
  background-color: var(--tg-secondary-color, #0D9B4D);
}
.tg-btn:hover {
  background-color: var(--tg-secondary-color, #0D9B4D);
}
.btn-two {
  background: var(--tg-secondary-color, #0D9B4D);
}
.btn-two::before {
  background: var(--tg-primary-color, #FAA432);
}

/* Homepage "About" section images: width/height attributes give the browser
   each image's aspect ratio up front so the section reserves its space instead
   of jumping when they finish loading (this section was the page's biggest
   layout shift). height:auto lets the width/max-width rules keep driving size. */
.tg-supplement-img img { height: auto; }

/* Older Safari (iPadOS < 15) has no aspect-ratio, so these two square image boxes
   (whose images are position:absolute, filling them) collapsed to zero height and
   the product/bundle images vanished. The classic padding-top spacer gives them the
   same square height there; where aspect-ratio IS supported it yields the same 1:1
   height, so nothing changes. */
.bundle-store-visual::before,
.popular-media::before { content: ""; display: block; padding-top: 100%; }

/* ===== Compact section spacing (site-wide) =====================================
   The Suxnix template spaces every section with 100-130px of padding top AND bottom
   (two neighbouring sections = 200-260px of blank page, plus heading margins), which
   read as huge gaps between cards. One value now drives it everywhere: --kh-sec is the
   vertical padding of each section, so two neighbours are 2x apart (80px desktop, 56px
   phones). To loosen or tighten the whole site, change just these two numbers.
   Loaded after the vendor bundle, so equal-specificity rules here win. The template's
   padding helper classes (pt-100, pb-120, section-py-130 and friends) are only ever used on
   whole-page sections in this storefront, so they are safe to override globally. */
:root { --kh-sec: 40px; }
@media (max-width: 767px) { :root { --kh-sec: 28px; } }

.pt-60, .pt-100, .pt-110, .pt-120, .pt-130, .pt-150 { padding-top: var(--kh-sec); }
.pb-60, .pb-90, .pb-100, .pb-110, .pb-120, .pb-130 { padding-bottom: var(--kh-sec); }
.section-py-130 { padding-top: var(--kh-sec); padding-bottom: var(--kh-sec); }

/* sections that set their own padding */
.kh-cart-bundle-deals, .kh-home-features, .kh-order-journey, .kh-home-reviews-carousel-section,
.tg-service-area, .inner-shop-details-area, .contact-area {
  padding-top: var(--kh-sec); padding-bottom: var(--kh-sec);
}
.kh-popular-section, .home-shop-area, .kh-recommended-shop, .contact-form-area { padding-bottom: var(--kh-sec); }
.commerce-page { padding-top: var(--kh-sec); padding-bottom: var(--kh-sec); }
.legal-hero { padding-bottom: 24px; }

/* Heading -> cards gap: the template puts mb-60 (sometimes mb-50/70) under every section title. */
.tg-section-title[class*="mb-"] { margin-bottom: 28px; }
@media (max-width: 767px) { .tg-section-title[class*="mb-"] { margin-bottom: 20px; } }

/* Product cards: the template gives every .tg-shop-item a 60px bottom margin AND each grid column
   another 40px (mb-40), on top of the section's own padding - 100px+ of blank under the buttons
   on desktop and between stacked cards on phones. The card margin now follows --kh-sec and acts
   as the section's bottom padding, so the column margin and section bottom padding are dropped. */
.tg-shop-item { margin-bottom: var(--kh-sec); }
#supplement { padding-bottom: 0; }
#supplement .tg-shop-wrapper .row > [class*="col-"] { margin-bottom: 0; }

/* ===== Unified product-card look: Our Range + Bundle deals match "Popular & Trending" ======
   Popular & Trending (.popular-card) is the reference: white card, 1px #e5eaee border, 14px
   radius, soft lift on hover, a SQUARE white image area (so every card's picture is the same
   size whatever the photo's shape), centred copy, green pill button. Our Range
   (.tg-shop-item) and the bundle cards (.kh-cart-bundle-card) used different looks - grey
   photo backgrounds of varying heights, a thick 4px grey outline with a ribbon on top - so
   the three rows never matched. This restyles them to the same card without touching any
   text, price or button markup. */

/* ---- Our Range ---- */
#supplement .tg-shop-wrapper .row > [class*="col-"] { display: flex; margin-bottom: var(--kh-sec); }
#supplement .tg-shop-item {
  display: flex; flex-direction: column; width: 100%; margin: 0; overflow: hidden;
  background: #fff; border: 1px solid #e5eaee; border-radius: 14px;
  transition: box-shadow .2s ease, transform .2s ease;
}
#supplement .tg-shop-item:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .1); transform: translateY(-3px); }
#supplement .tg-shop-thumb { position: relative; width: 100%; margin: 0; overflow: hidden; background: #fff; aspect-ratio: 1 / 1; }
/* padding-top spacer = same square on Safari < 15, which has no aspect-ratio */
#supplement .tg-shop-thumb::before { content: ""; display: block; padding-top: 100%; }
#supplement .tg-shop-thumb > a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }
#supplement .tg-shop-thumb img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; min-height: 0; padding: 2%; object-fit: contain;
  max-height: none !important; /* the markup carries an inline max-height:420px */
}
#supplement .tg-shop-content { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; gap: 10px; padding: 6px 22px 26px; }
#supplement .tg-shop-content .title { margin: 0; font-size: 1.3rem; font-weight: 600; line-height: 1.2; text-transform: none; }
#supplement .tg-shop-content .title a { color: #222; }
#supplement .tg-shop-price { color: #0D9B4D; font-size: 1.1rem; font-weight: 800; }
#supplement .tg-shop-content > div:last-child { margin-top: auto !important; }

/* ---- Bundle deals ---- */
.kh-cart-bundle-card { position: relative; padding-top: 0; }


.kh-cart-bundle-box {
  flex: 1; align-items: center; padding: 0; overflow: hidden; text-align: center;
  background: #fff; border: 1px solid #e5eaee; border-radius: 14px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.kh-cart-bundle-card:hover .kh-cart-bundle-box { border-color: #e5eaee; box-shadow: 0 14px 34px rgba(0, 0, 0, .1); transform: translateY(-3px); }
/* picture first, square, like .popular-media (the markup order is heading, picture, price...) */
.kh-cart-bundle-image { order: -1; position: relative; display: block; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; background: #fff; aspect-ratio: 1 / 1; }
.kh-cart-bundle-image::before { content: ""; display: block; padding-top: 100%; }
.kh-cart-bundle-image > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; padding: 2%; object-fit: contain; mix-blend-mode: multiply; }
.kh-cart-bundle-image .bundle-auto-collage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; align-items: center; height: auto; padding: 6%; }
.kh-cart-bundle-image .bundle-auto-collage img { height: 86%; max-height: none; object-fit: contain; }
.kh-cart-bundle-box > :not(.kh-cart-bundle-image) { box-sizing: border-box; width: 100%; padding-left: 22px; padding-right: 22px; }
.kh-cart-bundle-card-heading { min-height: 0; padding-top: 6px; }
.kh-cart-bundle-card-heading > span { margin-bottom: 4px; color: #777; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.kh-cart-bundle-card-heading h3 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 600; line-height: 1.2; text-transform: none; }
.kh-cart-bundle-card-heading p { color: #777; font-size: .92rem; font-weight: 400; line-height: 1.55; }
.kh-cart-bundle-price { margin-top: 10px; }
.kh-cart-bundle-price strong { color: #0D9B4D; font-family: "Roboto", sans-serif; font-size: 1.35rem; font-weight: 800; letter-spacing: 0; }
.kh-cart-bundle-price span { margin-left: 8px; color: #777; font-size: .72rem; }
.kh-cart-bundle-total { margin: 6px 0 0; color: #777; font-family: "Roboto", sans-serif; font-size: .9rem; font-weight: 500; text-transform: none; }
.kh-cart-bundle-saving { gap: 2px; margin: 10px 0 16px; }
.kh-cart-bundle-saving strong { font-family: "Roboto", sans-serif; font-size: 1.05rem; font-weight: 800; }
.kh-cart-bundle-saving span { font-size: .85rem; font-weight: 600; }
.kh-cart-bundle-button {
  display: inline-block; width: auto; margin: auto 0 26px; padding: 11px 26px; border: 0; border-radius: 999px;
  font-family: "Roboto", sans-serif; font-size: .9rem; font-weight: 700; line-height: 1.3; letter-spacing: normal; text-transform: none;
}
.kh-cart-bundle-box > .kh-cart-bundle-button { width: auto; padding-left: 26px; padding-right: 26px; }

@media (max-width: 640px) {
  .kh-cart-bundle-card { padding-top: 0; }

  .kh-cart-bundle-box { padding: 0; }
  .kh-cart-bundle-image { height: auto; }
}