/* ============================================================================
   ORCHID REDESIGN — PHASE 5: HOMEPAGE BANDS (PageBuilder addons)
   Ported from "Orchid Storefront.dc.html" (isHome) + "Orchid Widgets.dc.html".

   Its own layer, not an append to style.css: two sessions appending to one
   file lose each other's work. Block names checked free against style.css,
   orchid-purchase.css and orchid-account.css before writing — note the rail
   is `orchid-crail`, because `orchid-cat*` is already taken by the Phase 2
   category screen.

   Rules this layer obeys:
     - logical properties only (no left/right/margin-left)
     - border-radius is 0, 999px or 50% — nothing else
     - no media query; the bands are fluid (the one 760px switch is the header).
       Two documented exceptions live at that same boundary: the carousel's 2-up,
       and the legacy per-widget padding neutraliser at the end of this file.
     - every text element carries an explicit colour
     - clamp() everywhere; design cqi -> vw at page level, numbers unchanged
     - never calc() inside a `font:` shorthand — font: then a font-size longhand
   ============================================================================ */

/* Keyframes the design's helmet defines that this theme does not already
   carry. orchid-marquee, orchid-marquee-rtl and orchid-slidein are in
   style.css; these two are not. Referencing a keyframe that was never written
   is a silent no-animation — it shipped once as `orchid-pulse`. */
@keyframes orchid-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

@keyframes orchid-fadeup {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Per-band tokens, declared on `.orchid` — the ELEMENT, never :root. style.css
   declares the --o-* set on the wrapper itself, and a declaration on the
   element beats an inherited one whatever the source order. Each addon writes
   an override into its own style attribute only when the tenant changed it, so
   an untouched shop emits nothing and renders byte-identical to the design. */
.orchid {
  --o-hero-text:      var(--o-cream);
  --o-hero-scale:     1;
  --o-trust-scale:    1;
  --o-crail-scale:    1;
  --o-crail-secs:     78s;
  --o-carousel-scale: 1;
  --o-tabs-scale:     1;
  --o-promo-text:     var(--o-cream);
  --o-promo-scale:    1;
  --o-edit-scale:     1;
  --o-scent-scale:    1;
  --o-deal-text:      var(--o-on-ink);
  --o-deal-scale:     1;
  --o-gift-scale:     1;
  --o-voices-scale:   1;
  --o-marks-text:     var(--o-slash);
  --o-marks-scale:    1;
  --o-marks-secs:     42s;
  --o-notes-scale:    1;
  --o-insta-card:     var(--o-cream);
  --o-insta-scale:    1;
  --o-nl-scale:       1;
  --o-sbanner-text:   var(--o-cream);
  --o-sbanner-scale:  1;
  --o-sbanner-scrim:  .58;
}

/* ---------------------------------------------------------------------------
   Vendor reset, and NOT hero-specific — it belongs to the base layer and lives
   here only because a new layer per phase is safer than two sessions appending
   to style.css.

   style.css:222 clamps EVERY h1–h6 to two lines and style.css:236 clamps every
   <p> to three, both with `display:-webkit-box` + `text-overflow:ellipsis`.
   Element selectors, so (0,0,1) — an Orchid rule outspecifies them for the
   properties it declares, but none of our rules declare `display` or
   `-webkit-line-clamp`, so the clamp survived and quietly truncated the hero
   headline to "…فن". Every heading and paragraph in every Orchid band is
   exposed to this; reset the mechanism once, where all of them route through.
   --------------------------------------------------------------------------- */
.orchid h1, .orchid h2, .orchid h3,
.orchid h4, .orchid h5, .orchid h6,
.orchid p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: none;
  -webkit-box-orient: horizontal;
  text-overflow: clip;
  transition: none;
}

/* ---------------------------------------------------------------------------
   02 — Hero slider.  Design: Storefront isHome 160–187.
   Crossfade (opacity .9s), ken burns on the active slide only, ink scrim,
   copy pane over the inline-start 58%, dots + counter, prev/next.
   --------------------------------------------------------------------------- */
.orchid.orchid-hero {
  position: relative;
  height: calc(clamp(409px, 45.83vw, 660px) * var(--o-hero-scale));
  overflow: hidden;
  background: var(--o-cream-3);
}

.orchid .orchid-hero__slides { position: absolute; inset: 0; }

.orchid .orchid-hero__slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}
.orchid .orchid-hero__slide.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

.orchid .orchid-hero__media { position: absolute; inset: 0; }
.orchid .orchid-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
/* Ken burns runs on the slide being looked at, so it restarts on every
   crossfade instead of finishing once while the slide is still hidden. */
.orchid .orchid-hero__slide.is-active .orchid-hero__media img {
  animation: orchid-kenburns 9s ease-out forwards;
}

/* One of the design's two gradients. Direction cannot be expressed logically,
   so it is branched — same precedent as the ticker's marquee keyframes. */
.orchid .orchid-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(var(--o-ink-rgb), .74), rgba(var(--o-ink-rgb), .12));
}
[dir="rtl"] .orchid .orchid-hero__scrim {
  background: linear-gradient(to left, rgba(var(--o-ink-rgb), .74), rgba(var(--o-ink-rgb), .12));
}

.orchid .orchid-hero__copy {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 3;
  width: min(100%, 58%);
  min-width: min(100%, 320px);
  padding: 0 clamp(20px, 5.28vw, 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.67vw, 24px);
}

.orchid .orchid-hero__kicker {
  font: 500 11px/1 var(--o-sans);
  font-size: calc(11px * var(--o-hero-scale));
  text-transform: uppercase;
  color: var(--o-sage-light);
  animation: orchid-fadeup .7s ease-out both;
}
/* Tracking is a Latin treatment; it looks broken on Arabic. */
[dir="ltr"] .orchid .orchid-hero__kicker { letter-spacing: .28em; }

.orchid .orchid-hero__title {
  font: 300 clamp(36px, 4.58vw, 66px)/1.06 var(--o-serif);
  font-size: calc(clamp(36px, 4.58vw, 66px) * var(--o-hero-scale));
  letter-spacing: -.025em;
  color: var(--o-hero-text);
  max-width: 16ch;
  text-wrap: pretty;
  animation: orchid-fadeup .8s .1s ease-out both;
}

.orchid .orchid-hero__body {
  max-width: 44ch;
  font: 400 16px/1.8 var(--o-sans);
  font-size: calc(16px * var(--o-hero-scale));
  /* The design's rgba(251,249,243,.82) as token + opacity, so a tenant who
     recolours the hero text recolours this too instead of leaving one literal
     cream paragraph behind. */
  color: var(--o-hero-text);
  opacity: .82;
  animation: orchid-fadeup .8s .2s ease-out both;
}

.orchid .orchid-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  animation: orchid-fadeup .8s .3s ease-out both;
}

