/* 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-top: 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 already equalizes each .slick-slide's height to the
   tallest one, this just keeps each card's own content aligned within it,
   with the button always pinned to the bottom. */
.kh-recommended-shop .home-shop-item { display: flex; flex-direction: column; height: 100%; }
.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; }

/* .slick-arrow/.slick-next default to left:-100px/right:-100px, tuned for
   a carousel that sits inside a .container with room to spare on either
   side - this one runs full-bleed with no such margin, so the arrows are
   pulled back inside the viewport edge instead of hanging off it. */
.kh-recommended-shop .slick-arrow { left: 12px; }
.kh-recommended-shop .slick-arrow.slick-next { right: 12px; left: auto; }
.trust-ticker { display: flex; width: 100%; min-height: 46px; align-items: center; overflow: hidden; }
.trust-ticker-track { display: flex; width: max-content; align-items: center; animation: khTrustTicker 22s linear infinite; white-space: nowrap; will-change: transform; }
.trust-ticker-set { display: flex; flex: 0 0 100vw; width: 100vw; align-items: center; justify-content: space-around; gap: clamp(24px, 4vw, 64px); padding: 0 clamp(18px, 4vw, 56px); }
.trust-ticker-set span { position: relative; flex: 0 0 auto; color: rgba(255, 255, 255, 0.94); font-size: clamp(0.82rem, 1.3vw, 0.98rem); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; 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; }
  .trust-ticker-track { animation-duration: 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: 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 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: 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: 72px !important; height: 72px; flex: 0 0 auto; object-fit: cover; transform: scale(1.9); }
/* 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 { transform: scale(1.65); }

/* Floating WhatsApp action. The legacy stylesheet used to own this rule;
   Suxnix pages do not load that stylesheet, so keep the component here too. */
