/* ==========================================================================
   Simpli Cosmetics — 2026 redesign stylesheet
   Upload to: wp-content/themes/rey-child/simpli-2026.css
   Enqueue via the snippet in 18-phase-1.3-install.md
   Created 2026-07-28

   SCOPING: every rule is nested under .simpli-2026. Nothing here can affect
   any other page on the site. Put the class on the outermost Elementor
   section of the new homepage (Advanced -> CSS Classes -> simpli-2026).
   That is deliberate — it means this file can sit on the live site
   indefinitely without changing anything until you opt a page in.

   TO REVERT: remove the enqueue line from functions.php, or delete this file.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design tokens
   Read from the live site's computed CSS, so they match existing pages
   exactly rather than approximating them.
   -------------------------------------------------------------------------- */
.simpli-2026 {
  --s-cream:   #FBF3E9;  /* page ground — the signature warm, not white */
  --s-ink:     #171512;  /* primary text, headings, button fills */
  --s-ink-2:   #24201D;  /* secondary headings */
  --s-muted:   #4F4944;  /* supporting copy */
  --s-rust:    #9B3D2C;  /* the only accent. once or twice per viewport */
  --s-peach:   #EDCFB5;
  --s-peach-l: #FCE4CE;
  --s-peach-d: #F5C69C;
  --s-grey:    #7A7A7A;
  --s-hair:    rgba(23, 21, 18, .14);
  --s-hair-l:  rgba(251, 243, 233, .15);

  --s-sans:  'Manrope', "Helvetica Neue", Helvetica, Arial, sans-serif;
  --s-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}


/* --------------------------------------------------------------------------
   2. Display typography
   Apply as CSS classes on Elementor Heading widgets.
   NOTE ON !important: Rey and Elementor both emit high-specificity and inline
   typography. A utility class cannot win without it. Confined to font
   properties on opt-in classes only.
   -------------------------------------------------------------------------- */
.simpli-2026 .s-d1,
.simpli-2026 .s-d1 * {
  font-family: var(--s-serif) !important;
  font-weight: 400 !important;
  font-variation-settings: "SOFT" 26, "WONK" 1, "opsz" 144;
  font-size: clamp(2.4rem, 7.4vw, 5.4rem);
  line-height: .92;
  letter-spacing: -.036em;
}

.simpli-2026 .s-d2,
.simpli-2026 .s-d2 * {
  font-family: var(--s-serif) !important;
  font-weight: 400 !important;
  font-variation-settings: "SOFT" 22, "WONK" 1, "opsz" 110;
  font-size: clamp(1.6rem, 3.8vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}

.simpli-2026 .s-d3,
.simpli-2026 .s-d3 * {
  font-family: var(--s-serif) !important;
  font-weight: 400 !important;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 72;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  line-height: 1.16;
  letter-spacing: -.024em;
}

/* italic emphasis renders in rust — this is how "The right four." works */
.simpli-2026 .s-d1 em,
.simpli-2026 .s-d2 em,
.simpli-2026 .s-d3 em {
  font-style: italic;
  color: var(--s-rust);
}

/* eyebrow / kicker */
.simpli-2026 .s-kicker {
  font-family: var(--s-sans) !important;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--s-rust);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.simpli-2026 .s-kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.simpli-2026 .s-kicker--bare::before { display: none; }

/* body copy */
.simpli-2026 .s-lede {
  font-family: var(--s-sans);
  font-size: clamp(.97rem, 1.24vw, 1.14rem);
  line-height: 1.68;
  color: var(--s-muted);
  max-width: 46ch;
  margin: 0;
}


/* --------------------------------------------------------------------------
   3. Tonal sections
   The rhythm cream -> ink -> peach is what stops the page reading flat.
   Apply to Elementor Sections.
   -------------------------------------------------------------------------- */
.simpli-2026 .s-on-ink {
  background: var(--s-ink);
  color: var(--s-cream);
}
.simpli-2026 .s-on-ink .s-lede { color: rgba(251, 243, 233, .72); }
.simpli-2026 .s-on-ink .s-kicker { color: var(--s-peach-d); }
.simpli-2026 .s-on-ink h1,
.simpli-2026 .s-on-ink h2,
.simpli-2026 .s-on-ink h3 { color: var(--s-cream); }

.simpli-2026 .s-on-peach {
  background: linear-gradient(178deg, var(--s-peach-l), var(--s-cream) 88%);
}


/* --------------------------------------------------------------------------
   4. Buttons
   2px radius is a real brand decision — nearly square, not pill.
   Pill buttons look immediately wrong next to existing pages.
   -------------------------------------------------------------------------- */
.simpli-2026 .s-btn {
  --bg: var(--s-ink);
  --fg: var(--s-cream);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bg);
  border-radius: 2px;
  font-family: var(--s-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .17em;
  padding: 18px 30px;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s cubic-bezier(.16,.84,.28,1), box-shadow .45s, color .35s;
}
.simpli-2026 .s-btn > * { position: relative; z-index: 2; }
.simpli-2026 .s-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--s-rust);
  transform: translate3d(0, 101%, 0);
  transition: transform .5s cubic-bezier(.16,.84,.28,1);
}
.simpli-2026 .s-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 34px -18px rgba(23, 21, 18, .55);
  color: var(--s-cream);
}
.simpli-2026 .s-btn:hover::before { transform: translate3d(0, 0, 0); }
.simpli-2026 .s-btn--ghost { --bg: transparent; --fg: var(--s-ink); border-color: var(--s-hair); }
.simpli-2026 .s-btn--ghost:hover { color: var(--s-cream); }
.simpli-2026 .s-btn--light  { --bg: var(--s-cream); --fg: var(--s-ink); }
.simpli-2026 .s-btn--sm     { padding: 13px 20px; font-size: 10px; letter-spacing: .14em; }
.simpli-2026 .s-btn--block  { width: 100%; }


/* --------------------------------------------------------------------------
   5. Product plinth
   Products sit on a lit ground with a real cast shadow, rather than floating
   in a flat tinted box. This is most of the difference between "webshop" and
   "considered" in the mockup.
   -------------------------------------------------------------------------- */
.simpli-2026 .s-plinth {
  position: relative;
  aspect-ratio: 1 / 1.04;
  border-radius: 3px;
  overflow: hidden;
  background:
    radial-gradient(circle at 40% 30%, #fff 0%, var(--s-peach-l) 48%, var(--s-peach) 100%);
}
.simpli-2026 .s-plinth img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12%;
  filter: drop-shadow(0 26px 22px rgba(23, 21, 18, .22));
  transition: transform .6s cubic-bezier(.16,.84,.28,1);
}
.simpli-2026 .s-plinth:hover img { transform: scale(1.07) translateY(-4px); }


/* --------------------------------------------------------------------------
   6. Five-step ladder rows
   One row per routine step. Products must be dynamic — use
   [products ids="..."] rather than hard-coding a price. See
   12-implementation-plan.md section 3.1 for why this matters.
   -------------------------------------------------------------------------- */
.simpli-2026 .s-rung {
  display: grid;
  gap: 16px 24px;
  align-items: center;
  padding: clamp(24px, 3.2vw, 40px) 0;
  border-top: 1px solid var(--s-hair-l);
}
.simpli-2026 .s-rung:last-of-type { border-bottom: 1px solid var(--s-hair-l); }

.simpli-2026 .s-rung-n {
  font-family: var(--s-serif);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 400;
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--s-peach-d);
}

.simpli-2026 .s-rung p {
  font-size: 14.5px;
  line-height: 1.68;
  color: rgba(251, 243, 233, .7);
  margin: 0;
  max-width: 50ch;
}

