/** Shopify CDN: Minification failed

Line 4652:41 Unexpected "\x01"

**/
/* ------------------------------------------------------------------

   KORE custom styles



   Lives here instead of the theme editor's "Custom CSS" box, which

   Shopify caps at 500 characters. There is no limit in this file.

   Loaded from layout/theme.liquid, just above </head>.



   NOTE ON !important

   Atlas prints each block's CSS inline in the page body, which loads

   after this file. At equal specificity the later rule wins, so any

   rule here that overrides an Atlas default needs !important or it

   will silently do nothing.

   ------------------------------------------------------------------ */





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

   1. PRODUCT BENEFIT LIST

   Circulation / Focus / Memory / Energy



   Was a two-column row of pills carrying one bold phrase each. It is

   now a single-column list - bold term, en dash, sentence - which is

   the shape the reference PDPs use and the only shape a sentence fits.

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



/* Pill chrome has no place on a list. The white fill is a block

   setting (pill_background), and left on it drew a white card behind

   every row INSIDE the tinted panel - a box within a box. */

.emoji-benefits-container ul li {

  background: transparent !important;

  box-shadow: none !important;

  border-color: transparent !important;

  border-width: 0 !important;

  padding-left: 0 !important;

  padding-right: 0 !important;

  align-items: flex-start !important;

  /* The block writes style="gap: 8px !important" INLINE on the list, and an

     inline !important outranks a stylesheet !important - so setting `gap`

     here did nothing and the rows stayed at 8px. Margin is not set inline,

     so it lands: 8 inline + 12 here = the ~20px the reference runs. */

  margin-bottom: 4px !important;

  column-gap: 8px !important;

}



.emoji-benefits-container ul li:last-child {

  margin-bottom: 0 !important;

}



/* One column, on a tinted panel so the four read as one grouped block

   rather than four loose lines. Atlas drops to flex-wrap under 768px,

   which is what let the old right-hand pills start at ragged x

   positions, so the grid is forced rather than inherited. */

.emoji-benefits-container ul {

  display: grid !important;

  grid-template-columns: 1fr !important;

  background: #fdf4ec !important;

  border-radius: 12px !important;

  padding: 14px !important;

  margin: 0 !important;

}



/* The tick. Two problems the block creates on its own:



   It ships a 50px raster, which dwarfs a single line of text, so an

   inline SVG replaces it - a filled PNG cannot be restyled into the

   outline the reference uses.



   And the block then paints `fill` onto whatever SVG it is given,

   which flooded the outlined square into a solid tile, and sizes it by

   width only, which squashed a 24x24 icon to 14x18. Hence fill:none,

   an explicit stroke, and both dimensions pinned. */

.emoji-benefits-container ul li img {

  width: 18px !important;

  height: 18px !important;

  flex: 0 0 18px !important;

  margin-right: 0 !important;

  margin-top: 1px !important;

}



.emoji-benefits-container ul li svg {

  width: 18px !important;

  height: 18px !important;

  min-width: 18px !important;

  flex: 0 0 18px !important;

  margin-right: 0 !important;

  margin-top: 1px !important;

  fill: none !important;

  stroke: #3e7a5e !important;

  overflow: visible !important;

}



.emoji-benefits-container ul li svg rect,

.emoji-benefits-container ul li svg path,

.emoji-benefits-container ul li svg polyline {

  fill: none !important;

  stroke: #3e7a5e !important;

  stroke-width: 1.7 !important;

  stroke-linecap: round !important;

  stroke-linejoin: round !important;

}



/* Term bold, sentence regular. The block emits whatever HTML the

   setting holds, so the <strong> around the term does the weight and

   everything else has to be reset back to normal here. */

.emoji-benefits-container .bullet-point-text {

  font-weight: 400 !important;

  line-height: 1.4 !important;

}



.emoji-benefits-container .bullet-point-text strong {

  font-weight: 700 !important;

}



/* breathing room between the list and the bundle block underneath */

.emoji-benefits-container {

  margin-bottom: 16px !important;

}





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

   2. BUNDLE UPSELL BANNER  ("+ FREE 4th Bottle")

   Rendered by the Atlas Bundler app, not by the theme.

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



/* thinner band with even padding top and bottom */

.bundle-qty-upsell-product-inner {

  align-items: center !important;

  padding-top: 8px !important;

  padding-bottom: 8px !important;

}



/* The app stacks the two prices, making that column twice the height of

   everything else and pulling the row off centre. One line fixes it. */

.bundle-qty-upsell-product-price {

  flex-direction: row !important;

  align-items: center !important;

  gap: 6px !important;

  align-self: center !important;

}



/* collapse the line boxes so glyphs sit on the true centre line rather

   than riding high inside a tall line box */

.bundle-qty-upsell-product-info,

.bundle-qty-upsell-product-info *,

.bundle-qty-upsell-product-price,

.bundle-qty-upsell-product-price * {

  line-height: 1 !important;

}



/* every child on the same centre line */

.bundle-upsell-checkbox-container,

.bundle-qty-upsell-product-image,

.bundle-qty-upsell-product-info {

  align-self: center !important;

  margin-top: 0 !important;

  margin-bottom: 0 !important;

}





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

   3. STAR RATING JUMPS TO THE REVIEWS

   Paired with the Custom Liquid block that does the scrolling.

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



.product-reviews {

  cursor: pointer !important;

}



.product-reviews:hover .rating-text {

  text-decoration: underline !important;

}



/* keep the sticky header from covering the heading on arrival */

[id*="__testimonials"] {

  scroll-margin-top: 90px !important;

}





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

   4. PRODUCT GALLERY CONTROLS

   Matching the reference PDPs: image only, no chrome around it.

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



/* prev / next arrows floating over the main image */

.gallery-nav-buttons,

.gallery-nav-btn {

  display: none !important;

}



/* The thumbnail strip, the grey progress dots AND the thumbnail's own

   arrows all live inside this one element, so hiding it removes all

   three. Safe to hide: the gallery is a real overflow scroller with

   scroll-snap-type: x mandatory, so swiping still moves between the

   7 slides without any visible control. */

.thumbnail-slider {

  display: none !important;

}





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

   5. GALLERY PEEK

   The next slide shows at the right edge so the gallery reads as

   scrollable. With the thumbnails and dots hidden there is otherwise

   nothing telling a visitor more images exist.



   Slides are flex: 1 0 auto at full container width by default, so the

   next one sits entirely off screen. Sizing them by a fixed subtraction

   rather than a percentage keeps the peek the same width on every

   phone: 52px removed, 16px of which is the column gap, leaving a 36px

   sliver of the next image - a quarter narrower than the 48px it

   started at, which hands those 12px back to the product shot.

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



@media screen and (max-width: 768px) {

  .product__media-list.grid--peek {

    column-gap: 16px !important;

  }



  .product__media-list.grid--peek > li {

    flex: 0 0 calc(100% - 52px) !important;

    max-width: calc(100% - 52px) !important;

  }

}





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

   6. SPACE UNDER THE PRODUCT TITLE

   The title block and the text block beneath it sat flush - a measured

   gap of exactly 0px - so the sentence read as part of the heading.



   The margin goes on the TITLE rather than on the text block: the text

   block is identified only by a generated hash class that changes if

   the block is rebuilt in the editor, and the one structural selector

   available depends on an inline <style> tag happening to sit between

   them. Pushing from the title is stable either way.

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



.product__title {

  margin-bottom: 9px !important;   /* 12px read too loose; cut 25% */

}





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

   7. NO TAP-TO-ZOOM ON THE GALLERY

   Tapping a product image opened Atlas's lightbox modal. On a PDP

   whose images are already full-width infographics there is nothing

   to magnify, and the modal just interrupts the scroll.



   Both halves have to go: the magnifier badge in the corner, and the

   invisible full-bleed button behind the image. Hiding only the badge

   leaves the image itself still tappable.

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



.product__media-icon--lightbox,

.product__media-zoom-lightbox,

.product__modal-opener .product__media-toggle {

  display: none !important;

  pointer-events: none !important;

}



/* the wrapper keeps its own handler, so it is made transparent to

   pointer events; touches fall through to the scroller underneath and

   swiping is unaffected */

.product__modal-opener--image {

  pointer-events: none !important;

  cursor: default !important;

}





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

   8. URGENCY BLOCK ABOVE THE BUNDLE

   Rule / label / rule, then a tinted bubble carrying the countdown.

   Colours are taken from the benefit panel so the two read as one

   system rather than two different designers.

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



.kore-urgency {

  margin: 18px 0 14px !important;

}



.kore-urgency__head {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

}



/* the rules flex so the label stays centred whatever its length */

.kore-urgency__rule {

  flex: 1 1 auto !important;

  height: 1px !important;

  background: #edd7c2 !important;

}



.kore-urgency__label {

  flex: 0 0 auto !important;

  font-weight: 700 !important;

  font-size: 13px !important;

  letter-spacing: 0.02em !important;

  color: #8a3e12 !important;

  white-space: nowrap !important;

}



.kore-urgency__timer {

  margin-top: 10px !important;

  padding: 12px 14px !important;

  border-radius: 10px !important;

  background: #fdf4ec !important;   /* same tint as the benefit panel */

  color: #8a3e12 !important;

  font-weight: 700 !important;

  font-size: 15px !important;

  text-align: center !important;

}



/* tabular figures stop the digits jittering as the seconds tick */

.kore-urgency__timer [data-kore-countdown] {

  font-variant-numeric: tabular-nums !important;

  font-feature-settings: "tnum" 1 !important;

}





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

   9. FREE 4th BOTTLE UPSELL - BACKGROUND

   The Bundler app paints this band #eacca5 from its own settings.

   Matched to the countdown bubble so the two tinted blocks in the buy

   box are one colour rather than two near-misses.

   The countdown itself is untouched.

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



