/** Shopify CDN: Minification failed

Line 92:23 Unexpected "*"

**/
/* ===================================================================
   Love Organics — brand overrides
   Created 2026-10-14 against Dani's Style Guide v1.1.
   Keep brand-level corrections here rather than editing vendor CSS.
   =================================================================== */

/* --- Nav bar -------------------------------------------------------
   The header inherited --bg from the page scheme, so it was identical
   to the body. Give it LO Red so it reads as its own band.           */
.site-header,
header-component.site-header {
  background: #6e2a38;
}

/* Everything in the nav goes LO Sand for contrast on the red. */
.site-header a,
.site-header button,
.site-header .header__linklist-link,
.site-header .header__icon,
.site-header [class*="localization"],
.site-header summary {
  color: #f4eceb;
}
/* Icons are outline artwork -- recolour only, never force a fill,
   or the magnifier/bag/chevron render as solid shapes. */
.site-header svg {
  color: #f4eceb;
}
.site-header svg [fill="none"] { fill: none; }
.site-header a:hover,
.site-header button:hover {
  color: #ffffff;
}
/* Cart count bubble stays legible on red. */
.site-header [class*="cart-count"],
.site-header [class*="count-bubble"] {
  background: #f4eceb;
  color: #6e2a38;
}

/* --- Icon-card headings --------------------------------------------
   "Storage" / "Warnings" etc. sat 18px below their icon and 14px above
   their own text, so each heading floated between the two instead of
   binding to the paragraph it belongs to. Guide p24, commandment 05.  */
.icons-row-item__title,
.image-with-text__accordion .accordion__title-text,
[class*="__card"] h3,
[class*="card__"] h3 {
  margin-top: 28px;
  margin-bottom: 7px;
  line-height: 1.35;
}

/* Locale / currency selector.
   menu_bg_color is LO Sand, so the popout panel is light — its text must
   stay LO Red. Only the toggle sitting on the red nav goes Sand. */
.site-header .select-popout__toggle {
  background: transparent;
  color: #f4eceb;
}
.site-header .select-popout__list {
  background: #f4eceb;
}
.site-header .select-popout__list a,
.site-header .select-popout__list button,
.site-header .select-popout__item,
.site-header .select-popout__option {
  color: #6e2a38;
}
.site-header .select-popout__list svg {
  color: #6e2a38;
}

/* --- Bundle / Add-to-cart widget (Simple Bundles, .bb__*) ----------
   The whole widget keys off one custom property, which shipped as a
   muted green (#5b6b4d) with no basis in the palette. Point it at the
   brand's primary action colour instead. */
