/* Reference breakpoint ladder. The theme has one desktop step at 960; the
   Shopify reference steps its heading scale at 768 and 1280, and its page
   headers at 1024. These custom properties carry the reference ladder so the
   individual consumers below can adopt it without re-mapping base.css's
   --titleN scale (25 files read those). */
:root {
  --ref-h2: 29px;
  --ref-h2-lh: 1.267;
  --ref-page-title: 26px;
  --ref-blog-title: 26px;
  --ref-pdp-title: 24px;
  --ref-pdp-title-lh: 1.33;
}
@media (min-width: 768px) {
  :root {
    --ref-h2: 33px;
    --ref-h2-lh: 1.235;
    --ref-pdp-title: 30px;
    --ref-pdp-title-lh: 1.4;
  }
}
@media (min-width: 1024px) {
  :root {
    --ref-page-title: 36px;
    --ref-blog-title: 42px;
  }
}
@media (min-width: 1280px) {
  :root {
    --ref-h2: 42px;
    --ref-h2-lh: 1.238;
  }
}

.color-scheme-1 .price,
.color-scheme-2 .price,
.color-scheme-3 .price {
  --color-sale: 232, 78, 78;
}

/* PDP trust block (pickup / compare-ask-share / delivery / shipping) — pixel
   parity with the Shopify reference. */
.pdp-trust {
  color: #5a3819;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 16px;
}
.pdp-trust__pickup-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.pdp-trust__check {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
}
.pdp-trust__ready {
  color: #666666;
  margin-left: 28px;
}
.pdp-trust__link {
  display: inline-block;
  margin-left: 28px;
  margin-top: 6px;
  color: #5a3819;
  font-weight: 500;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}
.pdp-trust__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 20px;
  padding-bottom: 20px;
}
.pdp-trust__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5a3819;
}
.pdp-trust__action svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.pdp-trust__ship {
  border-top: 1px solid rgba(90, 56, 25, 0.15);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pdp-trust__ship-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #5a3819;
}
.pdp-trust__ship-row p {
  margin: 0;
}
.pdp-trust__ship-row strong {
  font-weight: 600;
}
.pdp-trust__ship-ico {
  flex: 0 0 auto;
  display: inline-flex;
}
.pdp-trust__ship-ico svg {
  width: 24px;
  height: 24px;
}

body .price {
  color: rgb(var(--color-text));
}

header.is-transparent:not(.is-transparent--active) .header__heading-logo--nomal {
  filter: brightness(0) invert(1);
}

/* Nav hover underline is brown (rgb var(--color-text)) — invisible on the
   transparent header over the dark hero. The reference underlines in white
   while the header is transparent; the solid/scrolled state keeps brown. */
header.is-transparent:not(.is-transparent--active) .header-inline-menus__link::after {
  background: rgb(255, 255, 255) !important;
}

/* The nav dropdown panel is always a white box. In the transparent header state
   the sub-menu links inherit the white nav text -> white-on-white (an empty
   white box on hover). Force them to the reference's rest colour, which is the
   text colour at 60% — dark enough to stay readable either way. The hover
   colour is set in section-header.css and overrides this. */
header.is-transparent:not(.is-transparent--active) .header-dropdown-menu a,
header.is-transparent:not(.is-transparent--active) .header-dropdown-menu .menus__link,
header.is-transparent:not(.is-transparent--active) .header-dropdown-menu .header-inline-submenus__link {
  color: rgba(90, 56, 25, 0.6) !important;
}

@media screen and (min-width: 960px) {
  .header .header__container.page-width {
    max-width: 1550px;
    padding-left: 49px;
    padding-right: 49px;
  }
}

/* "As seen on" press-logo strip: give every logo an identical cell and center
   the 150x150 mark inside it (both axes). The theme's base rule pins the img
   position:absolute/left:0, which left-aligns each mark in its column and drags
   the whole row off-centre; flex centring in an equal cell fixes that. */
#shopline-section-1773431573624fceb2aa .text-columns-with-images-item__wrapper {
  background: transparent !important;
}
#shopline-section-1773431573624fceb2aa .text-columns-with-images-item__image {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 150px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
#shopline-section-1773431573624fceb2aa .text-columns-with-images-item__link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative !important;
  width: 150px !important;
  height: 150px !important;
  padding: 0 !important;
  flex: 0 0 auto;
}
#shopline-section-1773431573624fceb2aa .text-columns-with-images-item__link img {
  position: static !important;
  width: 150px !important;
  height: 150px !important;
  object-fit: contain !important;
  margin: 0 !important;
  background: transparent;
}

/* Global product card parity (Best Sellers, collections, recommendations). */

/* Regular (non-sale) price was picking up the sale RED via component-price.css
   `.price__regular .price-item--regular{color:var(--color-sale)}`. Reference shows
   regular prices in brand brown; sale prices stay red (they live in a different
   container, `.price__sale .price-item--sale`, untouched here). */
.price .price__regular .price-item--regular {
  color: rgb(66, 41, 18) !important;
}
/* Card prices are weight 400 in the reference (theme applies fw-bold = 700). */
.card .card__content .price .price-item,
.card .card__content .price [class*="price-item"] {
  font-weight: 400 !important;
}

/* Sold-out badge: reference is a white round medallion centred on the image,
   not the theme's dark rectangle pinned to a corner. */