/* Dots + counter */
.orchid .orchid-hero__dots {
  position: absolute;
  inset-block-end: 36px;
  /* The design pins these at a flat 76px; matched to the copy pane's own
     inline padding instead so they stay on-screen at 412px. The design draws
     mobile home as a separate screen, so it never had to solve this. */
  inset-inline-start: clamp(20px, 5.28vw, 76px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
}

.orchid .orchid-hero__dot {
  position: relative;
  width: 20px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(251, 249, 243, .45);
  cursor: pointer;
  transition: width .4s ease, background .4s ease;
}
.orchid .orchid-hero__dot.is-active {
  width: 52px;
  background: var(--o-hero-text);
}
/* The dot IS a 3px line — that is the design, and it stays 3px. But a 20x3
   button is not tappable on a phone, so the hit area is grown by an overlay
   that has no layout effect. Padding would work too and then the row's own
   height would change, pushing the line off the y the design places it on.
   `inset-inline: -5px` and not more: the gap between dots is 12px, so any
   larger and neighbouring hit areas touch. */
.orchid .orchid-hero__dot::before {
  content: '';
  position: absolute;
  inset-block: -14px;
  inset-inline: -5px;
}

.orchid .orchid-hero__counter {
  margin-inline-start: 8px;
  font: 500 12px/1 var(--o-serif);
  color: var(--o-hero-text);
  opacity: .75;
}

/* Prev / next */
.orchid .orchid-hero__nav {
  position: absolute;
  inset-block-end: 34px;
  inset-inline-end: clamp(20px, 5.28vw, 76px);
  z-index: 20;
  display: flex;
  gap: 10px;
}

.orchid .orchid-hero__arrow {
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(251, 249, 243, .45);
  border-radius: 0;
  background: rgba(var(--o-ink-rgb), .25);
  color: var(--o-hero-text);
  cursor: pointer;
  transition: background .22s ease, color .22s ease;
}
.orchid .orchid-hero__arrow:hover {
  background: var(--o-cream);
  color: var(--o-ink);
}
/* Three classes, so it beats `.orchid .o-i`'s ink default. No `font:`
   shorthand here — that is what turns a ligature back into the word. */
.orchid .orchid-hero__arrow .o-i {
  font-size: 22px;
  color: inherit;
}

/* ---------------------------------------------------------------------------
   04 — Trust strip.  Design: Storefront isHome 189–199.
   Pattern A, N=260. `auto-fit` on purpose: the item count is a short fixed
   list the tenant wrote, and stretching to fill the row IS the intent here.
   --------------------------------------------------------------------------- */
.orchid.orchid-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(46%, 260px), 1fr));
  background: var(--o-cream-2);
  border-block-end: 1px solid var(--o-bd-divider);
}

.orchid .orchid-trust__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(clamp(12px, 1.81vw, 26px) * var(--o-trust-scale)) clamp(13px, 2.08vw, 30px);
  border-inline-end: 1px solid rgba(var(--o-ink-rgb), .08);
  transition: background .22s ease;
}
.orchid .orchid-trust__item:hover { background: var(--o-cream-3); }

.orchid .orchid-trust__icon {
  flex: none;
  font-size: calc(26px * var(--o-trust-scale));
  color: var(--o-moss);
}

.orchid .orchid-trust__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.orchid .orchid-trust__title {
  font: 500 14px/1.3 var(--o-sans);
  font-size: calc(14px * var(--o-trust-scale));
  color: var(--o-ink);
}

.orchid .orchid-trust__sub {
  font: 400 12px/1.4 var(--o-sans);
  font-size: calc(12px * var(--o-trust-scale));
  color: var(--o-muted-2);
}

/* ---------------------------------------------------------------------------
   05 — Category rail.  Design: Storefront isHome 201–225.
   Heading row, then a marquee of arch-topped 4:5 tiles.
   --------------------------------------------------------------------------- */
.orchid.orchid-crail {
  padding: calc(clamp(28px, 4.58vw, 66px) * var(--o-crail-scale)) 0 calc(clamp(25px, 4.17vw, 60px) * var(--o-crail-scale));
  border-block-end: 1px solid var(--o-bd-divider);
  overflow: hidden;
}

.orchid .orchid-crail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(12px, 1.67vw, 24px);
  margin-block-end: 34px;
  padding-inline: clamp(24px, 3.89vw, 56px);
}

.orchid .orchid-crail__kicker {
  display: block;
  font: 500 11px/1 var(--o-sans);
  font-size: calc(11px * var(--o-crail-scale));
  text-transform: uppercase;
  color: var(--o-moss);
}
[dir="ltr"] .orchid .orchid-crail__kicker { letter-spacing: .26em; }

.orchid .orchid-crail__title {
  margin-block-start: 12px;
  font: 300 clamp(21px, 2.64vw, 38px)/1.1 var(--o-serif);
  font-size: calc(clamp(21px, 2.64vw, 38px) * var(--o-crail-scale));
  letter-spacing: -.01em;
  color: var(--o-ink);
}

.orchid .orchid-crail__all {
  flex: none;
  padding-block-end: 4px;
  border-block-end: 1px solid rgba(62, 83, 52, .4);
  font: 500 13px/1 var(--o-sans);
  color: var(--o-moss);
}
.orchid .orchid-crail__all:hover { color: var(--o-ink); }

/* The bleed lets the tiles run to the section edge while the heading keeps its
   inline padding. The mask is symmetric, so it needs no RTL branch. */
.orchid .orchid-crail__viewport {
  overflow: hidden;
  margin-inline: calc(clamp(24px, 3.89vw, 56px) * -1);
  padding-inline: clamp(24px, 3.89vw, 56px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

/* max-content, never a percentage width: the track carries the list twice and
   a fixed 200% shows the loop point as soon as the tenant changes the count. */
.orchid .orchid-crail__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: orchid-marquee var(--o-crail-secs) linear infinite;
}
[dir="rtl"] .orchid .orchid-crail__track { animation-name: orchid-marquee-rtl; }
.orchid .orchid-crail:hover .orchid-crail__track { animation-play-state: paused; }

/* Still mode — the widget's "Disable Auto-scroll" switch. The marquee stops, the
   track drops to a single pass (the blade decides that), and the VIEWPORT becomes
   the scroller so the row can be swiped or stepped with the arrows.

   The mask goes with the animation. It exists to soften the marquee's hard edges;
   on a still row that does not overflow it fades the leading tile for nothing.

   COMPOUND selectors, never a descendant one. The band carries `orchid` and
   `orchid-crail--still` on the SAME element and has no `.orchid` ancestor above it
   (its parent is `body.aromatic`), so a descendant combinator matches nothing at
   all — the rules parse, sit in the sheet, and never apply. That shipped once: the
   switch dropped the track to one pass and the marquee kept running. The block
   above already gets this right with `.orchid.orchid-crail`.

   The track rule also names `.orchid-crail` to reach (0,4,0), because
   `[dir="rtl"] .orchid .orchid-crail__track` is (0,3,0) — an attribute selector
   weighs the same as a class — and a tie would leave the RTL marquee winning on
   source order alone. */
.orchid.orchid-crail.orchid-crail--still .orchid-crail__track { animation: none; }

.orchid.orchid-crail--still .orchid-crail__viewport {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.orchid.orchid-crail--still .orchid-crail__viewport::-webkit-scrollbar { display: none; }
.orchid.orchid-crail--still .orchid-crail__tile { scroll-snap-align: start; }

/* The head row's trailing slot: "view all" and the arrows share it. */
.orchid .orchid-crail__tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.67vw, 24px);
}
.orchid .orchid-crail__nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.orchid .orchid-crail__tile {
  flex: none;
  width: clamp(150px, 44vw, 236px);
  display: flex;
  flex-direction: column;
  color: var(--o-ink);
}
.orchid .orchid-crail__tile:hover { color: var(--o-moss); }