.bundle-qty-upsell-product {

  background: #fdf4ec !important;

  background-color: #fdf4ec !important;

}





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

   10. BUNDLE RIBBONS  ("Most Popular" / "Free Shipping")



   The Bundler app has no ribbon slot - its own .bundle-qty-badge is

   already spent on "N Month Supply" inside the card. But it wraps each

   option in a div that is already position:relative and

   overflow:visible, so the ribbon can hang off the top edge from a

   pseudo-element with no markup and no app change.



   The option card itself is overflow:hidden, so anything drawn inside

   it would be clipped - the ribbon has to live on the wrapper.

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



.atlas-bundler-offers > .positionRelative:nth-child(2),

.atlas-bundler-offers > .positionRelative:nth-child(3) {

  margin-top: 14px !important;

}



.atlas-bundler-offers > .positionRelative:nth-child(2)::after,

.atlas-bundler-offers > .positionRelative:nth-child(3)::after {

  position: absolute !important;

  top: -10px !important;

  right: 16px !important;

  z-index: 3 !important;

  padding: 3px 12px !important;

  border-radius: 999px !important;

  background: #b95714 !important;

  color: #fff !important;

  font-size: 11px !important;

  font-weight: 700 !important;

  letter-spacing: 0.02em !important;

  line-height: 1.6 !important;

  white-space: nowrap !important;

  /* must not swallow the tap that selects the option */

  pointer-events: none !important;

}



.atlas-bundler-offers > .positionRelative:nth-child(2)::after {

  content: "Most Popular" !important;

}



.atlas-bundler-offers > .positionRelative:nth-child(3)::after {

  content: "Best Value" !important;

}





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

   11. BUY BOX - DELIVERY ETA, AND THE QUANTITY ROW REMOVED



   The "Quantity : Subtotal" row is hidden rather than deleted from the

   template: the quantity inputs live in that same block and the

   Bundler drives them, so pulling the block would take the working

   inputs with it. They are already display:none - only the label row

   was ever visible.

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



.product-block-ASG0xeXlEbnpBTjVPM__quantity_selector_BqH8Bi > .product-info-header {

  display: none !important;

}



.kore-delivery {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  margin: 0 0 12px !important;

  padding: 10px 14px !important;

  border-radius: 10px !important;

  background: #fdf4ec !important;

  color: #111111 !important;      /* label in black, as the reference sets it */

  font-size: 14px !important;

  font-weight: 600 !important;

  text-align: center !important;

}



/* the date itself stays dark brown, so it still reads as the highlight */

.kore-delivery u {

  color: #8a3e12 !important;

}



.kore-delivery .kore-ic {

  flex: 0 0 auto !important;

  color: #b95714 !important;

}



.kore-delivery u {

  text-decoration-thickness: 1px !important;

  text-underline-offset: 2px !important;

}



/* the guarantee moved INTO the button, so the standalone line goes */

.kore-guarantee {

  display: none !important;

}



/* two stacked lines inside the Add to cart button */

.atc-button .product-form-button-text {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  /* Two separate culprits opened the gap between the lines.

     1. The theme hands down line-height: 18px, so the 11px second line sat in

        an 18px box - 3.5px of dead space above AND below.

     2. The same rule sets gap: 8px on this flex container, which is added

        between the two lines on top of everything else.

     Killing the gap is the one that actually mattered. */

  line-height: 1.15 !important;

  gap: 0 !important;

  row-gap: 0 !important;

}



.kore-atc-main {

  font-size: 15px !important;

  font-weight: 500 !important;

  line-height: 1.15 !important;

}



/* the divider is an <i> purely so it can be dimmed without dimming the

   price beside it */

.kore-atc-main i {

  font-style: normal !important;

  opacity: 0.5 !important;

  margin: 0 3px !important;

}



/* the was-price reads smaller and lighter than the live price, as the

   reference sets it - at the same 17px it competed with the real number */

.kore-atc-main s {

  margin-left: 7px !important;

  font-size: 13px !important;

  font-weight: 500 !important;

  opacity: 0.55 !important;

}



.kore-atc-sub {

  margin-top: 2px !important;

  font-size: 11px !important;

  font-weight: 500 !important;

  line-height: 1.1 !important;

  opacity: 0.9 !important;

}





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

   12. ADD TO CART BUTTON - HEIGHT AND CENTRING

   20% taller. Set as min-height rather than padding: the button has no

   padding of its own and sizes off its content, so padding alone gets

   absorbed instead of adding height. 46px measured -> 55px.



   The button is also made a centring flex container, because a

   min-height taller than the content leaves that content sitting at

   the top of the box otherwise.

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



/* The theme sets BOTH height: 46px and min-height: 46px at a specificity

   that beat a bare .atc-button rule, so min-height alone was ignored.

   Three classes plus the parent wins, and height has to be set too -

   raising only min-height leaves the explicit height in charge. */

.product-form__buttons .atc-button.product-form-button {

  height: 55px !important;

  min-height: 55px !important;

}



.atc-button {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  text-align: center !important;

}



.atc-button .product-form-button-text {

  width: 100% !important;

  text-align: center !important;

}





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

   13. UNDER THE BUTTON - REFILLS ROW AND GUARANTEE BOX

   Burnt orange here is #8a3e12, the same value already carried by

   "LIMITED INVENTORY AVAILABLE", "Offer expires in" and the delivery

   date, so the buy box holds one accent rather than several.

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



.kore-refills {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  flex-wrap: nowrap !important;

  gap: 3px !important;

  margin: 12px 0 0 !important;

  /* 11.4px is the measured ceiling for one line with this wording: at 12px

     the two statements need 348px against 335px of phone width. The limit is

     the text, not the icons or the gaps - tightening both only recovered 6px.

     Dropping the word "Ship" would bring 12px down to 316px and fit easily. */

  font-size: 11.4px !important;

  color: #3a3a3a !important;

}



.kore-refills__item {

  display: inline-flex !important;

  align-items: center !important;

  gap: 3px !important;

  white-space: nowrap !important;

  /* must not shrink, or the browser compresses the text instead of the row

     honestly overflowing - which is what made it look like it fit */

  flex: 0 0 auto !important;

}



/* The theme collapses bare <svg> to zero width, so the icons were present in

   the markup, correctly stroked, and rendering as nothing. Width has to be

   pinned explicitly and the flex basis with it. */

.kore-refills svg {

  width: 12px !important;

  height: 12px !important;

  min-width: 12px !important;

  flex: 0 0 12px !important;

  display: inline-block !important;

}







/* the divider between the two statements */

.kore-refills__sep {

  width: 1px !important;

  height: 14px !important;

  background: #d8d2cc !important;

  flex: 0 0 1px !important;

}



.kore-gbox {

  display: flex !important;

  align-items: center !important;

  gap: 13px !important;

  margin: 14px 0 0 !important;

  padding: 14px !important;

  border: 1px dashed #e6c4a6 !important;

  border-radius: 12px !important;

  background: #fdf4ec !important;

}



.kore-gbox .kore-seal {

  flex: 0 0 46px !important;

}



.kore-gbox__title {

  font-size: 14px !important;

  font-weight: 700 !important;

  color: #1a1a1a !important;

  line-height: 1.3 !important;

}



.kore-gbox__text {

  margin-top: 3px !important;

  font-size: 13px !important;

  line-height: 1.4 !important;

  color: #5a4636 !important;

}



.kore-gbox__text b {

  font-weight: 700 !important;

  color: #8a3e12 !important;

}





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

   14. LOW STOCK WARNING

   Same dashed-outline treatment as the guarantee box above it, in red

   so the two read as a pair rather than as unrelated panels.

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



.kore-warn {

  margin: 12px 0 0 !important;

  padding: 13px 15px !important;

  border: 1px dashed #f0b9b3 !important;

  border-radius: 12px !important;

  background: #fff5f4 !important;

}



.kore-warn__head {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  font-size: 13px !important;

  font-weight: 700 !important;

  color: #d8382c !important;

}



/* the theme collapses a bare svg to zero width, so this is pinned the same

   way the refills icons had to be */

.kore-warn__ic {

  width: 17px !important;

  height: 17px !important;

  min-width: 17px !important;

  flex: 0 0 17px !important;

  display: inline-block !important;

}



.kore-warn__text {

  margin: 6px 0 0 !important;

  font-size: 12.5px !important;

  line-height: 1.45 !important;

  color: #c2564c !important;

}





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

   15. "WHY TRUST KORE" TRUST PANEL

   Sits between the reviews and "Rediscover Calm and Focus Again".



   --kore-trust-photo is the background portrait. Until a file is set

   the panel falls back to the gradient alone, so it never renders with

   a broken image.

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



.kore-trust {

  position: relative !important;

  overflow: hidden !important;

  border-radius: 20px !important;

  background-color: #8d563a !important;

  /* The portrait is cut out of its teal studio backdrop rather than laid in

     whole: that backdrop is blue, and blue under a warm orange wash goes

     grey-brown and muddy. Keyed out, she sits directly on the gradient. */

  background-image: url("kore-doctor.png") !important;

  background-repeat: no-repeat !important;

  background-size: auto 100% !important;

  background-position: center bottom !important;

}



/* The wash over the photograph.



   Sampled off the reference, which is NOT one orange: it runs a muted

   cocoa at the top (#90583D), opens into a light dusty band through the

   middle (#BA8C76) where the white coat shows through, then warms back

   to orange at the base (#BB6A3B). Every tone sits around 35-40%

   saturation. The flat #a64f18 that replaced it was 76% saturated,

   which is what made it read as raw burnt orange.



   The radial layer reproduces that centre glow even before a photo is

   set, so the panel has depth on its own. */