.card .card__badge.sold-out-message {
  --card-badge-bg: 245, 245, 245 !important;
  --card-badge-text-color: 0, 0, 0 !important;
  background-color: rgb(245, 245, 245) !important;
  color: rgb(0, 0, 0) !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 !important;
  line-height: 1.05;
}
.card .card__badge.sold-out-message span {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* "Shop All Products" is an outline button in the reference (brown border,
   transparent fill); it fills brown only on hover. */
.featured-collection .collection__view-all a.button {
  background-color: transparent !important;
  color: rgb(var(--color-text)) !important;
  border: 1px solid rgb(var(--color-text)) !important;
}
.featured-collection .collection__view-all a.button:hover {
  background-color: rgb(var(--color-text)) !important;
  color: rgb(255, 255, 255) !important;
}

/* Tighten the title -> price gap (theme stacks a 12px title margin on a 10px
   price margin = 22px; reference sits the price snugly under the title). */
.card .card__content .card__content-bottom .price {
  margin-top: 0 !important;
}
.card .card__content .product__title {
  margin-bottom: 5px !important;
}

/* Featured-collection heading: the reference reads "You are in Best Sellers v"
   with a grey lead-in and the collection name as a brown, underlined dropdown
   (chevron). The title string carries a "|" splitting lead-in from accent. */
.featured-collection__title-prefix {
  color: rgb(102, 102, 102);
}
.featured-collection__title-accent {
  color: rgb(var(--color-text));
  border-bottom: 1px solid rgb(var(--color-text));
  padding-bottom: 3px;
  white-space: nowrap;
}
.featured-collection__title-accent::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-5px) rotate(45deg);
  vertical-align: middle;
}

/* Scroll-reveal states (paired with parity-scroll-reveal.js) — only elements
   below the fold at load get .sl-reveal, so above-fold content never hides. */
.sl-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.sl-reveal.sl-revealed {
  opacity: 1;
  transform: none;
}

/* ============================================================
   R34 — COLLECTION PAGE parity
   Reference: angelicorganicshair.com/collections/all
   D2 brown banner · D1 filter sidebar · D3 sort · full-width
   ============================================================ */

/* --- D2: brown banner band (boxed to content width, 15px gutters like ref;
   ref brown wrapper measured x15..1905 @1920, not full-bleed) --- */
#shopline-section-main-collection-banner {
  background: transparent;
}
#shopline-section-main-collection-banner .collection-hero.page-width {
  max-width: none;
  width: calc(100% - 30px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  background: #5a3819;
}
#shopline-section-main-collection-banner .collection-hero__no-cover {
  padding: 59px 0 63px;
  text-align: center;
}
/* breadcrumb centered — the nav carries .display-block-desktop (display:block
   !important) + .text-left, so flex/justify are no-ops; center via text-align. */
#shopline-section-main-collection-banner .breadcrumb {
  text-align: center;
  font-size: 16px;
  margin: 0 0 12px;
}
#shopline-section-main-collection-banner .breadcrumb__divider {
  margin: 0 5px;
}
#shopline-section-main-collection-banner .breadcrumb a,
#shopline-section-main-collection-banner .breadcrumb span,
#shopline-section-main-collection-banner .collection-hero__title {
  color: #fff;
}
#shopline-section-main-collection-banner .breadcrumb__divider {
  font-size: 0;
}
#shopline-section-main-collection-banner .breadcrumb__divider::after {
  content: "\203A"; /* › */
  font-size: 16px;
  line-height: 1;
}
#shopline-section-main-collection-banner .collection-hero__title {
  margin: 6px 0 0;
  text-align: center;
}
#shopline-section-main-collection-banner .collection-divider {
  display: none;
}

/* Collection content width 1240 → near-full (ref ~1890 @1920): set in
   section-collection-product-list.css @media(min-width:990px) — the canonical
   rule (equal specificity, loads after this file). */

/* --- D1: filter sidebar (vertical) --- */
/* "Filters" heading above the facets */
.facets-vertical-heading {
  font-family: "Jost", sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.28;
  color: #5a3819;
  margin: 0 0 18px;
}
/* the sidebar is a drawer up to 1279 (reference xl) → the heading would be orphaned */
@media (max-width: 1279px) {
  .facets-vertical-heading {
    display: none;
  }
}
/* group titles "Availability" / "Price" */
.facets-vertical .facets__disclosure-vertical > summary span,
.facets-vertical .facets__price-details > summary span {
  font-size: 16px;
  font-weight: 400;
  color: #5a3819;
}
/* square checkbox, grey border, 16px grey label (ref) */
.facets-vertical .facet-checkbox > span {
  font-size: 16px;
  color: #666;
}
.facets-vertical .facet-checkbox > span::before {
  width: 20px;
  height: 20px;
  border: 1px solid #666;
  border-radius: 0;
  margin-right: 12px;
}
.facets-vertical .facet-checkbox > input[type="checkbox"]:checked ~ span::before {
  background: #5a3819;
  box-shadow: inset 0 0 0 3px #fff;
}
/* price inputs → ref (h46, radius5, #eee border, 16px brown) */
.facets-vertical .price-range-container .price-range-input .field {
  border: 1px solid #eee;
  border-radius: 5px;
  height: 46px;
}
.facets-vertical .price-range-container .price-range-input .field__input {
  height: 44px;
  font-size: 16px;
  color: #5a3819;
}
/* sidebar column ~ ref 300px (was 256) */
@media (min-width: 960px) {
  .facets-vertical .facets__form-vertical {
    width: 300px;
  }
}

/* --- D1: sidebar promo card "SALE UP TO 25% OFF" (ref .m-image-card) --- */
.collection-sidebar-promo {
  display: block;
  position: relative;
  width: 100%;
  margin-top: 32px;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  text-decoration: none;
}
.collection-sidebar-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}
.collection-sidebar-promo__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  color: #fff;
  /* the facets-wrapper sets word-break:break-all — keep promo copy whole */
  word-break: normal;
  overflow-wrap: normal;
}
.collection-sidebar-promo__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 6px;
}
.collection-sidebar-promo__title {
  font-family: "Jost", sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 20px;
}
.collection-sidebar-promo__btn {
  display: inline-block;
  background: #fff;
  color: #5a3819;
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 10px 30px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

/* ===== R34b refinements (from multi-lens audit) ===== */
/* #10 no divider lines between filter groups (ref = whitespace only) */
.facets-vertical .facets__disclosure-vertical,
.facets-vertical .facets__price-details {
  border-bottom: 0;
}
/* #4 price filter: SLIDER above the min/max inputs (ref order) */
.facets-vertical .price-range-container {
  display: flex;
  flex-direction: column;
}
.facets-vertical .price-range-container .price-range-slider {
  order: 1;
  margin: 6px 0 20px;
}
.facets-vertical .price-range-container .price-range-input {
  order: 2;
  margin-bottom: 0;
}
/* price slider handles: solid brown fill (ref) — theme default is a hollow ring */
.facets-vertical .price-range-container .price-range-slider .price-range-dot {
  background: #5a3819;
  border-color: #5a3819;
}
/* price separator: word "To" (ref) instead of the 1px dash line */
.facets-vertical .price-range-container .price-range-input .line {
  width: auto;
  height: auto;
  background: transparent;
  color: #666;
  font-size: 16px;
  line-height: 46px;
  margin: 0 12px;
}
/* #13 banner shrinks at <=1440 (ref ~190px there vs 210 @1920) */
@media (min-width: 960px) and (max-width: 1440px) {
  #shopline-section-main-collection-banner .collection-hero__no-cover {
    padding: 48px 0 52px;
  }
}