/* One of the design's only two radius exceptions: the arch-topped scent tile
   (Storefront 213). The other is the 3px footer payment chip. */
.orchid .orchid-crail__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 4px 4px;
  overflow: hidden;
  background: var(--o-cream-3);
}
.orchid .orchid-crail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s ease;
}
.orchid .orchid-crail__tile:hover .orchid-crail__media img { transform: scale(1.08); }

.orchid .orchid-crail__count {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-start: 14px;
  padding: 5px 11px;
  background: rgba(251, 249, 243, .94);
  font: 500 10px/1 var(--o-serif);
  color: var(--o-moss);
}
[dir="ltr"] .orchid .orchid-crail__count { letter-spacing: .06em; }

.orchid .orchid-crail__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-block-start: 16px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--o-bd-card);
}

.orchid .orchid-crail__name {
  font: 500 15px/1.3 var(--o-sans);
  font-size: calc(15px * var(--o-crail-scale));
  color: inherit;
}

.orchid .orchid-crail__chev { font-size: 18px; color: var(--o-sage); }

/* ---------------------------------------------------------------------------
   06 — Product carousel.  Design: Storefront isHome 227–268.
   The design's own item basis and gap; the shift is native scroll-snap rather
   than a translated track, so the row is swipeable on touch.
   --------------------------------------------------------------------------- */
.orchid.orchid-carousel {
  padding: calc(clamp(28px, 4.58vw, 66px) * var(--o-carousel-scale)) 0 calc(clamp(29px, 4.86vw, 70px) * var(--o-carousel-scale));
  border-block-end: 1px solid var(--o-bd-divider);
  overflow: hidden;
}

.orchid .orchid-carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(12px, 1.67vw, 24px);
  margin-block-end: 36px;
  padding-inline: clamp(24px, 3.89vw, 56px);
}

.orchid .orchid-carousel__kicker {
  display: block;
  font: 500 11px/1 var(--o-sans);
  font-size: calc(11px * var(--o-carousel-scale));
  text-transform: uppercase;
  color: var(--o-moss);
}
[dir="ltr"] .orchid .orchid-carousel__kicker { letter-spacing: .26em; }

.orchid .orchid-carousel__title {
  margin-block-start: 12px;
  font: 300 clamp(21px, 2.64vw, 38px)/1.1 var(--o-serif);
  font-size: calc(clamp(21px, 2.64vw, 38px) * var(--o-carousel-scale));
  letter-spacing: -.01em;
  color: var(--o-ink);
}

.orchid .orchid-carousel__nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.orchid .orchid-carousel__arrow,
.orchid .orchid-crail__arrow {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--o-bd-cta);
  border-radius: 0;
  background: transparent;
  color: var(--o-ink);
  cursor: pointer;
  transition: background .22s ease, color .22s ease;
}
.orchid .orchid-carousel__arrow:hover,
.orchid .orchid-crail__arrow:hover { background: var(--o-ink); color: var(--o-cream); }
.orchid .orchid-carousel__arrow .o-i,
.orchid .orchid-crail__arrow .o-i { font-size: 22px; color: inherit; }

.orchid .orchid-carousel__viewport { padding-inline: clamp(24px, 3.89vw, 56px); }

.orchid .orchid-carousel__track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.orchid .orchid-carousel__track::-webkit-scrollbar { display: none; }

/* FOUR cards across. Ahmed, 2026-08-14, after seeing 2-up on a 1920px screen.

   Not the design's basis: the design file writes
   `max(46%, calc((100% - 66px) / 4))`, and `max()` can never pick that quarter
   — a quarter is 25% minus change, always less than 46% — so it collapsed to a
   flat 46% at every width. Cards came out ~830px wide, and at aspect-ratio 4/5
   that is a ~1030px-tall product card. The mock hides it because its preview
   frame is narrow enough that 2-up looks intended.

   66px is the three 22px gaps between the four cards. A phone keeps the two
   the design draws — four across a 412px screen is an 85px card, which is not
   a product card. No expression can switch on viewport width without a query,
   so this uses the theme's ONE sanctioned breakpoint, the same 760px boundary
   the header structure swaps on. */
.orchid .orchid-carousel__item {
  flex: 0 0 calc((100% - 66px) / 4);
  scroll-snap-align: start;
  min-width: 0;
}

@media (max-width: 759.98px) {
  /* two across, one 22px gap */
  .orchid .orchid-carousel__item { flex: 0 0 calc((100% - 22px) / 2); }
}

/* ---------------------------------------------------------------------------
   07 — Tabbed product grid.  Design: Storefront isHome 349–381.
   Centred head, pill chips, Pattern A at N=260. `auto-fill`, not the design's
   `auto-fit`: the item count comes from data, and auto-fit collapses the
   tracks it cannot fill and hands their width to the survivors — a category
   holding two products would draw two enormous cards (pitfall 25).
   --------------------------------------------------------------------------- */
.orchid.orchid-tabs {
  padding: calc(clamp(29px, 4.86vw, 70px) * var(--o-tabs-scale)) clamp(24px, 3.89vw, 56px);
  border-block-end: 1px solid var(--o-bd-divider);
}

.orchid .orchid-tabs__head {
  text-align: center;
  margin-block-end: 30px;
}

.orchid .orchid-tabs__kicker {
  display: block;
  font: 500 11px/1 var(--o-sans);
  font-size: calc(11px * var(--o-tabs-scale));
  text-transform: uppercase;
  color: var(--o-moss);
}
[dir="ltr"] .orchid .orchid-tabs__kicker { letter-spacing: .26em; }