.kore-trust::before {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  background:

    radial-gradient(125% 78% at 50% 44%,

      rgba(255, 233, 216, 0.30) 0%,

      rgba(255, 224, 202, 0.10) 44%,

      rgba(255, 220, 195, 0) 72%),

    linear-gradient(180deg,

      rgba(132, 79, 53, 0.92) 0%,

      rgba(150, 100, 76, 0.86) 26%,

      rgba(168, 122, 99, 0.80) 48%,

      rgba(174, 106, 66, 0.86) 74%,

      rgba(186, 107, 59, 0.93) 100%) !important;

}



/* a soft inner edge, which is most of what reads as "finished" on the

   reference - a hard border does not */

.kore-trust::after {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  pointer-events: none !important;

  border-radius: 20px !important;

  box-shadow: inset 0 0 0 1px rgba(255, 236, 222, 0.16),

              inset 0 -60px 70px -50px rgba(90, 40, 12, 0.45) !important;

}



.kore-trust__inner {

  position: relative !important;

  padding: 30px 18px 34px !important;

  color: #fff !important;

  /* the mid band is light enough that plain white loses contrast on it,

     which is also true of the reference - the shadow is what keeps the

     type legible over a photograph */

  text-shadow: 0 1px 2px rgba(58, 24, 8, 0.38) !important;

}



.kore-trust__head {

  margin: 0 0 20px !important;

  text-align: center !important;

  font-size: 27px !important;

  line-height: 1.2 !important;

  font-weight: 600 !important;

  color: #fff !important;

}



.kore-trust__head sup {

  font-size: 0.5em !important;

  top: -0.7em !important;

}



.kore-trust__tiles {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: 9px !important;

}



.kore-trust__tiles .kt-tile {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: flex-start !important;

  gap: 9px !important;

  padding: 14px 6px !important;

  border: 1px solid rgba(255, 255, 255, 0.55) !important;

  border-radius: 12px !important;

  font-size: 10.5px !important;

  font-weight: 600 !important;

  line-height: 1.25 !important;

  letter-spacing: 0.02em !important;

  text-align: center !important;

  background: rgba(255, 255, 255, 0.05) !important;

  /* the lift. transform and shadow only - animating position or margin

     would reflow the grid and make the other three tiles twitch. */

  transform: translateY(0) !important;

  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1),

              box-shadow 340ms cubic-bezier(0.22, 1, 0.36, 1),

              background-color 340ms ease,

              border-color 340ms ease !important;

  will-change: transform !important;

}



.kore-trust__tiles .kt-tile:hover,

.kore-trust__tiles .kt-tile:focus-within,

.kore-trust__tiles .kt-tile.is-up {

  transform: translateY(-9px) !important;

  background: rgba(255, 255, 255, 0.14) !important;

  border-color: rgba(255, 255, 255, 0.9) !important;

  box-shadow: 0 12px 22px rgba(60, 22, 4, 0.33) !important;

}



/* A finger has no hover state, so on touch the browser's sticky :hover

   is neutralised and the lift is driven by the .is-up class instead,

   toggled on tap by kore-gallery.js (tap lifts, tap again or tap

   elsewhere drops). */

@media (hover: none) {

  .kore-trust__tiles .kt-tile:hover:not(.is-up) {

    transform: translateY(0) !important;

    box-shadow: none !important;

    background: rgba(255, 255, 255, 0.05) !important;

    border-color: rgba(255, 255, 255, 0.55) !important;

  }

}



.kore-trust .kt-ic {

  width: 30px !important;

  height: 30px !important;

  min-width: 30px !important;

  flex: 0 0 30px !important;

  display: inline-block !important;

  opacity: 0.95 !important;

}



.kore-trust__points {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 13px 12px !important;

  margin: 26px 0 0 !important;

  padding: 0 !important;

  list-style: none !important;

}



.kore-trust__points li {

  display: flex !important;

  align-items: flex-start !important;

  gap: 8px !important;

  font-size: 13.5px !important;

  line-height: 1.3 !important;

  color: #fff !important;

}



.kore-trust .kt-tick {

  width: 19px !important;

  height: 19px !important;

  min-width: 19px !important;

  flex: 0 0 19px !important;

  display: inline-block !important;

  margin-top: 1px !important;

  opacity: 0.95 !important;

}



@media screen and (max-width: 480px) {

  .kore-trust__head { font-size: 23px !important; }

  .kore-trust__tiles { gap: 7px !important; }

  .kore-trust__tiles .kt-tile { font-size: 9.5px !important; padding: 12px 4px !important; }

  .kore-trust .kt-ic { width: 26px !important; height: 26px !important; flex: 0 0 26px !important; }

  .kore-trust__points { grid-template-columns: 1fr 1fr !important; font-size: 12px !important; }

  .kore-trust__points li { font-size: 12px !important; }

}





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

   16. PRODUCT TABS - The Results / How It Works / Shipping & Returns

   Built on <details>/<summary>, so opening and closing needs no

   JavaScript and the panels stay readable if scripts fail.

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



.kore-tabs {

  margin: 22px 0 6px !important;

  border-top: 1px solid #ece3da !important;

}



.kore-tab {

  border-bottom: 1px solid #ece3da !important;

}



.kore-tab > summary {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 12px !important;

  padding: 15px 2px !important;

  cursor: pointer !important;

  list-style: none !important;

  font-size: 15px !important;

  font-weight: 700 !important;

  color: #8a3e12 !important;

}



/* both are needed: WebKit uses its own marker pseudo-element */

.kore-tab > summary::-webkit-details-marker { display: none !important; }

.kore-tab > summary::marker { content: "" !important; }



.kore-tab .kb-chev {

  flex: 0 0 17px !important;

  width: 17px !important;

  height: 17px !important;

  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;

}



.kore-tab[open] .kb-chev {

  transform: rotate(180deg) !important;

}



.kore-tab__body {

  padding: 0 2px 18px !important;

  font-size: 13.5px !important;

  line-height: 1.6 !important;

  color: #4a4038 !important;

}



.kore-tab__body p {

  margin: 0 0 11px !important;

}



.kore-tab__body p:last-child {

  margin-bottom: 0 !important;

}



.kore-tab__body b {

  color: #2e2822 !important;

  font-weight: 700 !important;

}



.kore-tab__body .kb-lead {

  font-size: 15px !important;

  font-weight: 700 !important;

  color: #2e2822 !important;

}



.kore-tab__body .kb-sub {

  margin-bottom: 4px !important;

  font-weight: 700 !important;

  color: #2e2822 !important;

}



.kore-tab__body .kb-ticks {

  margin: 4px 0 0 !important;

  padding: 0 !important;

  list-style: none !important;

}



.kore-tab__body .kb-ticks li {

  display: flex !important;

  align-items: flex-start !important;

  gap: 9px !important;

  margin-bottom: 11px !important;

}



.kore-tab__body .kb-ticks li:last-child {

  margin-bottom: 0 !important;

}



/* the theme collapses a bare svg to zero width - same fix as elsewhere */

.kore-tab__body .kb-tick {

  flex: 0 0 16px !important;

  width: 16px !important;

  height: 16px !important;

  min-width: 16px !important;

  margin-top: 3px !important;

  color: #b95714 !important;

}





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

   17. FAQ STYLED LIKE THE PRODUCT TABS

   The theme renders this accordion as grey rounded cards with numbered

   circles. Restyled to match the How It Works / The Results /

   Shipping & Returns tabs: hairline dividers, no boxes, no numbers.



   Every class the theme emits here is suffixed with the template id

   (accordianTitle-template--23679031378176__...), so these match on a

   prefix and are scoped to this one section by its wrapper id.

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



[id*="collapsible_content_qCMdgd"] [class*="allAccordionButtonsContainer-"] {

  border-top: 1px solid #ece3da !important;

  gap: 0 !important;

  row-gap: 0 !important;

}



[id*="collapsible_content_qCMdgd"] [class*="singleAccordianContainer-"] {

  background: transparent !important;

  background-color: transparent !important;

  border: 0 !important;

  border-bottom: 1px solid #ece3da !important;

  border-radius: 0 !important;

  margin: 0 !important;

  box-shadow: none !important;

}



[id*="collapsible_content_qCMdgd"] [class*="accordionButtonStyle-"] {

  padding: 15px 2px !important;

}



[id*="collapsible_content_qCMdgd"] [class*="collapsibleTitleSpan-"] {

  font-size: 15px !important;

  font-weight: 700 !important;

  color: #8a3e12 !important;

}



/* the numbered circles have no equivalent in the tabs */

[id*="collapsible_content_qCMdgd"] .index-number {

  display: none !important;

}



[id*="collapsible_content_qCMdgd"] [class*="accordionButtonStyle-"] .icon {

  color: #8a3e12 !important;

}



/* answer text matched to the tab bodies */

[id*="collapsible_content_qCMdgd"] [class*="singleAccordianContainer-"] p {

  font-size: 13.5px !important;

  line-height: 1.6 !important;

  color: #4a4038 !important;

}



/* Eyebrow and headline left-aligned, as the reference sets them, and the

   eyebrow brought into the same type system as the rest of the page.



   The font family was never the problem - the whole site is Inter. The

   eyebrow read as foreign because it was 10px tracked out to 2px, a

   micro-label, next to body text at 13.5px and 0.6px. */