/* Availability labels stay Shopline-native ("in stock (N)") — the label text
   and counts are data-driven (ref shows "In stock (8)"); ::first-letter can't
   reach the text past the checkbox ::before box. Left as-is (minor). */

/* Price: hide the "Maximum price is $X" line (ref shows only slider + inputs) */
.facets-vertical .facets__price-content .facets__header .facets__selected {
  display: none;
}

/* --- D3: sort row — sort LEFT, density switcher RIGHT, count hidden --- */
.facets-vertical-sort .facets-vertical-form {
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}
.facets-vertical-sort .facets-vertical-form #ProductCountDesktop {
  display: none;
}
/* sort control: drop the bordered box (ref = plain text + caret) */
.facets-vertical-sort .js-sorting > .facets__sorting-details.disclosure-has-popup {
  border: 0;
  padding: 0;
}

/* Sort panel: the base rule right-anchors it (left:initial;right:0) so it hangs
   left over the filter sidebar; ref drops it under the trigger, left edge flush.
   box-shadow needs !important — .global-modal-border-shadow declares one. */
.facets-vertical-sort
  .js-sorting
  .facets__sorting-details
  .facets__sorting-content {
  top: 100%;
  left: 0;
  right: auto;
  width: auto;
  min-width: 0;
  padding: 10px 20px;
  border-width: 0;
  border-radius: 5px;
  box-shadow: 0 20px 30px rgba(90, 56, 25, 0.12) !important;
}

/* Ref option rows are 32px, 16/500, no check-icon gutter — selection is shown by
   the text going from 75% to full opacity. */
.facets-vertical-sort
  .js-sorting
  .facets__sorting-details
  .facets__sorting-content
  .sort-option {
  margin-top: 0;
  padding: 0;
  min-height: 32px;
  white-space: nowrap;
}

.facets-vertical-sort
  .js-sorting
  .facets__sorting-details
  .facets__sorting-content
  .sort-option
  > svg {
  display: none;
}

.facets-vertical-sort
  .js-sorting
  .facets__sorting-details
  .facets__sorting-content
  .sort-option
  > span {
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: normal;
  color: rgba(90, 56, 25, 0.75);
}

.facets-vertical-sort
  .js-sorting
  .facets__sorting-details
  .facets__sorting-content
  .sort-option
  input[type="radio"]:checked
  ~ span,
.facets-vertical-sort
  .js-sorting
  .facets__sorting-details
  .facets__sorting-content
  .sort-option:hover
  > span {
  color: rgb(90, 56, 25);
}

/* --- D3: grid-density switcher (ref .m-toolbar--column-switcher, 5 × 34px) --- */
.collection-density-switcher {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
.collection-density-switcher .density-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: #5a3819;
  background: #f2f2f2;
  transition: background 0.2s ease, color 0.2s ease;
}
.collection-density-switcher .density-btn svg {
  width: auto;
  height: 12px;
}
.collection-density-switcher .density-btn:first-child svg {
  height: 9px;
}
.collection-density-switcher .density-btn.is-active {
  color: #fff;
  background: #5a3819;
}
/* Below 1280 the drawer toolbar carries the density control, so the sidebar's
   own switcher and promo card stay out of the flow. */
@media (max-width: 1279px) {
  .collection-density-switcher {
    display: none;
  }
  .collection-sidebar-promo {
    display: none;
  }
}

/* ===== R34c — quick-add opener hide-at-rest / reveal-on-hover for ALL card
   surfaces (home / featured-collection / recommendations). Ref shows no control
   at rest and reveals it on hover; without this the theme default keeps the bag
   icon visible at rest. Desktop only — mobile/touch keeps it visible. The
   collection cards layer the D-3 bar restyle on top (more specific selector). ===== */