.orchid .orchid-tabs__title {
  margin-block-start: 12px;
  font: 300 clamp(21px, 2.64vw, 38px)/1.1 var(--o-serif);
  font-size: calc(clamp(21px, 2.64vw, 38px) * var(--o-tabs-scale));
  letter-spacing: -.02em;
  color: var(--o-ink);
}

.orchid .orchid-tabs__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-block-end: 38px;
}

/* The design writes `transition:all .25s ease` on the chip; enumerated here,
   because `all` also animates layout properties and is off the motion table. */
.orchid .orchid-tabs__chip {
  padding: 9px 20px;
  border: 1px solid var(--o-bd-input);
  border-radius: 999px;
  background: transparent;
  color: var(--o-ink-2);
  font: 500 13px/1 var(--o-sans);
  font-size: calc(13px * var(--o-tabs-scale));
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.orchid .orchid-tabs__chip:hover { border-color: var(--o-ink); }

.orchid .orchid-tabs__chip.is-active {
  background: var(--o-ink);
  border-color: var(--o-ink);
  color: var(--o-cream);
}

.orchid .orchid-tabs__panel { display: none; }

.orchid .orchid-tabs__panel.is-active {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 260px), 1fr));
  gap: 22px;
}

/* ---------------------------------------------------------------------------
   08 — Dual promo banners.  Design: Storefront isHome 270–282.
   Pattern B with a 1px gap over an ink-tinted wrapper, so the seam between the
   panes is a hairline and neither pane carries a border of its own.
   `auto-fit` is right here: the row count is the tenant's own short list and
   stretching to fill IS the intent, same call as the trust strip.
   --------------------------------------------------------------------------- */
.orchid.orchid-promo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1px;
  background: var(--o-bd-divider);
  border-block-end: 1px solid var(--o-bd-divider);
}

.orchid .orchid-promo__item {
  position: relative;
  height: calc(clamp(260px, 29.17vw, 420px) * var(--o-promo-scale));
  overflow: hidden;
  background: var(--o-cream-3);
}

.orchid .orchid-promo__media {
  position: absolute;
  inset: 0;
}
.orchid .orchid-promo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s ease;
}
.orchid .orchid-promo__item:hover .orchid-promo__media img { transform: scale(1.06); }

.orchid .orchid-promo__scrim {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(to top, rgba(19, 22, 16, .66), rgba(19, 22, 16, .05));
}

.orchid .orchid-promo__copy {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: clamp(16px, 2.64vw, 38px) clamp(17px, 2.78vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.orchid .orchid-promo__kicker {
  font: 500 10px/1 var(--o-sans);
  font-size: calc(10px * var(--o-promo-scale));
  text-transform: uppercase;
  color: var(--o-sage-light);
}
[dir="ltr"] .orchid .orchid-promo__kicker { letter-spacing: .24em; }

.orchid .orchid-promo__title {
  font: 300 clamp(18px, 2.22vw, 32px)/1.2 var(--o-serif);
  font-size: calc(clamp(18px, 2.22vw, 32px) * var(--o-promo-scale));
  max-width: 18ch;
  color: var(--o-promo-text);
}

.orchid .orchid-promo__cta {
  margin-block-start: 6px;
  padding: 12px clamp(12px, 1.67vw, 24px);
  background: var(--o-cream);
  color: var(--o-ink);
  font: 600 13px/1 var(--o-sans);
  font-size: calc(13px * var(--o-promo-scale));
  transition: background .25s ease, color .25s ease;
}
.orchid .orchid-promo__cta:hover { background: var(--o-sage); color: var(--o-ink); }

/* ---------------------------------------------------------------------------
   09 — Editorial product block.  Design: Storefront isHome 284–306.
   Pattern B on cream-2: a tall image with the discount badge beside a
   vertically centred copy pane.
   --------------------------------------------------------------------------- */
.orchid.orchid-edit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  background: var(--o-cream-2);
  border-block-end: 1px solid var(--o-bd-divider);
}

.orchid .orchid-edit__media {
  position: relative;
  height: calc(clamp(335px, 37.50vw, 540px) * var(--o-edit-scale));
  overflow: hidden;
  background: var(--o-cream-3);
}
.orchid .orchid-edit__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s ease;
}
.orchid .orchid-edit__media:hover img { transform: scale(1.05); }

.orchid .orchid-edit__badge {
  position: absolute;
  inset-block-start: 26px;
  inset-inline-start: 26px;
  padding: 8px 14px;
  background: var(--o-terracotta);
  color: var(--o-cream);
  font: 600 11px/1 var(--o-sans);
  text-transform: uppercase;
}
[dir="ltr"] .orchid .orchid-edit__badge { letter-spacing: .14em; }

.orchid .orchid-edit__copy {
  padding: calc(clamp(34px, 5.56vw, 80px) * var(--o-edit-scale)) clamp(24px, 3.89vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.orchid .orchid-edit__kicker {
  font: 500 11px/1 var(--o-sans);
  font-size: calc(11px * var(--o-edit-scale));
  text-transform: uppercase;
  color: var(--o-moss);
}
[dir="ltr"] .orchid .orchid-edit__kicker { letter-spacing: .26em; }

.orchid .orchid-edit__title {
  font: 300 clamp(25px, 3.19vw, 46px)/1.1 var(--o-serif);
  font-size: calc(clamp(25px, 3.19vw, 46px) * var(--o-edit-scale));
  letter-spacing: -.02em;
  max-width: 16ch;
  color: var(--o-ink);
}

.orchid .orchid-edit__body {
  max-width: 42ch;
  font: 400 15px/1.85 var(--o-sans);
  font-size: calc(15px * var(--o-edit-scale));
  color: var(--o-ink-3);
}

.orchid .orchid-edit__list {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.orchid .orchid-edit__li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.orchid .orchid-edit__dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--o-moss);
}

.orchid .orchid-edit__li-text {
  font: 400 14px/1.6 var(--o-sans);
  font-size: calc(14px * var(--o-edit-scale));
  color: var(--o-ink-2);
}

.orchid .orchid-edit__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-block-start: 12px;
}

.orchid .orchid-edit__price {
  font: 500 clamp(17px, 2.08vw, 30px)/1 var(--o-serif);
  font-size: calc(clamp(17px, 2.08vw, 30px) * var(--o-edit-scale));
  color: var(--o-ink);
}

.orchid .orchid-edit__cta {
  padding: 15px clamp(13px, 2.08vw, 30px);
  background: var(--o-ink);
  color: var(--o-cream);
  font: 600 14px/1 var(--o-sans);
  font-size: calc(14px * var(--o-edit-scale));
  transition: background .25s ease, color .25s ease;
}
.orchid .orchid-edit__cta:hover { background: var(--o-moss); color: var(--o-cream); }