[id*="collapsible_content_qCMdgd"] [class*="sectionEyebrow"] {

  color: #8a3e12 !important;

  font-size: 14px !important;

  font-weight: 600 !important;

  letter-spacing: 0.6px !important;

  text-align: left !important;

  /* The theme builds this as a chip - inline-block with padding 16px 20px

     and its own background and border settings, all transparent here. That

     invisible padding was indenting the text 21px past the headline and

     holding it 16px higher than it needed to sit. */

  padding: 0 !important;

  margin: 0 0 6px !important;

}



[id*="collapsible_content_qCMdgd"] .collapsible-content__heading,

[id*="collapsible_content_qCMdgd"] [class*="sectionEyebrow"],

[id*="collapsible_content_qCMdgd"] [class*="sectionEyebrow"] > *,

[id*="collapsible_content_qCMdgd"] .collapsible-content__heading > * {

  text-align: left !important;

}



/* the wrapper centres its children, so the alignment has to be undone

   there too or the block stays optically centred */

[id*="collapsible_content_qCMdgd"] .collapsible-content-wrapper-narrow,

[id*="collapsible_content_qCMdgd"] .collapsible-content-wrapper-narrow > * {

  text-align: left !important;

  align-items: flex-start !important;

}





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

   18. CUSTOMER REVIEWS

   The theme's testimonial slider on a plain white ground: headline,

   rating line, then the cards with their arrows. The section settings

   still carry the old gradient and white text, so both are overridden

   here rather than in the template. Type sizes were measured off

   Auniva's live slider at a 375px viewport. Theme classes carry the

   section id, so they are matched on prefix and scoped by the wrapper.

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



[id*="testimonials_AiHw4G"] .section__customer_review {

  background: none !important;

  background-image: none !important;

  background-color: transparent !important;

  border-radius: 0 !important;

  margin: 0 !important;

  overflow: visible !important;

}



[id*="testimonials_AiHw4G"] .section__customer_review::before {

  display: none !important;

}



/* Headline. The theme's mobile rule is `.atlas-isolation-wrapper

   #sectionHeading...` (1,1,1) with !important, printed inline AFTER this

   sheet, so the id itself has to be in the selector to outrank it. */

.atlas-isolation-wrapper #sectionHeadingtemplate--23679031378176__testimonials_AiHw4G.title,

[id*="testimonials_AiHw4G"] h2.image-with-text__heading,

[id*="testimonials_AiHw4G"] .title.image-with-text__heading {

  font-size: 26px !important;

  font-weight: 500 !important;

  line-height: 34px !important;

  color: #2e2822 !important;

}



/* overall rating, one line */

[id*="testimonials_AiHw4G"] [class*="overallRatingContainer"] {

  display: flex !important;

  flex-wrap: nowrap !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  width: auto !important;

  max-width: none !important;

}



[id*="testimonials_AiHw4G"] [class*="overallRatingContainer"] .heading_stars {

  margin-right: 0 !important;

}



[id*="testimonials_AiHw4G"] [class*="overallRatingText"] {

  white-space: nowrap !important;

  font-size: 15px !important;

  font-weight: 500 !important;

  line-height: 1.1 !important;

  color: #2e2822 !important;

}



[id*="testimonials_AiHw4G"] [class*="overallRatingContainer"] .heading_stars svg {

  width: 15px !important;

  height: 15px !important;

  min-width: 15px !important;

}



/* stars are printed with fill="#ffffff" for the old dark ground */

[id*="testimonials_AiHw4G"] .heading_stars svg path {

  fill: #b95714 !important;

}



/* Cards: white on white, so the edge is carried by a soft drop shadow

   and a faint burnt-orange hairline. The slider track clips at its own

   edges, so it gets a little vertical room for the shadow to land in. */

[id*="testimonials_AiHw4G"] [class*="reviewSlideContainer"] {

  background: #ffffff !important;

  border-radius: 12px !important;

  border: 1px solid rgba(185, 87, 20, 0.28) !important;

  box-shadow: 0 6px 18px rgba(46, 40, 34, 0.10), 0 1px 3px rgba(46, 40, 34, 0.06) !important;

  overflow: hidden !important;

}



[id*="testimonials_AiHw4G"] [class*="reviewContentContainer"] {

  position: relative !important;

  padding: 14px !important;

}



[id*="testimonials_AiHw4G"] .slide_review_heading {

  font-size: 19px !important;

  font-weight: 700 !important;

  line-height: 1.25 !important;

  margin-bottom: 8px !important;

}



/* "5.0" beside the stars, as the reference sets it (all placeholders are

   five stars; edit per slide if a real review is not) */

[id*="testimonials_AiHw4G"] [class*="starsOuterContainer"] {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  margin-bottom: 12px !important;

}



[id*="testimonials_AiHw4G"] [class*="starsOuterContainer"] svg {

  width: 16px !important;

  height: 16px !important;

  min-width: 16px !important;

}



[id*="testimonials_AiHw4G"] [class*="starsOuterContainer"]::after {

  content: "5.0" !important;

  font-size: 15px !important;

  font-weight: 400 !important;

  color: #8a3e12 !important;

}



[id*="testimonials_AiHw4G"] .slide_review_body {

  font-size: 16px !important;

  line-height: 1.3 !important;

  color: #4a4038 !important;

}



/* Author row reads "Jennifer A • Verified Customer" with the date under

   it. Our markup is <strong>name</strong> <em>Verified</em> date, so the

   separator is generated after the name and a forced break after the

   badge drops the date to its own line. The thumbnail is printed before

   the name and, in "author at bottom" mode, only the name is sent down,

   so the image is pinned bottom-left and the row indented beside it. */

[id*="testimonials_AiHw4G"] [class*="reviewNameText"] {

  display: block !important;

  margin-top: auto !important;

  padding-top: 16px !important;

  min-height: 0 !important;

  font-size: 11px !important;

  line-height: 1.35 !important;

  color: #7a6e64 !important;

  text-align: left !important;

  white-space: nowrap !important;

}



[id*="testimonials_AiHw4G"] [class*="reviewNameText"] strong {

  font-size: 14px !important;

  font-weight: 600 !important;

  color: #2e2822 !important;

}



[id*="testimonials_AiHw4G"] [class*="reviewNameText"] strong::after {

  content: " \2022 " !important;

  color: #7a6e64 !important;

  font-weight: 400 !important;

}



[id*="testimonials_AiHw4G"] [class*="reviewNameText"] em {

  font-style: normal !important;

  font-size: 14px !important;

  font-weight: 500 !important;

  color: #b95714 !important;

}



[id*="testimonials_AiHw4G"] [class*="reviewNameText"] em::after {

  content: "\A" !important;

  white-space: pre !important;

}



/* The theme's per-block rule parks the thumbnail at top:-28px / left:50%

   (centred above the card, clipped by overflow). top/transform have to be

   reset or the bottom/left below never take. Reference: 36px rounded

   square, name row beside it. */

/* Cards are equal-height in the slider, so an avatar pinned to the card

   bottom drifts away from the name row on short reviews. Instead the

   avatar is a flex item ordered just before the row and pushed down

   with margin-top:auto; the row then pulls up over it by its own height

   and indents past it, so the pair always sits together at the bottom. */

[id*="testimonials_AiHw4G"] [class*="reviewContentContainer"] img[class^="authorImageThumbnail"] {

  position: static !important;

  order: 4 !important;

  align-self: flex-start !important;

  top: auto !important;

  left: auto !important;

  transform: none !important;

  width: 36px !important;

  height: 36px !important;

  margin: auto 0 0 !important;

  border: 0 !important;

  border-radius: 6px !important;

  object-fit: cover !important;

  object-position: 50% 20% !important;

  z-index: 2 !important;

}



[id*="testimonials_AiHw4G"] [class*="reviewContentContainer"] img[class^="authorImageThumbnail"] ~ [class*="reviewNameText"] {

  margin-top: -36px !important;

  padding-top: 1px !important;

  padding-left: 46px !important;

  min-height: 36px !important;

}



[id*="testimonials_AiHw4G"] [class*="reviewContentContainer"] .slide_review_body {

  margin-bottom: 16px !important;

}



/* arrows were white-on-orange; on the white ground they take the same

   burnt-orange hairline as the cards */

[id*="testimonials_AiHw4G"] [class*="prevButton"],

[id*="testimonials_AiHw4G"] [class*="nextButton"] {

  background: #ffffff !important;

  border: 1px solid rgba(185, 87, 20, 0.45) !important;

  box-shadow: 0 2px 8px rgba(46, 40, 34, 0.08) !important;

}



[id*="testimonials_AiHw4G"] [class*="prevButton"] svg path,

[id*="testimonials_AiHw4G"] [class*="nextButton"] svg path {

  fill: #8a3e12 !important;

}



/* Space under the reviews. On mobile the arrows sit inside the slider's

   64px bottom padding and the section adds another 40px under that, so

   the FAQ eyebrow landed ~70px below the arrows. The padding is kept

   just deep enough to clear the arrows and the section's own bottom

   padding goes. */

@media screen and (max-width: 768px) {

  [id*="testimonials_AiHw4G"] [class*="swiperSliderOuterContainer"] {

    padding-bottom: 62px !important;

  }

  [id*="testimonials_AiHw4G"] [class*="sectionMargin"] {

    padding-bottom: 0 !important;

  }

}





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

   20. THE PROBLEM BLOCK ("Forgetting Words Mid-Sentence...")

   Auniva's photo + headline + mechanism + four checks, on the same

   ground as Why Trust KORE: #8d563a under the trust panel's wash, with

   the label swirl over it at low opacity where they run a green fibre

   texture. Full-bleed like theirs, CTA below it in the ATC orange.

   Sizes measured off their page at 375px (2.45x screenshot).

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