@media (min-width: 990px) {
  .card .quick-add-icon__opener {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .card:hover .quick-add-icon__opener,
  .card:focus-within .quick-add-icon__opener {
    opacity: 1 !important;
  }
}

/* ===== D-3 — Quick Add bottom bar on collection cards. The quick-view icon
   trigger (bag) is restyled into a full-width white "Quick Add" bar pinned to
   the bottom of the photo, revealed on hover — matching the reference
   .m-add-to-cart bar (332x45, #fff, text #000 16/500, 5px radius). The bar
   opens the same quick-add modal, so cart function is preserved.
   Collection-scoped (.main-collection-container); global hide-at-rest comes
   from the R34c block above. Desktop only. ===== */
@media (min-width: 990px) {
  .main-collection-container .card .quick-add:not(.quick-add--tiled):not(.quick-add-button) {
    top: auto;
    left: 20px;
    right: 20px;
    bottom: 20px;
    width: auto;
    padding: 0;
    z-index: 3;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
  }
  .main-collection-container .card:hover .quick-add:not(.quick-add--tiled):not(.quick-add-button),
  .main-collection-container .card:focus-within .quick-add:not(.quick-add--tiled):not(.quick-add-button) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .main-collection-container .card .quick-add:not(.quick-add--tiled):not(.quick-add-button) .quick-add-icon__opener {
    width: 100%;
    height: 45px;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
    border: none;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    gap: 0;
  }
  .main-collection-container .card .quick-add .quick-add-icon__opener i {
    display: none;
  }
  .main-collection-container .card .quick-add .quick-add-icon__opener::after {
    content: "Quick Add";
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
  }
}

/* ===== R35 — global chrome heights (ref: header 97px on inner pages via
   logo 57px + 20px margins; 77px on transparent home via 10px margins;
   announcement bar 40px, home-only — the per-page gate lives in
   sections/announcement-bar.html). Logo height-capped so the header math
   holds until the ref Pure-White logo asset (2.98:1) is uploaded. ===== */
@media (min-width: 960px) {
  .header .header__heading {
    margin: 20px auto;
  }
  .header .header__heading-logo {
    width: auto;
    height: 57px;
  }
  .header.is-transparent:not(.is-transparent--active) .header__heading {
    margin: 10px auto;
  }
  .announcement-bar--item.section-padding {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
}
@media (max-width: 959px) {
  .header .header__heading-logo {
    width: auto;
    height: 48px;
  }
}

/* ===== R35c/R61 — footer parity vs reference. The reference footer wrapper has
   NO horizontal padding; its inner container (max-width 1200 + padding 0 15) does
   all the work, so the 30px here insets content below 1260 and is invisible above.
   Reference layout flips at 1024, not 960 — the 5-track row's intrinsic minimum is
   1214px, which is what pinned scrollWidth at 1214 across 960..1213. ===== */
@media (min-width: 960px) {
  .footer.section-footer-padding {
    padding: 80px 0 80px !important;
  }
  .footer__content-bottom-wrapper {
    position: relative;
    top: 44px;
  }
  .footer__content-bottom.page-width {
    margin-top: 74px !important;
    padding: 20px var(--page-padding) 0 !important;
    align-items: flex-end;
  }
  .footer .footer__copyright {
    margin-top: 2px !important;
  }
  .footer__copyright .copyright__content {
    font-size: 14px;
    line-height: 20px;
  }
}

/* Reference two-up band. The gap:60px on .footer__content-top would put every
   50% column on its own row, so both axes are zeroed explicitly. The accordion
   chrome is suppressed here because the reference expands every block from 768
   up (measured: panels rendered, summary padding 0, no separators). */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer__content-top.custom-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 0;
    row-gap: 0;
    padding: 0 var(--page-padding);
  }
  .footer__content-top .footer-col {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    box-sizing: border-box;
    margin-left: 0;
    border-bottom: 0;
  }
  .footer__content-top .footer-col.footer-newsletter {
    border-bottom: 0;
  }
  .footer__content-top .footer-col:nth-child(odd) {
    padding-right: 15px;
  }
  .footer__content-top .footer-col:nth-child(even) {
    padding-left: 15px;
  }
  .footer__content-top .footer-acc__panel {
    display: block;
  }
  .footer__content-top .footer-col .footer-acc > summary {
    padding: 0;
    pointer-events: none;
  }
  .footer__content-top .footer-col .footer-acc > summary::after {
    content: none;
  }
}

/* Reference desktop row = shares 30 : 6 : 15 : 15 : 20 of 86, taken on an
   accordion box of Wc + 40; the px constants convert that box and its 20px
   inner padding onto this theme's four gapless columns. */
@media (min-width: 1024px) {
  .footer__content-top.custom-footer {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0 var(--page-padding);
  }
  .footer__content-top .footer-col {
    flex-grow: 0;
    flex-shrink: 0;
    width: auto;
  }
  .footer__content-top .footer-col.footer-newsletter {
    flex-basis: calc(34.883721% - 26.046512px);
    margin-left: 0;
  }
  .footer__content-top .footer-newsletter + .footer-col {
    flex-basis: calc(17.44186% - 33.023256px);
    margin-left: calc(6.976744% + 42.790698px);
  }
  .footer__content-top .footer-newsletter + .footer-col + .footer-col {
    flex-basis: calc(17.44186% - 33.023256px);
    margin-left: 40px;
  }
  .footer__content-top .footer-col.footer-store {
    flex-basis: calc(23.255814% - 30.697674px);
    margin-left: 40px;
  }
}

/* The store column is narrower than 4 * 48 + 3 * 12 = 228 between 1024 and 1259,
   so the fourth social chip has to be allowed onto a second row (the reference
   wraps there too, measured 118px tall at 1024). Needs to out-specify
   section-footer.css's `.footer-store .footer__list-social{flex-wrap:nowrap}`,
   which loads later in the body. */
@media (min-width: 1024px) and (max-width: 1259px) {
  .custom-footer .footer-store .footer__list-social {
    flex-wrap: wrap;
  }
}

/* Reference steps the newsletter heading 25/34 -> 36/46 at 1280; this theme
   stepped it at 960. */
@media (min-width: 960px) and (max-width: 1279px) {
  .footer-newsletter .footer-acc > summary.footer-title {
    font-size: 25px;
    line-height: 34px;
  }
}

/* ===== R38 — Product Review app widgets → Judge.me reference styling (Phase 5).
   The reference Judge.me stars are gold rgb(188,153,64); the Product Review app
   renders them in the theme text colour (near-black) via `currentColor` on the
   filled-star path. Recolour the FILLED star portion to the reference gold
   across all review widgets (home carousel/testimonials, collection carousel,
   PDP reviews). Empty-star portions stay grey (matches Judge.me). ===== */
.plugin-product-comment--star-first,
[class*="plugin-product-comment"] [class*="star-first"],
[class*="plugin-product-comment"] [class*="--star-on"],
[class*="data-ssr-plugin-comment"] [class*="star-first"] {
  color: rgb(188, 153, 64) !important;
}
/* The visible star is `--star-second` (base, drawn in the theme text colour);
   the gold `--star-first` fill overlay renders at width 0 under this app config,
   so the near-black base shows. The review carousels only carry 5-star reviews,
   so colour the whole star gold there. Empty-star colour on the PDP breakdown
   is handled by its own greyscale below. */
.plugin-product-comment--star,
.plugin-product-comment--star-second,
[class*="plugin-product-comment"] [class*="--star-second"],
[class*="plugin-product-comment"] li[class*="--star"] {
  color: rgb(188, 153, 64) !important;
}