.floating-order {
  position: fixed;
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(18px, 3vw, 34px);
  z-index: 99;
  display: inline-flex;
  width: 56px;
  height: 56px;
  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: transform .18s ease, box-shadow .18s ease;
}
.floating-order:hover { color: #fff; box-shadow: 0 20px 40px rgba(31, 122, 70, .32); transform: translateY(-3px); }
.floating-order svg { display: block; width: 30px; height: 30px; fill: currentColor; stroke: none; }
.floating-order svg path { fill: currentColor !important; stroke: none !important; }

@media (max-width: 575px) {
  .kh-brand-lockup { gap: 7px; }
  .kh-brand-lockup img { width: 54px !important; height: 54px; }
  .floating-order { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

/* 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: clamp(30px, 5vw, 64px);
  padding: 40px clamp(18px, 5vw, 72px) clamp(40px, 5vw, 60px);
  background: #fff;
}
.product-view-gallery { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: stretch; gap: 18px; }
.product-view-stage { position: relative; height: 100%; }
.product-view-stage-inner { width: 100%; height: 100%; min-height: 380px; background: #fff; border: 1px solid #e5eaee; border-radius: 8px; overflow: hidden; }
.product-view-stage-inner img { display: block; width: 100%; height: 100%; 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: grid; grid-auto-rows: min-content; gap: 10px; }
.product-view-thumbs[hidden] { display: none; }
.product-view-thumb { display: grid; place-items: center; aspect-ratio: 1; padding: 4px; background: #fff; border: 2px solid #e5eaee; border-radius: 10px; cursor: pointer; }
.product-view-thumb.is-active { border-color: var(--tg-secondary-color, #0D9B4D); }
.product-view-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* .product-view-gallery's grid assumes a thumb-rail-then-stage child order
   (74px | 1fr) from the older generic product page. shop-details.html's
   layout stacks the image stage on top with a thumbnail row underneath
   instead, which is the order used inside .inner-shop-details-flex-wrap -
   overridden to a simple stack so the stage isn't squeezed into a 74px
   column whenever a product has more than one photo. */
.inner-shop-details-flex-wrap .product-view-gallery { display: block !important; }
/* Thumbnails divide the same 605px width as the main photo evenly between
   however many exist (up to the admin's 6-photo limit) - large tiles like
   the reference mock, not small icons, and the row always matches the
   stage's own width whether a product has 2 photos or 6. */
.inner-shop-details-flex-wrap .product-view-thumbs { display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 16px; width: 605px; max-width: 100%; }
.inner-shop-details-flex-wrap .product-view-thumb { width: auto; height: auto; flex: 1 1 0; min-width: 0; aspect-ratio: 1; overflow: hidden; }

/* Fixed main-photo frame, same for every product regardless of what size or
   aspect ratio its uploaded image is - width:100%/height:100% alone (the
   base rule above) has no defined height to resolve against once the
   gallery went from a grid to a block stack, so the box was inheriting the
   raw image's own height instead of a consistent frame. object-fit:contain
   (base rule) keeps the photo itself undistorted inside this fixed box. */
.inner-shop-details-flex-wrap .product-view-stage-inner {
  width: 605px;
  height: 580px;
  max-width: 100%;
  min-height: 0;
  margin: 0 auto;
}
.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: 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: 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 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: 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: 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: clamp(76px, 9vw, 110px) 0; background: #fff url(../customer-comments-background.png) center / cover no-repeat; 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: none; padding-right: 0; padding-left: 0; }
.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: var(--tg-secondary-color, #0D9B4D); }
.kh-home-reviews-carousel-section .tg-section-title .title.white-text { color: var(--tg-heading-font-color, #222); }
.kh-review-carousel-shell { position: relative; width: 100%; padding: 0 18px; }
.kh-review-carousel { margin: 0; }
.kh-review-carousel .slick-track { display: flex !important; align-items: stretch; }
.kh-review-carousel .slick-slide { display: flex !important; float: none; width: 221px; height: 194px !important; padding: 0 14px; }
.kh-review-carousel .slick-slide > div,
.kh-review-slide { display: flex; width: 194px; height: 194px; }
.kh-home-review-card { display: flex; flex: none; width: 194px; height: 194px; min-height: 0; padding: 20px 18px; overflow: hidden; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .16); }
.kh-home-review-card .tg-testimonial-content { display: flex; width: 100%; flex-direction: column; }
.kh-home-review-card .tg-testimonial-content .rating { margin-bottom: 13px; color: var(--tg-primary-color, #FAA432); font-size: .74rem; letter-spacing: 2px; }
.kh-home-review-card .tg-testimonial-content .title { margin: 0 0 10px; color: #222; font-family: var(--tg-heading-font-family); font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.kh-home-review-card .kh-home-review-comment { display: -webkit-box; margin: 0 0 13px; overflow: hidden; color: #555; font-size: .78rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.kh-home-review-card .tg-testimonial-content .tg-testi-avatar-info { margin: auto 0 0; padding-top: 13px; color: var(--tg-secondary-color, #0D9B4D); border-top: 1px solid #e8ece9; font-size: .68rem; font-weight: 800; }
.kh-review-carousel .slick-arrow { position: absolute; z-index: 3; top: 50%; 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-prev { left: -36px; }
.kh-review-carousel .slick-next { right: -36px; }
.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-shell { padding: 0 6px; }
  .kh-review-carousel .slick-slide { width: 203px; height: 194px !important; padding: 0 6px; }
  .kh-review-carousel .slick-prev { left: -20px; }
  .kh-review-carousel .slick-next { right: -20px; }
  .kh-review-carousel .slick-arrow { width: 40px; height: 40px; font-size: 1rem; }
  .kh-home-review-card { width: 194px; height: 194px; min-height: 0; padding: 18px 16px; border-radius: 14px; }
}
.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: 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: 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: 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: 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: 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) {
  .product-view-gallery { grid-template-columns: 1fr; }
  .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: clamp(38px, 6vw, 76px) clamp(18px, 5vw, 72px) clamp(64px, 9vw, 110px); }
.commerce-hero { max-width: 980px; 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: clamp(2rem, 5vw, 3rem); line-height: 1.1; }
.commerce-hero p:not(.eyebrow) { max-width: 760px; color: #777; font-size: clamp(1rem, 1.8vw, 1.15rem); }
.cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); 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: 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; transition: background .15s ease;
}
.button.primary:hover, .checkout-button:hover { background: var(--tg-primary-color, #FAA432); color: #fff; }
.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: 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: clamp(28px, 4vw, 52px); 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: 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: 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: 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: clamp(28px, 6vw, 78px); }
.about-hero { align-items: center; 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: clamp(2.2rem, 5.5vw, 3.2rem); }
.about-page h2 { 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: 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: clamp(54px, 8vw, 94px); }
.about-quality { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 460px); align-items: center; gap: clamp(28px, 6vw, 78px); 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: 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: 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); }
.bundle-store-copy { display: grid; justify-items: start; gap: 8px; padding: 18px 20px 22px; background: #fff; }
.bundle-store-price { display: flex; align-items: baseline; 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: 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; 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; } }

/* ===== Cart bundle deals: Suxnix package-card layout, live API content ===== */
.kh-cart-bundle-deals { padding: clamp(72px, 9vw, 116px) 0 clamp(76px, 9vw, 120px); background: #fff; }
.kh-cart-bundle-heading { max-width: 780px; margin: 0 auto clamp(38px, 5vw, 58px); }
.kh-cart-bundle-heading > span { display: block; margin-bottom: 10px; color: var(--tg-secondary-color, #0D9B4D); font-family: var(--tg-heading-font-family); font-size: .95rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.kh-cart-bundle-heading h2 { margin: 0; color: var(--tg-heading-font-color, #222); font-family: var(--tg-heading-font-family); font-size: clamp(2.25rem, 5vw, 3.65rem); font-weight: 700; line-height: 1.08; text-transform: uppercase; }
.kh-cart-bundle-heading p { max-width: 620px; margin: 15px auto 0; color: #686868; font-size: 1rem; }
.kh-cart-bundle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 28px; }
.kh-cart-bundle-card { display: flex; flex-direction: column; min-width: 0; padding-top: 48px; }
.kh-cart-bundle-ribbon { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: -48px 0 14px; padding: 8px 14px; color: #fff; background: #818181; border-radius: 6px; font-family: var(--tg-heading-font-family); font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.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:hover .kh-cart-bundle-ribbon,
.kh-cart-bundle-card.is-best-value .kh-cart-bundle-ribbon { background: var(--tg-secondary-color, #0D9B4D); }
.kh-cart-bundle-card.is-best-value .kh-cart-bundle-box { border-color: var(--tg-secondary-color, #0D9B4D); }
.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: 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: grid; place-items: 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: 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-card.is-best-value .kh-cart-bundle-price strong,
.kh-cart-bundle-card.is-best-value .kh-cart-bundle-price span { color: var(--tg-secondary-color, #0D9B4D); }
.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; }
.kh-cart-bundle-button small { display: block; margin-top: 5px; font-family: var(--tg-body-font-family, sans-serif); font-size: .66rem; font-weight: 600; letter-spacing: .01em; text-transform: none; }
.kh-cart-bundle-button:hover,
.kh-cart-bundle-button:focus-visible { color: var(--tg-secondary-color, #0D9B4D); background: #fff; }
@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-ribbon { min-height: 44px; margin-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: 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: 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: 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: 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;
  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: 14px 22px; background: #f5f5f5; border-bottom: 1px solid #e5eaee; }
.cart-drawer-shipping p { margin: 0 0 8px; 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: 14px 0 12px; color: var(--tg-heading-font-color, #222); font-weight: 600; }
.cart-drawer-recommend-list { display: grid; gap: 8px; }
.cart-drawer-recommend-card { display: flex; align-items: center; gap: 10px; 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: 6px 0; font-size: .92rem; }
.cart-drawer-summary .checkout-total { padding-top: 10px; 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; 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: 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: clamp(24px, 4vw, 52px); width: min(1180px, calc(100% - 32px)); min-height: 220px; margin: 22px auto; 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: 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: 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; } }