.kore-problem {

  position: relative !important;

  overflow: visible !important;   /* the front bottle hangs below the panel */

  background-color: #6e3f27 !important;

  color: #fff !important;

}



.kore-problem::before {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  background:

    radial-gradient(125% 78% at 50% 30%,

      rgba(255, 226, 205, 0.14) 0%,

      rgba(255, 220, 195, 0.05) 44%,

      rgba(255, 220, 195, 0) 72%),

    linear-gradient(180deg,

      rgba(98, 54, 33, 0.94) 0%,

      rgba(116, 70, 46, 0.90) 26%,

      rgba(134, 86, 60, 0.86) 48%,

      rgba(140, 78, 44, 0.90) 74%,

      rgba(150, 80, 40, 0.95) 100%) !important;

  opacity: 1 !important;

  pointer-events: none !important;

}



/* the swirl on its own layer so it can sit well under full strength -

   Auniva's fibre texture is barely there */

.kore-problem::after {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  background: url("kore-reviews-swirl.svg") center / cover no-repeat !important;

  opacity: 0.32 !important;

  pointer-events: none !important;

}



.kore-problem__inner {

  position: relative !important;

  z-index: 1 !important;

  padding: 20px 20px 30px !important;

}



.kore-problem__img {

  display: block !important;

  width: 100% !important;

  height: auto !important;

  border-radius: 8px !important;

  margin: 0 0 26px !important;

}



.kore-problem__head {

  margin: 0 0 18px !important;

  font-size: 27px !important;

  font-weight: 600 !important;

  line-height: 1.2 !important;

  letter-spacing: -0.01em !important;

  color: #fff !important;

  text-align: left !important;

}



.kore-problem__head em {

  font-style: normal !important;

  color: #f0a24d !important;

}



.kore-problem__body {

  margin: 0 0 26px !important;

  font-size: 16px !important;

  line-height: 1.35 !important;

  color: rgba(255, 255, 255, 0.92) !important;

  text-align: left !important;

}



.kore-problem__checks {

  list-style: none !important;

  margin: 0 !important;

  padding: 0 !important;

  display: flex !important;

  flex-direction: column !important;

}



.kore-problem__checks li {

  display: flex !important;

  align-items: center !important;

  margin: 0 0 22px !important;

  font-size: 16px !important;

  line-height: 1.3 !important;

  color: #fff !important;

}



.kore-problem__checks li:last-child {

  margin-bottom: 0 !important;

}



.kore-problem__checks svg {

  width: 22px !important;

  height: 22px !important;

  min-width: 22px !important;

  flex: 0 0 22px !important;

  margin-right: 16px !important;

  color: #ff6b5c !important; /* the reference's coral check, as asked */

}



/* ---- the mechanism card inside the same block ----

   Auniva's second panel: a lighter card on the dark ground, centred

   copy, four icon tiles, and the bottles standing over the card's

   bottom edge onto the dark ground. */

.kore-mechwrap {

  position: relative !important;

  z-index: 1 !important;

  margin: 8px 20px 0 !important;

  padding-bottom: 40px !important;    /* the bottles' small overhang past the card */

}



.kore-mech {

  position: relative !important;

  overflow: hidden !important;

  border-radius: 20px !important;

  padding: 34px 22px 316px !important;  /* the stack stands mostly inside the card */

  text-align: center !important;

  background: linear-gradient(165deg, #b0693b 0%, #9a5a33 55%, #86482a 100%) !important;

}



.kore-mech::before {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  background: url("kore-reviews-swirl.svg") center / cover no-repeat !important;

  opacity: 0.35 !important;

  pointer-events: none !important;

}



.kore-mech > * { position: relative !important; }



.kore-mech__eyebrow {

  margin: 0 0 12px !important;

  font-size: 13px !important;

  font-weight: 500 !important;

  letter-spacing: 0.12em !important;

  text-transform: uppercase !important;

  color: #f0a24d !important;

}



.kore-mech__head {

  margin: 0 0 16px !important;

  font-size: 30px !important;

  font-weight: 600 !important;

  line-height: 1.15 !important;

  letter-spacing: -0.01em !important;

  color: #fff !important;

}



.kore-mech__body {

  margin: 0 0 30px !important;

  font-size: 16px !important;

  line-height: 1.35 !important;

  color: rgba(255, 255, 255, 0.92) !important;

}



.kore-mech__tiles {

  list-style: none !important;

  margin: 0 !important;

  padding: 0 !important;

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  row-gap: 34px !important;

  column-gap: 16px !important;

}



.kore-mech__tiles li {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  padding: 0 6px !important;

  font-size: 16px !important;

  line-height: 1.3 !important;

  color: #fff !important;

  text-align: center !important;

}



.kore-mech__tiles sup {

  font-size: 0.6em !important;

  line-height: 0 !important;

  vertical-align: super !important;

}



/* the hairline cross between the four tiles on mobile */

@media screen and (max-width: 768px) {

  .kore-mech__tiles { row-gap: 0 !important; column-gap: 0 !important; }

  .kore-mech__tiles li { padding: 6px 4px 26px !important; font-size: 15px !important; }

  .kore-mech__tiles li:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.22) !important; }

  .kore-mech__tiles li:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important; }

  .kore-mech__tiles li:nth-child(n+3) { padding-top: 30px !important; padding-bottom: 6px !important; }

}



.kore-mech__tiles svg {

  width: 44px !important;

  height: 44px !important;

  min-width: 44px !important;

  margin-bottom: 14px !important;

  color: #f0a24d !important;

}



.kore-mech__bottles {

  position: absolute !important;

  left: 50% !important;

  bottom: -15px !important;      /* just past the dark ground */

  width: 82.5% !important;

  height: auto !important;

  transform: translateX(-50%) !important;

}



/* ---- the sticky buy bar ----

   Replaces the theme's sticky add-to-cart strip (hidden below): a white

   strip pinned to the bottom of the screen with the ATC-orange button,

   shown once the buy box has scrolled out of view (kore-gallery.js). */

.sticky-atc { display: none !important; }



.kore-stickybar {

  position: fixed !important;

  left: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  z-index: 98 !important;

  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;

  background: #fff !important;

  box-shadow: 0 -6px 18px rgba(46, 40, 34, 0.08) !important;

  transform: translateY(110%) !important;

  opacity: 0 !important;

  pointer-events: none !important;

  transition: transform 260ms ease, opacity 260ms ease !important;

}



.kore-stickybar.is-on {

  transform: translateY(0) !important;

  opacity: 1 !important;

  pointer-events: auto !important;

}



.kore-problem__cta {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  margin: 0 !important;

  min-height: 62px !important;

  border-radius: 6px !important;

  background: #c37000 !important;

  color: #fff !important;

  text-decoration: none !important;

  line-height: 1.15 !important;

}



.kore-problem__cta b {

  font-size: 17px !important;

  font-weight: 600 !important;

  letter-spacing: 0.02em !important;

}



.kore-problem__cta span {

  font-size: 13px !important;

  font-weight: 500 !important;

  opacity: 0.9 !important;

}



@media screen and (min-width: 769px) {

  .kore-problem__inner {

    max-width: 1100px !important;

    margin: 0 auto !important;

    padding: 40px 24px 48px !important;

    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    column-gap: 48px !important;

    align-items: center !important;

  }

  .kore-problem__img { grid-row: 1 / span 3 !important; margin: 0 !important; }

  .kore-problem__head { font-size: 36px !important; }

  .kore-mechwrap { max-width: 1100px !important; margin: 60px auto 0 !important; padding: 0 24px 48px !important; }

  .kore-mech { min-height: 460px !important; padding: 48px 46% 48px 44px !important; text-align: left !important; }

  .kore-mech__body { max-width: 520px !important; }

  .kore-mech__head { font-size: 34px !important; }

  .kore-mech__tiles { grid-template-columns: repeat(4, 1fr) !important; column-gap: 8px !important; }

  .kore-mech__tiles li { font-size: 15px !important; }

  .kore-mech__bottles { left: auto !important; right: 24px !important; top: -40px !important; bottom: auto !important; width: 44% !important; max-width: 520px !important; transform: none !important; }

  .kore-stickybar { padding-left: calc(50% - 210px) !important; padding-right: calc(50% - 210px) !important; }

}





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

   21. THE STAGES BLOCK ("How a Starved Brain Shows Up Over Time")

   Auniva's three stage cards: photo on the left, copy on a light tint

   on the right - the same tint as the benefits list under the buy box.

   Stacked on phone, three across on desktop.

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

.kore-stages {

  padding: 56px 20px 40px !important;   /* top clears the bottle overhang above */

  background: #fff !important;

}



.kore-stages__head {

  margin: 0 0 28px !important;

  font-size: 30px !important;

  font-weight: 600 !important;

  line-height: 1.15 !important;

  letter-spacing: -0.01em !important;

  color: #2e2822 !important;

  text-align: center !important;

}



.kore-stages__grid {

  display: grid !important;

  grid-template-columns: 1fr !important;

  gap: 18px !important;

}



.kore-stage {

  display: grid !important;

  grid-template-columns: 38% 62% !important;

  overflow: hidden !important;

  border-radius: 8px !important;

  background: #fdf4ec !important;

}



.kore-stage__img {

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  min-height: 100% !important;

  object-fit: cover !important;

  object-position: 50% 28% !important;   /* keep the face in a tall, narrow column */

}



.kore-stage__body {

  padding: 22px 16px 22px 18px !important;

  align-self: center !important;

}



.kore-stage__label {

  margin: 0 0 6px !important;

  font-size: 14px !important;

  font-weight: 500 !important;

  letter-spacing: 0.02em !important;

  color: #b95714 !important;

}