/* ===== R41 — H2 home reviews carousel "Let customers speak for us" header.
   The Product Review app renders only the title (h2, left-aligned, black, 30/700).
   Reference = a centred 42/400 brown heading + "5 star reviews from happy customers"
   subtitle. Recreate the centred brown heading; add the subtitle via ::after (the
   app has no subtitle field). Float the carousel arrows top-right out of the centred
   title flow. Scoped to the home reviews slot only. ===== */
#shopline-section-home_reviews_slot .plugin-product-comment-carousel_header {
  display: block !important;
  text-align: center !important;
  position: static;
}
#shopline-section-home_reviews_slot .plugin-product-comment-carousel_header_title {
  width: 100%;
  font-size: 42px !important;
  font-weight: 400 !important;
  line-height: 1.24 !important;
  color: rgb(90, 56, 25) !important;
  text-align: center !important;
  margin: 0 0 4px !important;
}
#shopline-section-home_reviews_slot .plugin-product-comment-carousel_header_title::after {
  content: "\2605\2605\2605\2605\2605";
  display: block;
  margin-top: 12px;
  font-size: 18px;
  letter-spacing: 3px;
  line-height: 1;
  color: rgb(188, 153, 64);
  text-align: center;
}
#shopline-section-home_reviews_slot .plugin-product-comment-carousel_header::after {
  content: "5 star reviews from happy customers";
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: rgb(104, 104, 104);
  text-align: center;
}
/* Mobile step: the reference heading drops to 29/36.743 at phone widths, where
   42px wraps to two lines. */
@media screen and (max-width: 749px) {
  #shopline-section-home_reviews_slot .plugin-product-comment-carousel_header_title {
    font-size: 29px !important;
    line-height: 36.743px !important;
  }
}
/* (R49) carousel arrows are relocated to bottom-centre in the R49 block below. */

/* ===== R42 — H4 "What People Are Saying" (Product Review comment-group / all-reviews grid).
   Tidy the block to even, uniform cards (user request: ровно / одинаковых размеров / не наезжать).
   CSS-only — the block content stays fully editable in admin. Hide the review photos (gives
   uniform card sizes + matches the text-only reference testimonials + removes the broken
   placeholder boxes); reflow the masonry columns into an even 4-col grid; clamp title/body;
   consistent card styling. Scoped to the testimonials slot only. ===== */

/* section heading (the block has no title field) */
#shopline-section-home_testimonials_slot .plugin-product-comment-collections::before {
  content: "What People Are Saying";
  display: block;
  text-align: center;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.24;
  color: rgb(90, 56, 25);
  margin: 0 0 28px;
}

/* hide review photo + broken placeholder -> uniform text cards */
#shopline-section-home_testimonials_slot .plugin-product-comment-imageBox {
  display: none !important;
}

/* masonry columns -> even 4-col grid of cards */
#shopline-section-home_testimonials_slot .plugin-product-comment-pageCollections-list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
}
#shopline-section-home_testimonials_slot .plugin-product-comment-water-col,
#shopline-section-home_testimonials_slot .plugin-product-comment-water-col-item,
#shopline-section-home_testimonials_slot .plugin-product-comment-water-col-item > div {
  display: contents !important;
}

/* uniform card box — fixed height = identical card sizes */
#shopline-section-home_testimonials_slot .plugin-product-comment-waterCommentWrap {
  height: 340px !important;
  margin: 0 !important;
  padding: 22px 20px !important;
  border: 1px solid #eee !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* drop the inner .info border/padding (created a "box-in-box" on short cards) */
#shopline-section-home_testimonials_slot .plugin-product-comment-info {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#shopline-section-home_testimonials_slot .plugin-product-comment-rate {
  position: static !important;
  transform: none !important;
  margin: 0 0 10px !important;
}
#shopline-section-home_testimonials_slot .plugin-product-comment-infoWrap {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  border: 0 !important;
  padding: 0 !important;
}
/* clamp title (1 line) + body (4 lines) so cards are even */
#shopline-section-home_testimonials_slot .plugin-product-comment-WaterCommentWrapTitle {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 8px 0 6px !important;
}
#shopline-section-home_testimonials_slot .plugin-product-comment-content-info {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* pin the product-link card to the card bottom for alignment */
#shopline-section-home_testimonials_slot .plugin-product-comment-bgContainer {
  margin-top: auto !important;
}
/* responsive: tablet 2-col, mobile 1-col + auto height (the 4-col grid is desktop only) */
@media (max-width: 1099px) {
  #shopline-section-home_testimonials_slot .plugin-product-comment-pageCollections-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 749px) {
  #shopline-section-home_testimonials_slot .plugin-product-comment-pageCollections-list {
    grid-template-columns: 1fr !important;
  }
  #shopline-section-home_testimonials_slot .plugin-product-comment-waterCommentWrap {
    height: auto !important;
    min-height: 220px !important;
  }
  #shopline-section-home_testimonials_slot .plugin-product-comment-collections::before {
    font-size: 30px !important;
    margin-bottom: 20px !important;
  }
}

/* ===== R45 — header search overlay parity (the Smart Search Recommendation app
   was disabled, so the theme's own predictive-search modal is the live search).
   Reference: input 747x46 centred at x587 with a 1px brown border and a 5px
   radius, results panel 747 wide starting 5px under it, page dimmed to 0.6. */
.header__search .search-modal__field {
  max-width: 747px;
  margin-left: auto;
  margin-right: auto;
}
.header__search .search-modal__input.field__input {
  height: 46px;
  min-height: 46px;
  padding: 0 44px 0 16px;
  border: 1px solid rgb(90, 56, 25);
  border-radius: 5px;
  font-size: 16px;
  line-height: 46px;
  width: 100%;
}
.header__search .predictive-search {
  left: 0;
  right: 0;
  max-width: 747px;
  margin: 5px auto 0;
}
.header__search .modal__overlay {
  background: rgba(0, 0, 0, 0.6);
}

