/** Shopify CDN: Minification failed

Line 225:30 Expected identifier but found whitespace
Line 225:31 Unexpected "36px"
Line 225:73 Unterminated string token
Line 227:52 Unterminated string token

**/
/* Unbroken Vine — brand type and spacing.

   REWRITTEN. The first version transplanted 21energy's heading scale wholesale
   and roughly doubled every title: their h1 runs 41->72px because their layout
   is a wide marketing hero, and a product title is not that. Measured against
   the live storefront instead:

     h1   36px / 45px  (+0.24px tracking, weight 700)
     h2   28.8px / 36px
     body 16px / 27.2px
     buttons 6px radius, inputs 6px, media 12px

   Dawn already derives headings from --font-heading-scale, which the ported
   settings put at 1.2 to match. So this file sets NO heading sizes at all;
   overriding them is what broke the page. What it does keep from 21energy is
   the part that travels: corner radii on large surfaces, the card hover, and a
   consistent spacing rhythm.

   Carries no content and no colours. */

:root {
  /* The promo bar's own gradient, promoted to the brand accents. */
  --brand-red: #A40011;
  --brand-orange: #8B1538;

  /* Corner radii. Buttons and inputs stay at the store's own 6px; only large
     surfaces take 21energy's softer corners. */
  --brand-radius-pill: 999px;
  --brand-radius-lg: 20px;
  --brand-radius-md: 16px;
  --brand-radius-sm: 12px;

  /* 8px rhythm. */
  --brand-space-1: 0.8rem;
  --brand-space-2: 1.6rem;
  --brand-space-3: 2.4rem;
  --brand-space-4: 3.2rem;
  --brand-space-5: 4.8rem;
}

/* ---- type ---------------------------------------------------------------
   Sizes come from Dawn's scale. Only the leading and tracking are pinned, to
   the values the live store actually renders. */
/* IM8 sets headings at weight 400-500 with negative tracking and tight
   leading (28px over 30px), which is what gives them an editorial feel.
   Dawn was running 700 with positive tracking - the opposite. */
/* A grotesque needs more weight and tighter tracking than a serif did to
   carry a heading; the leading stays tight. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 700;
}

body { line-height: 1.7; }

.rte p { line-height: 1.7; }
.rte > * + * { margin-top: var(--brand-space-2); }

/* ---- corners ------------------------------------------------------------ */
.card,
.card-wrapper .card,
.collection-list__item,
.product__media-item img,
.product-media-container,
.cart-item__image { border-radius: var(--brand-radius-sm); }

/* 21energy rounds product cards at 16px, not the 12px the rest of the
   system uses; corners were one of the standards to carry over. */
.card__inner { overflow: hidden; border-radius: var(--brand-radius-md); }
.badge { border-radius: var(--brand-radius-pill); }

/* ---- collection cards ---------------------------------------------------
   From 21energy: the hover swap scales both frames so it reads as one
   movement rather than two pictures blinking. Durations are theirs. */
.card-wrapper .media.media--hover-effect > img {
  transition: transform 500ms ease, opacity 500ms ease;
}

@media (hover: hover) {
  .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-of-type) {
    opacity: 0;
    transform: scale(1.12);
  }
  .card-wrapper:hover .media.media--hover-effect > img + img {
    opacity: 1;
    transform: scale(1.1);
  }
  .card-wrapper:hover .media.media--hover-effect > img:only-of-type {
    transform: scale(1.06);
  }
  .card-wrapper:hover .card__heading {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-wrapper .media.media--hover-effect > img { transition: opacity 500ms ease; }
  .card-wrapper:hover .media.media--hover-effect > img { transform: none; }
}

.card__content { padding-top: var(--brand-space-2); }
.card__heading { line-height: 1.3; }

/* ---- buy box ------------------------------------------------------------
   The live buy box is dense: the title, price, bullets and gift list all sit
   above the fold. Dawn's default gaps push half of it below. */
.product__info-container > * + * { margin-top: var(--brand-space-2); }
.product__title { margin-bottom: 0.4rem; }
.product__info-container .price { margin-bottom: var(--brand-space-1); }

/* ---- buy-box text blocks -----------------------------------------------
   One block, up to three lines, one optional box around all of them. Line
   height is pinned at 1.3: the live store runs 12px text on a 15.6px line,
   and inheriting the 1.7 body leading is what spread these rows apart. */
.product__text--group {
  display: flex;
  flex-direction: column;
  gap: var(--text-line-gap, 3px);
  font-size: var(--text-size, inherit);
}

.product__text-line {
  margin: 0;
  line-height: 1.3;
}

.product__text-line--with-icon {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.product__text-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(1.4rem * (var(--text-icon-scale, 100%) / 100%));
  height: calc(1.4rem * (var(--text-icon-scale, 100%) / 100%));
  margin-top: 0.15em;
  color: var(--text-icon-color, currentColor);
}

.product__text-icon svg,
.product__text-icon .svg-wrapper { width: 100%; height: 100%; display: block; }
.product__text-icon svg path { fill: currentColor; }

.product__text-body { flex: 1 1 auto; min-width: 0; }

@media screen and (max-width: 749px) {
  .product__text--group { font-size: var(--text-size-mobile, var(--text-size, inherit)); }
}

/* Margins are set per block inline; the generic stack gap would double them. */
.product__info-container > .product__text { margin-left: 0; margin-right: 0; }
.product__info-container > .product__text + .product__text { margin-top: 0; }

/* ---- price -------------------------------------------------------------
   The live store prices in gold with a SAVE badge alongside; Dawn prices in
   body colour with its own generic Sale pill. */
/* The badge must sit on the price's optical centre. Dawn's price element is a
   block with its own line box, so aligning the flex row is not enough: the
   badge needs to centre against the price text, not the container. */
.product__price-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.product__price-block > .price { display: flex; align-items: center; margin: 0; }
/* Dawn's price carries a bottom margin that shifts its box below its text,
   which is what left the badge sitting 7px high. */
.product__price-block .price__container { margin: 0; }
.product__price-block .price-item { line-height: 1.2; }
.product__price-block .price__container { display: flex; align-items: center; gap: 0.8rem; }
.product__price-block .price__regular,
.product__price-block .price__sale { display: flex; align-items: center; gap: 0.8rem; }
/* On sale, Dawn hides .price__regular and shows .price__sale, which holds BOTH
   the struck compare price and the live one. Colour the live price only. */
.product__price-block .price-item--sale,
.product__price-block .price__regular .price-item--regular {
  color: var(--product-price-color, inherit);
  font-weight: 700;
}