.kore-stage__title {

  margin: 0 0 8px !important;

  font-size: 20px !important;

  font-weight: 600 !important;

  line-height: 1.2 !important;

  color: #2e2822 !important;

}



.kore-stage__text {

  margin: 0 !important;

  font-size: 15px !important;

  line-height: 1.38 !important;

  color: #4a4038 !important;

}



@media screen and (min-width: 769px) {

  .kore-stages { padding: 64px 24px 48px !important; }

  .kore-stages__head { font-size: 34px !important; margin-bottom: 36px !important; }

  .kore-stages__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; max-width: 1330px !important; margin: 0 auto !important; }

  .kore-stage__body { padding: 28px 22px !important; }

  .kore-stage__title { font-size: 20px !important; }

  .kore-stage__text { font-size: 15px !important; }

}





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

   22. THE CHART BLOCK ("The Hidden Reason Nothing Has Worked")

   Auniva's eyebrow / headline / body / chart, left-aligned on white.

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

.kore-chart {

  padding: 24px 20px 40px !important;

  background: #fff !important;

  text-align: left !important;

}



.kore-chart__eyebrow {

  margin: 0 0 10px !important;

  font-size: 15px !important;

  font-weight: 500 !important;

  letter-spacing: 0.04em !important;

  text-transform: uppercase !important;

  color: #b95714 !important;

}



.kore-chart__head {

  margin: 0 0 16px !important;

  font-size: 30px !important;

  font-weight: 600 !important;

  line-height: 1.15 !important;

  letter-spacing: -0.01em !important;

  color: #2e2822 !important;

}



.kore-chart__body {

  margin: 0 0 20px !important;

  font-size: 17px !important;

  line-height: 1.4 !important;

  color: #2e2822 !important;

}



.kore-chart__img {

  display: block !important;

  width: 100% !important;

  height: auto !important;

}



@media screen and (min-width: 769px) {

  .kore-chart { max-width: 1100px !important; margin: 0 auto !important; padding: 40px 24px 56px !important;

    display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 48px !important; align-items: center !important; }

  .kore-chart__img { grid-column: 2 !important; grid-row: 1 / span 3 !important; }

  .kore-chart__head { font-size: 34px !important; }

}





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

   23. THE TIMELINE BLOCK ("What to Expect...") + GUARANTEE CARD

   Same dark ground as the problem block. Four steps on a line -

   vertical on phone, horizontal on desktop. kore-gallery.js adds

   .kt-anim (dim start state) and then .is-in the first time the block

   scrolls into view; the delays below step through the markers one by

   one, --i being each step's index. Without JS, or with reduced motion,

   .kt-anim is never added and everything simply shows.

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

.kore-timeline {

  position: relative !important;

  overflow: hidden !important;

  background-color: #6e3f27 !important;

  color: #fff !important;

}



.kore-timeline::before {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  background:

    radial-gradient(125% 78% at 50% 30%,

      rgba(255, 226, 205, 0.14) 0%,

      rgba(255, 220, 195, 0.05) 44%,

      rgba(255, 220, 195, 0) 72%),

    linear-gradient(180deg,

      rgba(98, 54, 33, 0.94) 0%,

      rgba(116, 70, 46, 0.90) 26%,

      rgba(134, 86, 60, 0.86) 48%,

      rgba(140, 78, 44, 0.90) 74%,

      rgba(150, 80, 40, 0.95) 100%) !important;

  pointer-events: none !important;

}



.kore-timeline::after {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  background: url("kore-reviews-swirl.svg") center / cover no-repeat !important;

  opacity: 0.32 !important;

  pointer-events: none !important;

}



.kore-timeline__inner {

  position: relative !important;

  z-index: 1 !important;

  max-width: 1240px !important;

  margin: 0 auto !important;

  padding: 44px 20px 30px !important;

}



.kore-timeline__head {

  margin: 0 0 32px !important;

  font-size: 27px !important;

  font-weight: 600 !important;

  line-height: 1.2 !important;

  letter-spacing: -0.01em !important;

  color: #fff !important;

  text-align: left !important;

}



.kt-line {

  list-style: none !important;

  margin: 0 !important;

  padding: 0 !important;

}



.kt-step {

  position: relative !important;

  margin: 0 0 40px !important;

  padding: 0 0 0 34px !important;

}



.kt-step:last-child { margin-bottom: 0 !important; }



.kt-dot {

  position: absolute !important;

  left: 0 !important;

  top: 11px !important;

  width: 13px !important;

  height: 13px !important;

  border-radius: 2px !important;

  background: #fff !important;

}



/* the line between markers: a faint track, and a white fill on top of it */

.kt-step:not(:last-child)::before,

.kt-step:not(:last-child)::after {

  content: "" !important;

  position: absolute !important;

  left: 6px !important;

  top: 30px !important;

  bottom: -47px !important;       /* down to the next marker */

  width: 1.5px !important;

}



.kt-step:not(:last-child)::before { background: rgba(255, 255, 255, 0.25) !important; }



.kt-step:not(:last-child)::after {

  background: #fff !important;

  transform-origin: top center !important;

}



.kt-chip {

  display: inline-block !important;

  padding: 8px 14px !important;

  border-radius: 2px !important;

  background: #fff !important;

  color: #2e2822 !important;

  font-size: 15px !important;

  font-weight: 500 !important;

  line-height: 1.3 !important;

}



.kt-chip b {

  font-weight: 500 !important;

  color: #b95714 !important;

}



.kt-step > p {

  margin: 14px 0 12px !important;

  font-size: 16px !important;

  line-height: 1.4 !important;

  color: rgba(255, 255, 255, 0.92) !important;

}



.kt-checks {

  list-style: none !important;

  margin: 0 !important;

  padding: 0 !important;

}



.kt-checks li {

  display: flex !important;

  align-items: center !important;

  margin: 0 0 10px !important;

  font-size: 16px !important;

  line-height: 1.3 !important;

  color: #fff !important;

}



.kt-checks li:last-child { margin-bottom: 0 !important; }



.kt-checks svg {

  width: 20px !important;

  height: 20px !important;

  min-width: 20px !important;

  flex: 0 0 20px !important;

  margin-right: 12px !important;

  color: #fff !important;

}



/* ---- the one-time draw ---- */

/* dim start state: applied instantly, no transition */

.kt-anim .kt-dot { background: rgba(255, 255, 255, 0.3) !important; }



.kt-anim .kt-step > :not(.kt-dot) { opacity: 0.35 !important; }



.kt-anim .kt-step:not(:last-child)::after { transform: scaleY(0) !important; }



/* the reveal: transitions live on the lit state only, so they run one way */



.kt-anim.is-in .kt-dot {

  background: #fff !important;

  transition: background-color 0.35s ease calc(var(--i) * 1s) !important;

  animation: ktFlash 0.9s ease-out calc(var(--i) * 1s) 1 both !important;

}



.kt-anim.is-in .kt-step > :not(.kt-dot) {

  opacity: 1 !important;

  transition: opacity 0.6s ease calc(var(--i) * 1s) !important;

}



.kt-anim.is-in .kt-step:not(:last-child)::after {

  transform: scaleY(1) !important;

  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--i) * 1s + 0.25s) !important;

}



@keyframes ktFlash {

  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); }

  40%  { box-shadow: 0 0 0 7px rgba(255, 236, 220, 0.35), 0 0 18px 6px rgba(255, 236, 220, 0.6); }

  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }

}



/* ---- guarantee card ----

   Scoped to the timeline: section 11 hides the old buy-box line that

   used the same class name. Measured off Auniva's card at 375px: full

   width inside the 20px gutters, near-square corners, a pale wash that

   warms toward the right, 13px padding, 17px title in the section's

   dark tone, 14px body. Their pale mint becomes our pale orange. */