/* ---------------------------------------------------------------------------
   10 — Scent family tiles.  Design: Storefront isHome 308–328.
   Pattern A at N=260, short tiles under a heavy scrim. `auto-fit` again:
   hand-authored rows, fixed count, stretching intended.
   --------------------------------------------------------------------------- */
.orchid.orchid-scent {
  padding: calc(clamp(29px, 4.86vw, 70px) * var(--o-scent-scale)) clamp(24px, 3.89vw, 56px);
  border-block-end: 1px solid var(--o-bd-divider);
}

.orchid .orchid-scent__head { margin-block-end: 34px; }

.orchid .orchid-scent__kicker {
  display: block;
  font: 500 11px/1 var(--o-sans);
  font-size: calc(11px * var(--o-scent-scale));
  text-transform: uppercase;
  color: var(--o-moss);
}
[dir="ltr"] .orchid .orchid-scent__kicker { letter-spacing: .26em; }

.orchid .orchid-scent__title {
  margin-block-start: 12px;
  font: 300 clamp(21px, 2.64vw, 38px)/1.1 var(--o-serif);
  font-size: calc(clamp(21px, 2.64vw, 38px) * var(--o-scent-scale));
  letter-spacing: -.02em;
  color: var(--o-ink);
}

.orchid .orchid-scent__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(46%, 260px), 1fr));
  gap: 18px;
}

.orchid .orchid-scent__tile {
  position: relative;
  display: block;
  height: calc(clamp(174px, 19.44vw, 280px) * var(--o-scent-scale));
  overflow: hidden;
  background: var(--o-cream-3);
  color: var(--o-cream);
}

.orchid .orchid-scent__media {
  position: absolute;
  inset: 0;
  display: block;
}
.orchid .orchid-scent__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}
.orchid .orchid-scent__tile:hover .orchid-scent__media img { transform: scale(1.08); }

.orchid .orchid-scent__scrim {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(to top, rgba(19, 22, 16, .8), rgba(19, 22, 16, .05));
}

.orchid .orchid-scent__copy {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: clamp(12px, 1.67vw, 24px) clamp(12px, 1.67vw, 24px) clamp(12px, 1.81vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.orchid .orchid-scent__name {
  font: 500 19px/1.25 var(--o-sans);
  font-size: calc(19px * var(--o-scent-scale));
  color: var(--o-cream);
}

.orchid .orchid-scent__sub {
  font: 400 12px/1.4 var(--o-sans);
  font-size: calc(12px * var(--o-scent-scale));
  color: rgba(251, 249, 243, .72);
}

.orchid .orchid-scent__count {
  margin-block-start: 4px;
  font: 400 11px/1 var(--o-serif);
  font-size: calc(11px * var(--o-scent-scale));
  color: var(--o-sage-light);
}

/* ---------------------------------------------------------------------------
   11 — Countdown deal.  Design: Storefront isHome 330–347.
   A flex band on ink: copy column, four bordered cells, sage CTA. It wraps on
   its own below ~700px, so no media query.
   --------------------------------------------------------------------------- */
.orchid.orchid-deal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(17px, 2.78vw, 40px);
  padding: calc(clamp(22px, 3.61vw, 52px) * var(--o-deal-scale)) clamp(24px, 3.89vw, 56px);
  background: var(--o-ink);
  color: var(--o-deal-text);
}

.orchid .orchid-deal__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.orchid .orchid-deal__kicker {
  font: 500 11px/1 var(--o-sans);
  font-size: calc(11px * var(--o-deal-scale));
  text-transform: uppercase;
  color: var(--o-sage);
}
[dir="ltr"] .orchid .orchid-deal__kicker { letter-spacing: .26em; }

.orchid .orchid-deal__title {
  margin: 0;
  max-width: 24ch;
  font: 300 clamp(20px, 2.50vw, 36px)/1.16 var(--o-serif);
  font-size: calc(clamp(20px, 2.50vw, 36px) * var(--o-deal-scale));
  letter-spacing: -.02em;
  color: var(--o-cream);
}

.orchid .orchid-deal__body {
  margin: 0;
  max-width: 48ch;
  font: 400 14px/1.7 var(--o-sans);
  font-size: calc(14px * var(--o-deal-scale));
  color: rgba(var(--o-on-ink-rgb), .7);
}

.orchid .orchid-deal__side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  flex: 1 1 280px;
  min-width: 0;
}

.orchid .orchid-deal__clock {
  display: flex;
  gap: 8px;
  flex: 1 1 100%;
  min-width: 0;
}

.orchid .orchid-deal__cell {
  flex: 1 1 0;
  min-width: 60px;
  padding: 16px 8px;
  text-align: center;
  border: 1px solid var(--o-bd-on-ink);
}

.orchid .orchid-deal__num {
  display: block;
  font: 500 clamp(14px, 1.81vw, 26px)/1 var(--o-serif);
  font-size: calc(clamp(14px, 1.81vw, 26px) * var(--o-deal-scale));
  color: var(--o-cream);
}

.orchid .orchid-deal__unit {
  display: block;
  margin-block-start: 7px;
  font: 400 11px/1 var(--o-sans);
  font-size: calc(11px * var(--o-deal-scale));
  color: rgba(var(--o-on-ink-rgb), .6);
}
[dir="ltr"] .orchid .orchid-deal__unit { letter-spacing: .1em; }

.orchid .orchid-deal__cta {
  flex: 1 1 auto;
  text-align: center;
  padding: 16px clamp(13px, 2.08vw, 30px);
  background: var(--o-sage);
  color: var(--o-ink);
  font: 600 14px/1 var(--o-sans);
  font-size: calc(14px * var(--o-deal-scale));
  white-space: nowrap;
  transition: background .25s ease, color .25s ease;
}
.orchid .orchid-deal__cta:hover {
  background: var(--o-cream);
  color: var(--o-ink);
}

/* ---------------------------------------------------------------------------
   12 — Gift builder steps.  Design: Storefront isHome 390–414.
   Centred heading, Pattern A N=320 (auto-fit: the rows are hand-authored),
   16:10 media over a serif step number, one centred CTA below.
   --------------------------------------------------------------------------- */
.orchid.orchid-gift {
  padding: calc(clamp(29px, 4.86vw, 70px) * var(--o-gift-scale)) clamp(24px, 3.89vw, 56px);
  border-block-end: 1px solid var(--o-bd-divider);
  color: var(--o-ink);
}

.orchid .orchid-gift__head {
  text-align: center;
  margin-block-end: 38px;
}

.orchid .orchid-gift__kicker {
  display: block;
  font: 500 11px/1 var(--o-sans);
  font-size: calc(11px * var(--o-gift-scale));
  text-transform: uppercase;
  color: var(--o-moss);
}
[dir="ltr"] .orchid .orchid-gift__kicker { letter-spacing: .26em; }