/* R45b — remaining search-overlay deltas. The close button is a flex sibling of
   the input, so the input's border box stopped 52px short of the 747 field;
   pull it out of flow. The row also sat 9px below the reference, and the dim
   layer had no box of its own. */
.header__search .search-modal__field {
  position: relative;
}
.header__search .search-modal__close-button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 1;
}
.header__search .modal__content {
  height: 57px;
}
/* inset:0 rather than 100vw/100vh: vw includes the scrollbar, which pushed the
   page 13px wide at 390 on the transparent-header home variant. */
.header__search .modal__overlay {
  position: fixed;
  inset: 0;
}
#shopline-section-header:has(.header__search details[open]) .header__heading-logo {
  display: none;
}

/* R45c — reclaim landing: the reference crops both image-with-text photos to a
   fixed box (hero 660x440, formulator 660x990); image-with-text otherwise
   renders them at natural height, which added 450px to the formulator row. */
#shopline-section-hero img {
  height: 440px;
  object-fit: cover;
}
#shopline-section-formulator img {
  height: 990px;
  object-fit: cover;
}

/* P-3 (R46) — PDP buy box: the reference shows the sale price + strikethrough
   compare-at but NO "Save $X" badge (it shows Shop-Pay installments there
   instead, which Shopline has no equivalent for). Hide only the save pill,
   scoped to the PDP info container so collection/home card save tags are
   untouched; the strikethrough (.price-position-origin) stays. */
.product__info-container .price-position-save {
  display: none;
}

/* P-18 / NEW-P-20 (R46) — PDP buy-box price: the reference sale price is RED
   rgb(232,78,78) and the strikethrough compare-at is 14px/400 grey. The PDP
   blanket rule (section-main-product.css) paints every price-item 24px/400
   brown, which turned the sale brown and left the strike at fw700/14.86.
   Scoped to the buy box; collection/home cards already show red. */
.product__info-container .price .price__sale .price-item--sale {
  color: rgb(232, 78, 78) !important;
}
.product__info-container .price-position-origin .price-item--regular {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
  color: rgb(102, 102, 102) !important;
}

/* D-5 (R46) — collection pager: the reference never shows the "X of Y items"
   counter, and shows no pager on a single page (the pager itself is now
   liquid-gated to paginate.pages > 1). Hide the counter line always. */
.simple-pagination-info {
  display: none;
}

/* R47 — the mobile "N items" counter (#ProductCount, .product-count
   .display-none-desktop) leaks on the collection page at mobile; the
   reference shows no such counter there. R46 only hid .simple-pagination-info
   (not present in this DOM), so the real counter stayed visible. Hide
   .product-count on the collection template ONLY — the search page keeps its
   own "N results" counter, which the reference DOES show. */
.main-collection-container .product-count {
  display: none;
}

/* D-11 — collection card title weight (ref .m-product-card__name = 16/500/24).
   Scoped to the collection wrapper so the intentionally-lighter home card title
   (400/lh~20) is untouched. */
.main-collection-container .card .product__title {
  font-weight: 500 !important;
  line-height: 24px !important;
}

/* ============================================================================
   R49 — Product Review home widgets → Judge.me parity (H-11 + H-12).
   Reference (Shopify/Judge.me): H-11 reviews carousel = narrow centred 864px
   column, ~272x200 text cards 3-up, arrows 28px centred UNDER the cards; the
   big top product-photo boxes are hidden (the live app photos are broken/not
   product images — app-locked). H-12 testimonials = borderless text-only cards,
   DARK stars rgb(90,56,25), no sort/summary/dates/thumbs/product-links/ShowMore.
   ============================================================================ */

/* ---- H-11 reviews carousel + D-6 collection carousel (UNIFIED) ----
   Scoped to the .plugin-product-comment-imageTextSwiper WIDGET so the SAME
   Judge.me look applies to the home reviews slot AND the collection-page review
   carousel (D-6). The widget renders only on home + collection pages (never PDP),
   so this scope is safe. The home slot's bespoke header (title/subtitle/gold star)
   stays id-scoped in the R41 block above and is untouched here. */
/* native CSS scroll-snap carousel (slide = flex:0 0 33.33%); constraining the
   container to 864 keeps it 3-up and does not break the scroll paging. */