.kore-timeline .kore-guarantee {

  display: block !important;

  margin: 46px 0 0 !important;

  max-width: none !important;

  padding: 18px 16px 18px 14px !important;

  border-radius: 2px !important;

  background: linear-gradient(100deg, #fdf3ea 0%, #fcf0e5 55%, #f8e2cf 100%) !important;

  color: #5a3a28 !important;

}



.kore-timeline .kore-guarantee__title {

  display: flex !important;

  align-items: center !important;

  margin: 0 0 10px !important;

  font-size: 17px !important;

  font-weight: 600 !important;

  line-height: 1.2 !important;

  color: #6e3f27 !important;

}



.kore-timeline .kore-guarantee__title svg {

  width: 17px !important;

  height: 19px !important;

  min-width: 17px !important;

  flex: 0 0 17px !important;

  margin-right: 10px !important;

  color: #6e3f27 !important;

}



.kore-timeline .kore-guarantee p:last-child {

  margin: 0 !important;

  font-size: 14px !important;

  line-height: 1.25 !important;

  color: #5a3a28 !important;

}



@media screen and (min-width: 769px) {

  .kore-timeline__inner { padding: 64px 40px 60px !important; }

  .kore-timeline .kore-guarantee { max-width: 704px !important; margin: 56px auto 0 !important; padding: 22px 24px !important; }

  .kore-timeline .kore-guarantee__title { font-size: 20px !important; }

  .kore-timeline .kore-guarantee p:last-child { font-size: 15px !important; line-height: 1.4 !important; }

  .kore-timeline__head { font-size: 34px !important; text-align: center !important; margin-bottom: 44px !important; }

  .kt-line { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; column-gap: 32px !important; }

  .kt-step { margin: 0 !important; padding: 34px 0 0 !important; }

  .kt-dot { top: 0 !important; left: 0 !important; }

  .kt-step:not(:last-child)::before,

  .kt-step:not(:last-child)::after {

    left: 24px !important; right: -24px !important; top: 6px !important; bottom: auto !important;

    width: auto !important; height: 1.5px !important;

  }

  .kt-step:not(:last-child)::after { transform-origin: left center !important; }

  .kt-chip { font-size: 14px !important; }

  .kt-step > p, .kt-checks li { font-size: 15px !important; }

  .kt-anim .kt-step:not(:last-child)::after { transform: scaleX(0) !important; }

  .kt-anim.is-in .kt-step:not(:last-child)::after { transform: scaleX(1) !important; }

}





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

   24. COMPARISON IMAGE ("WHY KORE?") - right after the timeline panel

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

.kore-compare {

  padding: 36px 16px 28px !important;

  background: #fff !important;

}



.kore-compare__img {

  display: block !important;

  width: 100% !important;

  max-width: 720px !important;

  height: auto !important;

  margin: 0 auto !important;

}





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

   25. THE RESULTS BLOCK + 90 DAY GUARANTEE

   Auniva's card: inset 20px on phone, the timeline's dark ground and

   swirl, stats stacked on phone / three across on desktop, then the

   bottles beside the shield and the guarantee. Numbers count up once

   (kore-gallery.js); without JS they simply show their final value.

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

.kore-results {

  padding: 12px 20px 40px !important;

  background: #fff !important;

}



.kore-results__card {

  position: relative !important;

  overflow: hidden !important;

  max-width: 1330px !important;

  margin: 0 auto !important;

  border-radius: 6px !important;

  background-color: #6e3f27 !important;

  color: #fff !important;

}



.kore-results__card::before {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  background:

    radial-gradient(125% 78% at 50% 30%,

      rgba(255, 226, 205, 0.14) 0%,

      rgba(255, 220, 195, 0.05) 44%,

      rgba(255, 220, 195, 0) 72%),

    linear-gradient(180deg,

      rgba(98, 54, 33, 0.94) 0%,

      rgba(116, 70, 46, 0.90) 26%,

      rgba(134, 86, 60, 0.86) 48%,

      rgba(140, 78, 44, 0.90) 74%,

      rgba(150, 80, 40, 0.95) 100%) !important;

  pointer-events: none !important;

}



.kore-results__card::after {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  background: url("kore-reviews-swirl.svg") center / cover no-repeat !important;

  opacity: 0.32 !important;

  pointer-events: none !important;

}



.kr-top, .kr-bottom {

  position: relative !important;

  z-index: 1 !important;

}



.kr-top { padding: 34px 20px 8px !important; }



.kr-head {

  margin: 0 0 12px !important;

  font-size: 27px !important;

  font-weight: 600 !important;

  line-height: 1.2 !important;

  letter-spacing: -0.01em !important;

  color: #fff !important;

}



.kr-lede {

  margin: 0 0 28px !important;

  font-size: 16px !important;

  line-height: 1.35 !important;

  color: rgba(255, 255, 255, 0.92) !important;

}



.kr-stat { margin: 0 0 34px !important; }



.kr-num {

  margin: 0 0 4px !important;

  font-size: 50px !important;

  font-weight: 300 !important;

  line-height: 1 !important;

  letter-spacing: -0.02em !important;

  color: #f5b36b !important;

  font-variant-numeric: tabular-nums !important;

}



.kr-num sup {

  font-size: 0.5em !important;

  vertical-align: super !important;

  line-height: 0 !important;

  margin-left: 2px !important;

}



.kr-title {

  margin: 0 0 12px !important;

  font-size: 20px !important;

  font-weight: 500 !important;

  line-height: 1.25 !important;

  color: #fff !important;

}



.kr-sub {

  margin: 0 !important;

  font-size: 16px !important;

  line-height: 1.35 !important;

  color: rgba(255, 255, 255, 0.9) !important;

}



/* bottles beside the shield + "90 Day", guarantee copy full width below */

.kr-bottom {

  padding: 0 20px 34px !important;

  display: grid !important;

  grid-template-columns: 1fr 58% !important;

  grid-template-areas: "g b" !important;

}



.kr-bottles {

  grid-area: b !important;

  align-self: start !important;      /* top right, level with the shield */

  position: relative !important;

  z-index: 0 !important;

  width: 100% !important;

  height: auto !important;

  margin: 0 -8px 0 0 !important;

}



.kr-guarantee {

  grid-area: g !important;

  grid-column: 1 / -1 !important;

  grid-row: 1 !important;

  align-self: start !important;

  position: relative !important;

  z-index: 1 !important;

  padding-top: 70px !important;    /* shield + "90 Day" sit level with the bottles */

}



.kr-shield {

  display: block !important;

  width: 50px !important;

  height: 60px !important;

  margin: 0 0 22px !important;

  color: #f5b36b !important;

}



.kr-g-days {

  margin: 0 !important;

  font-size: 36px !important;

  font-weight: 500 !important;

  line-height: 1.1 !important;

  color: #f5b36b !important;

}



.kr-g-title {

  margin: 4px 0 16px !important;

  font-size: 27px !important;

  font-weight: 500 !important;

  line-height: 1.25 !important;

  color: #fff !important;

  max-width: 260px !important;

}



.kr-g-body {

  margin: 0 0 18px !important;

  font-size: 16px !important;

  line-height: 1.35 !important;

  color: rgba(255, 255, 255, 0.92) !important;

}



.kr-g-checks {

  list-style: none !important;

  margin: 0 !important;

  padding: 0 !important;

}



.kr-g-checks li {

  display: flex !important;

  align-items: center !important;

  margin: 0 0 12px !important;

  font-size: 16px !important;

  font-weight: 500 !important;

  color: #fff !important;

}



.kr-g-checks li:last-child { margin-bottom: 0 !important; }



.kr-g-checks svg {

  width: 20px !important;

  height: 20px !important;

  min-width: 20px !important;

  flex: 0 0 20px !important;

  margin-right: 12px !important;

  color: #f5b36b !important;

}



@media screen and (min-width: 769px) {

  .kore-results { padding: 20px 40px 56px !important; }

  .kr-top { padding: 56px 52px 8px !important; }

  .kr-head { font-size: 34px !important; }

  .kr-lede { margin-bottom: 36px !important; }

  .kr-stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; column-gap: 40px !important; max-width: 900px !important; }

  .kr-stat { margin: 0 !important; }

  .kr-num { font-size: 52px !important; }

  .kr-title { font-size: 21px !important; }

  .kr-sub { font-size: 15px !important; }

  .kr-bottom { padding: 24px 52px 56px !important; grid-template-columns: 38% 1fr !important; grid-template-areas: "b g" !important; column-gap: 56px !important; align-items: center !important; }

  .kr-bottles { grid-area: b !important; margin: 0 !important; max-width: 420px !important; align-self: center !important; }

  .kr-guarantee { grid-area: g !important; grid-column: auto !important; padding-top: 0 !important; align-self: center !important; }

  .kr-g-title { max-width: none !important; font-size: 24px !important; }

  .kr-g-checks { display: flex !important; gap: 36px !important; }

  .kr-g-checks li { margin: 0 !important; }

}





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

   26. KORE REVIEWS LIST (sections/kore-reviews.liquid)

   Auniva's review list measured at 375px: small eyebrow, 28px bold

   headline, square filled stars with the overall line, a rule, then

   stacked reviews - square stars + score, 16px text, 24px square avatar,

   name and "Verified Customer" in the brand colour. Green -> burnt orange.

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