.bb { --bb-acc: #6e2a38 !important; }
.bb__add,
.bb__stickyadd,
.bb__pop { color: #f4eceb; }
.bb__size img,
.bb__cardimg { background: #f4eceb; }

/* --- Reviews: Loox (replaced Judge.me, 19 Oct 2026) ----------------
   Loox widgets are styled from their own block settings / Loox admin;
   the old .jdgm-*/.jm-* colour rules were retired. */
/* (Judge.me rule retired 19 Oct 2026 - Loox replaced Judge.me) */
/* (Judge.me rule retired 19 Oct 2026 - Loox replaced Judge.me) */
/* (Judge.me rule retired 19 Oct 2026 - Loox replaced Judge.me) */

/* --- Product-card hover video --------------------------------------
   The Rose Mist hover clip is 606x1080 (9:16 vertical) but the card
   media box is 1:1, so object-fit:cover was discarding ~44% of the
   frame top and bottom. Contain shows the whole clip; the LO Sand
   letterbox matches the card ground so it reads as intentional.
   Full-bleed would need the clips re-exported at 1:1, or the product
   grid moved to a portrait aspect ratio. */
/* REVERTED 14 Oct. This previously forced object-fit:contain to stop the
   Rose Mist hover clip (606x1080, 9:16) being cropped in its 1:1 card.
   Tim: "the vid is rendering way too big" -- contain letterboxes the clip
   and changes its apparent scale, which reads worse than the crop did.
   Back to the theme default. The real fix is re-exporting the hover clips
   at 1:1, or moving the product grid to a portrait aspect ratio; both are
   content/design jobs rather than CSS. */

/* --- Homepage testimonials ("Loved by our community.") -------------
   This is the theme's OWN reviews section, not Judge.me -- which is
   why the .jdgm-* rules above never touched it. It declares three
   colours as section-scoped custom properties on .tr:
     --tr-star: #e28750   (113 star paths)
     --tr-hl:   #e28750   (the word "community.")
     --tr-card: #f4f1e8   (card + badge grounds, the old wrong cream)
   Orange is not in the palette; #f4f1e8 is not LO Sand. The section
   settings themselves still hold the orange swatches, so these also
   need changing in the theme editor if the section is ever re-saved.
   !important because the section writes them from an inline <style>. */
.tr {
  --tr-star: #6e2a38 !important;
  --tr-hl:   #a54f60 !important;
  --tr-card: #f4eceb !important;
}

/* --- "What We Leave Out" strike-through lines ---------------------
   22 hand-drawn SVG rules crossing out Parabens / Sulphates / etc.,
   coloured by --strike-color: #e28750. The crossing-out needs to read
   as a deliberate mark against the LO Red type, so this takes
   Pomegranate rather than LO Red -- same contrast, on palette. */
#Text--template--27986421743849__exclusions.text__strike,
.text__strike { --strike-color: #a54f60 !important; }

/* ===================================================================
   PRODUCT PAGE  (found by a visible-elements-only scan, 14 Oct)
   The earlier .jdgm-* rules missed most of this: Judge.me now renders
   its widget with jm-* classes, and a lot of what looked wrong was in
   that newer markup.
   =================================================================== */

/* Review stars. 75 were #e28750 orange (Judge.me) and 25 were
   #108474 teal (reviews imported from the Shop app) -- two different
   sources, neither on palette, sitting in the same star row. */
/* (Judge.me rule retired 19 Oct 2026 - Loox replaced Judge.me) */

/* Review text: names, titles, bodies, the "Verified" badge. Black. */
/* (Judge.me rule retired 19 Oct 2026 - Loox replaced Judge.me) */

/* A 3%-opacity orange wash behind the review boxes. */
/* (Judge.me rule retired 19 Oct 2026 - Loox replaced Judge.me) */

/* Bundle widget controls were pure white chips on the Sand ground.
   Selected state still reads -- it is carried by the border, not the
   fill -- so only the fill changes here. */
.bb__size,
.bb__qtybtn { background-color: #f4eceb; }
.bb__tickname { color: rgba(110, 42, 56, 0.55); }

/* Accordion rows were #fafafa. */
.accordion__item { background-color: #f4eceb; }

/* White type on the LO Red announcement + savings strips. White is not
   in the palette; LO Sand is the reversed-type colour. */
.text-highlight__break { color: inherit; }

/* The scrolling trust-badge ticker (Certified Organic / Cold Pressed /
   100% Organic) was still Space Mono -- 72 visible elements. This is a
   second, separate section from the top announcement bar, which is why
   fixing type_font on that one did not reach it. */
.announcement,
.announcement * { font-family: "Nunito", sans-serif !important; }

/* Product description rich text carries hardcoded #333 greys. */
.product__description p,
.product__description li,
.rte p,
.rte li { color: inherit !important; }

/* --- Second pass: selectors that lost on specificity ---------------
   None of these carry inline styles; the theme's own rules simply win
   on order, so they need !important rather than a longer selector. */
.bb__size,
.bb__qtybtn { background-color: #f4eceb !important; }
.bb__tickname { color: rgba(110, 42, 56, 0.55) !important; }
.bb__tickpct  { color: rgba(110, 42, 56, 0.7) !important; }

.text-highlight__break { color: inherit !important; }

/* The "Cold pressed / extra virgin" icon row: #333 body, black titles. */
.icons-row-item__title,
.icons-row-item__text,
.icons-row-item__text p,
.icons-row-item__text li { color: inherit !important; }

/* Judge.me "Show more" button. */
/* (Judge.me rule retired 19 Oct 2026 - Loox replaced Judge.me) */

/* Product accordion panels were #f1f1f1. */
.product__accordion { background-color: #f4eceb !important; }

/* --- Savings-banner link: width-dependent, so scope it --------------
   The theme already gets the small-screen case right: above 1120px the
   link is a solid LO Red pill, and at 1119px and below it drops the
   pill and goes LO Red on the cream banner. Only the pill's own label
   was off-palette (#fff). An unscoped rule here turns the small-screen
   link Sand-on-cream, i.e. invisible -- so this matches the theme's
   own breakpoint exactly. */
@media (min-width: 1120px) {
  .lo-savings .lo-savings__link,
  .lo-savings .lo-savings__link:hover,
  .lo-savings .lo-savings__link * { color: #f4eceb !important; }
}

/* --- Remaining white/off-palette odds ------------------------------ */

/* Purchase-option cards (One-time purchase / Auto-replenish). */
.bb__po { background-color: #f4eceb !important; }

/* Reversed labels on LO Red buttons: white -> LO Sand. */
/* Self-contained widgets only -- these can never sit on anything but their
   own solid LO Red fill, so a fixed colour is safe here. */.bb__add,
.bb__stickyadd { color: #f4eceb !important; }

/* "You May Also Like" / "Recently viewed" tabs were #b8465e -- a pink
   red that is neither LO Red nor Pomegranate. */
.tabs__nav .tabs__link,
.tabs__nav .tabs__link span { color: inherit !important; }

/* "Write a review" button kept its orange fill even after the label
   went Sand, and the Judge.me snippet cards are still white boxes. */
/* (Judge.me rule retired 19 Oct 2026 - Loox replaced Judge.me) */
/* (Judge.me rule retired 19 Oct 2026 - Loox replaced Judge.me) */

/* --- NOTE ON METHOD (14 Oct) ---------------------------------------
   Three rules above originally hardcoded a colour with !important, to
   beat theme rules that set black or #333. That was wrong: each of
   these components is used on BOTH the LO Sand ground and the LO Red
   bands, so a fixed colour made text invisible on one of them --
   the icon row on the homepage's red band, the section headings
   ("A wardrobe of oils..."), and the footer body copy.

   `color: inherit !important` is the correct tool. It still beats the
   theme's hardcoded black, but resolves to whatever the section's own
   colour scheme sets, so it is right on light and dark alike.

   Rule of thumb for anything added here later: only hardcode a colour
   on a component that can only ever sit on one ground (a self-contained
   widget like Judge.me, or a solid-fill button). Otherwise use inherit.
*/

/* --- Icon-row: the boxed variant -----------------------------------
   Same component, two layouts, and `inherit` alone is not enough to
   tell them apart:
     --center  homepage: no card, sits straight on the LO Red band,
               so inherit correctly gives LO Sand.
     --box     product pages: a WHITE card inside the same LO Red band,
               so inherit gives LO Sand on white -- invisible.
   The card was off-palette white anyway, so it becomes LO Sand and its
   contents take LO Red. */
.icons-row-item--box .icons-row-item__wrapper { background-color: #f4eceb !important; }
.icons-row-item--box .icons-row-item__title,
.icons-row-item--box .icons-row-item__text,
.icons-row-item--box .icons-row-item__text p,
.icons-row-item--box .icons-row-item__text li { color: #6e2a38 !important; }

/* --- Outline icon strokes ------------------------------------------
   These carry hardcoded strokes -- #e28750 orange, #f4f1e8 old cream
   and #512a10 brown -- set on the <svg> and inherited by the paths.
   Earlier colour sweeps never saw them: they checked color, fill and
   background, never `stroke`, so 56 off-palette elements on the product
   page went unreported.

   All eleven are confirmed outline-only (every child is fill:none), so
   currentColor is safe here -- it cannot add an outline to a filled
   shape -- and it makes each icon follow its context: LO Red inside a
   Sand card, LO Sand on a red band. */
.icon-organic,
.icon-scientific,
.icon-leaf,
.icon-message,
.icon-map-pin,
.icon-clipboard,
.icon-package,
.icon-clock,
.icon-star,
.icon-shield,
.icon-bell { stroke: currentColor !important; }

/* ===================================================================
   BUTTON LABELS -- scheme-scoped, derived from settings_data.json
   -------------------------------------------------------------------
   The theme gives every button a single global --btn-text: #ffffff,
   but btn_primary_bg is NOT the same colour in every scheme:

     LO Red fill  (#6e2a38) -> schemes 1, 2, 5, 6, 8
     LO Sand fill (#f4eceb) -> schemes 3, 4, 7

   So one global label colour cannot be right for both. White on the
   Sand-filled schemes was already invisible before any of this work,
   and blanket-forcing the label to Sand (what I did first) made it
   invisible on a different set of pages -- that was the blank pill on
   the Argan page.

   These pairs are read straight off btn_primary_bg / btn_secondary_bg
   in settings_data.json, so they are derived, not guessed. If a scheme's
   button colour is ever changed in the theme editor, update it here too.
   =================================================================== */
/* ONLY .btn--solid. This matters: .btn--outline has a transparent
   background and sits over photography, so its label is context-
   dependent and the theme already gets it right. Scoping by scheme
   alone caught the hero's outline buttons and turned them LO Red on
   LO Red -- measured, not assumed, from every button's real computed
   background across the homepage and a product page. */
.color-scheme-1 .btn--solid.btn--primary,
.color-scheme-2 .btn--solid.btn--primary,
.color-scheme-5 .btn--solid.btn--primary,
.color-scheme-6 .btn--solid.btn--primary,
.color-scheme-8 .btn--solid.btn--primary { color: #f4eceb !important; }

.color-scheme-3 .btn--solid.btn--primary,
.color-scheme-4 .btn--solid.btn--primary,
.color-scheme-7 .btn--solid.btn--primary { color: #6e2a38 !important; }

/* Secondary fills: tan/Sand/Rose Hip take LO Red; scheme-7's is LO Red
   so it takes Sand. */
.color-scheme-1 .btn--solid.btn--secondary,
.color-scheme-2 .btn--solid.btn--secondary,
.color-scheme-3 .btn--solid.btn--secondary,
.color-scheme-4 .btn--solid.btn--secondary,
.color-scheme-5 .btn--solid.btn--secondary,
.color-scheme-6 .btn--solid.btn--secondary,
.color-scheme-8 .btn--solid.btn--secondary { color: #6e2a38 !important; }
.color-scheme-7 .btn--solid.btn--secondary { color: #f4eceb !important; }

/* --- Icon-row boxed cards: set the CONTEXT, not each child ----------
   Setting `color` on the card makes the headings, the body copy AND the
   icons' currentColor all resolve to LO Red in one go. Without this the
   icons inherited the section's Sand and vanished on the Sand card. */
.icons-row-item--box .icons-row-item__wrapper { color: #6e2a38 !important; }

/* --- Outline icons: the full set -----------------------------------
   The audit enumerated every icon class carrying a stroke across the
   site: fourteen, not the eleven guessed at earlier -- which is why one
   orange tick (icon-check-solid) survived the last pass. */
.icon-organic, .icon-scientific, .icon-leaf, .icon-message, .icon-map-pin,
.icon-clipboard, .icon-package, .icon-clock, .icon-star, .icon-shield,
.icon-bell, .icon-award, .icon-flower, .icon-check-solid,
.icon-truck { stroke: currentColor !important; }

/* .text__card-icon is NOT in this list, deliberately. It is a FILLED badge
   whose background and glyph colour are set together as an inline pair per
   block (background:#6e2a38; color:#f4f1e8). Forcing `inherit` on it made
   the glyph inherit the section's LO Red and vanish on its own LO Red badge
   -- Tim: "icons are gone". The pair is correct by design; leave it alone.
   Its cream is #f4f1e8 rather than LO Sand #f4eceb, a 4-unit difference
   nobody can see; correct it in the block settings, not here. */

/* --- Bundle widget: black borders and a black scrim ----------------
   From bundle-buy-premium.css and bundle-buy-slider.css. Highest-count
   real finding in the audit (~500 painted borders across 8 pages). */
.bb[data-style="premium"] .bb__size,
.bb[data-style="premium"] .bb__qty,
.bb[data-style="premium"] .bb__po,
.bb__size, .bb__qty, .bb__po { border-color: #6e2a38 !important; }
.bb__bar { background-color: rgba(110, 42, 56, 0.18) !important; }

/* ===================================================================
   BLOG  (found only once the audit covered every URL -- the blog was
   never checked by eye, and had the worst numbers on the site:
   419 off-palette elements and 3 pieces of invisible text.)
   =================================================================== */

/* The blog section uses the "photo" layout, which colours the card text
   white because it expects a featured image behind it. None of the
   posts HAVE a featured image, so it was white on LO Sand -- the post
   title, author and date were all invisible on the index and in the
   related-posts strip.
   :has() keeps this honest: only cards with no image are recoloured, so
   if featured images are added later the white-on-photo treatment comes
   back by itself. The fallback below it covers browsers without :has(). */
.blog--photo .blog__post-content,
.blog--photo .blog__post-content a,
.blog--photo .blog__post-content small,
.blog--photo .blog__post-content time,
.blog--photo .blog__post-title-link { color: #6e2a38 !important; }
/* The :has(img) guard was tried here and REMOVED: the cards do contain
   an <img> element (a lazy placeholder), just not a real featured image,
   so the guard fired and turned the text Sand-on-Sand -- same bug, new
   colour. Caught by re-running the audit, not by eye. When featured
   images are actually added, restore the white treatment deliberately
   rather than inferring it from the markup. */

/* The article body is an AI-generated block whose class carries a
   per-article hash, so it has to be matched on the prefix. 299 of its
   paragraphs were pure black; its rules and cards were #d8c9c1 and
   white. Type is already Nunito, so only colour needs correcting. */
[class*="ai-research-article"] p,
[class*="ai-research-article"] li,
[class*="ai-research-article"] h1,
[class*="ai-research-article"] h2,
[class*="ai-research-article"] h3,
[class*="ai-research-article"] h4,
[class*="ai-research-article"] td,
[class*="ai-research-article"] th,
[class*="ai-research-article"] span { color: inherit !important; }
[class*="ai-research-article"] { color: #6e2a38 !important; }
[class*="ai-research-article"] a { color: #a54f60 !important; }
[class*="ai-research-article"] [style*="background"],
[class*="ai-research-article"] a[style] { background-color: #f4eceb !important; }
[class*="ai-research-article"] * { border-color: #d2a092 !important; }

/* ===================================================================
   APP WIDGETS
   Rendered in the page DOM (not iframes), so they are reachable. Their
   own app settings are the better long-term home for these, but the
   overrides stop them being off-brand in the meantime.
   =================================================================== */

/* Avada FAQ launcher: #b06473 pill, a bright green status dot, and an
   inline Inter/Roboto/Helvetica stack -- the last unauthorised typeface
   left on the site (52 elements). */
.Avada-Faqs_Button,
.Avada-Faqs_Button *,
.Avada-Launcher__ButtonCustom,
.Avada-Launcher__ButtonCustom * { font-family: "Nunito", sans-serif !important; }
.Avada-Launcher__ButtonCustom,
.Avada-Faqs_Button-Launcher { background-color: #6e2a38 !important; }
.Avada-Faqs_Button-Status { background-color: #90af8d !important; }

/* EasyGift launcher: white disc, charcoal icon, bright red count badge.
   Recoloured to the LO Red / LO Sand pair. */
#easygift-launcher, .easygift-launcher, [class*="easygift"] [class*="launcher"],
[class*="EasyGift"] [class*="launcher"] { background-color: #6e2a38 !important; }
[class*="easygift"] svg, [class*="EasyGift"] svg { color: #f4eceb !important; fill: #f4eceb !important; }
[class*="easygift"] [class*="badge"], [class*="easygift"] [class*="count"],
[class*="EasyGift"] [class*="badge"], [class*="EasyGift"] [class*="count"] {
  background-color: #a54f60 !important; color: #f4eceb !important;
}

/* The last unauthorised typeface on the site: Quill's editor shell
   (.ql-snow), used by the Judge.me "write a review" form -- 52 elements
   on every page carrying a review widget. Not Avada, as first assumed. */
.ql-snow, .ql-container, .ql-editor,
.ql-snow *, .ql-container * { font-family: "Nunito", sans-serif !important; }

/* --- Last pass -----------------------------------------------------
   After the settings fixes and the currentColor work, the audit's
   remaining "other" bucket on the worst page was 26 elements. These
   are the fixable ones; what is left after this is Judge.me's own
   widget internals and card-brand marks, which are not ours to change.

   The icon wrappers still carried colour #512a10 (dark brown) from a
   section setting, and since the icons now take currentColor they
   inherited it. Making the wrapper inherit fixes the icons at source
   rather than re-pinning each icon class. */
.icon-stroke,
.product__icon,
.icons-row-item__icon { color: inherit !important; }

/* Orange left-border on the callout cards. */
.text__card-callout { border-color: #a54f60 !important; }

/* The feature-list rows carried black separators (47 on the Black Seed
   page alone) and the callout cards were white. The dark image scrim
   (`overlay`, #0000004d) is left alone -- that one is deliberate. */
.image-with-text__list-item,
.image-with-text__stat { border-color: #d2a092 !important; }
.text__card { background-color: #f4eceb !important; }

/* --- Product gallery video height ----------------------------------
   Tim: "make this video render shorter". The gallery's <deferred-media>
   video was laid out at its native 9:16 -- 666 x 1183 -- using the
   padding-top ratio hack, which made the product page enormously tall.
   Squared off so it matches a normal gallery tile. */
.product-gallery__media.deferred-media,
deferred-media.product-gallery__media {
  padding-top: 0 !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
  overflow: hidden;
}
.product-gallery__media.deferred-media,
deferred-media.product-gallery__media { background-color: #f4eceb; }
.product-gallery__media.deferred-media > *,
deferred-media.product-gallery__media > * {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  /* Tim: show the whole frame, pad the sides, don't crop. The clip is 9:16
     in a square box, so `contain` pillarboxes it on LO Sand. The square box
     above is what stops it rendering 1183px tall; the two work together. */
  object-fit: contain;
}

/* Accordion type sizes are NOT set here any more.
   They were a symptom of settings_data.json `heading_size: 75`, which
   scaled EVERY heading on the site to 75%. That is now 90, which lands
   the accordion titles on the guide's 20px paragraph spec by itself and
   fixes every other heading at the same time. Fix the scale, not the
   selector. */

/* ===================================================================
   CTA CONSISTENCY + WCAG AA CONTRAST          (Tim, 14 Oct)
   -------------------------------------------------------------------
   Audited every CTA on the site for a common visual hierarchy. Type was
   already consistent (14.4px / 500 / uppercase / 2.16px tracking). Three
   real inconsistencies, and one contrast failure:

     1. Corner radius was mixed on the SAME page -- 30px on some buttons,
        999px on others. settings_data.json says `button_style: pill`,
        so 999px is correct and the 30px ones are the anomaly.
     2. `.btn--white` rendered #ffffff on #000000 -- neither in the
        palette, and the loudest thing on a Sand page.
     3. The Build-Your-Own-Bundle widget is a SECOND button system:
        #5b6b4d green, sentence case, weight 600, no tracking. It reads
        as a different brand next to every other CTA on the site.
     4. `.byob-sld__lbl` was #7f8a6d on #faf9f6 -- contrast 3.46 where
        WCAG AA needs 4.5 for body text. The only AA failure found.
   =================================================================== */

/* 1. One pill radius everywhere, matching button_style: pill. */
.btn,
.btn--solid,
.btn--outline,
.byob-card__add,
.byob__cta { border-radius: 999px !important; }

/* 2. White buttons -> LO Sand ground, LO Red label. */
.btn--white { background-color: #f4eceb !important; color: #6e2a38 !important; }

/* 3 + 4. BYOB widget — NOW FIXED AT SOURCE, overrides removed.
   `sections/byob-builder.liquid` had its own palette hardcoded in an inline
   <style> block: #5b6b4d green, the sage family (#7f8a6d #9aa588 #5f6a50),
   a tan #b8895b, white panels and black hairlines. All 48 literals were
   swapped in that file to LO Red / Pomegranate / Rose Hip / Prickly Pear /
   LO Sand, verified byte-exact against the original before editing, and the
   file now contains ZERO off-palette colours. Its two CTAs also took the
   site's button language there (uppercase, 500, +140 tracking) instead of
   being overridden here. `accent_color` is a section setting, so it was
   also corrected in templates/page.byob.json and page.byob-minis.json,
   and the schema default no longer reintroduces green on a new section. */

/* `heading_size: 90` in settings_data.json now drives every heading,
   including the content accordion titles (16.8 -> 20.2px, the guide's
   paragraph spec). One straggler needs a rule: the theme marks
   `.product__accordion__title` with `font-body`, so it is scaled by
   text_size, not heading_size, and stayed at 15.1px. A title wearing
   body styling is a theme inconsistency; this is the only size override
   left in this file. */
.product__accordion__title { font-size: var(--fs-18) !important; line-height: 1.5 !important; }

/* --- Round 3 fixes -------------------------------------------------- */

/* The "Taste tip:" / "Texture tip:" callout label was still #e28750 orange.
   The card's left border was corrected earlier; this is its label. */
.text__card-callout__label { color: #a54f60 !important; }

/* The "Read more" fade panel sat on #f1f1f1 grey -- this is the grey band
   behind the ACO certification block Tim spotted. */
.toggle-ellipsis__actions { background-color: transparent !important; }
.toggle-ellipsis__actions::before { background: linear-gradient(to bottom, rgba(244,236,235,0), #f4eceb) !important; }

/* Accordion titles were three different sizes across sections: 16.8px on
   content accordions, 18px on the product accordion. Unified to 18px so a
   customer sees one treatment. (If you prefer the larger Fraunces look of
   the Black Seed block instead, it is this one rule.) */
/* --- Accordion titles -----------------------------------------------
   REVERTED to the unified 18px. Everything I tried after this made it
   worse: raising the global text_size and heading_size moved every
   paragraph and heading on the site, then em-based and token-based
   rescaling overshot the other way (a 27px accordion title).
   Both global scales are back at their originals (text_size 105,
   heading_size 75) and this is the single rule that remains. */
.accordion__title,
.accordion__title-text,
.product__accordion__title,
.image-with-text__accordion .accordion__title-text {
  font-size: var(--fs-18) !important;
  line-height: 1.5 !important;
}

/* ===================================================================
   TYPE — the three sizes that are measurably wrong      16 Oct 2026
   -------------------------------------------------------------------
   Deliberately small. A systematic retrofit of all 369 type
   declarations was built and abandoned: this theme resolves size
   through three systems (a direct rem value, the --heading-size
   variable that h1-h6 set, and --text-size), and one declaration
   serves elements at many different sizes, so no bulk transformation
   lands them all correctly. See 2026-10-16_SESSION-HANDOVER.md.

   The main problem - collection product titles at 13px - is already
   fixed by product_grid_heading_size in settings_data.json (now
   14.4px) with no CSS at all. These are the remainder.

   Each rule below sets the theme's OWN variable or targets a single
   component. None of them fight the cascade and none use !important
   on font-size, which is what broke the earlier attempt.
   =================================================================== */

/* 1. Footer column headings were the smallest text on the site, and
      inconsistent with each other: 13.2px in most columns, 16px in
      others. The theme sets no font-size on .footer-title at all -
      13.2px came from it being an <h6> (1.1rem * 0.75 global heading
      adjust). Nothing more specific competes, so a direct value wins
      cleanly without !important. */
.footer-title,
.footer-title__button { font-size: var(--fs-14); }

/* 2. Collection filter chips rendered at 12.8px on the main shopping
      surface. The theme drives the whole filter panel from one
      variable, set in template-collection.css on both the sticky bar
      and the panel:  --text-size: calc(0.8rem * var(--adjust-body)).
      So raise the variable, not the font-size - that is the theme's
      own mechanism and it flows to every rule inside the panel that
      reads var(--text-size), keeping them consistent with each other.

      The class is doubled to raise specificity to (0,2,0): lo-brand.css
      is stylesheet #19 but template-collection.css is #42, so at the
      theme's own (0,1,0) the theme would win on source order. Doubling
      the class beats it on specificity instead, which is order-proof
      and avoids !important. Measured, not assumed. */
.collection__sticky-bar.collection__sticky-bar,
.collection__filters.collection__filters { --text-size: var(--fs-14); }

/* 3. ONE component, three sizes: .icons-row-item__title renders at
      19.8px, 21.6px and 25.2px. Not a CSS bug - sections/section-icons-row.liquid
      emits a per-section style block:
        [data-section-id="X"] .icons-row__slider {
          --adjust-heading: calc(var(--FONT-ADJUST-HEADING) * {{ heading_size }});
        }
      and six of the eight Icons-row sections have had their "Heading
      size" slider nudged off the 120% default in the theme editor
      (one at 110%, five at 140%). This normalises the multiplier back
      to the theme's own default. The font-size declaration stays
      entirely the theme's - calc(1.5rem * var(--adjust-heading)) -
      so there is a single consumer and no cascade to flatten.
      !important is needed only because the section block is
      [data-section-id] .icons-row__slider (0,2,0) and inline in <body>,
      so it outranks any stylesheet rule on both counts.

      SOURCE-OF-TRUTH FIX, preferred when Shopify CLI is authed
      (`shopify theme pull/push` edits these without retyping 250KB
      of auto-generated JSON through a model):
        templates/index.json                     trust          110 -> 120
        templates/product.argan-oil.json         how_to_choose  140 -> 120
        templates/product.black-seed-oil.json    how_to_choose  140 -> 120
        templates/product.lavender-oil.json      how_to_choose  140 -> 120
        templates/product.rosehip-oil.json       how_to_choose  140 -> 120
        templates/product.sea-buckthorn-oil.json how_to_choose  140 -> 120
      Already correct at 120: templates/index.json `values-band`,
      templates/product.json `icons`.
      Once those six are set, DELETE this rule - it becomes dead weight
      and would mask any future slider change made in the editor. */
/* retired by the type scale: .icons-row__slider { --adjust-heading: calc(var(--FONT-ADJUST-HEADING) * 1.2) !important; } */

/* --- Accordion answers 16px (Tim, 19 Oct 2026) ---------------------------
   Avada FAQ app page answers were 14px; every other accordion answer on the
   site is 16px, so these match. */
.Avada-Accordion_Item-Panel p { font-size: var(--fs-16); }