.orchid .orchid-gift__title {
  margin: 12px 0 0;
  font: 300 clamp(21px, 2.64vw, 38px)/1.1 var(--o-serif);
  font-size: calc(clamp(21px, 2.64vw, 38px) * var(--o-gift-scale));
  letter-spacing: -.02em;
  color: var(--o-ink);
}

.orchid .orchid-gift__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(46%, 320px), 1fr));
  gap: 20px;
}

.orchid .orchid-gift__step {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--o-bd-card);
  background: var(--o-cream);
  transition: border-color .3s ease;
}
.orchid .orchid-gift__step:hover { border-color: var(--o-moss); }

.orchid .orchid-gift__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--o-cream-3);
}
.orchid .orchid-gift__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}
.orchid .orchid-gift__step:hover .orchid-gift__media img { transform: scale(1.06); }

.orchid .orchid-gift__copy {
  padding: clamp(12px, 1.81vw, 26px) clamp(12px, 1.94vw, 28px) clamp(13px, 2.08vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.orchid .orchid-gift__n {
  font: 500 12px/1 var(--o-serif);
  font-size: calc(12px * var(--o-gift-scale));
  color: var(--o-sage);
}
[dir="ltr"] .orchid .orchid-gift__n { letter-spacing: .2em; }

.orchid .orchid-gift__step-title {
  font: 500 19px/1.3 var(--o-sans);
  font-size: calc(19px * var(--o-gift-scale));
  color: var(--o-ink);
}

.orchid .orchid-gift__step-body {
  font: 400 14px/1.75 var(--o-sans);
  font-size: calc(14px * var(--o-gift-scale));
  color: var(--o-muted);
}

.orchid .orchid-gift__foot {
  display: flex;
  justify-content: center;
  margin-block-start: 34px;
}

.orchid .orchid-gift__cta {
  padding: 15px clamp(14px, 2.36vw, 34px);
  background: var(--o-moss);
  color: var(--o-cream);
  font: 600 14px/1 var(--o-sans);
  font-size: calc(14px * var(--o-gift-scale));
  transition: background .25s ease;
}
.orchid .orchid-gift__cta:hover {
  background: var(--o-moss-dark);
  color: var(--o-cream);
}

/* ---------------------------------------------------------------------------
   13 — Customer reviews.  Design: Storefront isHome 417–443.
   A STATIC Pattern A grid on cream-2 — the design draws no track and no
   arrows, whatever the addon's name says. `auto-fill`, not `auto-fit`: the
   rows are tenant data and two reviews must not balloon to fill a row.
   Block is `orchid-voices`; `orchid-review` is the Phase 2 PDP review list.
   --------------------------------------------------------------------------- */
.orchid.orchid-voices {
  padding: calc(clamp(29px, 4.86vw, 70px) * var(--o-voices-scale)) clamp(24px, 3.89vw, 56px);
  background: var(--o-cream-2);
  border-block-end: 1px solid var(--o-bd-divider);
  color: var(--o-ink);
}

.orchid .orchid-voices__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(12px, 1.67vw, 24px);
  margin-block-end: 34px;
}

.orchid .orchid-voices__kicker {
  display: block;
  font: 500 11px/1 var(--o-sans);
  font-size: calc(11px * var(--o-voices-scale));
  text-transform: uppercase;
  color: var(--o-moss);
}
[dir="ltr"] .orchid .orchid-voices__kicker { letter-spacing: .26em; }

.orchid .orchid-voices__title {
  margin: 12px 0 0;
  font: 300 clamp(21px, 2.64vw, 38px)/1.1 var(--o-serif);
  font-size: calc(clamp(21px, 2.64vw, 38px) * var(--o-voices-scale));
  letter-spacing: -.02em;
  color: var(--o-ink);
}

.orchid .orchid-voices__score {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.orchid .orchid-voices__score-num {
  font: 500 clamp(15px, 1.94vw, 28px)/1 var(--o-serif);
  font-size: calc(clamp(15px, 1.94vw, 28px) * var(--o-voices-scale));
  color: var(--o-ink);
}

.orchid .orchid-voices__score-meta {
  font: 400 13px/1.5 var(--o-sans);
  font-size: calc(13px * var(--o-voices-scale));
  color: var(--o-muted-2);
}

.orchid .orchid-voices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 320px), 1fr));
  gap: 20px;
}

.orchid .orchid-voices__card {
  padding: clamp(13px, 2.08vw, 30px) clamp(13px, 2.08vw, 30px) clamp(12px, 1.81vw, 26px);
  border: 1px solid var(--o-bd-card);
  background: var(--o-cream);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.orchid .orchid-voices__stars {
  font: 400 13px/1 var(--o-sans);
  font-size: calc(13px * var(--o-voices-scale));
  color: var(--o-terracotta);
}
[dir="ltr"] .orchid .orchid-voices__stars { letter-spacing: .2em; }

.orchid .orchid-voices__body {
  margin: 0;
  font: 400 15px/1.9 var(--o-sans);
  font-size: calc(15px * var(--o-voices-scale));
  color: var(--o-ink-2);
}

.orchid .orchid-voices__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-start: auto;
  padding-block-start: 8px;
}

.orchid .orchid-voices__avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--o-moss-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 14px/1 var(--o-sans);
  color: var(--o-moss);
}

.orchid .orchid-voices__ident {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.orchid .orchid-voices__name {
  font: 500 14px/1 var(--o-sans);
  font-size: calc(14px * var(--o-voices-scale));
  color: var(--o-ink);
}

.orchid .orchid-voices__city {
  font: 400 12px/1 var(--o-sans);
  font-size: calc(12px * var(--o-voices-scale));
  color: var(--o-muted-2);
}

/* ---------------------------------------------------------------------------
   14 — Brand marquee.  Design: Storefront isHome 445–454.
   CategoryRail's mechanism exactly: the list twice on width:max-content, the
   shared keyframes from style.css, hover pause.
   --------------------------------------------------------------------------- */
.orchid.orchid-marks {
  padding-block: calc(clamp(14px, 2.36vw, 34px) * var(--o-marks-scale));
  border-block-end: 1px solid var(--o-bd-divider);
  overflow: hidden;
}

.orchid .orchid-marks__track {
  display: flex;
  width: max-content;
  animation: orchid-marquee var(--o-marks-secs) linear infinite;
}
[dir="rtl"] .orchid .orchid-marks__track { animation-name: orchid-marquee-rtl; }
.orchid .orchid-marks:hover .orchid-marks__track { animation-play-state: paused; }

.orchid .orchid-marks__item {
  flex: none;
  padding-inline-end: 64px;
  white-space: nowrap;
  font: 400 22px/1 var(--o-serif);
  font-size: calc(22px * var(--o-marks-scale));
  color: var(--o-marks-text);
  transition: color .25s ease;
}
.orchid a.orchid-marks__item:hover { color: var(--o-ink); }
[dir="ltr"] .orchid .orchid-marks__item { letter-spacing: .14em; }

/* ---------------------------------------------------------------------------
   15 — Journal cards.  Design: Storefront isHome 456–475.
   Heading row with a "view all" link, then Pattern A at N=320 — auto-FILL, not
   auto-fit: the row is filled from the blog table, and a shop with one post
   must get one card-sized card rather than one card stretched across the band.
   The block is `orchid-notes`; `orchid-journal` is Phase 4's blog index.
   --------------------------------------------------------------------------- */
.orchid.orchid-notes {
  padding-block: calc(clamp(29px, 4.86vw, 70px) * var(--o-notes-scale));
  padding-inline: var(--o-sec-pi);
  border-block-end: 1px solid var(--o-bd-divider);
}

.orchid .orchid-notes__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--o-gap-tight);
  margin-block-end: 32px;
}