.simpli-2026 .s-pick {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  border: 1px solid var(--s-hair-l);
  border-radius: 3px;
  padding: 13px;
  background: linear-gradient(150deg, rgba(251,243,233,.07), rgba(251,243,233,.02));
  transition: border-color .5s, transform .5s cubic-bezier(.16,.84,.28,1);
}
.simpli-2026 .s-pick:hover {
  border-color: rgba(245, 198, 156, .5);
  transform: translateY(-3px);
}
.simpli-2026 .s-pick .s-thumb {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 2px;
  overflow: hidden;
  background: radial-gradient(circle at 40% 32%, #fff, var(--s-peach-l) 68%, var(--s-peach));
}
.simpli-2026 .s-pick .s-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 9%;
}

/* When using a WooCommerce shortcode inside a ladder row, flatten its grid */
.simpli-2026 .s-pick .woocommerce ul.products,
.simpli-2026 .s-pick ul.products {
  margin: 0;
  display: flex;
  gap: 14px;
  align-items: center;
}
.simpli-2026 .s-pick ul.products li.product {
  width: auto;
  margin: 0;
  float: none;
  padding: 0;
}
.simpli-2026 .s-pick ul.products li.product .price {
  font-size: 15px;
  font-weight: 600;
  color: var(--s-cream);
  margin: 0;
}


/* --------------------------------------------------------------------------
   7. Concern route cards
   1px gaps rather than gaps-and-shadows: reads as an editorial grid.
   -------------------------------------------------------------------------- */
.simpli-2026 .s-routes {
  display: grid;
  gap: 1px;
  background: var(--s-hair);
}
.simpli-2026 .s-route {
  position: relative;
  background: var(--s-cream);
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.simpli-2026 .s-route::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity .6s;
  background: radial-gradient(130% 130% at 100% 0%, var(--s-peach-l), transparent 60%);
}
.simpli-2026 .s-route:hover::after { opacity: 1; }
.simpli-2026 .s-route > * { position: relative; z-index: 1; }
.simpli-2026 .s-route p {
  font-size: 14px;
  line-height: 1.62;
  color: var(--s-muted);
  margin: 0 0 22px;
  max-width: 38ch;
}
.simpli-2026 .s-route .s-go {
  margin-top: auto;
  font-family: var(--s-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--s-rust);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.simpli-2026 .s-route .s-go i {
  font-style: normal;
  transition: transform .5s cubic-bezier(.16,.84,.28,1);
}
.simpli-2026 .s-route:hover .s-go i { transform: translateX(7px); }


/* --------------------------------------------------------------------------
   8. Proof columns — rule above, no boxes, no badges
   Badge-heavy trust rows read as compensating for something.
   -------------------------------------------------------------------------- */
.simpli-2026 .s-proof-item {
  padding-top: 20px;
  border-top: 1px solid var(--s-ink);
}
.simpli-2026 .s-proof-item .s-n {
  font-family: var(--s-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--s-rust);
  margin: 0 0 14px;
}
.simpli-2026 .s-proof-item p {
  font-size: 14px;
  line-height: 1.68;
  color: var(--s-muted);
  margin: 0;
}


/* --------------------------------------------------------------------------
   9. Full-bleed image band with overlaid line
   -------------------------------------------------------------------------- */
.simpli-2026 .s-band {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, var(--s-peach), var(--s-peach-d));
}
.simpli-2026 .s-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.03);
}
.simpli-2026 .s-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(23,21,18,.62) 0%, rgba(23,21,18,.18) 52%, transparent 78%);
}
.simpli-2026 .s-band .s-cap {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(20px, 3vw, 40px);
  color: var(--s-cream);
}
.simpli-2026 .s-band .s-cap p {
  margin: 0;
  font-family: var(--s-serif);
  font-variation-settings: "SOFT" 24, "WONK" 1, "opsz" 100;
  font-size: clamp(1.15rem, 3vw, 2.2rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.026em;
  max-width: 22ch;
}


/* --------------------------------------------------------------------------
   10. Film grain
   The cheapest large gain in perceived quality. Add .s-grain to the outer
   section alongside .simpli-2026.
   -------------------------------------------------------------------------- */
.simpli-2026.s-grain::after,
.simpli-2026 .s-grain::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   11. Empty / out-of-stock states
   Out of stock deserves real design, not a greyed button — restock enquiries
   are warm leads.
   -------------------------------------------------------------------------- */
.simpli-2026 .s-oos {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--s-muted);
  border-left: 1px solid var(--s-rust);
  padding-left: 14px;
  margin: 12px 0 0;
}


/* --------------------------------------------------------------------------
   12. Breakpoints — mobile-first, min-width only.
   Most of this traffic is mid-range Android on metered data. The mobile
   layout is the real layout.
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
  .simpli-2026 .s-routes { grid-template-columns: 1fr 1fr; }
  .simpli-2026 .s-rung   { grid-template-columns: auto 1fr; }
  .simpli-2026 .s-pick   { grid-column: 1 / -1; }
}

@media (min-width: 1060px) {
  .simpli-2026 .s-routes { grid-template-columns: repeat(4, 1fr); }
  .simpli-2026 .s-rung   { grid-template-columns: auto .9fr 1.3fr; }
  .simpli-2026 .s-pick   { grid-column: auto; }

  /* pinned chapter rail — pure position:sticky, no scroll library */
  .simpli-2026 .s-pin {
    position: sticky;
    top: 120px;
    align-self: start;
  }
}


/* --------------------------------------------------------------------------
   13. Motion, and opting out of it
   Every animated property is listed here so it can be disabled in one place.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .simpli-2026 .s-btn,
  .simpli-2026 .s-btn::before,
  .simpli-2026 .s-pick,
  .simpli-2026 .s-route::after,
  .simpli-2026 .s-plinth img,
  .simpli-2026 .s-route .s-go i {
    transition: none !important;
    animation: none !important;
  }
  .simpli-2026 .s-plinth:hover img,
  .simpli-2026 .s-pick:hover { transform: none !important; }
}


/* --------------------------------------------------------------------------
   14. Accessibility
   Rey's default focus styles are often too subtle to see. Contrast checked:
   muted on cream 8.06:1, rust on cream 6.17:1, rust on peach-light 5.53:1,
   ink on cream 16.57:1 — all pass AA.
   -------------------------------------------------------------------------- */
.simpli-2026 a:focus-visible,
.simpli-2026 button:focus-visible,
.simpli-2026 .s-btn:focus-visible {
  outline: 2px solid var(--s-rust);
  outline-offset: 3px;
}

/* 44px minimum touch targets */
.simpli-2026 .s-btn,
.simpli-2026 .s-route .s-go {
  min-height: 44px;
}

/* ==========================================================================
   SIMPLI — TOP TICKER, FINAL
   Verified scrolling on the live site. Measurements below are real.

   ** APPLY THIS NOW. ** The Elementor half is already published, so the bar
   currently shows the sequence twice, static and probably wrapped. That's the
   second copy the marquee needs — it looks wrong until this CSS is in.

   In wp-content/themes/rey-child/simpli-2026.css:
     1. DELETE the earlier ticker blocks (from 29- and 30-) entirely.
     2. Paste this at the end.
     3. Clear the WP Rocket cache.

   TO REVERT: delete this block AND remove the duplicated half of the text in
   Elementor (Utility Bar -> Heading), otherwise the bar reads twice.
   ========================================================================== */