.kore-reviews { background: #fff !important; }



.kore-reviews__inner {

  max-width: 760px !important;

  margin: 0 auto !important;

  padding: 36px 20px 44px !important;

}



.krv-eyebrow {

  margin: 0 0 14px !important;

  font-size: 16px !important;

  font-weight: 500 !important;

  color: #b95714 !important;

}



.krv-head {

  margin: 0 0 16px !important;

  font-size: 26.5px !important;   /* one line at 375px, as the reference sits */

  font-weight: 700 !important;

  line-height: 1.15 !important;

  letter-spacing: -0.01em !important;

  color: #2e2822 !important;

}



.krv-overall {

  display: flex !important;

  align-items: center !important;

  flex-wrap: wrap !important;

  gap: 8px !important;

  padding-bottom: 20px !important;

  border-bottom: 1.5px solid #6e3f27 !important;

}



.krv-overall__text {

  font-size: 16px !important;

  color: #2e2822 !important;

  white-space: nowrap !important;

}



.krv-stars {

  display: inline-flex !important;

  gap: 3px !important;

}



.krv-star {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 15px !important;

  height: 15px !important;

  background: #b95714 !important;

}



.krv-star svg {

  width: 11px !important;

  height: 11px !important;

  min-width: 11px !important;

  fill: #fff !important;

}



.krv-star.is-off { background: #e6d9ce !important; }



.krv-stars--lg { gap: 4px !important; }

.krv-stars--lg .krv-star { width: 20px !important; height: 20px !important; }

.krv-stars--lg .krv-star svg { width: 14px !important; height: 14px !important; min-width: 14px !important; }



.krv-list {

  list-style: none !important;

  margin: 0 !important;

  padding: 0 !important;

}



.krv-item { padding: 26px 0 8px !important; }

.krv-item.is-hidden { display: none !important; }



.krv-rating {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  margin: 0 0 12px !important;

}



.krv-score {

  font-size: 16px !important;

  color: #2e2822 !important;

}



.krv-body {

  margin: 0 0 14px !important;

  font-size: 16px !important;

  line-height: 1.3 !important;

  color: #2e2822 !important;

}



.krv-author {

  display: flex !important;

  align-items: center !important;

  flex-wrap: wrap !important;

  font-size: 15px !important;

  line-height: 1.2 !important;

}



.krv-avatar {

  width: 24px !important;

  height: 24px !important;

  border-radius: 2px !important;

  object-fit: cover !important;

  margin-right: 10px !important;

}



.krv-name { color: #2e2822 !important; }



.krv-dot {

  margin: 0 6px !important;

  color: #2e2822 !important;

  font-size: 12px !important;

}



.krv-verified { color: #b95714 !important; }



.krv-more {

  display: block !important;

  width: 100% !important;

  margin: 28px 0 0 !important;

  padding: 14px 16px !important;

  border: 1.5px solid #b95714 !important;

  border-radius: 6px !important;

  background: #fff !important;

  color: #b95714 !important;

  font-size: 16px !important;

  font-weight: 600 !important;

  cursor: pointer !important;

}



.krv-more:hover { background: #fdf4ec !important; }



@media screen and (min-width: 769px) {

  .kore-reviews__inner { padding: 56px 24px 64px !important; }

  .krv-head { font-size: 34px !important; }

  .krv-more { width: auto !important; min-width: 280px !important; margin: 32px auto 0 !important; }

}





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

   27. ADD TO CART -> CHECKOUT (kore-gallery.js)

   While the redirect is in flight the bundler's cart drawer never

   shows, and the button reads as busy so it isn't tapped twice.

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

/* Cart drawer is ON (Haloven format). The no-cart redirect in

   kore-gallery.js is gated behind window.KORE_NO_CART (unset). The header

   cart icon stays hidden; the bundler's drawer opens on Add to Cart. */

header cart-icon,

header .header-actions__cart-icon,

header a[href$="/cart"] {

  display: none !important;

}



/* ---- drawer shell ---- */

#atlas-upsell-cart-drawer-main-container,

#atlas-upsell-cart-drawer-main-container * { font-family: Poppins, Inter, sans-serif !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-drawer-content { background: #fff !important; }



/* header: "Cart • N items" */

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-header { padding: 15px 15px 10px !important; background: #fdf8f8 !important; min-height: 0 !important; height: auto !important; flex: 0 0 auto !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-drawer-header-h2 { font-size: 24px !important; font-weight: 700 !important; color: #121212 !important; display: block !important; line-height: 1.2 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-drawer-header-h2 > span { display: inline !important; background: none !important; width: auto !important; height: auto !important; min-width: 0 !important; border-radius: 0 !important; font-size: 24px !important; font-weight: 700 !important; margin: 0 !important; padding: 0 !important; color: #121212 !important; line-height: inherit !important; }

#atlas-upsell-cart-drawer-main-container 
•  }

#atlas-upsell-cart-drawer-main-container 
 items }

#atlas-upsell-cart-drawer-main-container 
 item }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-close { width: 34px !important; height: 34px !important; border-radius: 6px !important; background: #ececec !important; color: #121212 !important; font-size: 22px !important; line-height: 1 !important; }



/* reservation banner */

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-announcement { margin: 0 15px 8px !important; border: 1px solid #f3c6c6 !important; background: #fdecec !important; color: #c62828 !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 600 !important; padding: 10px 12px !important; }



/* line items */

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-items-container { padding: 0 15px !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-item img { width: 74px !important; height: 74px !important; border-radius: 8px !important; margin-right: 12px !important; object-fit: cover !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-item > div > div:first-child { font-size: 17px !important; font-weight: 700 !important; line-height: 1.25 !important; color: #121212 !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-item-quantity-container { border: 1px solid #d9d9d9 !important; border-radius: 6px !important; background: #fff !important; overflow: hidden !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-item-quantity-container button { background: #fff !important; color: #121212 !important; border-radius: 0 !important; width: 30px !important; height: 30px !important; font-size: 16px !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-item-quantity-amount { min-width: 34px !important; text-align: center !important; font-weight: 600 !important; }



/* ---- footer ---- */

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-footer { background: #fdf8f8 !important; padding: 12px 15px 14px !important; border-top: 1px solid #ececec !important; }



/* shipping protection: Haloven card with an Add button */

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-shipping-protection-container { margin: 0 0 12px !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-shipping-protection-container > div { padding: 10px !important; background: #fdf8f8 !important; border: 1px solid #e6e6e6 !important; border-radius: 10px !important; box-shadow: 2.5px 2.5px 7.5px rgba(0,0,0,.12) !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-shipping-protection-container > div > div { align-items: center !important; gap: 10px !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-shipping-protection-container > div > div > div:first-child { width: 35px !important; height: 35px !important; }

#atlas-upsell-cart-drawer-main-container #atlas-upsell-cart-shipping-protection-image { width: 35px !important; height: 35px !important; border-radius: 2px !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-shipping-protection-container > div > div > div:nth-child(2) > span { font-size: 12px !important; font-weight: 700 !important; color: #121212 !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-shipping-protection-container > div > div > div:nth-child(2) > div { font-size: 10.5px !important; line-height: 1.3 !important; margin-top: 3px !important; color: rgba(18,18,18,.9) !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-shipping-protection-container > div > div > div:nth-child(3) { flex-direction: row !important; align-items: center !important; gap: 10px !important; height: auto !important; }

#atlas-upsell-cart-drawer-main-container #atlas-upsell-cart-shipping-protection-price { font-size: 14px !important; font-weight: 700 !important; color: #b95714 !important; order: -1; }

/* the switch becomes an "Add" / "Added" button */

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-shipping-protection-container label { width: auto !important; height: 29px !important; display: inline-flex !important; align-items: center !important; cursor: pointer !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-shipping-protection-container label > span { position: static !important; width: auto !important; height: 29px !important; padding: 0 15px !important; border-radius: 4px !important; background: #b95714 !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; line-height: 29px !important; display: inline-block !important; transition: none !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-shipping-protection-container label > span > span { display: none !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-shipping-protection-container label > span::after { content: "Add"; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-shipping-protection-container input:checked + span { background: #37756c !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-shipping-protection-container input:checked + span::after { content: "Added \2713"; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-shipping-protection-container > div > div > div:nth-child(3) > div { margin-top: 0 !important; }



/* Savings / Subtotal rows */

#atlas-upsell-cart-drawer-main-container .kore-cart-savings { display: flex !important; justify-content: space-between !important; align-items: center !important; color: #37756c !important; font-size: 18px !important; font-weight: 700 !important; padding: 2px 0 !important; }

#atlas-upsell-cart-drawer-main-container .kore-cart-savings[hidden] { display: none !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-footer > div:nth-last-child(4) { padding: 2px 0 6px !important; font-size: 23px !important; font-weight: 700 !important; color: #121212 !important; }

#atlas-upsell-cart-drawer-main-container .atlas-upsell-cart-footer > div:nth-last-child(4) > div { font-size: 23px !important; font-weight: 700 !important; }



/* checkout button + payment icons */

#atlas-upsell-cart-drawer-main-container #atlas-upsell-cart-checkout-button { background: #37756c !important; color: #fff !important; border-radius: 8px !important; height: 49px !important; padding: 0 30px !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 1px !important; margin-top: 10px !important; }

#atlas-upsell-cart-drawer-main-container #atlas-upsell-cart-checkout-button-text-span { font-size: 18px !important; font-weight: 700 !important; }

#atlas-upsell-cart-drawer-main-container .kore-cart-paylogos { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; padding: 10px 16px 0 !important; }

#atlas-upsell-cart-drawer-main-container .kore-cart-paylogos svg { height: 24px !important; width: 38px !important; border-radius: 3px !important; }



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

   28. KORE FOOTER (sections/kore-footer.liquid)

   Two columns - support/contact and policies - on the dark burnt

   ground of the problem and timeline blocks; stacked on phone. Extra

   bottom padding so the sticky Buy Now bar never covers the last line.

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

.kore-footer {

  background: #3b2418 !important;

  color: rgba(255, 255, 255, 0.86) !important;

  padding: 40px 20px calc(96px + env(safe-area-inset-bottom)) !important;

}



.kore-footer__inner {

  max-width: 1100px !important;

  margin: 0 auto !important;

  display: grid !important;

  grid-template-columns: 1fr !important;

  gap: 32px !important;

}



.kf-head {

  margin: 0 0 12px !important;

  font-size: 17px !important;

  font-weight: 600 !important;

  color: #fff !important;

}



.kf-line {

  margin: 0 0 8px !important;

  font-size: 15px !important;

  line-height: 1.45 !important;

}



.kore-footer a {

  color: rgba(255, 255, 255, 0.86) !important;

  text-decoration: none !important;

}



.kore-footer a:hover { color: #f5b36b !important; }



.kf-line a { color: #f5b36b !important; }



.kf-links {

  list-style: none !important;

  margin: 0 !important;

  padding: 0 !important;

}



.kf-links li {

  margin: 0 0 10px !important;

  font-size: 15px !important;

  line-height: 1.4 !important;

}



.kf-links--account { margin-top: 14px !important; }

.kf-links--account a { text-decoration: underline !important; text-underline-offset: 3px !important; }



.kf-copy {

  max-width: 1100px !important;

  margin: 32px auto 0 !important;

  padding-top: 18px !important;

  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;

  font-size: 13px !important;

  color: rgba(255, 255, 255, 0.6) !important;

}



@media screen and (min-width: 769px) {

  .kore-footer { padding: 56px 40px 104px !important; }

  .kore-footer__inner { grid-template-columns: 1fr 1fr !important; gap: 48px !important; }

}





/* header logo is not a link: keep visitors on the funnel page */

.header-logo{pointer-events:none;cursor:default}