.plugin-product-comment-imageTextSwiper,
.plugin-product-comment-imageTextSwiper .plugin-product-comment-carousel {
  max-width: 864px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.plugin-product-comment-imageTextSwiper .plugin-product-comment-carousel {
  position: relative !important;
  padding-bottom: 48px !important;   /* room for the bottom-centre arrows */
}
.plugin-product-comment-imageTextSwiper .plugin-product-comment-carousel-wrap,
.plugin-product-comment-imageTextSwiper .plugin-product-comment-carousel-slideWrap {
  width: 100% !important;
  max-width: 864px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* hide the broken/oversized top product-photo boxes -> text-only cards (the live
   review photos are broken legacy Judge.me imports / app-locked) */
.plugin-product-comment-imageTextSwiper .plugin-product-comment-imageRadioBox {
  display: none !important;
}
/* card body: let height collapse to the text, ~200 tall */
.plugin-product-comment-imageTextSwiper .plugin-product-comment-carousel-item,
.plugin-product-comment-imageTextSwiper .plugin-product-comment-carousel-slide,
.plugin-product-comment-imageTextSwiper .plugin-product-comment-ImageSwiperTextItemWrap,
.plugin-product-comment-imageTextSwiper .plugin-product-comment-infoWrap {
  height: auto !important;
}
.plugin-product-comment-imageTextSwiper .plugin-product-comment-ImageSwiperTextItemWrap {
  min-height: 200px !important;
  padding: 22px 18px !important;
  box-sizing: border-box !important;
}
/* clamp the review text so cards stay even */
.plugin-product-comment-imageTextSwiper .plugin-product-comment-content {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* relocate the carousel arrows to bottom-centre, ~28px. On the home slot the
   header is position:static (R41 edit) so the arrows' offsetParent is the
   carousel; on collections there is no header, so it is the carousel too. */
.plugin-product-comment-imageTextSwiper .plugin-product-comment-carousel-pagination {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  justify-content: center !important;
  gap: 16px !important;
}
.plugin-product-comment-imageTextSwiper .plugin-product-comment-carousel-preIcon,
.plugin-product-comment-imageTextSwiper .plugin-product-comment-carousel-nextIcon,
.plugin-product-comment-imageTextSwiper .plugin-product-comment-carousel-disabled {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
}

/* ---- H-12 home testimonials (#shopline-section-home_testimonials_slot) ---- */
/* DARK stars in THIS SCOPE ONLY (overrides the global gold R38 rule); the visible
   star is --star-second, the gold overlay is --star-first. */
#shopline-section-home_testimonials_slot .plugin-product-comment--star,
#shopline-section-home_testimonials_slot .plugin-product-comment--star-full,
#shopline-section-home_testimonials_slot .plugin-product-comment--star-first,
#shopline-section-home_testimonials_slot .plugin-product-comment--star-second,
#shopline-section-home_testimonials_slot [class*="plugin-product-comment"] [class*="--star"] {
  color: rgb(90, 56, 25) !important;
}
/* remove the meta chrome Judge.me does not show: the sort+summary row, the top
   rating trigger, per-review dates, helpful/thumb buttons, product-link cards,
   and the Show More button. */
#shopline-section-home_testimonials_slot .plugin-product-comment-foldContainer,
#shopline-section-home_testimonials_slot .plugin-product-comment-pageCollections-summary,
#shopline-section-home_testimonials_slot .plugin-product-comment-collections-header-sort,
#shopline-section-home_testimonials_slot .plugin-product-comment-commentHeader,
#shopline-section-home_testimonials_slot .plugin-product-comment-date,
#shopline-section-home_testimonials_slot .plugin-product-comment-CommentAndHelpfulBtns-box,
#shopline-section-home_testimonials_slot .plugin-product-comment-product-card,
#shopline-section-home_testimonials_slot .plugin-product-comment-bgContainer,
#shopline-section-home_testimonials_slot .plugin-product-comment-loadMoreContainer {
  display: none !important;
}
/* borderless, transparent cards (Judge.me look); override R42's bordered box */
#shopline-section-home_testimonials_slot .plugin-product-comment-waterCommentWrap {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  height: auto !important;
  padding: 4px 24px 20px 0 !important;
}
#shopline-section-home_testimonials_slot .plugin-product-comment-border,
#shopline-section-home_testimonials_slot .plugin-product-comment-info,
#shopline-section-home_testimonials_slot .plugin-product-comment-infoWrap {
  border: 0 !important;
}
/* keep grid rows top-aligned now that cards are variable height */
#shopline-section-home_testimonials_slot .plugin-product-comment-pageCollections-list {
  align-items: start !important;
}
/* bold review title (Judge.me), allow fuller review text (masonry-like) */
#shopline-section-home_testimonials_slot .plugin-product-comment-WaterCommentWrapTitle {
  font-weight: 700 !important;
  -webkit-line-clamp: 2 !important;
}
#shopline-section-home_testimonials_slot .plugin-product-comment-content-info {
  -webkit-line-clamp: 6 !important;
}

/* ---- R49b addenda ----
   (1) unify the collection carousel to 3-up (app renders it 4-up via inline
       flex:0 0 25%; home is 3-up). Native scroll-snap, so forcing 33.33% is safe.
   (2) remove the star "pill" (.rate has a white bg + 41px radius + shadow) so the
       stars sit plain like Judge.me — on both carousels and the testimonials. */
.plugin-product-comment-imageTextSwiper .plugin-product-comment-carousel-slide {
  flex: 0 0 33.3333% !important;
}
.plugin-product-comment-imageTextSwiper .plugin-product-comment-rate,
#shopline-section-home_testimonials_slot .plugin-product-comment-rate {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---- R49c — mobile carousel (H-11 home + D-6 collection) ----
   The desktop 3-up (flex:0 0 33.33%) crams 3+ illegible cards (~98px, text one
   word per line) into the ~350px mobile swiper. REF @390 shows ONE readable card
   per view. Force ~1-up on phones + keep the bottom-centre arrows visible.
   R-04: !important must be repeated inside the media query. */
@media (max-width: 600px) {
  .plugin-product-comment-imageTextSwiper .plugin-product-comment-carousel-slide {
    flex: 0 0 90% !important;
  }
  .plugin-product-comment-imageTextSwiper .plugin-product-comment-carousel-pagination {
    display: flex !important;
  }
}

/* ---- R51 NEW-G-4 — mobile bottom tab-bar (parity with Shopify .m-mobile-sticky-bar)
   Fixed white bar, 60px, shown only on mobile (<=749px), hidden desktop.
   Excluded from PDP in layout (product template has its own .float-buy sticky ATC). */