/* --------------------------------------------------------------------------
   WHY THIS VERSION WORKS AND THE PREVIOUS TWO DIDN'T

   James's suggestion — one widget instead of two — is what fixed it.

   The bar used to hold two Heading widgets in a 50%/50% flex split. Every
   attempt to marquee that fought Elementor: the container was pinned to a
   fixed width so `width: max-content` silently failed, the flex children
   shrank and wrapped, and a pseudo-element duplicate inherited the wrong
   colour and disappeared against the dark bar.

   Now there is ONE Heading widget containing the sequence twice. So the text
   element's own width IS exactly two copies, and translating it by -50% lands
   precisely on the start of the second copy. Seamless, with no pseudo-element,
   no colour inheritance, and no fight with the container.

   Done in Elementor already:
     - the two Heading widgets became one, holding the sequence twice
     - the redundant 50%-width container was deleted
     - both were changed from <h2> to <div>, removing two spurious H2s from
       every page on the site
   -------------------------------------------------------------------------- */

/* Clip at both edges so text appears and disappears cleanly */
.rey-siteHeader .e-con-top:first-of-type,
.rey-siteHeader .e-con-top:first-of-type .e-con-inner,
.rey-siteHeader .e-con-top:first-of-type .elementor-widget-heading,
.rey-siteHeader .e-con-top:first-of-type .elementor-widget-container {
    overflow: hidden !important;
}

/* The strip itself: one unbroken line, its own natural width, moving left.
   line-height 1.4 keeps the bar at its original height — see note below. */
.rey-siteHeader .e-con-top:first-of-type .elementor-heading-title {
    white-space: nowrap !important;
    display: block !important;
    width: max-content !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    animation: simpliTicker 44s linear infinite;
}

/* -50% lands exactly on the second copy, because the element is two copies wide */
@keyframes simpliTicker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Pause on hover so the phone number can actually be read */
.rey-siteHeader .e-con-top:first-of-type:hover .elementor-heading-title {
    animation-play-state: paused;
}

/* Slower on mobile — the same speed reads as frantic on a narrow screen */
@media (max-width: 767px) {
    .rey-siteHeader .e-con-top:first-of-type .elementor-heading-title {
        animation-duration: 60s;
    }
}

/* Respect the OS setting. A permanently moving strip on every page is exactly
   what this preference exists to stop. The information stays, the motion goes.
   Note this leaves the sequence visible twice, which is the honest trade — the
   alternative is hiding half the text with CSS and hoping the seam falls well. */
@media (prefers-reduced-motion: reduce) {
    .rey-siteHeader .e-con-top:first-of-type .elementor-heading-title {
        animation: none !important;
        white-space: normal !important;
        width: auto !important;
    }
}


/* ==========================================================================
   VERIFIED ON THE LIVE SITE

   Motion — measured, not assumed. Element position sampled 1.2s apart:
       -226px  ->  -413px  ->  -610px  ->  -807px
   Steady ~190px/1.2s, wrapping at -798px, which is exactly half of the
   1596px strip. animation currentTime 146787ms, playState "running".

   (For the record: I couldn't confirm motion on earlier attempts because
   Chrome freezes animation timelines in hidden tabs and every tab I drive is
   hidden. It only became measurable once the tab was foregrounded. I was
   right that the mechanism worked, but I was asserting it rather than
   demonstrating it, which is why two broken versions reached you.)

   Also verified:
     one widget            childCount 1 (was 2)
     no page side-scroll   documentElement.scrollWidth <= window.innerWidth
     text splits evenly    277 characters, second copy starts at 139
     strip width           1596px, half 798px

   ONE COSMETIC NOTE: the bar measures 49px against the original 46px — the
   3px comes from line-height on the now-block-level text. If you want it exact,
   change line-height from 1.4 to 1.25.

   MAINTENANCE: the sequence lives twice in ONE Elementor field
   (Utility Bar -> Heading -> Title). If you edit the wording, edit BOTH halves
   or the two passes will disagree. Keep the trailing " • " on each half — that
   separator is what makes the seam invisible.
   ========================================================================== */

/* ==========================================================================
   FOOTER — FOUR COLUMNS + LEGIBILITY
   Added 2026-07-28. TO REVERT: delete this whole block.

   NOTE FOR NEXT TIME: this row is a CSS GRID, not flexbox. Elementor
   containers here compute to display:grid, so flex-basis does nothing and a
   percentage width resolves against the grid TRACK, not the row. That is why
   an earlier attempt at width:25% produced a 96px column. Set the track
   count, not the child width.
   ========================================================================== */