.orchid .orchid-notes__heading {
  min-width: 0;
}

.orchid .orchid-notes__kicker {
  display: block;
  font: 500 11px/1 var(--o-sans);
  font-size: calc(11px * var(--o-notes-scale));
  text-transform: uppercase;
  color: var(--o-moss);
}
[dir="ltr"] .orchid .orchid-notes__kicker { letter-spacing: .26em; }

.orchid .orchid-notes__title {
  margin: 12px 0 0;
  font: 300 clamp(21px, 2.64vw, 38px)/1.1 var(--o-serif);
  font-size: calc(clamp(21px, 2.64vw, 38px) * var(--o-notes-scale));
  letter-spacing: -.02em;
  color: var(--o-ink);
}

.orchid .orchid-notes__all {
  flex: none;
  padding-block-end: 4px;
  border-block-end: 1px solid rgba(62, 83, 52, .4);
  font: 500 13px/1 var(--o-sans);
  font-size: calc(13px * var(--o-notes-scale));
  color: var(--o-moss);
  transition: color .25s ease, border-color .25s ease;
}
.orchid .orchid-notes__all:hover {
  color: var(--o-ink);
  border-block-end-color: var(--o-ink);
}

.orchid .orchid-notes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 320px), 1fr));
  gap: var(--o-gap-tight);
}

.orchid .orchid-notes__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  color: var(--o-ink);
}

.orchid .orchid-notes__thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--o-cream-3);
}

.orchid .orchid-notes__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}
.orchid .orchid-notes__card:hover .orchid-notes__thumb img { transform: scale(1.06); }

.orchid .orchid-notes__meta {
  font: 500 10px/1 var(--o-sans);
  font-size: calc(10px * var(--o-notes-scale));
  text-transform: uppercase;
  color: var(--o-muted-2);
}
[dir="ltr"] .orchid .orchid-notes__meta { letter-spacing: .2em; }

.orchid .orchid-notes__card-title {
  font: 400 21px/1.4 var(--o-serif);
  font-size: calc(21px * var(--o-notes-scale));
  max-width: 24ch;
  color: inherit;
  transition: color .25s ease;
}
.orchid .orchid-notes__card:hover .orchid-notes__card-title { color: var(--o-moss); }

/* ---------------------------------------------------------------------------
   16 — Instagram grid.  Design: Storefront isHome 477–491.
   Pattern A at N=180 with NO gap, and auto-FIT here rather than auto-fill —
   the skill names this strip as one of the two grids where a short row is
   meant to stretch edge to edge.

   The overlay card is centred with `inset-inline: 0; margin-inline: auto`
   instead of the design's `left:50%` + translate(-50%): a physical left with a
   negative translate lands the card off-centre once the page flips to RTL,
   which is the default here.
   --------------------------------------------------------------------------- */
.orchid.orchid-insta {
  position: relative;
}

.orchid .orchid-insta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(46%, 180px), 1fr));
}

.orchid .orchid-insta__tile {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--o-cream-3);
}

.orchid .orchid-insta__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}
.orchid .orchid-insta__tile:hover img { transform: scale(1.1); }

.orchid .orchid-insta__card {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  transform: translateY(-50%);
  width: max-content;
  max-width: min(88%, 300px);
  margin-inline: auto;
  padding: clamp(12px, 1.81vw, 26px) clamp(14px, 2.36vw, 34px);
  background: var(--o-insta-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.orchid .orchid-insta__kicker {
  font: 500 10px/1 var(--o-sans);
  font-size: calc(10px * var(--o-insta-scale));
  text-transform: uppercase;
  color: var(--o-muted-2);
}
[dir="ltr"] .orchid .orchid-insta__kicker { letter-spacing: .24em; }

.orchid .orchid-insta__title {
  font: 300 clamp(14px, 1.81vw, 26px)/1.2 var(--o-serif);
  font-size: calc(clamp(14px, 1.81vw, 26px) * var(--o-insta-scale));
  letter-spacing: -.02em;
  color: var(--o-ink);
}

.orchid .orchid-insta__handle {
  font: 500 14px/1 var(--o-sans);
  font-size: calc(14px * var(--o-insta-scale));
  color: var(--o-moss);
  transition: color .25s ease;
}
.orchid .orchid-insta__handle:hover { color: var(--o-ink); }

/* ---------------------------------------------------------------------------
   17 — Newsletter band.  Design: Storefront isHome 492–505.
   Pattern B (minmax(330px, 1fr)) on the moss tint. The field is a real input,
   not the design's placeholder span, so it carries the theme's own focus ring
   rather than none at all.
   --------------------------------------------------------------------------- */
.orchid.orchid-nl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: center;
  gap: clamp(20px, 3.33vw, 48px);
  padding-block: calc(clamp(27px, 4.44vw, 64px) * var(--o-nl-scale));
  padding-inline: var(--o-sec-pi);
  background: var(--o-moss-bg);
}

.orchid .orchid-nl__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.orchid .orchid-nl__kicker {
  font: 500 11px/1 var(--o-sans);
  font-size: calc(11px * var(--o-nl-scale));
  text-transform: uppercase;
  color: var(--o-moss);
}
[dir="ltr"] .orchid .orchid-nl__kicker { letter-spacing: .26em; }

.orchid .orchid-nl__title {
  margin: 0;
  font: 300 clamp(21px, 2.64vw, 38px)/1.14 var(--o-serif);
  font-size: calc(clamp(21px, 2.64vw, 38px) * var(--o-nl-scale));
  letter-spacing: -.02em;
  max-width: 20ch;
  color: var(--o-ink);
}

.orchid .orchid-nl__body {
  margin: 0;
  font: 400 15px/1.8 var(--o-sans);
  font-size: calc(15px * var(--o-nl-scale));
  max-width: 44ch;
  color: var(--o-moss-dark);
}

.orchid .orchid-nl__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.orchid .orchid-nl__field {
  display: flex;
  background: var(--o-cream);
  border: 1px solid var(--o-bd-input);
}

.orchid .orchid-nl__input {
  flex: 1;
  min-width: 0;
  padding: 18px 20px;
  border: 0;
  background: transparent;
  font: 400 14px/1 var(--o-sans);
  font-size: calc(14px * var(--o-nl-scale));
  color: var(--o-ink);
}
.orchid .orchid-nl__input::placeholder { color: var(--o-muted-2); }
.orchid .orchid-nl__input:focus-visible {
  outline: 2px solid var(--o-moss);
  outline-offset: -2px;
}

.orchid .orchid-nl__btn {
  flex: none;
  padding-block: 18px;
  padding-inline: clamp(13px, 2.08vw, 30px);
  border: 0;
  background: var(--o-ink);
  color: var(--o-cream);
  font: 600 14px/1 var(--o-sans);
  font-size: calc(14px * var(--o-nl-scale));
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s ease;
}
.orchid .orchid-nl__btn:hover { background: var(--o-moss); }
.orchid .orchid-nl__btn:disabled { opacity: .6; cursor: default; }

.orchid .orchid-nl__msg {
  font: 400 12px/1.5 var(--o-sans);
  font-size: calc(12px * var(--o-nl-scale));
  color: var(--o-moss-dark);
}
.orchid .orchid-nl__msg[data-nl-kind="error"] { color: var(--o-terracotta); }
.orchid .orchid-nl__msg:empty { display: none; }

.orchid .orchid-nl__note {
  font: 400 12px/1.5 var(--o-sans);
  font-size: calc(12px * var(--o-nl-scale));
  color: var(--o-muted);
}

/* ---------------------------------------------------------------------------
   18 — Story banner.  Design: Storefront isHome 383–393.
   The storefront's height wins over the widget card's — a palette card is a
   shrunk preview, not a second spec. The scrim alpha is a tenant control,
   because whether white type is readable depends on the photo they upload.
   --------------------------------------------------------------------------- */
.orchid.orchid-sbanner {
  position: relative;
  height: calc(clamp(273px, 30.56vw, 440px) * var(--o-sbanner-scale));
  overflow: hidden;
  background: var(--o-cream-3);
}

.orchid .orchid-sbanner__media {
  position: absolute;
  inset: 0;
}

.orchid .orchid-sbanner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: orchid-kenburns 22s ease-out alternate infinite;
}