.mobile-tab-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  z-index: 25;
  background: #ffffff;
  box-shadow: rgba(90, 56, 25, 0.12) 0 0 10px 0;
  justify-content: space-between;
  align-items: stretch;
}
.mobile-tab-bar__item {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mobile-tab-bar__item > a,
.mobile-tab-bar__item > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5a3819;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-tab-bar__icon {
  color: #5a3819;
}
.mobile-tab-bar__icon--home { width: 24px; height: 24px; }
.mobile-tab-bar__icon--grid,
.mobile-tab-bar__icon--cart,
.mobile-tab-bar__icon--search { width: 20px; height: 20px; }
.mobile-tab-bar__count {
  position: absolute;
  top: -7px;
  right: -18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 2px;
  box-sizing: border-box;
  background: #da3f3f;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  border-radius: 9999px;
}
@media (max-width: 749px) {
  .mobile-tab-bar { display: flex; }
}

.back-to-top {
  position: fixed;
  bottom: 86px;
  right: 16px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgb(90, 56, 25);
  border-radius: 50%;
  background: rgb(90, 56, 25);
  color: #ffffff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease, background-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.back-to-top:hover {
  background: rgb(74, 46, 20);
}
.back-to-top__icon {
  width: 18px;
  height: 18px;
  display: block;
}
@media (max-width: 749px) {
  .back-to-top {
    width: 40px;
    height: 40px;
  }
  .back-to-top__icon {
    width: 16px;
    height: 16px;
  }
}

/* ============================================================================
   NEW-G-9 — Product Review widget type on the HOME slots only.
   The app inherits the section wrapper's 12px body size for anything it does
   not size itself, so reviewer names rendered 12px at 1920 and the review body
   12px at 390. Judge.me reference: body + title 16/22.4 (title 700), reviewer
   name 14.4/14.4, all rgb(90,56,25). Scoped to the two home slots so the PDP
   and collection review widgets keep their own tokens; the star colours set in
   the R38/R49 blocks are untouched.
   ============================================================================ */
#shopline-section-home_reviews_slot .plugin-product-comment-content,
#shopline-section-home_testimonials_slot .plugin-product-comment-content,
#shopline-section-home_testimonials_slot .plugin-product-comment-content-info {
  font-size: 16px !important;
  line-height: 22.4px !important;
  letter-spacing: normal !important;
  color: rgb(90, 56, 25) !important;
}
#shopline-section-home_testimonials_slot .plugin-product-comment-WaterCommentWrapTitle,
#shopline-section-home_testimonials_slot .plugin-product-comment-comment__title {
  font-size: 16px !important;
  line-height: 22.4px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  color: rgb(90, 56, 25) !important;
}
#shopline-section-home_reviews_slot .plugin-product-comment-name,
#shopline-section-home_testimonials_slot .plugin-product-comment-nicknameskuAttributes {
  font-size: 14.4px !important;
  line-height: 14.4px !important;
  letter-spacing: normal !important;
  color: rgb(90, 56, 25) !important;
}
@media (max-width: 749px) {
  #shopline-section-home_reviews_slot .plugin-product-comment-content,
  #shopline-section-home_testimonials_slot .plugin-product-comment-content,
  #shopline-section-home_testimonials_slot .plugin-product-comment-content-info {
    font-size: 16px !important;
    line-height: 22.4px !important;
    letter-spacing: normal !important;
    color: rgb(90, 56, 25) !important;
  }
  #shopline-section-home_testimonials_slot .plugin-product-comment-WaterCommentWrapTitle,
  #shopline-section-home_testimonials_slot .plugin-product-comment-comment__title {
    font-size: 16px !important;
    line-height: 22.4px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    color: rgb(90, 56, 25) !important;
  }
  #shopline-section-home_reviews_slot .plugin-product-comment-name,
  #shopline-section-home_testimonials_slot .plugin-product-comment-nicknameskuAttributes {
    font-size: 14.4px !important;
    line-height: 14.4px !important;
    letter-spacing: normal !important;
    color: rgb(90, 56, 25) !important;
  }
}

/* ===== R61 — 768..1279 band. This theme has ONE tablet breakpoint (959/960);
   the reference has TWO (767/768 and 1023/1024). Every rule below re-gates a
   header behaviour onto the reference's boundary WITHOUT touching the theme's
   global 960 utilities in base.css (49 + 43 consumers across 25 files). ===== */

/* Reference keeps the hamburger header through 1023. Scoped to the header
   section so the other 960-gated rules and the mobile tab-bar are untouched. */
@media (min-width: 960px) and (max-width: 1023px) {
  #shopline-section-header .display-none-tablet {
    display: none !important;
  }
  #shopline-section-header .header__tools.display-none-desktop,
  #shopline-section-header .header__buttons.display-none-desktop,
  #shopline-section-header .icon-button.header__icon-button.display-none-desktop {
    display: flex !important;
  }
  #shopline-section-header .drawer.header__menu-drawer.display-none-desktop {
    display: block !important;
  }
  #shopline-section-header .header {
    --header-column-gap: 0px;
    min-height: 60px;
  }
  #shopline-section-header .header__container {
    grid-template: "tools logo buttons" auto / 1fr auto 1fr !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  #shopline-section-header .header.header .header__heading {
    margin: 10px auto !important;
  }
  #shopline-section-header .header.header .header__heading-logo {
    width: 110px !important;
    height: auto !important;
  }
  #shopline-section-header .header.is-transparent:not(.is-transparent--active) {
    min-height: 0;
  }
}

/* Reference header gutter below 1280 is container 15 with the inner row pulled
   back 16, which is what puts its first nav item at x = -1 and its glyph at 11.
   At 1280 and above the reference's 65 - 16 already equals this theme's 49. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .header .header__container.page-width {
    padding-left: 15px;
    padding-right: 15px;
  }
  .header .header__inline-nav {
    margin-left: -16px;
  }
}

/* Reference nav item box is text + 24 below 1536 (anchor padding 12/12 on a
   zero-padding li); this theme ships 16/16 on the li at every width, 8px per
   item too wide — which is what forced the two-row nav in the band. */
@media (min-width: 1024px) and (max-width: 1535px) {
  .header .header__inline-nav .header-inline-menus__item {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Reference switcher exposes four options from 768 (1 and 2 only below it). */
@media (max-width: 767px) {
  #shopline-section-main-collection-product-list .facets-density-switcher .facets-density-btn[data-mobile-cols="3"],
  #shopline-section-main-collection-product-list .facets-density-switcher .facets-density-btn[data-mobile-cols="4"] {
    display: none;
  }
}

/* Vendor default 30px/20px predates the 15px global page gutter. The two founder
   templates already zero this rule via founder-hero.html, so the halo landing is
   the only live consumer. Reference measures 15 on both sides at 390..959. */
@media (max-width: 959px) {
  .image-with-text .image-with-text__info {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* The review app paints its primary button from --isv-web-color_btn_text, which
   resolves to the theme's near-black (32,45,32) and sits on the brand brown fill
   (90,56,25) — the label is barely legible. White is the only readable pairing at
   that contrast, and it matches how every other filled button on the site reads.
   Scoped to the review list so the carousels keep their own configured colours. */
.plugin-product-comment-CommentList {
  --isv-web-color_btn_text: 255, 255, 255;
}
.plugin-product-comment-CommentList .isv-web-btn-primary {
  color: #fff !important;
}