.product__price-block s.price-item--regular {
  color: inherit;
  opacity: 0.55;
  font-weight: 400;
}
.product__price-badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  line-height: 1;
  padding: 0.3rem 0.9rem;
  border-radius: var(--brand-radius-xs, 6px);
  /* The promo bar's own gradient, so the discount signal on the page and
     the one in the bar are visibly the same offer. */
  background: linear-gradient(90deg, var(--brand-red, #A40011) 0%, var(--brand-orange, #8B1538) 100%);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* Dawn's own Sale pill would sit next to ours saying the same thing. */
.product__price-block .badge.price__badge-sale { display: none; }


/* ---- product title -----------------------------------------------------
   Shrine set the title's own margins to 0 and let the blocks around it space
   themselves; Dawn adds its own above and below. */
   Measured on the live store: 36px / 45px. Dawn's h1 runs larger at this
   viewport, which pushed the buy box below the fold. Scoped to the product
   title so headings elsewhere keep Dawn's scale. */
.product__title h1,
.product__title > h1 {
  font-size: 3.6rem;
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 700;
}

@media screen and (max-width: 749px) {
  .product__title h1 { font-size: 2.8rem; }
}


/* Video standing in for the image in image-with-text. */
.image-with-text__video,
.image-with-text__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Every buy-box block now carries the margins Shrine gave it, so Dawn's own
   uniform stack gap would add a second, competing rhythm on top. */
.product__info-container > * + * { margin-top: 0; }
.product__info-container > .product__title { margin-top: 0; }

/* Dawn wraps the Shop Pay installment message in an unclassed div carrying
   15px above and below. The live store sets it far tighter, and those 30px
   were pushing everything under the price down the page. */
.product__installment { margin-top: 6px !important; margin-bottom: 4px !important; }
.product__installment .installment { margin: 0; }


/* Title spacing: Shrine's title block carried margin 0/0, so the gap above it
   comes from the review block below it and the gap under it from the next
   block's own margin. Dawn's defaults add a second gap on top of both. */
.product__title { margin-top: 0; margin-bottom: 0.4rem; }
.product__title > * { margin-top: 0; margin-bottom: 0; }
.product__info-container .product__title + * { margin-top: 0; }

/* ==== mobile ============================================================ */
@media screen and (max-width: 749px) {
  /* Dawn's mobile gutter is 1.5rem, and the header and announcement bar carry
     3rem. On a 375px screen that is a lot of nothing. A previous pass set
     1.5rem here, which was already the default and so changed nothing at all. */
  .page-width,
  .page-width-desktop,
  .page-width--narrow { padding-left: 1rem; padding-right: 1rem; }

  .utility-bar__grid.page-width,
  .header.page-width { padding-left: 1rem; padding-right: 1rem; }

  /* Sections that draw their own inner container. */
  .testimonials,
  .icon-bar,
  .custom-columns,
  .collapsible-content .page-width,
  .multicolumn .page-width { padding-left: 1rem; padding-right: 1rem; }

  /* The buy box keeps a slightly larger gutter than the media, so the text is
     not flush to the screen edge. */
  .product__info-wrapper { padding-left: 0.5rem; padding-right: 0.5rem; }

  /* The cover was capped at 240px because constrain_to_viewport sizes a tall
     image by its height. That setting is now off, so the image simply fills
     its column. Negative margins were tried here and broke the slider's own
     width maths, so the media stays inside the normal gutter. */
  /* The cover rendered 240px wide inside a 556px column: Dawn sizes the media
     container itself, so constraining the <img> alone does nothing. Force the
     container to the column width and cap by height generously - a portrait
     cover at full width on a real phone (375x812) comes to ~431px, well under
     the cap. Two earlier attempts are recorded so they are not repeated:
     negative margins broke the slider's width maths, and turning
     constrain_to_viewport off removed the cap entirely. */
  .product__media-wrapper { padding-left: 0; padding-right: 0; }

  .product__media-wrapper .product__media-item,
  .product__media-wrapper .product__media-item--variant,
  .product__media-wrapper .product-media-container,
  .product__media-wrapper .product__media {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }

  .product__media-wrapper .product__media img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
  }

  /* ---- thumbnails ---- */
  /* They were 162px on a 375px screen, sitting 40px below the main image and
     indented from the left by a slider gutter and an arrow. */
  .product__media-wrapper .thumbnail-slider { margin-top: 0.8rem; }
  .product__media-wrapper .thumbnail-list { padding-left: 0; gap: 0.8rem; }
  .product__media-wrapper .thumbnail-list__item { width: 6.4rem; flex: 0 0 6.4rem; }
  .product__media-wrapper .thumbnail-slider .slider-button { display: none; }
  .product__media-wrapper .slider-mobile-gutter { padding-left: 0; padding-right: 0; }
  .product__media-wrapper .slider--mobile { scroll-padding-left: 0; }

  /* ---- price row ---- */
  /* The three parts sat on different optical centres because each has its own
     line box. Pin them to one baseline row. */
  .product__price-block,
  .product__price-block .price,
  .product__price-block .price__container,
  .product__price-block .price__regular,
  .product__price-block .price__sale {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .product__price-block .price-item,
  .product__price-block .product__price-badge { line-height: 1.2; margin: 0; }

  /* ---- centred text blocks ---- */
  /* An icon pinned left with centred text reads as a mistake. When the block
     is centred, the icon travels with its line. */
  .product__text--group[style*="text-align: center"] .product__text-line--with-icon {
    justify-content: center;
  }
  .product__text--group[style*="text-align: center"] .product__text-body { flex: 0 1 auto; }

  /* ---- accordion ---- */
  .product__accordion .accordion__title,
  .accordion__title { font-size: 1.5rem; }

  /* ---- testimonials ---- */
  /* On a phone one card fills the screen, so nothing signals where it ends. */
  .testimonials__card {
    border: 0.1rem solid rgba(var(--color-foreground), 0.12);
    box-shadow: 0 0.2rem 0.8rem rgba(var(--color-foreground), 0.06);
  }
}


/* FAQ rows were running at the 1.7 body leading, which is loose for a stack of
   short answers. */
.accordion__content,
.accordion__content .rte,
.accordion__content p { line-height: 1.5; }
.accordion__content > * + * { margin-top: 0.8rem; }
.accordion summary { padding-top: 1.2rem; padding-bottom: 1.2rem; }


/* ---- product page: first section, and mobile thumbnail alignment -------
   The main-product section's own padding class is generated per template
   (.section-template--<id>__main-padding), so it is matched by shape rather
   than by that id, which would break the moment the template is recreated. */
.product [class*="__main-padding"],
#MainProduct-template--23740245639380__main .product,
main > .shopify-section:first-child [class*="-padding"] {
  padding-top: 8px !important;
}

@media screen and (max-width: 749px) {
  /* The thumbnail row must start on the same left edge as the main image.
     The slider adds its own gutter and scroll padding, which offset it. */
  .product__media-wrapper .thumbnail-slider,
  .product__media-wrapper .slider--mobile,
  .product__media-wrapper .thumbnail-list {
    padding-left: 0 !important;
    margin-left: 0 !important;
    scroll-padding-left: 0 !important;
  }

  .product__media-wrapper .thumbnail-list__item:first-child { margin-left: 0 !important; }

  /* Both the media and the thumbnails sit in the page gutter, nothing more. */
  .product__media-wrapper .product__media-list,
  .product__media-wrapper .slider-mobile-gutter {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* The product gallery is now the ported Swiper build; its CSS lives in
   product-gallery.css. The overrides that were here were written for Dawn's
   old markup and fought it. */



/* Title sits 4px off what follows it, not the section step. */
.product__info-container .product__title,
.product__info-container .product__title > * { margin-bottom: 0.4rem !important; }

/* ======================================================================
   Buy box: no gray, aligned price row, trust strip on one line
   ====================================================================== */

/* ---- no gray ------------------------------------------------------------
   The buy box inherited a muted foreground, rgba(--color-foreground, .75),
   on almost everything: the bundle labels and captions, BUNDLE & SAVE, the
   trust lines, the review quote, and every bare <p>/<li>/<span>/<em>/<strong>.
   The brand does not use gray, so the whole box resolves to full ink. */
.product__info-container,
.product__info-container p,
.product__info-container li,
.product__info-container span,
.product__info-container em,
.product__info-container strong,
.product__info-container .product__text-body,
.product__info-container .product-reviews__text,
.product__info-container .product-reviews__author,
.product__info-container .bundle-selector__headline,
.product__info-container .bundle-selector__label,
.product__info-container .bundle-selector__caption,
.product__info-container .bundle-selector__price {
  color: rgb(var(--color-foreground));
  opacity: 1;
}

/* The purge above repainted the rating stars, which are <span>s: the gold
   fill and its light track both went to ink, so every rating showed as five
   solid black stars. Stars keep their own colours - they are a rating, not
   body copy, and a black track would read as five out of five. */
.product__info-container .rating-stars__track {
  color: var(--rating-track, #ececec);
}

.product__info-container .rating-stars__fill,
.product__info-container .product-reviews__stars,
.product__info-container .testimonials__stars-fill {
  color: var(--rating-color, #ffcc00);
}

.product__info-container .product-reviews__stars {
  color: var(--review-star-color, #ffcc00);
}

/* Struck prices keep full ink too; the strikethrough already says "was",
   so it does not need to be faded as well. */
.product__info-container .price-item--regular,
.product__info-container .bundle-selector__compare,
.product__info-container s,
/* out-specifies .product__price-block s.price-item--regular, which fades it */
.product__info-container .product__price-block s.price-item--regular,
.product__info-container .product__price-block s .price-item--regular {
  color: rgb(var(--color-foreground));
  opacity: 1;
}

/* Badges paint their own background and declare their own label colour, but
   they are <span>s, so the bare-span purge below was repainting them ink -
   dark text on a dark pill. Same root cause as the Add to cart label. */
.product__info-container .product__price-badge,
.product__info-container .bundle-selector__badge,
.product__info-container .badge {
  color: #fff;
}

/* Buttons carry their own scheme colours. The purge above targets bare
   spans, and the Add to cart label is a bare span, so it was being repainted
   ink and rendering dark-on-dark once the CTA went oxblood. */
.product__info-container button,
.product__info-container .button,
.product__info-container button span,
.product__info-container .button span,
.product__info-container .product-form__submit,
.product__info-container .product-form__submit span {
  color: inherit;
}

.product__info-container .product-form__submit,
.product__info-container .product-form__submit span {
  color: rgb(var(--color-button-text, 255 255 255));
}

/* The sale price follows the bundle selector: ink, with weight and the
   strikethrough separating it from the compare-at rather than colour.
   To put the red back, restore var(--product-price-color) here. */
.product__info-container .price-item--sale,
.product__info-container .price__sale .price-item--sale {
  color: rgb(var(--color-foreground));
  opacity: 1;
}

/* ---- price row ----------------------------------------------------------
   Compare-at, the sale price and the SAVE badge each sat in a different
   nested wrapper (.price > .price__container > .price__sale), so each had its
   own box centre and the three read as misaligned by ~2.5px. Collapsing the
   wrappers with display:contents makes the three visible items direct
   children of one centred flex row. Residual offset is 1px. */
.product__price-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
}

/* Dawn's own .price--on-sale .price__sale rule out-specifies a plain
   display:flex here, so these are forced. */
.product__price-block .price,
.product__price-block .price__container,
.product__price-block .price__sale,
.product__price-block .price__regular {
  display: contents !important;
}

/* Dawn shows one of these two blocks and hides the other by toggling their
   display, which the rule above trampled: on sale, .price__regular came back
   and the page showed the price twice, once plain and once beside its own
   strikethrough. Put the switch back, above the contents rule. */
.product__price-block .price--on-sale .price__regular {
  display: none !important;
}

.product__price-block .price:not(.price--on-sale) .price__sale {
  display: none !important;
}

.product__price-block .price-item,
.product__price-block .price__sale s,
.product__price-block .product__price-badge {
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* Dawn sets the struck compare-at to 1.3rem against the sale price's 1.6rem,
   so the two prices sat at different sizes. One number governs both; the
   strikethrough and the lighter weight still tell them apart. */
.product__price-block {
  --price-size: 1.6rem;
}

/* Sizes now come from the bundle pattern below: the amount, then the struck
   one a step smaller. This rule forced both to the same size. */

.product__price-block .product__price-badge { margin: 0; }

/* Dawn gives the struck price a 1rem right margin of its own, which sat on
   top of the flex gap and read as a 16px hole between the two prices. The
   gap alone does the spacing now. */
.product__price-block .price__sale s,
.product__price-block .price-item--regular,
.product__price-block .price-item,
.product__price-block .price-item--last {
  margin: 0 !important;
}

/* ---- trust strip --------------------------------------------------------
   Three items on one row. Flex would not shrink these to content (the lines
   measured far wider than icon+label), and three icon+label pairs do not fit
   one line at either 375px or the 535px buy box, so this is a three-column
   grid: each column takes a third, the label wraps inside it, and a hairline
   divides them. Ink, not gray. */
/* Content-sized columns, not equal thirds: with nowrap, equal thirds clipped
   the longest label. Centred as a group instead. */
.product__text--group.product__text--row {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  align-items: center;
  gap: 0 0.8rem;
}

/* One line each. Three labels of different lengths wrapping at different
   points read as broken; a single line per item is scannable and even. The
   labels are short enough to hold it at 375px. */
/* Matched to the homepage trust bar: 20px icons in #8B1538, labels at
   11-12px/500. Three labels of these lengths cannot share one line at
   375px, so they wrap - and every cell is given the height of two lines so
   the short one does not sit alone and make the row look uneven. */
/* Icon over label, not beside it. Stacking gives each label the full
   column width, so the three read evenly instead of one wrapping awkwardly
   next to its icon. */
.product__text--row .product__text-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: auto;
  min-width: 0;
  white-space: normal;
  text-align: center;
  padding: 0 0.4rem;
}

.product__text--row .product__text-body {
  white-space: normal;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}

.product__text--row .product__text-icon {
  width: 2rem !important;
  height: 2rem !important;
}

/* No divider between the three: asked for plain, undivided items. */
.product__text--row .product__text-line + .product__text-line {
  border-left: 0;
}

.product__text--row .product__text-icon { margin-top: 0; }
.product__text--row .product__text-body { flex: 0 1 auto; }

@media screen and (max-width: 480px) {
  .product__text--row .product__text-line { padding: 0 0.4rem; gap: 0.3rem; }
}

/* ---- no sideways page scroll -------------------------------------------
   A guard, not a fix: any single element that overhangs the viewport would
   otherwise make the entire page scroll left/right. `clip` rather than
   `hidden` on purpose - `hidden` turns the element into a scroll container,
   which would break position:sticky on the desktop gallery column. */
html,
body {
  overflow-x: clip;
}


/* ---- header ------------------------------------------------------------- */
/* The account icon is not wanted in the header. */
.header__icon--account { display: none !important; }

/* No rule under the header. */
.header-wrapper--border-bottom { border-bottom: 0 !important; }

/* ---- add to cart -------------------------------------------------------- */
.product-form__submit,
.product-form__submit span,
button[name="add"] { font-weight: 700; }

/* ======================================================================
   IM8 shape + type system
   Measured off im8health.com rather than eyeballed: their buttons are full
   pills (100px) in uppercase with 0.32px tracking, their workhorse radius is
   12px, their borders are a gold hairline at ~20% alpha rather than a
   saturated line, and they carry no shadows. Copying the colours alone is
   what made this read as loud instead of modern.
   ====================================================================== */
:root {
  --im8-hairline: rgba(184, 135, 44, 0.22);
  --im8-radius: 12px;
  --im8-pill: 100px;
}

/* ---- buttons ------------------------------------------------------------ */
.button,
.shopify-challenge__button,
.customer button,
.product-form__submit,
.cart__checkout-button,
.cart-upsell__add,
.shopify-payment-button__button--unbranded {
  border-radius: var(--im8-pill);
  text-transform: uppercase;
  letter-spacing: 0.032em;
  font-weight: 700;
  box-shadow: none;
}

.button::after,
.product-form__submit::after,
.cart__checkout-button::after { box-shadow: none; }

/* ---- badges ------------------------------------------------------------- */
/* Solid, not a gradient: the gradient was the loudest thing on the page. */
.product__price-block .product__price-badge,
.bundle-selector__badge,
.badge {
  background: #A40011;
  background-image: none;
  border-radius: var(--im8-pill);
  letter-spacing: 0.032em;
}

/* ---- surfaces ----------------------------------------------------------- */
.card__inner,
.product__text--boxed,
.cart-drawer .quantity,
.pl-lightbox__card,
.product__media-list .js-media-list {
  border-radius: var(--im8-radius);
}

/* Hairlines, not colour: a saturated border on every box is what read as
   clashing. One warm rule, barely there, is what IM8 actually draws. */
.product__text--boxed,
.bundle-selector__option,
.cart-drawer .quantity,
.accordion,
.accordion summary {
  border-color: var(--im8-hairline);
}

/* ---- type --------------------------------------------------------------- */
/* Body sits at near-black; the oxblood is reserved for headings, the way
   IM8 splits #1A0508 from #50000B. */
h1, h2, h3,
.product__title h1,
.h0, .h1, .h2, .h3 {
  color: #50000B;
}

/* ---- giving-back signal -------------------------------------------------
   Geometry taken from IM8's Vitamin Angels panel: cream ground, a soft
   hairline rather than a saturated one, 10px radius, a 28px icon held at the
   top of the text, and the lead phrase carrying the colour so the rest can
   stay body ink. */
.impact-signal {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  border-radius: 10px;
  background: var(--impact-bg, #F5EDE0);
  border: 0.1rem solid var(--impact-border, #E8C8C8);
  text-decoration: none;
  color: inherit;
}

a.impact-signal:hover { border-color: var(--impact-accent, #6B0010); }

/* The icon is a <span>, so the buy-box no-gray purge repaints it - the same
   trap as the CTA label and the badges. Named explicitly so it keeps the
   accent. */
.product__info-container .impact-signal__icon,
.impact-signal__icon {
  color: var(--impact-accent, #6B0010) !important;
}

.impact-signal__icon {
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--impact-accent, #6B0010);
}

.impact-signal__icon svg { width: 100%; height: 100%; }

.impact-signal__text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.2;
  color: rgb(var(--color-foreground));
}

.impact-signal__title {
  font-weight: 700;
  color: var(--impact-accent, #6B0010);
}


/* ---- type pairing -------------------------------------------------------
   IM8 pairs a flare serif (ABC Arizona Flare) for headings with a neutral
   grotesque (Aeonik) for everything else. Both are licensed faces, so this
   is Cormorant Garamond over Inter - the same structure, from Shopify's
   library. The serif also suits a gold-foiled hardcover better than the
   geometric sans that was here.

   Body copy stays on the sans: the serif is for display sizes only. */
button,
input,
select,
textarea,
.button,
.badge,
.price,
.product__price-block,
.bundle-selector,
.cart-drawer,
.impact-signal,
.promo-bar {
  font-family: var(--font-body-family);
}

/* ---- type, actually applied --------------------------------------------
   The font picker kept reverting to Montserrat, so the families are pinned
   here against the webfonts loaded in theme.liquid. */
:root {
  /* One family. The serif read as a different brand from the body copy, so
     headings are separated by weight, size and tracking instead of by face. */
  --font-heading-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body,
.product__text-body,
input, select, textarea {
  font-family: var(--font-body-family);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.product__title h1 {
  font-family: var(--font-heading-family);
}

/* ---- buttons, IM8 anatomy ----------------------------------------------
   Not a flat fill: a 135deg gradient between the two reds, a coloured glow
   beneath, and a 1px white inset along the top edge. The inset is what makes
   theirs read as a lit surface rather than a rectangle of colour. */
/* Only real calls to action. Dawn builds icon controls out of .button too -
   the cart's remove control, the quantity steppers, the drawer close - and
   the first version of this rule turned every one of them into a red blob. */
.button:not(.button--secondary):not(.button--tertiary):not(.quantity__button):not(.drawer__close),
.product-form__submit,
.cart__checkout-button,
.cart-upsell__add,
.shopify-payment-button__button--unbranded {
  background: linear-gradient(135deg, #A40011 0%, #6B0010 100%);
  color: #FFFFFF;
  border: 0;
  box-shadow:
    0 0.6rem 2rem rgba(164, 0, 17, 0.35),
    0 0.2rem 0.4rem rgba(0, 0, 0, 0.1),
    inset 0 0.1rem 0 rgba(255, 255, 255, 0.15);
  letter-spacing: 0.06em;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

/* One treatment, one height. The checkout button was running 18px type
   against the product page's 15px, and the cart's Add had a flat fill and
   square corners of its own. */
.product-form__submit,
.cart__checkout-button,
.shopify-payment-button__button--unbranded {
  min-height: 5.4rem;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
}

.cart-upsell__add {
  min-height: 3.6rem;
  border-radius: var(--im8-pill);
  padding: 0 1.6rem;
}

.button:not(.button--secondary):not(.button--tertiary):not(.quantity__button):not(.drawer__close):hover,
.product-form__submit:hover,
.cart__checkout-button:hover,
.cart-upsell__add:hover {
  box-shadow:
    0 0.8rem 2.4rem rgba(164, 0, 17, 0.42),
    0 0.2rem 0.4rem rgba(0, 0, 0, 0.12),
    inset 0 0.1rem 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-0.1rem);
}

/* Their light pill: a near-flat white-to-cream gradient over a hairline. */
.button--secondary,
.button--tertiary {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF5EA 100%);
  color: #50000B;
  border: 0.1rem solid var(--im8-hairline);
  box-shadow: 0 0.1rem 0.2rem rgba(82, 47, 18, 0.05);
}

@media (prefers-reduced-motion: reduce) {
  .product-form__submit,
  .cart__checkout-button,
  .button { transition: none; }
  .product-form__submit:hover,
  .cart__checkout-button:hover,
  .button:hover { transform: none; }
}

/* ---- FAQ / accordions ---------------------------------------------------
   IM8's list is stripped: no leading icon, the question left, a + that
   becomes a - on the right, and a hairline between rows. Ours carried a
   question-mark icon on every row and a caret, which is what made it look
   busier than theirs. */
.product__accordion,
.accordion {
  border: 0;
  border-bottom: 0.1rem solid rgba(80, 0, 11, 0.14);
  border-radius: 0;
}

.product__accordion summary,
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.6rem 0;
  list-style: none;
}

.product__accordion summary::-webkit-details-marker,
.accordion summary::-webkit-details-marker { display: none; }

/* The leading question mark goes; the row is the question. */
.product__accordion summary .svg-wrapper,
.accordion summary .svg-wrapper { display: none; }

.product__accordion .summary__title,
.accordion .summary__title {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.product__accordion .accordion__title,
.accordion .accordion__title {
  margin: 0;
  font-family: var(--font-body-family);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: #50000B;
}

/* Dawn's caret is replaced by a + that flips to a - when open. */
.product__accordion summary > svg,
.accordion summary > svg { display: none; }

.product__accordion summary::after,
.accordion summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-body-family);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
  color: #50000B;
}

.product__accordion details[open] summary::after,
.accordion details[open] summary::after,
details[open] > summary::after { content: "\2212"; }

.product__accordion .accordion__content,
.accordion .accordion__content {
  padding: 0 0 1.8rem;
  font-size: 1.5rem;
  line-height: 1.55;
  color: rgb(var(--color-foreground));
}

/* Icon controls keep no fill at all: they are glyphs, not buttons. */
cart-remove-button .button,
cart-remove-button button,
.cart-drawer .quantity__button,
.drawer__close,
.header__icon,
.swiper-btn,
.pl-lightbox__close,
.pl-lightbox__nav,
.product__media-toggle {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  color: rgb(var(--color-foreground)) !important;
  transform: none !important;
}

.pl-lightbox__close,
.pl-lightbox__nav {
  background: rgb(var(--color-background)) !important;
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.22) !important;
}

/* ---- image-with-text ----------------------------------------------------
   No side gutters on this section, so the media runs edge to edge. The text
   keeps a small inset of its own: at 0 it would sit against the screen edge
   and become hard to read. */


/* ---- trust strip, final geometry ---------------------------------------
   The row was centred as a group, which left the last item hard against the
   right edge while the first sat inset. Spread across the full width with
   the outer items pulled in, so nothing touches an edge. */
.product__text--group.product__text--row {
  justify-content: space-between;
  padding-inline: 0.2rem;
}

.product__text--row .product__text-line:first-child { justify-content: flex-start; }
.product__text--row .product__text-line:last-child { justify-content: flex-end; }

/* The check reads as a square against a round truck and lock; a ring around
   it puts all three on the same silhouette. */




/* ---- newsletter --------------------------------------------------------- */
.newsletter-section .newsletter,
.newsletter__wrapper {
  padding-top: 2.4rem !important;
  padding-bottom: 2.4rem !important;
}

/* ---- related products --------------------------------------------------
   Everything left, tighter, and the card title in caps so it reads as a
   label rather than a sentence. */
.related-products .card__content,
.related-products .card__information {
  padding-top: 0.6rem;
  text-align: left;
}

.related-products .card__heading,
.related-products .card__heading a {
  text-align: left;
  font-size: 1.3rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.related-products .card-information,
.related-products .price {
  text-align: left;
  justify-content: flex-start;
  margin-top: 0.2rem;
}

.related-products .card__inner { margin-bottom: 0.4rem; }

/* Dawn sizes a grid item as calc(50% - var(--grid-*-horizontal-spacing)/2),
   so setting column-gap on its own desyncs the two: a 10px gap against items
   sized for 8px overflows the row by 2px and every card wraps onto its own
   line. Set the variable and let Dawn derive both from it. */
.related-products .grid,
.related-products .product-grid {
  --grid-mobile-horizontal-spacing: 8px;
  --grid-desktop-horizontal-spacing: 16px;
  row-gap: 1.6rem;
}



/* ---- customer support ---------------------------------------------------
   Was a bare full-width block. Given the same treatment as the giving-back
   panel so the two read as the same kind of note: cream ground, soft
   hairline, contained rather than edge to edge. */
.icon-bar__grid {
  margin-inline: 0;
}

.icon-bar__card {
  background: #F5EDE0;
  border: 0.1rem solid #E8C8C8;
  border-radius: 10px;
  padding: 1.6rem 1.8rem;
  text-align: left;
  align-items: flex-start;
}

.icon-bar__card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #6B0010;
  margin-bottom: 0.2rem;
}

.icon-bar__text {
  font-size: 1.4rem;
  line-height: 1.35;
  opacity: 1;
}

/* ---- testimonials: keep its own air ------------------------------------
   The section carried zero padding, so it butted straight against the FAQ
   above it. */
.testimonials {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

@media screen and (max-width: 749px) {
  /* Cards a quarter closer on phones, as asked. */
  .testimonials__grid { gap: 1.8rem; }
  .icon-bar__grid { gap: 1.8rem; }
}

/* ---- product cards, everywhere -----------------------------------------
   Applies on the homepage grids and "you may also like" alike: everything
   ranged left, the title in caps so it reads as a label, and the gap between
   image, title and price closed up. */
.card__heading,
.card__heading a,
.card-information,
.card__information,
.card__content,
.card .price {
  text-align: left;
}

.card__heading,
.card__heading a {
  font-size: 1.3rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 700;
}

/* No padding on the information block at all, and no side padding on the
   card content, so the title and price line up with the image edge rather
   than sitting inset from it. */
.card__information {
  padding: 0 !important;
}

.card__content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0.6rem;
  padding-bottom: 0;
}

.card-information > *,
.card__information .price {
  margin-top: 0.2rem;
}

.card .price,
.card-information .price {
  justify-content: flex-start;
  font-size: 1.3rem;
}

.card__inner { margin-bottom: 0.4rem; }

/* Columns closer together.
   Dawn's grid is flex and sizes each item as
   max-width: calc(50% - var(--grid-*-horizontal-spacing)/2). Overriding
   column-gap alone broke that pairing: items stayed sized for a 20px gutter
   while the gap became 8px, so 12px fell off the right edge and the row read
   as off-centre. Set the variable and let Dawn do its own maths. */
.grid,
.product-grid,
.collection .grid {
  --grid-mobile-horizontal-spacing: 8px;
  --grid-desktop-horizontal-spacing: 16px;
  --grid-mobile-vertical-spacing: 14px;
  --grid-desktop-vertical-spacing: 20px;
}

/* ---- newsletter --------------------------------------------------------- */
.footer-block--newsletter {
  padding-top: 0;
  padding-bottom: 0;
}

.footer__content-top {
  padding-bottom: 1.6rem;
}

/* The buy-box no-gray purge repaints bare spans, and the trust icons are
   spans, so the colour set on the block never survived. Named explicitly. */
.product__info-container .product__text--row .product__text-icon,
.product__text--row .product__text-icon {
  color: #8B1538 !important;
}

/* ---- quick add on the cards --------------------------------------------
   A small pill under the card, in the same treatment as every other button. */
.quick-add__submit,
.card-wrapper .quick-add__submit {
  min-height: 3.2rem;
  font-size: 1.2rem;
  padding: 0 1.4rem;
  width: 100%;
}

.quick-add { margin-top: 0.6rem; }


/* ======================================================================
   One gutter, everywhere
   Sections were running 0px, 10px and 40px depending on which one it was,
   while the product page's own content sat at 15. Every section wrapper now
   uses the same figure, so a heading on the homepage lines up with a
   heading on a product page.
   ====================================================================== */
.page-width,
.page-width--narrow,
.footer__content-top,
.footer__content-bottom {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* The product page adds its own 0.5rem inside the wrapper; zero it so the
   two sides of the site agree on where content starts. On phones only: from
   750px up, Dawn uses this same padding to hold the buy column off the
   gallery, and `.product .grid__item` (0,2,0) was quietly beating it, which
   is what left the two columns touching on desktop. */
@media screen and (max-width: 749px) {
  .product__info-container,
  .product .grid__item {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Dawn's own column inset, restored above the phone breakpoint with enough
   specificity to survive the rule above. */
@media screen and (min-width: 750px) {
  .product.grid .product__info-wrapper {
    padding-left: 5rem;
  }

  .product.grid.product--right .product__info-wrapper {
    padding-left: 0;
    padding-right: 5rem;
  }
}

@media screen and (min-width: 750px) {
  .page-width,
  .page-width--narrow,
  .footer__content-top,
  .footer__content-bottom {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/* ---- collection cards as wide banners ----------------------------------
   "Shop by kind" was a stack of tall square cards. Same full width, much
   shorter: a 3:1 band per collection. */
.collection-list__item .card__inner,
.collection-list .card__inner,
.collection-list__item .media {
  aspect-ratio: 3 / 1 !important;
  padding-bottom: 0 !important;
  height: auto !important;
}

.collection-list__item .media img,
.collection-list .card__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---- image-with-text: padding follows the background --------------------
   A block with a background is a panel and needs room inside it. A block
   without one is just text on the page and should sit on the section's own
   gutter. Dawn marks the second kind with .background-transparent, so that
   is the test - the first version zeroed both and left the cream panels with
   their words hard against the edge. */
@media screen and (max-width: 749px) {
  .image-with-text__content.background-transparent {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .image-with-text__content:not(.background-transparent) {
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
  }
}

/* ---- inline Add button --------------------------------------------------
   It sat flush with the upsell row's right edge, and the drawer's scroll
   container clipped the 20px glow the primary buttons carry. Room to the
   right, and a shadow scaled to the button rather than to a full-width CTA. */
.cart-upsell__row {
  padding-right: 0.5rem;
}

.cart-upsell__add {
  box-shadow:
    0 0.2rem 0.6rem rgba(164, 0, 17, 0.28),
    inset 0 0.1rem 0 rgba(255, 255, 255, 0.15) !important;
}

.cart-upsell__add:hover {
  box-shadow:
    0 0.3rem 0.8rem rgba(164, 0, 17, 0.34),
    inset 0 0.1rem 0 rgba(255, 255, 255, 0.2) !important;
}

/* Two lines each. Shopify rejects <br> in this setting, and no single
   max-width works for all three - "24/7 Customer" needs 13ch or more to keep
   its first line, while "Fast Shipping" needs under 13ch to break at all. So
   each column is given the width that puts its own break in the right place. */
.product__text--row .product__text-line:nth-child(1) .product__text-body { max-width: 14ch; }
.product__text--row .product__text-line:nth-child(2) .product__text-body { max-width: 8.5ch; }
.product__text--row .product__text-line:nth-child(3) .product__text-body { max-width: 10.5ch; }

/* ---- lists start at the left --------------------------------------------
   The browser's own list indent pushed every bullet in from the paragraph
   above it, so a list and its intro never shared a left edge. */
.rte ul,
.rte ol,
.accordion__content ul,
.accordion__content ol,
.image-with-text__text ul,
.image-with-text__text ol {
  margin-left: 0;
  padding-left: 1.1em;
  list-style-position: outside;
}

.rte li,
.accordion__content li,
.image-with-text__text li {
  margin-left: 0;
  padding-left: 0;
}

/* ---- the gallery reserves its size before the script runs ---------------
   Swiper writes each slide's width on init, so between first paint and init
   the slide was sized by the image's own intrinsic width and then grew. The
   box is declared up front, so nothing moves on load. */
.product__media-list .js-media-list .swiper-slide {
  width: 100%;
  flex: 0 0 100%;
}

.product__media-list .product__media-item .product__media {
  aspect-ratio: 4 / 5;
}

.product__media-list .product__media-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- a panel earns padding by having a background ----------------------- */
.product__text--boxed {
  padding-left: 1.4rem !important;
  padding-right: 1.4rem !important;
}

/* ---- customer support: full width of its section ----------------------- */
.icon-bar__grid {
  max-width: none;
}

/* ---- quick add sits full width under its card -------------------------- */
.quick-add,
.card-wrapper .quick-add__submit {
  width: 100%;
  justify-content: center;
  margin-left: 0;
  margin-right: 0;
}

/* ---- the two prices read as one unit ----------------------------------- */
.product__price-block {
  gap: 0.2rem 0.5rem;
}

/* ---- testimonial card: tighter inside on phones ------------------------- */
@media screen and (max-width: 749px) {
  /* section-testimonials.css sets 12.5px 20px 20px and wins on order. */
  .testimonials__info {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ---- customer support: a box, not a band ------------------------------- */
.icon-bar__grid {
  margin-inline: 0;
}

/* ---- quick add stays inside its card ------------------------------------
   Dawn offsets this control, so at width:100% it started 13px in from the
   card's left edge and ran 13px past its right. Pinned to the card instead. */
.card-wrapper .quick-add,
.quick-add {
  margin: 0.6rem 0 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.card-wrapper .quick-add__submit {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* ---- card prices sit together ------------------------------------------
   The two were pushed apart by the price block's own justification; they read
   as one unit now, and the struck one carries the same ink as the amount. */
.card .price,
.card-information .price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

/* Dawn shows exactly one of .price__regular / .price__sale and hides the
   other with display:none. A blanket display:flex on both here out-specified
   that hide and brought the hidden branch back, which is why a sale card
   printed its price three times. Each branch is now only laid out in the
   state it belongs to. */
.card .price__container {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.card .price:not(.price--on-sale) .price__regular,
.card .price--on-sale .price__sale {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.card .price-item {
  margin: 0;
}

/* Dawn gives .quick-add a 13px side margin of its own, so at width:100% the
   button ran 13px past the card on each side. Both are forced here: the
   earlier rule lost on specificity. */
.card-wrapper .quick-add,
.card__content .quick-add,
.quick-add.no-js-hidden {
  margin: 0.6rem 0 0 !important;
  width: 100% !important;
}

/* section-testimonials.css sets margin-inline on this grid and wins on order,
   so the zeroing has to be forced. */
.icon-bar__grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- card titles: two lines, always -------------------------------------
   A one-line title next to a three-line one left the prices below them on
   different lines, so the row never settled. Clamped at two and given the
   height of two whether it uses them or not, so every card in a row lines
   up. Longer titles trail off rather than wrapping on. */
/* The clamp needs display:-webkit-box to draw the ellipsis; something in the
   card styles resolves it to flow-root, which clips without one. Forced, and
   the link inside stays inline so it takes part in the same line box. */
/* The heading is a flex item, and Chrome blockifies display:-webkit-box on
   one to flow-root, which clips without an ellipsis. The clamp goes on the
   link inside instead, which is not a flex item and keeps the box. */
.card__heading {
  display: block;
  overflow: hidden;
  min-height: calc(2 * 1.25em);
}

.card__heading a,
.card__heading > a.full-unstyled-link {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- footer: no side padding of its own -------------------------------- */
.footer__content-top,
.footer__content-top.page-width {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- quick add matches the main CTA -------------------------------------
   It was rendering in the secondary treatment; the card button is the same
   button as Add to cart, just smaller. */
.quick-add__submit,
.card-wrapper .quick-add__submit,
.quick-add__submit.button {
  background: linear-gradient(135deg, #A40011 0%, #6B0010 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow:
    0 0.3rem 1rem rgba(164, 0, 17, 0.3),
    inset 0 0.1rem 0 rgba(255, 255, 255, 0.15) !important;
}

.quick-add__submit:hover,
.card-wrapper .quick-add__submit:hover {
  box-shadow:
    0 0.4rem 1.4rem rgba(164, 0, 17, 0.38),
    inset 0 0.1rem 0 rgba(255, 255, 255, 0.2) !important;
}

/* ---- product columns need air between them ------------------------------
   Two things were collapsing this gutter. section-main-product.css sets
   `.product.grid { gap: 0 }` at 0,2,0 and loads after this file, so a plain
   `.product { column-gap }` here never applied; and zeroing the info
   wrapper's padding took away Dawn's own 4-5rem inset as well. So: match
   that selector, and set the gutter through the variable Dawn also uses for
   the column widths (calc(55% - var/2) + calc(45% - var/2) + var = 100%) so
   the row still adds up and nothing wraps. Dawn's own 5rem padding on the
   info column stays, so the two columns end up ~74px apart. */
@media screen and (min-width: 990px) {
  .product.grid {
    --grid-desktop-horizontal-spacing: 24px;
    column-gap: var(--grid-desktop-horizontal-spacing) !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .product.grid {
    --grid-desktop-horizontal-spacing: 24px;
    column-gap: var(--grid-desktop-horizontal-spacing) !important;
  }
}

/* ======================================================================
   One price treatment, taken from the bundle selector
   Bundle sets the pattern: the amount at 700, the struck price a step
   smaller at 400, both in ink, tracking normal. Weight and the strikethrough
   do the distinguishing, not colour. Everything else follows it.
   ====================================================================== */
.price,
.price-item,
.price__sale s,
.card .price,
.card .price-item,
.cart-item__totals .price,
.cart-item__totals .price-item {
  letter-spacing: normal;
  font-family: var(--font-body-family);
}

/* the amount */
.product__price-block .price-item--sale,
.card .price-item--sale,
.card .price-item--regular:not(s),
.cart-item__totals .price-item--sale,
.cart-drawer .cart-item__price-wrapper .price-item--sale {
  font-weight: 700;
  color: rgb(var(--color-foreground));
  letter-spacing: normal;
}

/* the struck one */
.product__price-block .price__sale s,
.product__price-block s.price-item,
.card .price__sale s,
.card s.price-item,
.cart-item__totals s,
.cart-drawer s.price-item {
  font-weight: 400;
  color: rgb(var(--color-foreground));
  text-decoration-line: line-through;
  letter-spacing: normal;
}

.product__price-block .price__sale s,
.product__price-block s.price-item { font-size: 1.5rem; }
.product__price-block .price-item--sale { font-size: 1.6rem; }

.card .price__sale s,
.card s.price-item { font-size: 1.2rem; }
.card .price-item--sale,
.card .price-item--regular:not(s) { font-size: 1.3rem; }

/* ---- Add to cart fills its column -------------------------------------- */
.product-form__submit,
.product-form__buttons .product-form__submit {
  width: 100%;
  max-width: none;
}

/* ---- sale badge sits off the corner ------------------------------------
   It was flush against the image's left edge while carrying space below, so
   the two gaps did not match. Equal inset from both. */
.card__badge,
.card__badge.bottom.left {
  margin: 0;
  padding: 1.2rem;
}

.card__badge .badge { margin: 0; }

.product__price-block .price__sale s,
.product__price-block s.price-item { font-size: 1.5rem !important; }
.product__price-block .price-item--sale { font-size: 1.6rem !important; }

/* ---- cart rows: tighter cells ------------------------------------------ */
.cart-drawer .cart-items td,
.cart-drawer .cart-item {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* ---- the amount carries more weight ------------------------------------ */
.product__info-container .price-item--sale,
.product__info-container .price__sale .price-item--sale {
  font-weight: 800 !important;
  padding-top: 0 !important;
}

.product__price-block { padding-top: 0; }

/* ---- card prices: one size, one unit ------------------------------------
   In the product grid the struck price and the amount were set at different
   sizes and pushed apart, so a pair read as two separate numbers. Same size
   for both, a step under Dawn's 16px so the pair sits quietly inside the
   card, and the gap closed. */
.card .price,
.card-information .price,
.card__information .price,
.product-grid .price {
  font-size: 1.5rem;
  letter-spacing: normal;
}

.card .price .price-item,
.card-information .price .price-item,
.card__information .price .price-item,
.product-grid .price .price-item,
.card .price s.price-item,
.card .price__sale s,
.card .price-item--regular,
.card .price-item--sale {
  font-size: 1.5rem !important;
  line-height: 1.3;
}

.card .price,
.card .price__container,
.card .price__regular,
.card .price__sale,
.card-information .price,
.product-grid .price__sale {
  gap: 0.5rem !important;
  column-gap: 0.5rem !important;
}

/* ---- card price colour follows the discount ----------------------------
   A card that is on sale carries the brand red on the amount, the same red
   the buy box uses; a card at plain price is just ink. Dawn adds
   .price--on-sale only when a compare-at is set, so the markup already says
   which case a card is in. */
.card .price--on-sale .price-item--sale,
.card-information .price--on-sale .price-item--sale,
.product-grid .price--on-sale .price-item--sale {
  color: var(--brand-red, #A40011);
}

.card .price:not(.price--on-sale) .price-item,
.card-information .price:not(.price--on-sale) .price-item,
.product-grid .price:not(.price--on-sale) .price-item {
  color: rgb(var(--color-foreground));
}

/* ---- sale badge: lower on phones ---------------------------------------
   At phone width the badge sat too close to the image's bottom edge. */
@media screen and (max-width: 749px) {
  /* Something upstream adds ~10px under the badge on phones, so the wrapper's
     own padding has to come nearly all the way off for the inset below to
     match the 12px on the left. */
  .card__badge,
  .card__badge.bottom.left {
    padding-bottom: 0.2rem;
  }
}

/* ---- footer signup takes the full column ------------------------------- */
.footer-block__newsletter {
  width: 100% !important;
}

/* ---- card price pair: close the real gap --------------------------------
   The 2.5px column-gap set above was doing nothing: Dawn's own
   `.price--on-sale .price__sale` keeps the wrapper display:block, so the two
   prices were separated by the struck item's 10px right margin plus the
   whitespace between the tags. Forced to flex, where the gap actually
   applies, and the stray margin dropped. */
.card .price--on-sale .price__sale,
.card-information .price--on-sale .price__sale,
.product-grid .price--on-sale .price__sale {
  display: flex !important;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.card .price .price-item--regular,
.card-information .price .price-item--regular,
.product-grid .price .price-item--regular {
  margin: 0 !important;
}

/* ---- filter and sort: same tracking as everything else ------------------
   Dawn ships the facet bar with its own 0.4-0.6px letter-spacing, which reads
   as a different typeface next to the body text even though it is the same
   Inter. */
.facets,
.facets__summary,
.facets__label,
.facets__display,
.facets__item,
.facet-filters,
.facet-filters__label,
.facet-filters__field,
.facet-filters__sort,
.mobile-facets,
.mobile-facets__open,
.mobile-facets__summary,
.product-count,
.product-count__text,
.active-facets,
.active-facets__button {
  letter-spacing: normal;
}

/* ---- customer support: centred from tablet up ---------------------------
   The card runs the full width of the section now, so left-aligned copy sat
   marooned against a wide empty right side. Phones keep the left alignment,
   where the box is barely wider than the text. */
@media screen and (min-width: 750px) {
  /* The section declares three columns whatever the block count, so a lone
     support card was taking the first 424px track and leaving 896px of dead
     space beside it. One card, one track. */
  .icon-bar__grid:has(> :only-child) {
    grid-template-columns: 1fr;
  }

  .icon-bar__card {
    text-align: center;
    align-items: center;
  }

  .icon-bar__card-title,
  .icon-bar__text,
  .icon-bar__text p {
    text-align: center;
  }
}

/* ---- add to cart runs the full buy column -------------------------------
   section-main-product.css caps `.product-form__buttons` at 44rem. In a
   532px column that left the button 92px short on the right while the bundle
   rows, the gift box and everything else ran the full width, so the CTA read
   as misaligned. The cap only matters on a narrow single-column layout,
   which this page never uses. */
.product__info-container .product-form__buttons {
  max-width: none;
}