@media (min-width: 1025px) {
    .rey-siteFooter .elementor-element-4e1b5e0 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .rey-siteFooter .elementor-element-4e1b5e0 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 767px) {
    .rey-siteFooter .elementor-element-4e1b5e0 {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* "Why Simpli" was an indented bullet list in dark grey on the dark bar. */
.rey-siteFooter .elementor-element-61bd506 ul { list-style: none; margin: 0; padding: 0; }
.rey-siteFooter .elementor-element-61bd506 li {
    position: relative; padding-left: 20px; margin-bottom: 9px;
    line-height: 1.45; color: rgba(255, 255, 255, 0.78);
}
.rey-siteFooter .elementor-element-61bd506 li::before {
    content: ""; position: absolute; left: 0; top: 0.55em;
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; opacity: 0.45;
}
.rey-siteFooter .elementor-element-61bd506 li strong { color: #fff; font-weight: 600; }

/* Bottom band — now a full-width row of its own, so keep it quiet. */
.rey-siteFooter .elementor-element-17e0579 {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 10px; padding-top: 22px;
}
.rey-siteFooter .elementor-element-17e0579 p { font-size: 13px; line-height: 1.6; opacity: 0.75; }

/* Top-align the four columns — they were bottom-aligned, so the link lists
   all started at different heights. */
.rey-siteFooter .elementor-element-4e1b5e0 { align-items: start !important; }

/* The email button was sized for a 383px column and overflows a 288px one.
   Email button no longer fits — let it wrap and sit at a sane size. */
.rey-siteFooter .elementor-element-bdc1a56 .elementor-button {
    font-size: 14px !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-transform: none !important;
}

/* Close the gap the removed social-icons and INFO headings left behind. */
.rey-siteFooter .elementor-element-4e1b5e0 .elementor-widget-heading { margin-bottom: 14px !important; }
.rey-siteFooter .elementor-element-4e1b5e0 .elementor-widget-reycore-menu { margin-top: 0 !important; }

/* No divider after the last column. */
.rey-siteFooter .elementor-element-4e1b5e0 > .e-con:last-child { border-right: 0 !important; }


/* ==========================================================================
   FOOTER — MOCKUP BUILD  (22-header-footer-mockup.html)
   Added 2026-07-28. TO REVERT: delete this whole block.
   ========================================================================== */

.rey-siteFooter{ --sf-cream:#FBF3E9; --sf-ink:#171512; --sf-peachD:#F5C69C;
  --sf-hairL:rgba(251,243,233,.15); --sf-serif:'Fraunces',Georgia,serif;
  background:var(--sf-ink) !important; color:rgba(251,243,233,.62); font-size:14px; }
.rey-siteFooter a{ color:rgba(251,243,233,.62); text-decoration:none; }
.rey-siteFooter a:hover{ color:var(--sf-cream); }

/* ---- micro labels on the four column headings ---- */
.rey-siteFooter .elementor-element-4e1b5e0 .elementor-heading-title{
  color:var(--sf-cream) !important; font-family:'Manrope',sans-serif !important;
  font-size:9.5px !important; letter-spacing:.22em !important; text-transform:uppercase !important;
  font-weight:700 !important; }

/* ---- REVIEW BAND ---- */
.sf-rev{ padding:clamp(30px,4vw,56px) 0; }
.sf-rev__top{ display:flex; align-items:flex-end; gap:clamp(20px,3vw,44px); flex-wrap:wrap; margin-bottom:24px; }
.sf-rev__score{ display:flex; align-items:baseline; gap:12px; }
.sf-rev__score b{ font-family:var(--sf-serif); font-variation-settings:"SOFT" 26,"WONK" 1,"opsz" 144;
  font-weight:400; font-size:clamp(3rem,8vw,4.6rem); line-height:.85; letter-spacing:-.045em; color:var(--sf-cream); }
.sf-rev__score span{ font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--sf-peachD); line-height:1.35; }
.sf-rev__h{ font-family:var(--sf-serif); font-variation-settings:"SOFT" 22,"WONK" 1,"opsz" 90;
  font-weight:400; font-size:clamp(1.2rem,2.4vw,1.8rem); letter-spacing:-.024em; color:var(--sf-cream);
  margin:0; max-width:26ch; line-height:1.15; }
.sf-rev__h em{ font-style:italic; color:var(--sf-peachD); }
.sf-rev__top .sf-chip--cta{ margin-left:auto; }
.sf-rev__themes{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px; }
.sf-rev__themes span{ border:1px solid var(--sf-hairL); border-radius:2px; padding:7px 11px;
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(251,243,233,.7); }
.sf-rev__themes b{ color:var(--sf-peachD); margin-left:5px; }
.sf-rev__grid{ display:grid; gap:10px; grid-template-columns:1fr; }
.sf-rev__card{ border:1px solid var(--sf-hairL); border-radius:3px; padding:15px; }
.sf-rev__card p{ font-size:13px; line-height:1.55; color:rgba(251,243,233,.72); margin:10px 0 0; }
.sf-rev__card--reply{ border-style:dashed; display:flex; flex-direction:column; justify-content:center; }
.sf-rev__card--reply p{ margin:0; }
.sf-stars{ color:var(--sf-peachD); letter-spacing:.14em; font-size:13px; }
.sf-who{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:10px; }
.sf-who b{ color:var(--sf-cream); font-size:13.5px; font-weight:600; }
.sf-who i{ font-style:normal; font-size:11.5px; color:rgba(251,243,233,.5); }

/* ---- chips ---- */
.sf-chip{ display:inline-block; border:1px solid var(--sf-hairL); border-radius:2px; padding:7px 11px;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(251,243,233,.75); }
.sf-chip--cta{ border-color:rgba(251,243,233,.4); }
.sf-chip--mpesa{ border-color:var(--sf-peachD); color:var(--sf-peachD); }
.sf-pays{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---- Visit us + newsletter column copy ---- */
.sf-visit a, .sf-visit p{ display:block; padding:5px 0; margin:0; line-height:1.55; }
.sf-addr{ color:rgba(251,243,233,.62); }
.sf-social{ margin-top:8px !important; }
.sf-social a{ display:inline; padding:0; }
.sf-nlIntro{ color:rgba(251,243,233,.62); margin:0 0 4px; line-height:1.55; }
.sf-nlSmall{ font-size:11.5px; color:rgba(251,243,233,.45); margin:10px 0 0; line-height:1.5; }

/* ---- giant outlined wordmark ---- */
.sf-wordmark{ font-family:var(--sf-serif); font-variation-settings:"SOFT" 26,"WONK" 1,"opsz" 144;
  font-weight:400; font-size:clamp(3.4rem,17vw,13rem); letter-spacing:-.055em; line-height:.78;
  color:transparent; -webkit-text-stroke:1px rgba(251,243,233,.2); text-stroke:1px rgba(251,243,233,.2);
  margin:0; padding:clamp(10px,2vw,24px) 0 clamp(18px,3vw,34px); }

/* ---- base band ---- */
.rey-siteFooter .elementor-element-17e0579{ border-top:1px solid var(--sf-hairL) !important;
  padding-top:22px !important; margin-top:0 !important; }
.sf-legal{ font-size:11.5px; line-height:1.7; color:rgba(251,243,233,.45); max-width:76ch; margin:0; }
.sf-legal a{ text-decoration:underline; }
.sf-blurb{ font-size:11.5px; line-height:1.7; color:rgba(251,243,233,.38); max-width:88ch; margin:0; }

@media (min-width:560px){ .sf-rev__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .sf-rev__grid{ grid-template-columns:repeat(4,1fr); } }

/* The reviews container carried its own peach background, which left the
   cream review text sitting on cream. sf-rev band background fix. */
.elementor-element-b8a92ec{ background-color:#171512 !important; background-image:none !important;
  border-bottom:1px solid rgba(251,243,233,.15); }
.elementor-element-b8a92ec .e-con-inner{ padding-top:0 !important; padding-bottom:0 !important; }

/* a360a68 paints pure black against the footer ink (#171512), which shows a
   seam where the two meet. Let the footer colour through instead. */
.rey-siteFooter .elementor-element-a360a68{ background-color:transparent !important; }

/* ==========================================================================
   STRAY SEARCH PANEL BELOW THE FOOTER
   Added 2026-07-28. TO REVERT: delete this block.

   A second search form was rendering as a plain block at the very bottom of
   every page, under the footer, reading "Search www.simplicosmetics.co.ke".

   It is #rey-searchPanel, output as a direct child of <body> with
   data-style="inline". Rey only supports the inline search style INSIDE the
   header, so at body level there is no CSS to position or hide it: computed
   position was static, opacity 1, visibility visible. Its 42 child rules all
   loaded; only the base rule that would have hidden it was absent.

   The working search is a different element: .rey-headerSearch--inline in the
   header. I confirmed clicking the header magnifier never touches this panel,
   so hiding it cannot affect search.

   The child combinator matters. body > #rey-searchPanel targets ONLY the stray
   at body level and deliberately leaves any panel inside the header alone.

   THIS IS A SYMPTOM, NOT THE CAUSE. Something is emitting a duplicate search
   panel — most likely a leftover search widget in the header Global Section,
   or a Rey search setting still set to a panel style. Worth tracking down so
   the markup stops being printed at all; until then this hides it.
   ========================================================================== */
body > #rey-searchPanel:not(.--is-opened) { display: none !important; }


/* ==========================================================================
   FOOTER — MOBILE
   Added 2026-07-28. TO REVERT: delete this whole block.

   The footer measured 2627px at 390px wide — about seven phone screens. Two
   things caused most of it: the four review cards stacked (567px) and the four
   columns stacked (961px). Nothing here hides information; it changes shape.
   ========================================================================== */

@media (max-width: 767px) {

  /* --- review band --- */
  .sf-rev{ padding:26px 0; }
  .sf-rev__top{ flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:16px; }
  .sf-rev__score{ gap:10px; align-items:flex-end; }
  .sf-rev__h{ max-width:none; }
  .sf-rev__top .sf-chip--cta{ margin-left:0; }

  /* Themes wrapped onto three lines. One swipeable row instead.
     The negative margin lets the row bleed to the screen edge so it reads as
     scrollable rather than clipped. */
  .sf-rev__themes{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin:0 -16px 16px; padding:0 16px 2px; }
  .sf-rev__themes::-webkit-scrollbar{ display:none; }
  .sf-rev__themes span{ flex:0 0 auto; }

  /* Cards become the swipe carousel the mockup specified for mobile.
     78% width leaves the next card peeking, which is what signals "swipe me". */
  .sf-rev__grid{ grid-template-columns:none !important; grid-auto-flow:column;
    grid-auto-columns:78%; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin:0 -16px; padding:2px 16px 12px; }
  .sf-rev__grid::-webkit-scrollbar{ display:none; }
  .sf-rev__card{ scroll-snap-align:start; }

  /* --- columns: link lists 2-up, wide content full width ---
     Shop and Get help are short labels, so they pair well side by side.
     Visit us and the newsletter hold an address, an email and a form input,
     none of which survive a 165px column, so they stay full width. */
  .rey-siteFooter .elementor-element-4e1b5e0{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:18px !important; row-gap:24px !important; }
  .rey-siteFooter .elementor-element-61bd506,
  .rey-siteFooter .elementor-element-638d4b4{ grid-column:1 / -1; }
  .rey-siteFooter .elementor-element-4e1b5e0 > .e-con{ border-right:0 !important; padding-top:0 !important; }

  /* Keep tap targets around 30px without lengthening the list much. */
  .rey-siteFooter .elementor-element-4e1b5e0 .elementor-widget-reycore-menu a{ padding:6px 0; }

  /* --- wordmark: keep it, just stop it reserving so much air --- */
  .sf-wordmark{ padding:6px 0 14px; }

  /* --- base band --- */
  .rey-siteFooter .elementor-element-17e0579{ padding-top:16px !important; }
  .sf-legal, .sf-blurb{ font-size:11px; }
  .sf-pays{ gap:6px; }
}

/* ==========================================================================
   EMPTY STAR RATINGS ON THE PRODUCT GRID
   Added 2026-07-28. DELETE THIS BLOCK once product reviews start arriving.

   Every product in the catalogue renders "Rated 0 out of 5" with five empty
   stars, because there are no product-level reviews yet. On a grid of 16 that
   reads as "nobody has ever bought anything here" — which is false: you have
   4.9 from 36 Google reviews. They are just attached to the business, not to
   products.

   This rule existed before, in the Customizer Additional CSS, and went when
   that field was cleared. It never got reinstalled. My fault for leaving it
   in a file I had already been told was fragile.
   ========================================================================== */
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .woocommerce-product-rating,
.woocommerce .products .star-rating,
.woocommerce div.product .woocommerce-product-rating,
.rey-productInner .star-rating { display: none !important; }

/* ==========================================================================
   SHOP GRID — PRODUCT CARD
   Added 2026-07-28. TO REVERT: delete this whole block.
   Class names below were read off the live markup, not guessed.
   ========================================================================== */

/* 1. The "Available" badge carried no information — every buyable product had
      one, so it only meant anything by its absence. The out-of-stock badge is
      the one that actually tells you something, so that one stays. */
.woocommerce ul.products li.product .rey-instock-badge { display: none !important; }

/* 2. Quantity steppers on a listing. Nobody buys three serums from a grid, and
      the stepper sat directly beside the button it was competing with. */
.woocommerce ul.products li.product .quantity { display: none !important; }

/* 3. Product name in the brand serif, clamped to two lines so card bottoms
      line up instead of raggedly following title length. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 40;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

/* 4. Price should be the loudest thing after the image. */
.woocommerce ul.products li.product .price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 5. Out of stock, demoted rather than hidden. 86 products are out of stock and
      52 more are on backorder — 138 of 451. They were previously
      indistinguishable from buyable stock until you noticed the button said
      "Read more". Hiding them would cost the SEO on 138 URLs, so instead they
      read as unavailable at a glance and keep their pages. */
.woocommerce ul.products li.product.outofstock .rey-productInner img {
    opacity: 0.45;
    filter: grayscale(0.5);
}
.woocommerce ul.products li.product.outofstock .price { opacity: 0.6; }
.woocommerce ul.products li.product .rey-outofstock-badge,
.woocommerce ul.products li.product .rey-onbackorder-badge {
    background: #4F4944 !important;
    color: #FBF3E9 !important;
}

/* 6. One full-width call to action per card. */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button {
    width: 100%;
    min-height: 44px;
}

/* ==========================================================================
   MATCH THE MOCKUP - shop archive shell
   Added 2026-07-28. TO REVERT: delete this whole block.

   This closes the gaps that are achievable in CSS. The remaining differences
   (card size line, concern pills, BESTSELLER / OUT OF STOCK badges, ADD TO BAG
   wording, NOTIFY ME and PRE-ORDER buttons, the guidance buttons under the
   heading, and load-more) all need template hooks, because CSS cannot add
   content that is not in the markup.
   ========================================================================== */

/* ---- page head ---- */
.rey-breadcrumbs {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: #4F4944;
}
h1.woocommerce-products-header__title {
    font-size: clamp(2.3rem, 6vw, 4rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 10px !important;
}
.term-description {
    max-width: 800px /* was 62ch — widened 28 Jul 2026 to sit closer to the 868px grid */;
    color: #4F4944;
    font-size: 15.5px;
}
.term-description strong { color: #171512; font-weight: 600; }

/* ---- toolbar ---- */
.rey-loopHeader {
    border-bottom: 1px solid rgba(23, 21, 18, 0.14);
    padding-bottom: 14px;
    margin-bottom: 22px;
}
.woocommerce-result-count {
    font-size: 12.5px; color: #4F4944; text-transform: none; letter-spacing: 0;
}

/* ---- grid: three across beside the rail, as designed ----
   Four cards next to a 252px rail left each one too narrow for a serif name
   plus a price plus a full-width button. */
@media (min-width: 1025px) {
    .woocommerce ul.products.rey-wcGrid-default {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}
@media (max-width: 1024px) {
    .woocommerce ul.products.rey-wcGrid-default {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

/* ---- the card itself ----
   Products were sitting directly on the page background with no container, so
   the grid read as a loose scatter of images rather than a set of cards. */
.woocommerce ul.products li.product .rey-productInner {
    background: #fff;
    border: 1px solid rgba(23, 21, 18, 0.08);
    border-radius: 3px;
    padding: 0 12px 14px;
    height: 100%;
    transition: border-color 0.2s, transform 0.2s;
}
.woocommerce ul.products li.product:hover .rey-productInner {
    border-color: #171512;
    transform: translateY(-2px);
}

/* Image flush to the card edges, square, and contained rather than cropped -
   these are bottles and tubes, so cropping loses the product. */
.woocommerce ul.products li.product .rey-productThumbnail {
    margin: 0 -12px 12px;
    background: #F7F1EA;
}
.woocommerce ul.products li.product .rey-productThumbnail img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 7%;
}

/* ---- filter rail ---- */
@media (min-width: 1025px) {
    .rey-siteRow > aside.shop-sidebar {
        min-width: 252px;
    }
}

/* The stock filter is the most important control in the rail, so it gets the
   peach treatment from the mockup and an explanation of what it hides. */
.reyajfilter-stock-filter-widget {
    background: #FCE4CE;
    border: 1px solid #EDCFB5;
    border-radius: 3px;
    padding: 13px;
    margin-bottom: 18px;
}
.reyajfilter-stock-filter label { display: block; font-weight: 600; }
.reyajfilter-stock-filter label::after {
    content: "Out-of-stock and backorder items stay listed unless you tick this.";
    display: block;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.45;
    color: #4F4944;
    margin-top: 4px;
}

/* Counts to the right edge so the labels form a clean left column. */
aside.shop-sidebar .rey-filterCheckbox,
aside.shop-sidebar li {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
aside.shop-sidebar li > .count,
aside.shop-sidebar li > span:last-child:not(:only-child) {
    margin-left: auto;
    font-size: 11.5px;
    color: #4F4944;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   STOCK FILTER COUNT - suppress a number that is wrong
   Added 2026-07-28. TO REVERT: delete this block; the count returns.

   Rey renders the count as the entire label text, so the control read "62"
   with no words at all. My ::before supplies the wording.

   The count itself is misleading: it says 62, but ticking the box actually
   returns 58. Rey counts backorder items as in stock for the badge, then
   excludes them from the filtered query. Measured on Cleansers: 70 total,
   label 62, filtered result 58, out-of-stock cards 8 -> 0.

   Rather than publish a number that is wrong by four, the count is hidden and
   the control simply reads "In stock only". font-size:0 on the label hides its
   own text while the pseudo-elements set their own sizes.
   ========================================================================== */
.reyajfilter-stock-filter label { font-size: 0 !important; }
.reyajfilter-stock-filter label::before {
    font-size: 13.5px;
    font-weight: 600;
    color: #171512;
}
.reyajfilter-stock-filter label::after { font-size: 12px; }

/* ==========================================================================
   SIDEBAR ROW FIX + RAIL POLISH  (restored, second time)
   Re-added 2026-07-28. Lost twice to whole-file saves built on a stale
   textarea: the Theme File Editor rewrites the ENTIRE file, and a fetch POST
   does not refresh the textarea, so a second save from the same page load
   silently reverts the first. Reload before every write.
   ========================================================================== */
@media (min-width: 1025px) {
    .rey-siteRow { align-items: flex-start; }
    .rey-siteRow > aside.shop-sidebar {
        flex: 0 0 252px !important;
        max-width: 252px !important;
        min-width: 252px;
        margin-right: 32px;
    }
    .rey-siteRow > main.rey-siteMain.--has-sidebar {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    .rey-filterBtn { display: none !important; }
}
aside.shop-sidebar h3.widget-title {
    font-family: Manrope, Helvetica, Arial, sans-serif !important;
    font-size: 9.5px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    color: #4F4944 !important;
    margin: 0 0 10px !important;
}
.woocommerce ul.products li.product .rey-productInner { height: auto !important; }
.woocommerce ul.products li.product { align-self: start; }

/* ==========================================================================
   SHOP CARD HOOKS — styling for 37-shop-card-php-AS-INSTALLED.php
   Added 28 July 2026. Appended to rey-child/simpli-2026.css.

   Styles the markup the PHP block prints: size line, stock badges, the
   backorder note, the WhatsApp "Ask about stock" button, and the guidance
   buttons under the category heading.

   Palette is brand.md only. The original draft used a green for the
   WhatsApp button; there is no green in the palette, so both guidance
   buttons use the secondary-button treatment (ink border on cream) and
   rust is held back for the one place it earns attention — "Only N left".

   Pill styles are included but inert: the PHP that prints pills is
   commented out until the category tagging is cleaned up.

   TO REVERT: delete this whole block.
   ========================================================================== */

/* --- Size line under the product name ---------------------------------- */
.simpli-cardSize {
	display: block;
	font-size: 11.5px;
	line-height: 1.3;
	color: #4F4944;
	margin-top: 2px;
	font-variant-numeric: tabular-nums;
}

/* --- Concern / skin-type pills (inert until the PHP is uncommented) ----- */
.simpli-cardPills {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-top: 8px;
}
.simpli-cardPills span {
	font-size: 10px;
	line-height: 1.4;
	border: 1px solid rgba(23, 21, 18, .14);
	border-radius: 99px;
	padding: 3px 8px;
	color: #4F4944;
	white-space: nowrap;
}

/* --- Backorder promise on the card ------------------------------------- */
.simpli-cardWait {
	display: block;
	font-size: 11px;
	line-height: 1.35;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 700;
	color: #9B3D2C;
	margin-top: 8px;
}

/* --- Stock badges -------------------------------------------------------
   Anchored to .rey-productInner / .rey-productThumbnail, both of which Rey
   already sets position:relative. Deliberately top-LEFT: Rey's own NEW badge
   sits in .rey-thPos--top-right, so the two never overlap.
   ----------------------------------------------------------------------- */
.rey-productInner { position: relative; }

.simpli-tag {
	position: absolute;
	top: 9px;
	left: 9px;
	z-index: 3;
	font-size: 9.5px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 5px 8px;
	border-radius: 2px;
	background: #171512;
	color: #FBF3E9;
	pointer-events: none;
}
.simpli-tag--low  { background: #9B3D2C; }            /* scarcity, earns rust */
.simpli-tag--out,
.simpli-tag--wait { background: #4F4944; }            /* unavailable, quiet   */

/* Out-of-stock cards are already demoted elsewhere in this file; keep the
   badge itself at full strength so it stays readable over the faded image. */
li.product.outofstock .simpli-tag { opacity: 1; filter: none; }

/* --- "Ask about stock" button ------------------------------------------
   Inherits Rey's .button sizing. Reads as secondary, because it is not a
   purchase — it opens WhatsApp.
   ----------------------------------------------------------------------- */
.simpli-askStock {
	background: transparent !important;
	color: #171512 !important;
	border: 1px solid rgba(23, 21, 18, .28) !important;
}
.simpli-askStock:hover {
	background: #FCE4CE !important;
	border-color: #171512 !important;
	color: #171512 !important;
}

/* --- Guidance buttons under the category heading ------------------------ */
.simpli-guide {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 18px 0 0;
}
.simpli-guide a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;               /* thumb target */
	padding: 10px 14px;
	border: 1px solid rgba(23, 21, 18, .18);
	border-radius: 2px;
	background: #FFFFFF;
	color: #171512;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.simpli-guide a:hover,
.simpli-guide a:focus-visible {
	background: #FCE4CE;
	border-color: #171512;
	color: #171512;
}

@media (max-width: 600px) {
	.simpli-guide { gap: 8px; }
	.simpli-guide a { flex: 1 1 100%; justify-content: center; font-size: 11.5px; }
}

/* ==========================================================================
   GOLDEN PDP CANARY + VERIFIED ACCESSIBILITY HARDENING
   Added 2026-08-22. Verdict markup currently renders only on Woo product 36568.
   Shared footer contrast corrections apply sitewide because the failing footer
   component is shared sitewide. Remove this block to restore prior CSS.
   ========================================================================== */

.simpli-pdpVerdict {
	--sp-ink: #171512;
	--sp-muted: #4F4944;
	--sp-rust: #8A3427;
	--sp-cream: #FBF3E9;
	--sp-peach: #FCE4CE;
	--sp-peach-border: #D7AE8B;
	margin: 24px 0 26px;
	padding: clamp(20px, 3vw, 30px);
	border: 1px solid var(--sp-peach-border);
	border-radius: 4px;
	background: linear-gradient(145deg, var(--sp-peach), var(--sp-cream));
	color: var(--sp-ink);
}
.simpli-pdpVerdict__eyebrow {
	margin: 0 0 8px;
	font-size: 10px;
	line-height: 1.4;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sp-rust);
}
.simpli-pdpVerdict h2 {
	margin: 0 0 10px;
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.55rem, 3vw, 2.15rem);
	line-height: 1.08;
	letter-spacing: -.025em;
	color: var(--sp-ink);
}
.simpli-pdpVerdict__summary {
	margin: 0;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.65;
	color: var(--sp-muted);
}
.simpli-pdpVerdict__meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 18px 0 0;
}
.simpli-pdpVerdict__meta > div {
	padding: 12px 14px;
	border: 1px solid rgba(23, 21, 18, .14);
	background: rgba(255, 255, 255, .46);
}
.simpli-pdpVerdict__meta dt,
.simpli-pdpVerdict__fit h3 {
	margin: 0 0 5px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--sp-muted);
}
.simpli-pdpVerdict__meta dd {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 650;
	color: var(--sp-ink);
}
.simpli-pdpVerdict__fitGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px;
}
.simpli-pdpVerdict__fit {
	padding: 15px;
	border: 1px solid rgba(23, 21, 18, .16);
	background: rgba(255, 255, 255, .58);
}
.simpli-pdpVerdict__fit--consider {
	border-left: 3px solid var(--sp-rust);
}
.simpli-pdpVerdict__fit p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--sp-ink);
}
.simpli-pdpVerdict__startSafe {
	margin-top: 10px;
	padding: 13px 15px;
	border: 1px solid rgba(23, 21, 18, .14);
	background: var(--sp-ink);
	color: var(--sp-cream);
	font-size: 13px;
	line-height: 1.55;
}
.simpli-pdpVerdict__startSafe strong { color: #F6CFAD; }
.simpli-pdpVerdict__actions {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	margin-top: 14px;
}
.simpli-pdpVerdict__actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 16px;
	border: 1px solid var(--sp-ink);
	border-radius: 2px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
	text-decoration: none;
}
.simpli-pdpVerdict__primary { background: var(--sp-ink); color: var(--sp-cream) !important; }
.simpli-pdpVerdict__secondary { background: transparent; color: var(--sp-ink) !important; }
.simpli-pdpVerdict__actions a:hover,
.simpli-pdpVerdict__actions a:focus-visible { background: var(--sp-rust); border-color: var(--sp-rust); color: #fff !important; }
.simpli-pdpVerdict__actions a:focus-visible,
.simpli-pdpDetails a:focus-visible,
.simpli-golden-pdp .__thumbs-track:focus-visible {
	outline: 3px solid #8A3427;
	outline-offset: 3px;
}
.simpli-pdpVerdict__personal {
	margin: 11px 0 0;
	font-size: 11.5px;
	line-height: 1.55;
	color: #514A44;
}

.simpli-pdpDecisionCue {
	--sp-ink: #171512;
	--sp-muted: #4F4944;
	--sp-rust: #8A3427;
	--sp-cream: #FBF3E9;
	--sp-peach-border: #D7AE8B;
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid var(--sp-peach-border);
	border-radius: 4px;
	background: var(--sp-cream);
	color: var(--sp-ink);
}
.simpli-pdpDecisionCue__eyebrow {
	margin: 0 0 6px;
	font-size: 10px;
	line-height: 1.4;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sp-rust);
}
.simpli-pdpDecisionCue h2 {
	margin: 0 0 8px;
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 400;
	font-size: 1.35rem;
	line-height: 1.15;
	color: var(--sp-ink);
}
.simpli-pdpDecisionCue__summary {
	margin: 0;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--sp-muted);
}
.simpli-pdpDecisionCue__meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0;
}
.simpli-pdpDecisionCue__meta > div {
	padding: 10px 12px;
	border: 1px solid rgba(23, 21, 18, .14);
	background: rgba(255, 255, 255, .7);
}
.simpli-pdpDecisionCue__meta dt {
	margin: 0 0 4px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--sp-muted);
}
.simpli-pdpDecisionCue__meta dd {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 650;
	color: var(--sp-ink);
}

.simpli-pdpHelp {
	--sp-ink: #171512;
	--sp-rust: #8A3427;
	--sp-cream: #FBF3E9;
	margin: 16px 0 0;
}



.simpli-pdpDetails {
	width: min(100%, 1180px);
	margin: clamp(34px, 5vw, 62px) auto 0;
	padding: clamp(22px, 4vw, 42px);
	border-top: 1px solid rgba(23, 21, 18, .18);
	border-bottom: 1px solid rgba(23, 21, 18, .18);
	background: #FBF3E9;
}
.simpli-pdpDetails__head {
	max-width: 68ch;
	margin-bottom: 18px;
}
.simpli-pdpDetails__eyebrow {
	margin: 0 0 7px !important;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8A3427 !important;
}
.simpli-pdpDetails__head h2 {
	margin: 0 0 8px;
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(1.7rem, 4vw, 2.6rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.03em;
	color: #171512;
}
.simpli-pdpDetails__head > p:last-child {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #4F4944;
}
.simpli-pdpDetails__sections {
	border-top: 1px solid rgba(23, 21, 18, .16);
}
.simpli-pdpDetails__section {
	border-bottom: 1px solid rgba(23, 21, 18, .16);
}
.simpli-pdpDetails__section summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	min-height: 58px;
	display: flex;
	align-items: center;
	padding: 14px 46px 14px 0;
	font-size: 14px;
	font-weight: 750;
	letter-spacing: .01em;
	color: #171512;
}
.simpli-pdpDetails__section summary::-webkit-details-marker { display: none; }
.simpli-pdpDetails__section summary::after {
	content: '+';
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'Fraunces', Georgia, serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	color: #8A3427;
}
.simpli-pdpDetails__section[open] summary::after { content: '–'; }
.simpli-pdpDetails__section summary:hover { color: #8A3427; }
.simpli-pdpDetails__section summary:focus-visible {
	outline: 3px solid #8A3427;
	outline-offset: 3px;
}
.simpli-pdpDetails__panel {
	max-width: 78ch;
	padding: 0 0 24px;
}
.simpli-pdpDetails__panel > :first-child { margin-top: 0; }
.simpli-pdpDetails__panel > :last-child { margin-bottom: 0; }
.simpli-pdpDetails__panel h3 {
	margin: 22px 0 8px;
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(1.08rem, 2vw, 1.3rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: #171512;
}
.simpli-pdpDetails__panel p,
.simpli-pdpDetails__panel li,
.simpli-pdpDetails__panel td,
.simpli-pdpDetails__panel th {
	color: #4F4944;
	line-height: 1.7;
}
.simpli-pdpDetails__empty {
	margin: 0 !important;
	padding: 12px 14px;
	border-left: 3px solid rgba(138, 52, 39, .55);
	background: rgba(255, 255, 255, .46);
	font-size: 13px;
	font-style: italic;
	color: #5B534D !important;
}
.simpli-pdpDetails__section[data-content-state="not-published"] summary span::after {
	content: 'Not verified yet';
	display: inline-block;
	margin-left: 9px;
	font-size: 9px;
	font-weight: 750;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #6A615A;
}
.simpli-pdpDetails__panel ul,
.simpli-pdpDetails__panel ol { padding-left: 1.2rem; }
.simpli-pdpDetails__panel a {
	color: #7A2B20;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.simpli-pdpDetails__panel a:hover { color: #171512; }
.simpli-pdpDetails__section--ingredients .simpli-pdpDetails__panel > p:last-child {
	font-size: 12.5px;
	line-height: 1.72;
	word-break: break-word;
}
.simpli-pdpDetails__section--specifications table {
	width: 100%;
	border-collapse: collapse;
}
.simpli-pdpDetails__section--specifications th,
.simpli-pdpDetails__section--specifications td {
	padding: 10px 0;
	border-bottom: 1px solid rgba(23, 21, 18, .1);
	text-align: left;
	vertical-align: top;
}
.simpli-pdpDetails__section--specifications th {
	width: 34%;
	padding-right: 18px;
	font-weight: 700;
	color: #171512;
}

/* The previous stock green failed AA at 4.01:1 on the cream PDP ground. */
.single-product .stock,
.single-product .stock span { color: #315744 !important; }

/* Shared footer text failed the rendered axe contrast gate. */
.rey-siteFooter .sf-social,
.rey-siteFooter .sf-social a,
.rey-siteFooter .sf-nlSmall,
.rey-siteFooter .sf-blurb,
.rey-siteFooter .sf-legal { color: #C8BFB5 !important; }
.rey-siteFooter .sf-legal a { color: #E3DAD0 !important; }

@media (max-width: 767px) {
	.simpli-pdpVerdict { margin-top: 18px; padding: 18px; }
	.simpli-pdpVerdict__meta,
	.simpli-pdpVerdict__fitGrid,
	.simpli-pdpDecisionCue__meta { grid-template-columns: 1fr; }
	.simpli-pdpVerdict__actions { flex-direction: column; }
	.simpli-pdpVerdict__actions a { width: 100%; }
	.simpli-pdpDetails { padding: 22px 16px; }

	/* The service-principles strip was a non-keyboard horizontal scroller. */
	.sf-rev__themes {
		flex-wrap: wrap !important;
		overflow-x: visible !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}
/* SIMPLI GOLDEN PDP CANARY + ACCESSIBILITY HARDENING END */

/* SIMPLI GROUPED BUNDLE PDP V1 */
.simpli-bundleDecision__keep {
	margin: 10px 0 0;
	padding: 12px 14px;
	border-left: 3px solid #8A3427;
	background: rgba(255,255,255,.45);
	font-size: 13px;
	line-height: 1.55;
	color: #171512;
}
.simpli-bundleDecision__actions {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	margin-top: 14px;
}
.simpli-bundleDecision__actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 16px;
	border: 1px solid #171512;
	border-radius: 2px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
	text-decoration: none;
}
.simpli-bundleDecision__primary { background: #171512; color: #FBF3E9 !important; }
.simpli-bundleDecision__secondary { background: transparent; color: #171512 !important; }
.simpli-bundleDecision__actions a:hover,
.simpli-bundleDecision__actions a:focus-visible { background: #8A3427; border-color: #8A3427; color: #fff !important; }
.simpli-bundleDecision a:focus-visible { outline: 3px solid #8A3427; outline-offset: 3px; }
.simpli-bundleDecision__note {
	margin: 11px 0 0;
	font-size: 11.5px;
	line-height: 1.55;
	color: #514A44;
}
@media (max-width: 767px) {
	.simpli-bundleDecision { padding: 18px; }
	.simpli-bundleDecision__item { grid-template-columns: 1fr; gap: 5px; }
	.simpli-bundleDecision__price { white-space: normal; }
	.simpli-bundleDecision__actions { flex-direction: column; }
	.simpli-bundleDecision__actions a { width: 100%; }
}
/* SIMPLI GROUPED BUNDLE PDP V1 */
.single-product .simpli-bundleTotal {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	align-items: flex-start;
}
.single-product .simpli-bundleTotal__label {
	font-size: 11px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #4F4944;
}
.single-product .simpli-bundleTotal strong { color: #171512; }
.simpli-bundleDecision {
	--sb-ink: #171512;
	--sb-muted: #4F4944;
	--sb-rust: #8A3427;
	--sb-cream: #FBF3E9;
	--sb-peach: #FCE4CE;
	margin: 22px 0 24px;
	padding: clamp(20px, 3vw, 30px);
	border: 1px solid #D7AE8B;
	border-radius: 4px;
	background: linear-gradient(145deg, var(--sb-peach), var(--sb-cream));
	color: var(--sb-ink);
}
.simpli-bundleDecision__eyebrow {
	margin: 0 0 8px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sb-rust);
}
.simpli-bundleDecision h2 {
	margin: 0 0 10px;
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.55rem, 3vw, 2.15rem);
	line-height: 1.08;
	letter-spacing: -.025em;
	color: var(--sb-ink);
}
.simpli-bundleDecision__summary {
	margin: 0;
	max-width: 64ch;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--sb-muted);
}
.simpli-bundleDecision__items {
	display: grid;
	gap: 8px;
	margin-top: 16px;
}
.simpli-bundleDecision__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 13px 14px;
	border: 1px solid rgba(23, 21, 18, .15);
	background: rgba(255, 255, 255, .58);
}
.simpli-bundleDecision__itemMain { min-width: 0; }
.simpli-bundleDecision__name {
	display: block;
	font-weight: 700;
	line-height: 1.4;
	color: var(--sb-ink);
	text-decoration: none;
}
.simpli-bundleDecision__status {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--sb-muted);
}
.simpli-bundleDecision__price {
	font-weight: 750;
	white-space: nowrap;
	color: var(--sb-ink);
}

/* SIMPLI GOLDEN PDP — GOVERNED KEEP / NO PURCHASE / ALTERNATIVES */
.simpli-pdpAlternatives {
	--spa-ink: #171512;
	--spa-muted: #4F4944;
	--spa-rust: #8A3427;
	--spa-cream: #FBF3E9;
	width: min(100%, 1180px);
	margin: clamp(24px, 4vw, 46px) auto 0;
	padding: clamp(22px, 4vw, 38px);
	border: 1px solid rgba(23, 21, 18, .14);
	background: #fff;
	color: var(--spa-ink);
}
.simpli-pdpAlternatives__head {
	max-width: 70ch;
	margin-bottom: 18px;
}
.simpli-pdpAlternatives__eyebrow {
	margin: 0 0 7px !important;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--spa-rust) !important;
}
.simpli-pdpAlternatives__head h2 {
	margin: 0 0 8px;
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(1.55rem, 3.4vw, 2.35rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.028em;
	color: var(--spa-ink);
}
.simpli-pdpAlternatives__head > p:last-child {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--spa-muted);
}
.simpli-pdpAlternatives__decisions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.simpli-pdpAlternatives__decision {
	padding: 18px;
	border: 1px solid rgba(23, 21, 18, .14);
	background: var(--spa-cream);
}
.simpli-pdpAlternatives__label {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--spa-rust);
}
.simpli-pdpAlternatives__decision h3,
.simpli-pdpAlternatives__options > h3 {
	margin: 0 0 7px;
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(1.08rem, 2vw, 1.35rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--spa-ink);
}
.simpli-pdpAlternatives__decision p,
.simpli-pdpAlternatives__option p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--spa-muted);
}
.simpli-pdpAlternatives__options {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid rgba(23, 21, 18, .14);
}
.simpli-pdpAlternatives__optionGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 12px;
}
.simpli-pdpAlternatives__option {
	padding: 15px;
	border: 1px solid rgba(23, 21, 18, .14);
	background: #fff;
}
.simpli-pdpAlternatives__optionName {
	display: inline-block;
	margin-bottom: 7px;
	font-weight: 750;
	line-height: 1.4;
	color: var(--spa-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.simpli-pdpAlternatives__optionMeta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--spa-ink);
}
.simpli-pdpAlternatives a:focus-visible {
	outline: 3px solid var(--spa-rust);
	outline-offset: 3px;
}
@media (max-width: 767px) {
	.simpli-pdpAlternatives { padding: 22px 16px; }
	.simpli-pdpAlternatives__decisions,
	.simpli-pdpAlternatives__optionGrid { grid-template-columns: 1fr; }
}
/* SIMPLI GOLDEN PDP — GOVERNED KEEP / NO PURCHASE / ALTERNATIVES END */

/* SIMPLI PDP SALE-PRICE ACCESSIBILITY HARDENING — 2026-08-27
   The Rey sale-price strike-through rendered #cb988b on #fbf3e9 (2.27:1),
   failing WCAG AA on discounted PDPs. Keep the semantic <del> treatment but
   use the established Simpli muted text token, already contrast-verified on
   cream. Rollback: remove this block. */
.single-product .summary .price del,
.single-product .summary .price del .woocommerce-Price-amount,
.single-product .summary .price del .woocommerce-Price-currencySymbol {
    color: #4F4944 !important;
    opacity: 1 !important;
}
/* SIMPLI PDP SALE-PRICE ACCESSIBILITY HARDENING END */

/* SIMPLI CONSENT MANAGER — NON-INTRUSIVE FOOTER UTILITY
   Keeps the consent-preference control available without overlaying PDP,
   cart, checkout, mobile navigation or sticky commerce controls.
   Consent logic and click behaviour are intentionally untouched.
   Rollback: remove this block. */
#simpli-consent-manage.simpli-consent-manage {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    float: none !important;
    transform: none !important;

    display: block !important;
    width: fit-content !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 12px auto 18px !important;
    padding: 10px 4px !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;

    color: #4F4944 !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.4 !important;
    letter-spacing: .01em !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
}

#simpli-consent-manage.simpli-consent-manage:hover {
    color: #171512 !important;
    text-decoration-thickness: 2px !important;
}

#simpli-consent-manage.simpli-consent-manage:focus-visible {
    outline: 3px solid #8A3427 !important;
    outline-offset: 3px !important;
}

@media (max-width: 767px) {
    #simpli-consent-manage.simpli-consent-manage {
        margin-bottom: 14px !important;
    }
}
/* SIMPLI CONSENT MANAGER — NON-INTRUSIVE FOOTER UTILITY END */