.orchid .orchid-sbanner__scrim {
  position: absolute;
  inset: 0;
  background: rgba(var(--o-ink-rgb), var(--o-sbanner-scrim));
}

.orchid .orchid-sbanner__copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-inline: clamp(34px, 5.56vw, 80px);
  text-align: center;
}

.orchid .orchid-sbanner__kicker {
  font: 500 11px/1 var(--o-sans);
  font-size: calc(11px * var(--o-sbanner-scale));
  text-transform: uppercase;
  color: var(--o-sage-light);
}
[dir="ltr"] .orchid .orchid-sbanner__kicker { letter-spacing: .28em; }

.orchid .orchid-sbanner__title {
  margin: 0;
  font: 300 clamp(25px, 3.19vw, 46px)/1.16 var(--o-serif);
  font-size: calc(clamp(25px, 3.19vw, 46px) * var(--o-sbanner-scale));
  letter-spacing: -.02em;
  max-width: 26ch;
  color: var(--o-sbanner-text);
}

.orchid .orchid-sbanner__body {
  margin: 0;
  font: 400 15px/1.8 var(--o-sans);
  font-size: calc(15px * var(--o-sbanner-scale));
  max-width: 54ch;
  /* The design's rgba(251,249,243,.78) as token + opacity, so a tenant who
     recolours this band's text recolours the paragraph with it instead of
     leaving one literal cream line behind. Same call as the hero body. */
  color: var(--o-sbanner-text);
  opacity: .78;
}

.orchid .orchid-sbanner__cta {
  margin-block-start: 8px;
  padding-block: 15px;
  padding-inline: clamp(13px, 2.22vw, 32px);
  border: 1px solid rgba(251, 249, 243, .6);
  font: 500 14px/1 var(--o-sans);
  font-size: calc(14px * var(--o-sbanner-scale));
  color: var(--o-sbanner-text);
  transition: background .25s ease, color .25s ease;
}
.orchid .orchid-sbanner__cta:hover {
  background: var(--o-cream);
  color: var(--o-ink);
}

/* ---------------------------------------------------------------------------
   Legacy per-widget padding, neutralised on phones.

   Every PageBuilder addon renders the platform's `default_fields()`, which
   gives the tenant a Padding Top / Padding Bottom box in the widget form. The
   value comes out as `data-padding-top="119"` on the band, and
   `assets/common/css/helpers.css` carries a hardcoded rule per integer:

       [data-padding-top="119"] { padding-top: 119px !important; }

   Fixed pixels, `!important`, and no media query — so a desktop value lands
   unchanged on a 375px screen. Live homepage measured 2026-08-15: the rail,
   the carousel and the tabbed grid between them injected 628px of padding
   where the design's ramp asks for ~180px. Roughly 450px of dead scroll.

   These bands own their vertical rhythm; the ramp below IS the design's
   (`clamp(28px,4.58vw,66px)` / `clamp(32px,5.28vw,76px)`), written out rather
   than reverted to because only an `!important` can beat an `!important` and
   `revert` rolls back to the UA origin, not to the rule underneath. Inside
   this query the vw arm never exceeds ~35/40px, so fluidity survives.

   Two guards on each selector, both load-bearing:
     - `""`  — a band whose tenant never set the field still carries the empty
               attribute. Hero, trust, promo, edit and sbanner are all
               deliberately padding-free; matching them would add 28px.
     - `"0"` — helpers.css has no rule for 0, so the attribute already no-ops.
               Crail sits at `data-padding-bottom="0"` and keeps its own 25px;
               matching it would push that to 32px for nothing.

   Not scoped to the homepage: the About and Contact bands emit the same
   attribute and have the same problem, and this layer loads site-wide.

   ponytail: the fixed value still applies from 760px up, where 250px of
   padding on a tablet is merely ugly rather than broken. Widen this query if
   that turns out to matter — there is no third state to add. */
@media (max-width: 759.98px) {
  .orchid[data-padding-top]:not([data-padding-top=""]):not([data-padding-top="0"]) {
    padding-block-start: clamp(28px, 4.58vw, 66px) !important;
  }
  .orchid[data-padding-bottom]:not([data-padding-bottom=""]):not([data-padding-bottom="0"]) {
    padding-block-end: clamp(32px, 5.28vw, 76px) !important;
  }
}