/* Rubans app - v2 feel layer. Loaded after theme.css and overrides.css, so it wins.
   Why it exists: the SSENSE pass (9e0a830) made the app square, flat and silent - near-zero radii, no shadows,
   text-only tabs - which reads as a web page, not an app. This layer sets the app feel:
   rounded soft surfaces, a tab bar with icons and an active pill, every tap answered by motion,
   media that moves above the fold, and real filters on every shelf. Colours stay on the theme tokens. */

:root {
  --radius: 12px;              /* buttons, media, cards */
  --r-sheet: 22px;
  --tint: rgba(74, 13, 18, .08);   /* --primary at 8%: active pills, pressed rows */
  --lift: 0 1px 2px rgba(31, 31, 34, .05), 0 6px 18px rgba(31, 31, 34, .06);
  --press: transform .14s var(--ease), background-color .2s var(--ease), opacity .2s var(--ease);
  --hdr: 56px;
}

/* ---------- Every tap answers ---------- */
a, button { -webkit-tap-highlight-color: transparent; }
.card, .chip, .story, .rs-card, .look-card, .carou-slide, .fbtn, .btn, .more, .card-add, .tiles .card, nav.tabs a, .icon-btn { transition: var(--press); }
.card:active, .rs-card:active, .look-card:active, .tiles .card:active { transform: scale(.97); }
.chip:active, .fbtn:active, .btn:active, .more:active, .card-add:active, .icon-btn:active, .story:active { transform: scale(.94); }

/* Screens arrive, they do not blink in: each section rises in turn. */
@media (prefers-reduced-motion: no-preference) {
  main#view > section { animation: v2-rise .42s var(--ease) both; }
  main#view > section:nth-child(2) { animation-delay: .04s; }
  main#view > section:nth-child(3) { animation-delay: .08s; }
  main#view > section:nth-child(4) { animation-delay: .12s; }
  main#view > section:nth-child(n+5) { animation-delay: .16s; }
}
@keyframes v2-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Header: small wordmark, search and bag; wishlist and account live in the tab bar ---------- */
header { min-height: var(--hdr); padding: 6px 8px 6px 16px; box-shadow: 0 1px 0 var(--line); }
.logo { font-size: 24px; color: var(--primary); min-height: 44px; }
header .header-cluster a[href="#/wishlist"], header .header-cluster a[href="#/account"] { display: none; }

/* ---------- Tab bar: icon + label, an active pill, a press ---------- */
nav.tabs { background: var(--surface); box-shadow: 0 -1px 0 var(--line); padding-top: 4px; }
nav.tabs a { gap: 2px; padding: 4px 0 8px; min-height: 60px; font-size: 12px; font-weight: 500; color: var(--muted); justify-content: center; }
nav.tabs .tab-ic { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 15px; transition: background-color .25s var(--ease), transform .25s var(--ease); }
nav.tabs a svg { width: 24px; height: 24px; stroke-width: 1.7; transform: none; }
nav.tabs a.on { color: var(--primary); font-weight: 600; }
nav.tabs a.on .tab-ic { background: var(--tint); }
nav.tabs a.on svg { stroke-width: 2; }
nav.tabs a[data-to="/"].on svg path, nav.tabs a[data-to="/wishlist"].on svg path { fill: currentColor; }
nav.tabs a:active .tab-ic { transform: scale(.88); }
body:has(.reels-feed-container) nav.tabs a.on .tab-ic { background: rgba(255, 255, 255, .16); }

/* ---------- Stories ---------- */
.stories { display: flex; gap: 14px; overflow-x: auto; padding: 14px 16px 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: 0 0 auto; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; scroll-snap-align: start; text-decoration: none; }
.story .ring { width: 72px; height: 72px; border-radius: 50%; padding: 2.5px; background: conic-gradient(from 210deg, var(--primary), var(--gold), var(--primary)); }
.story.seen .ring { background: var(--line); }
.story .disc { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 2.5px solid var(--bg); background: var(--soft); }
.story .disc img { width: 100%; height: 100%; object-fit: cover; }
.story-l { font-size: 12px; line-height: 1.2; color: var(--ink); text-align: center; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Hero carousel: inset, rounded, slow push-in, story-style progress ---------- */
.carou { margin: 4px 16px 8px; border-radius: 18px; overflow: hidden; box-shadow: var(--lift); position: relative; }
.carou-slide img { transform-origin: 60% 40%; }
@media (prefers-reduced-motion: no-preference) { .carou-slide img { animation: v2-push 9s linear infinite alternate; } }
@keyframes v2-push { from { transform: scale(1); } to { transform: scale(1.07); } }
.carou-dots { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; gap: 4px; }
.carou-dots i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .45); overflow: hidden; position: relative; width: auto; margin: 0; }
.carou-dots i.on::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: v2-fill var(--dur, 5s) linear both; }
@keyframes v2-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Section heads ---------- */
.sec-h { padding: 22px 16px 10px; align-items: baseline; }
.sec-h h3 { font: 600 20px/1.2 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.sec-h a { font-size: 13px; font-weight: 600; color: var(--primary); }

/* ---------- Reel shelf: plays as it scrolls in ---------- */
.rs { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rs::-webkit-scrollbar { display: none; }
.rs-card { flex: 0 0 136px; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; position: relative; background: var(--ink); scroll-snap-align: start; color: #fff; text-decoration: none; box-shadow: var(--lift); }
.rs-card.sk { background: var(--soft); animation: v2-shimmer 1.2s ease-in-out infinite; }
.rs-card img, .rs-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-card video { opacity: 0; transition: opacity .35s var(--ease); }
.rs-card.live video { opacity: 1; }
.rs-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.rs-play { position: absolute; top: 8px; right: 8px; z-index: 1; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .35); }
.rs-play svg { width: 11px; height: 11px; fill: #fff; stroke: none; }
.rs-card.live .rs-play { opacity: 0; }
.rs-meta { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.rs-t { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs-p { font-size: 13px; font-weight: 600; }
.rs-p s { font-weight: 400; opacity: .75; }
.rs-p b { color: #ffd9a0; font-weight: 600; }

/* ---------- Cards and tiles: rounded, soft ---------- */
.card .ph, .tiles .card .ph, .look-card, .rail .card .ph { border-radius: var(--radius); overflow: hidden; }
.card .t { font-size: 13px; line-height: 1.3; }
.card .price { font-size: 14px; font-weight: 600; }
.card-add { border-radius: 999px; }
.tiles .card .ph { aspect-ratio: 1; }
.tiles .card .t { text-align: center; font-weight: 500; }
.chip { border-radius: 999px; }
.chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn, .more { border-radius: 999px; }

/* Skeleton cards that shimmer, instead of the words "Loading items". */
.card.sk .ph { aspect-ratio: 4/5; background: var(--soft); border-radius: var(--radius); }
.card.sk i { display: block; height: 10px; margin: 10px 4px 0; border-radius: 5px; background: var(--soft); }
.card.sk i.s { width: 45%; }
.card.sk .ph, .card.sk i { animation: v2-shimmer 1.2s ease-in-out infinite; }
@keyframes v2-shimmer { 50% { opacity: .55; } }
.loading { font-size: 0; height: 220px; margin: 0 16px; border-radius: var(--radius); background: var(--soft); animation: v2-shimmer 1.2s ease-in-out infinite; }

/* ---------- For you ---------- */
.fy-tabs { position: sticky; top: var(--hdr); z-index: 5; background: var(--bg); padding: 8px 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.fy-tabs::-webkit-scrollbar { display: none; }
.fy-end { height: 1px; }

/* ---------- Filters: sticky bar, quick style chips, bottom sheet ---------- */
.fbar { position: sticky; top: var(--hdr); z-index: 6; display: flex; gap: 8px; align-items: center; padding: 8px 16px; background: var(--bg); box-shadow: 0 1px 0 var(--line); overflow-x: auto; scrollbar-width: none; }
.fbar::-webkit-scrollbar { display: none; }
.fbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 13px/1 var(--sans); }
.fbtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.fcount:not(:empty) { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 12px; display: grid; place-items: center; }
.fquick { display: flex; gap: 8px; }
.fquick .chip { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
.fgrid { padding-top: 12px; }
.fsheet { position: fixed; inset: 0; z-index: 40; }
.fsheet-bg { position: absolute; inset: 0; background: rgba(20, 10, 12, .45); opacity: 0; transition: opacity .25s var(--ease); }
.fsheet-card { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; transform: translateY(100%); transition: transform .3s var(--ease); padding-bottom: env(safe-area-inset-bottom, 0px); max-width: 640px; margin: 0 auto; }
.fsheet.up .fsheet-bg { opacity: 1; }
.fsheet.up .fsheet-card { transform: none; }
.fsheet-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 6px 20px; font-size: 17px; }
.fsheet-body { overflow-y: auto; padding: 4px 20px 16px; }
.fgroup { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fgroup-h { font-size: 14px; font-weight: 600; margin: 0 0 10px; color: var(--ink); }
.chips.wrap { flex-wrap: wrap; padding: 0; overflow: visible; }
.chips.wrap .chip small { font-size: 12px; opacity: .7; margin-left: 2px; }
.fopts { display: flex; flex-direction: column; }
.fopt { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font: 400 15px/1 var(--sans); color: var(--ink); text-align: left; border-bottom: 1px solid var(--line); }
.fopt.on { color: var(--primary); font-weight: 600; }
.fopt svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.fsheet-foot { display: flex; gap: 10px; padding: 12px 20px; box-shadow: 0 -1px 0 var(--line); }
.fsheet-foot .btn { flex: 1; min-height: 48px; }

/* Tablet and desktop: content keeps its phone measure, but the shelves breathe. */
@media (min-width: 768px) {
  .rs-card { flex-basis: 168px; }
  .story, .story .ring { width: 84px; } .story .ring { height: 84px; }
}

/* ---------- Search pill in the header ---------- */
.logo { flex: 0 0 auto; font-size: 22px; }

/* ---------- Product cards: image first, one price line, a round add button ----------
   overrides.css styles cards with !important throughout, so this block has to as well. */
.card { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; padding: 0 0 6px !important; }
.card > a { display: block; text-decoration: none; }
.card .ph { aspect-ratio: 4 / 5 !important; border-radius: var(--radius) !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }
.card .ph img, .card .ph video { background: var(--soft); border-radius: var(--radius); }
.card .cat, .card .card-benefit { display: none !important; }
.card .t { font: 400 13px/1.35 var(--sans) !important; color: var(--ink) !important; margin: 8px 44px 2px 2px !important; min-height: 35px !important; }
.card .price { margin: 0 44px 0 2px !important; gap: 2px 6px !important; font-size: 15px; font-weight: 600; }
.card .price s { font-size: 12px !important; color: var(--muted) !important; }
.card .price .off { background: none !important; padding: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: var(--sale) !important; }
.card .card-add { position: absolute !important; right: 2px; bottom: 8px; margin: 0 !important; width: 38px !important; min-height: 38px !important; height: 38px; padding: 0 !important; border-radius: 50% !important; background: var(--primary) !important; color: #fff !important; display: grid !important; place-items: center; box-shadow: var(--lift); }
.card .card-add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.card .card-add svg { width: 18px !important; height: 18px !important; }
.card .heart { top: 8px !important; right: 8px !important; width: 34px !important; height: 34px !important; }
.card .heart svg { width: 18px !important; height: 18px !important; }
.grid { gap: 18px 10px !important; padding: 4px 16px 16px !important; }
.rail { gap: 10px; padding-left: 16px; padding-right: 16px; }
.rail .card { flex: 0 0 150px !important; }

/* ---------- Category tiles: three across, image and a short label ---------- */
.grid.tiles { grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.tiles .card { text-align: center; }
.tiles .card .ph { aspect-ratio: 1 !important; border-radius: 16px !important; }
.tiles .card .t { margin: 8px 0 0 !important; font: 500 13px/1.2 var(--sans) !important; -webkit-line-clamp: 1 !important; min-height: 0 !important; text-align: center; }

/* ---------- Section links and the sale countdown: quieter ---------- */
.sec-h a { text-transform: none; letter-spacing: 0; }
.countdown { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 16px; padding: 12px 16px; border-radius: 14px; }
.countdown .eyebrow { font-size: 13px; margin: 0; text-align: left; }
.countdown .cd { gap: 10px; margin: 0; }
.countdown .cd span { font-size: 12px; min-width: 0; }
.countdown .cd b { font-size: 20px; line-height: 1.1; }

/* Filter sheet chips need an edge on white. */
.fsheet .chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.fsheet .chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Reel shelf: the discount sits on the poster, the price line stays one line. */
.rs-off { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 2px 7px; border-radius: 6px; background: var(--sale); color: #fff; font-size: 12px; font-weight: 600; }

/* The product page's buy bar sits on top of the taller tab bar (66px), never over it. */
.buybar { bottom: calc(66px + var(--safe-b, 0px)) !important; }

/* ---------- Reels quick filters: one row of pills over the video, usable mid-swipe ---------- */
.reel-filters { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 46px); left: 0; right: 0; z-index: 14; display: flex; gap: 8px; overflow-x: auto; padding: 0 12px; scrollbar-width: none; pointer-events: auto; }
.reel-filters::-webkit-scrollbar { display: none; }
.reel-pill { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(0, 0, 0, .42); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: var(--press); }
.reel-pill.on { background: #fff; color: var(--ink); border-color: #fff; font-weight: 600; }
.reel-pill:active { transform: scale(.94); }

/* =================== Velvet: one visual world for the whole home ===================
   CaratLane puts every product on plum velvet, GIVA on berry; that single backdrop is why their tiles read as one
   collection. Ours is Rubans maroon velvet with a gold hairline. Discounts stop shouting red. */
:root { --velvet: radial-gradient(120% 90% at 50% 20%, #6b1a22 0%, #4a0d12 55%, #2a0609 100%); --hair: rgba(176, 138, 62, .55); }

/* Editorial heads: centred, a quiet italic line over a serif title */
.ed-h { text-align: center; padding: 34px 24px 16px; }
.ed-eye { font: italic 400 14px/1.4 var(--serif); color: var(--gold-text); margin: 0 0 4px; }
.ed-h h3, .ed-h h2 { font: 500 24px/1.3 var(--serif); color: var(--ink); margin: 0; letter-spacing: -.01em; }
.ed-sub { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.ed-h::after { content: ""; display: block; width: 36px; height: 1px; margin: 12px auto 0; background: var(--gold); }

/* Banner first, full width with a soft edge */
.carou { margin: 0 0 4px; border-radius: 0 0 22px 22px; box-shadow: none; }

/* Category circles on velvet, right under the banner */
.stories.circles { gap: 12px; padding: 18px 16px 6px; }
.stories.circles .story { width: 68px; }
.stories.circles .ring { width: 68px; height: 68px; padding: 2px; background: var(--hair); }
.stories.circles .story:first-child .ring { background: conic-gradient(from 210deg, var(--primary), var(--gold), var(--primary)); }
.stories.circles .disc { border: 2px solid var(--bg); background: var(--velvet); }
.stories.circles .story-l { font-size: 12px; color: var(--ink); }

/* Quick navigation pills: quiet outline, maroon when pressed */
section > .chips { padding: 8px 16px 4px; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
section > .chips::-webkit-scrollbar { display: none; }
section > .chips .chip { flex: 0 0 auto; min-height: 36px; padding: 0 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; }

/* Muhurat: one slim line, not a card */
.muhurat-strip { margin: 12px 16px 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--hair) !important; background: var(--surface); box-shadow: none; }

/* Editorial tiles */
.et { padding: 0 16px; }
.et-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.et-scroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.et-scroll::-webkit-scrollbar { display: none; }
.et-card { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--velvet); color: #fff; text-decoration: none; box-shadow: var(--lift); }
.et-grid .et-card { aspect-ratio: 3 / 4; }
.et-scroll .et-card { flex: 0 0 64%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
.et-img { position: absolute; inset: 0; }
.et-img.skel { background: var(--velvet); }
.et-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (prefers-reduced-motion: no-preference) { .et-card img { transition: transform .6s var(--ease); } .et-card:active img { transform: scale(1.04); } }
.et-card::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(42, 6, 9, .88)); }
.et-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.et-cap b { font: 500 18px/1.3 var(--serif); }
.et-cap small { font-size: 12px; line-height: 1.35; opacity: .88; }

/* Shop by category: velvet tiles, label over the photo */
.grid.tiles { gap: 10px !important; }
.tiles .card { position: relative; }
.tiles .card .ph { background: var(--velvet) !important; aspect-ratio: 1 !important; }
.tiles .card .ph img { opacity: .92; }
.tiles .card .t { margin: 8px 0 0 !important; font: 500 13px/1.3 var(--sans) !important; }

/* Cards: the discount is a quiet gold note, not a red alarm */
.card .price .off { color: var(--gold-text) !important; }
.rs-off { background: var(--surface); color: var(--primary); }
/* The add button is a quiet outline circle; the photo does the selling. */
.card .card-add { width: 34px !important; min-height: 34px !important; height: 34px; background: var(--surface) !important; color: var(--primary) !important; border: 1px solid var(--line) !important; box-shadow: none; }
.card .card-add svg { width: 16px !important; height: 16px !important; stroke: var(--primary) !important; }

/* Surprise box: the theme line, and pieces that flip in one after another */
.mb-theme { font: italic 400 15px/1.4 var(--serif); color: var(--gold-text); margin: 0 0 4px; }
.mb-slot { background: var(--velvet) !important; color: #fff; border-radius: 14px; }
.mb-slot .mb-cat { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .mb-in { animation: v2-flip .55s var(--ease) both; transform-origin: 50% 50%; }
  @keyframes v2-flip { from { opacity: 0; transform: perspective(600px) rotateY(80deg) scale(.96); } to { opacity: 1; transform: none; } }
}

/* =================== Feel =================== */
/* Glint: a soft band of light crosses gold as the phone tilts (--gx from the gyroscope, or scroll). */
@media (prefers-reduced-motion: no-preference) {
  .card .ph, .et-card, .gallery .gitem:not(.gvideo), .tiles .card .ph { position: relative; }
  .card .ph::after, .et-card .et-img::after, .gallery .gitem:not(.gvideo)::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: soft-light;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 244, 214, .55) 50%, transparent 65%) no-repeat;
    background-size: 260% 100%; background-position: var(--gx, 50%) 0; transition: background-position .25s linear;
  }
}
/* A product photo grows into the product page */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
::view-transition-group(hero) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
/* The piece that flies to the bag */
.fly { position: fixed; z-index: 60; object-fit: cover; border-radius: 12px; pointer-events: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
.pg-s:first-child img, .pg-s:first-child video { view-transition-name: hero; }
body.vt-pick .pg-s:first-child img, body.vt-pick .pg-s:first-child video { view-transition-name: none; }

/* Two-pane filter sheet */
.f2 { display: grid; grid-template-columns: 112px 1fr; min-height: 46vh; margin: 0 -20px; }
.f2-nav { display: flex; flex-direction: column; background: var(--bg); border-right: 1px solid var(--line); overflow-y: auto; }
.f2-tab { position: relative; text-align: left; padding: 14px 12px; min-height: 52px; font: 400 14px/1.3 var(--sans); color: var(--muted); border-left: 3px solid transparent; }
.f2-tab.on { background: var(--surface); color: var(--ink); font-weight: 600; border-left-color: var(--primary); }
.f2-tab b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 12px; }
.f2-panes { padding: 14px 16px; overflow-y: auto; }

/* "In your bag": sits above the tab bar, one tap to the bag */
.bag-toast { position: fixed; left: 12px; right: 12px; bottom: calc(78px + var(--safe-b, 0px)); z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: var(--lift); max-width: 560px; margin: 0 auto; }
@media (prefers-reduced-motion: no-preference) { .bag-toast { animation: v2-rise .32s var(--ease) both; } .bag-toast.out { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; } }
.bag-toast img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.bag-toast span { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.bag-toast b { font-size: 14px; }
.bag-toast small { font-size: 12px; color: rgba(255, 255, 255, .78); }
.bag-toast a { padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
body:has(.buybar) .bag-toast { bottom: calc(150px + var(--safe-b, 0px)); }

/* =================== Product page v2 =================== */
/* Gallery: 3:4 like the photos themselves, so nothing is cut; actions sit on the photo */
.pg { position: relative; background: var(--soft); }
.pg-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pg-track::-webkit-scrollbar { display: none; }
.pg-s { flex: 0 0 100%; margin: 0; aspect-ratio: 3 / 4; scroll-snap-align: start; background: var(--soft); }
.pg-s img, .pg-s video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-count { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--ink); font-size: 12px; }
.pg-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.pg-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .6); transition: width .25s var(--ease), background .25s; }
.pg-dots i.on { width: 18px; background: #fff; }
.pg-acts { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 10px; }
.pg-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; color: var(--ink); box-shadow: var(--lift); }
.pg-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.pg-btn.on { color: var(--sale); } .pg-btn.on svg { fill: currentColor; }
.pg-try { position: absolute; left: 14px; bottom: 34px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(31, 31, 34, .78); color: #fff; font-size: 13px; font-weight: 600; }
.pg-try svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 1.8; }

/* Info: a calm column with one strong price */
.pi { padding: 18px 16px 6px; }
.pi-eye { font-size: 12px; color: var(--gold-text); margin: 0 0 4px; }
.pi-t { font: 500 22px/1.3 var(--serif); color: var(--ink); margin: 0; letter-spacing: -.01em; }
.pi-rate { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 32px; color: var(--ink); text-decoration: none; font-size: 13px; }
.pi-rate .stars, .rv2 .stars { color: var(--gold); display: inline-flex; gap: 1px; }
.pi-rate span { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.pi-price { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.pi-price b { font-size: 26px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pi-price s { font-size: 15px; color: var(--muted); }
.pi-off { font-size: 14px; font-weight: 600; color: var(--gold-text); }
.pi-tax { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.pi-offer { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--gold); background: var(--surface); font-size: 14px; color: var(--ink); }
.pi-offer svg { flex: 0 0 18px; width: 18px; height: 18px; stroke: var(--gold-text); fill: none; stroke-width: 2; }
.pi-prom { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; padding: 0; }
.pi-prom li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; background: var(--surface); text-align: center; font-size: 12px; line-height: 1.3; color: var(--ink); }
.pi-prom svg { width: 20px; height: 20px; stroke: var(--primary); fill: none; stroke-width: 1.7; }

/* Details as accordions */
.pd2-wrap { margin: 14px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.pd2 { border-radius: 16px; background: var(--surface); padding: 8px 0; }
.pd2 summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 16px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.pd2 summary::-webkit-details-marker { display: none; }
.pd2 summary::after { content: ""; width: 9px; height: 9px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); transition: transform .25s var(--ease); margin-right: 4px; }
.pd2[open] summary::after { transform: rotate(-135deg); }
.pd2-b { padding: 0 16px 16px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.pd2-b p { margin: 0 0 10px; }
.pd2-spec { margin: 4px 0 0; display: grid; gap: 0; }
.pd2-spec div { display: grid; grid-template-columns: 38% 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.pd2-spec dt { color: var(--muted); font-size: 13px; }
.pd2-spec dd { margin: 0; font-size: 14px; }

/* Reviews: summary, then cards you swipe */
.rv2 { margin-top: 6px; }
.rv2-sum { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 16px 14px; }
.rv2-sum > b { font: 500 40px/1 var(--serif); color: var(--ink); }
.rv2-sum div { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.rv2-row { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rv2-row::-webkit-scrollbar { display: none; }
.rv2-card { flex: 0 0 78%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: var(--surface); }
.rv2-card b { font-size: 14px; color: var(--ink); }
.rv2-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rv2-by { font-size: 12px; color: var(--muted); }

/* Buy bar: two clear buttons */
.buybar { gap: 10px !important; padding: 10px 16px !important; background: var(--surface) !important; box-shadow: 0 -1px 0 var(--line) !important; border-top: 0 !important; }
.buybar .btn { flex: 1 1 0 !important; min-height: 50px !important; border-radius: 14px !important; font-size: 15px !important; font-weight: 600 !important; }
.buybar .btn:not(.primary) { background: var(--surface) !important; color: var(--primary) !important; border: 1.5px solid var(--primary) !important; }

/* The product page's helper cards in the house style */
.pincode-card { margin: 14px 16px 0 !important; border-radius: 16px !important; border: 0 !important; background: var(--surface) !important; box-shadow: none !important; }
.pincode-card .pin-input-row button { background: var(--primary) !important; color: #fff !important; border-radius: 12px !important; min-height: 44px; }
.pincode-card .pin-header svg { stroke: var(--primary); }
.hint-card { margin: 14px 16px 0 !important; border-radius: 16px !important; border: 0 !important; box-shadow: none !important; background: var(--surface) !important; }
.hint-card .hint-icon { background: var(--tint) !important; color: var(--primary) !important; }
.hint-card button, .hint-card .btn { background: var(--primary) !important; color: #fff !important; border-radius: 999px !important; }
/* Surprise box: four small sealed boxes in a row, not four tall walls */
.mb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
.mb-slot { min-width: 0 !important; }
.mb-slot { aspect-ratio: 1 !important; min-height: 0 !important; height: auto !important; border: 0 !important; outline: 1px solid var(--hair); outline-offset: -4px; display: grid; place-items: center; }
.mb-slot .mb-cat { font-size: 12px; text-align: center; padding: 0 4px; }
.mb-grid:has(.mb-item) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

/* =================== Rhythm (FEEL.md): calm, not crowded =================== */
/* 3. One tone: the top strip joins the ivory world instead of a black bar */
.announce { background: var(--soft) !important; color: var(--primary) !important; font-size: 12px !important; letter-spacing: .02em !important; font-weight: 500; padding-top: calc(7px + env(safe-area-inset-top, 0px)) !important; padding-bottom: 7px !important; }

/* 2. A space scale: sections on Home and Shop breathe (40 px between ideas) */
body[data-screen="home"] main#view > section + section,
body[data-screen="shop"] main#view > section + section { margin-top: 40px; }
/* ...except the browse block, which is one idea: circles and pills belong together, and the muhurat line rides with them */
body[data-screen="home"] main#view > section:nth-child(2),
body[data-screen="home"] main#view > section:nth-child(3),
body[data-screen="home"] main#view > section:nth-child(4) { margin-top: 0; }
body[data-screen="home"] main#view > section:first-child + section { margin-top: 8px; }
.ed-h { padding: 0 24px 20px; }
.ed-more { display: flex; justify-content: center; align-items: center; min-height: 44px; margin: 14px auto 0; width: max-content; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); color: var(--primary); font-size: 14px; font-weight: 500; text-decoration: none; }

/* 1. One idea per screen height: the muhurat card becomes one quiet line under the browse block */
.muhurat-strip { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 16px 0 !important; padding: 10px 14px !important; border: 0 !important; border-radius: 12px !important; background: var(--surface) !important; }
.muhurat-strip .muhurat-offer { display: none; }
.muhurat-strip .muhurat-left { font-size: 14px; line-height: 1.35; }
.muhurat-strip .muhurat-left :is(p, span, small, div) { font-size: 12px; }
.muhurat-strip .muhurat-timer { font-size: 14px; white-space: nowrap; }

/* 4. Photo first: a product card is the photo, the name and the price. Discounts and quick-add live on the product page. */
.card .price .off, .card .card-add { display: none !important; }
.card .t { margin: 10px 2px 2px !important; font-size: 14px !important; -webkit-line-clamp: 1 !important; min-height: 0 !important; }
.card .price { margin: 0 2px !important; font-size: 14px !important; }
.card .heart { background: rgba(255, 255, 255, .7) !important; box-shadow: none !important; }
.card .rating, .card [class*="rating"] { transform: scale(.92); transform-origin: left bottom; }
.grid { gap: 28px 12px !important; }
.rail .card { flex: 0 0 62% !important; }
.rail .card .ph { aspect-ratio: 4 / 5 !important; }

/* 5. Three text sizes: 24 serif heads, 14 body, 12 small. Section labels and colour match follow the editorial head. */
.om-header { text-align: center; padding: 0 24px 16px !important; }
.om-header .om-tag { display: block; font: italic 400 14px/1.4 var(--serif) !important; color: var(--gold-text) !important; text-transform: none !important; letter-spacing: 0 !important; background: none !important; padding: 0 !important; }
.om-header h3 { font: 500 24px/1.3 var(--serif) !important; color: var(--ink) !important; margin: 0 !important; }
.om-header p { font-size: 14px !important; color: var(--muted) !important; }
.om-palette { padding: 0 16px; gap: 10px !important; }
.om-swatch { border-radius: 16px !important; }
.mb-card { margin: 0 16px !important; padding: 24px 16px !important; border: 0 !important; border-radius: 20px !important; background: var(--surface) !important; text-align: center; }
.mb-card .sec-h { justify-content: center; padding: 0 0 6px; }
.mb-card .sec-h h3 { font: 500 24px/1.3 var(--serif); }
.mb-sub { font-size: 14px !important; }
.mb-card .note { font-size: 12px !important; }
.tx-h2 { font: 500 24px/1.3 var(--serif) !important; text-align: center; padding: 0 24px 4px !important; }
body[data-screen="shop"] .fbar { margin-top: 8px; }

/* =================== Audit fixes (tools/audit.mjs) =================== */
/* Two fonts: Playfair Display for heads, Work Sans for everything else (Poppins/Lato were declared but never loaded) */
:root { --font-display: var(--serif); --font-ui: var(--sans); }
body, .card, .card .t, .muhurat-strip, .hint-card, .chip, .btn { font-family: var(--sans) !important; }
.tx-h1 { font: 500 26px/1.25 var(--serif) !important; }
/* Category tiles keep the 3:4 shape the photos are shot in */
.tiles .card .ph { aspect-ratio: 3 / 4 !important; }
/* Square packshots are shown whole on white */
.card .ph img.sq { object-fit: contain !important; background: #fff; }
/* Every tap target at least 40 px */
.card .heart { width: 40px !important; height: 40px !important; top: 6px !important; right: 6px !important; }
#back { min-width: 44px; }
.pi-rate { min-height: 44px; }
section > .chips .chip, .fy-tabs .chip, .fquick .chip { min-height: 40px !important; }
.reel-pill { min-height: 40px; }
.reel-follow { min-height: 40px !important; display: inline-flex !important; align-items: center; }
header { padding-right: 12px !important; }
/* Three text sizes (12 / 14 / 24) plus price (26) and the rating figure (40) */
.card .ph { aspect-ratio: 3 / 4 !important; }
.sec-h h3 { font: 500 24px/1.3 var(--serif) !important; }
.pi-t { font-size: 24px !important; }
.pi-price s, .pd2 summary, .buybar .btn, .btn, main p, .pincode-card h2, .hint-card h2, .pincode-card .pin-btn, .hint-card .hint-btn, .hint-card button, .pin-input-row button { font-size: 14px !important; }
.pd2-spec dt, .hint-card p, .pincode-card p, .pin-status { font-size: 12px !important; }
.pd2-spec dd, .pd2-b, .rv2-card p, .rv2-card b { font-size: 14px !important; }
.icon-btn .badge { right: 2px !important; }
header .header-cluster .icon-btn .badge { right: 2px !important; left: auto !important; top: 4px !important; }
body[data-screen="bag"] main * { font-size: 14px; }
body[data-screen="bag"] main :is(small, .note, s, .more, .b1g1-txt, .rm) { font-size: 12px !important; }
body[data-screen="bag"] main :is(h1, h2, .tx-h1, .sum b, .bag-total) { font-size: 24px !important; }
/* With a back button the header is full: the search pill gives way, nothing pushes past the edge */
header .header-cluster { min-width: 0; }

/* Product page, first screen: the photo, then the name and price before the buy bar.
   The offer already sits under the price, so the sitewide strip steps aside here; the details rise over the
   photo's lower edge as a sheet, and the type and rating share one line. */
body[data-screen="product"] .announce { display: none !important; }
body[data-screen="product"] .pi { position: relative; margin-top: -20px; padding-top: 16px; border-radius: 20px 20px 0 0; background: var(--bg); }
.pi-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.pi-top .pi-eye { margin: 0; }
.pi-top .pi-rate { margin: 0; }
.pi-t { font-size: 22px !important; line-height: 1.25; }
.pi-rate, .pi-rate *, .pg-try { font-size: 12px !important; }
.pi-price { margin-top: 8px; }
body[data-screen="product"] .pg-dots { bottom: 34px; }
body[data-screen="product"] .pg-try { bottom: 34px; }

/* Collections: the sale is one quiet ivory line with a gold hairline, not a maroon slab (one tone per screen) */
.countdown { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--hair) !important; box-shadow: none !important; padding: 10px 14px !important; margin: 4px 16px 8px !important; }
.countdown .eyebrow { color: var(--ink) !important; font-size: 14px !important; }
.countdown .cd { gap: 8px !important; color: var(--gold-text) !important; }
.countdown .cd span { display: inline-flex !important; flex-direction: row !important; align-items: baseline; text-transform: lowercase !important; letter-spacing: 0 !important; gap: 2px; font-size: 12px !important; opacity: 1 !important; color: var(--muted); }
.countdown .cd b { font: 600 14px/1.2 var(--sans) !important; color: var(--gold-text); }
.countdown .eyebrow { white-space: nowrap; }
.countdown .cd span:nth-child(n+3) { display: none !important; }

/* Home hero: one tall portrait photo (4:5) with the campaign line as live serif text over a soft scrim */
.carou-slide.hero { position: relative; color: #fff; text-decoration: none; }
.carou-slide.hero img { aspect-ratio: 4 / 5; object-position: 50% 25%; }
.hero-t { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: start; gap: 6px; padding: 72px 20px 34px; background: linear-gradient(to top, rgba(26, 10, 14, .72), rgba(26, 10, 14, 0)); }
.hero-eye { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #f3e3c3; }
.hero-t h2 { margin: 0; font: 500 40px/1.1 var(--serif); color: #fff; text-wrap: balance; }
.hero-cta { margin-top: 8px; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .8); font-size: 14px; font-weight: 600; }

/* Collections: Sort and Filter as one floating pill in the thumb zone, above the tab bar */
.fdock { position: fixed; left: 50%; bottom: calc(66px + 14px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; align-items: center; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hair); box-shadow: 0 8px 24px rgba(40, 16, 20, .14); transform: translate(-50%, 140%); opacity: 0; pointer-events: none; transition: transform .35s var(--ease), opacity .25s; }
.fdock.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.fdock .fbtn { border: 0; background: transparent; min-height: 44px; padding: 0 18px; font-size: 14px; font-weight: 600; }
.fdock i { width: 1px; height: 22px; background: var(--line); }
.fdock .fcount:not(:empty) { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 12px; }
.fbar:has(.fquick:empty) { display: none; }
.fgrid { padding-bottom: 72px; }
@media (prefers-reduced-motion: reduce) { .fdock { transition: none; } }

/* Gifts by budget: three velvet tiles, the amount in the serif */
.pb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 16px; }
.pb-card { display: grid; place-items: center; align-content: center; gap: 2px; aspect-ratio: 1 / 1; border-radius: 16px; background: var(--velvet); color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px var(--hair); }
.pb-card small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #f3e3c3; }
.pb-card b { font: 500 24px/1.1 var(--serif); color: #fff; }
/* The photo sits on velvet-dark, so the hero line reads against it even before the image loads */
.carou { background: none !important; }
.carou-slide.hero { background-color: #1a0a0e; }
/* Hero: the on-model photo leads with its line bottom-left over the scrim (FEEL.md, Text on images). Where the
   piece has its own reel, the reel fades in over the same photo after a beat; the caption never moves. */
.carou-slide.hero video.hero-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.carou-slide.hero.moving video.hero-v { opacity: 1; }
.carou-slide.hero .hero-t { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .carou-slide.hero video.hero-v { display: none; } }

/* Header: menu (or back) | the Rubans ribbon wordmark, centred | search and bag. The wordmark is the brand's own
   artwork used as a mask, so it takes the velvet colour of the theme. */
header { display: grid !important; grid-template-columns: 96px 1fr 96px; align-items: center; padding: 6px 12px 6px 4px !important; }
header #menu, header #back { grid-area: 1 / 1; justify-self: start; }
header .logo { grid-area: 1 / 2; justify-self: center; display: flex; align-items: center; min-height: 44px; padding: 0 8px; flex: none !important; }
.logo-mark { display: block; width: 92px; height: 33px; background: var(--primary); -webkit-mask: url(icons/rubans-wordmark.png) center / contain no-repeat; mask: url(icons/rubans-wordmark.png) center / contain no-repeat; }
header .header-cluster { grid-area: 1 / 3; display: flex; justify-content: flex-end; gap: 0; margin: 0 !important; }
header .icon-btn svg { stroke-width: 1.6; }

/* Menu drawer: slides in from the left on ivory, a velvet band with the wordmark on top */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer-bg { position: absolute; inset: 0; background: rgba(26, 10, 14, .42); opacity: 0; transition: opacity .28s var(--ease); }
.drawer-card { position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw, 360px); overflow-y: auto; background: var(--bg); transform: translateX(-102%); transition: transform .32s var(--ease); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.drawer.up .drawer-bg { opacity: 1; }
.drawer.up .drawer-card { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top, 0px)) 8px 18px 20px; background: var(--velvet); }
.drawer-top .logo-mark { background: #f3e3c3; width: 104px; height: 37px; }
.drawer-top .icon-btn svg { stroke: #f3e3c3; }
.drawer-sec { padding: 22px 20px 6px; border-bottom: 1px solid var(--line); }
.drawer-sec:last-child { border-bottom: 0; }
.drawer-h { margin: 0 0 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.drawer-a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 0; color: var(--ink); text-decoration: none; font-size: 14px; }
.drawer-a small { font-size: 12px; color: var(--muted); }
.drawer-a.lg { font: 500 24px/1.2 var(--serif); padding: 8px 0; }
@media (prefers-reduced-motion: reduce) { .drawer-bg, .drawer-card { transition: none; } }

/* Text on images (docs/design/FEEL.md, "Text on images"): bottom-left over the scrim, one title line and one
   subline, the same sizes on every tile. tools/validate.mjs holds the copy to budget; ellipsis is only the
   safety net, and tools/audit.mjs reports any caption that wraps or clips. */
.et-cap { left: 14px !important; right: 14px !important; bottom: 14px !important; gap: 2px; }
.et-cap b, .et-cap small, .hero-t h2, .hero-eye { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-cap b { font: 500 20px/1.25 var(--serif) !important; }
.et-cap small { font-size: 13px !important; line-height: 1.35 !important; opacity: .9; }

/* Colour match: never text on a flat colour. A colour disc with its name underneath, on one line. */
.om-palette { gap: 4px !important; }
.om-swatch { width: 84px !important; height: auto !important; display: grid !important; justify-items: center; gap: 8px; padding: 4px 0 !important; overflow: visible !important; background: none !important; box-shadow: none !important; outline: 0 !important; border-radius: 0 !important; text-decoration: none; color: var(--ink) !important; }
.om-swatch::before { content: ""; width: 64px; height: 64px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 3px var(--bg), 0 0 0 4px var(--hair); }
.om-swatch span { position: static !important; padding: 0 !important; background: none !important; color: var(--ink) !important; font-size: 12px !important; font-weight: 500; text-align: center !important; white-space: nowrap; }
.mb-slot { white-space: nowrap; }
.pin-header, .rv2-sum span { font-size: 12px !important; }
/* Occasion page head: title and its one line, tight together, on the page gutter */
.occ-h { padding: 4px 16px 12px; }
.occ-h .tx-h1 { padding: 0 !important; }
.occ-h .note { margin: 4px 0 0; padding: 0; color: var(--muted); }
.pi-prom { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* Keyboard focus is always visible (some older rules removed the outline) */
.pin-input:focus-visible, .om-swatch:focus-visible, .drawer-a:focus-visible, .et-card:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 2px !important; }

/* ---------- Consistency pass (independent visual review, 2026-10-22) ---------- */
/* One palette: no violet or near-black surfaces; discounts are quiet gold, never red. */
:root { --accent-soft: var(--tint); }
.acc-ic, .hint-icon, .wl-ic { background: var(--tint) !important; color: var(--primary) !important; }
.om-tag, .coupon-banner .tag, .coupon-banner b, .coupon-banner strong { color: var(--gold-text) !important; }
.bag-toast, .hint-btn, .rpd-add-btn, .reel-card .rpd-add-btn { background: var(--primary) !important; color: #fff !important; }
.pg-try { background: rgba(92, 15, 23, .82) !important; }
main .chip.on { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.price .off, .card .price .off, .off { color: var(--gold-text) !important; background: none !important; }
.pi-offer { border-style: solid !important; border-color: var(--line) !important; }
/* Two shapes: 14px for buttons, inputs and cards; full pill only for chips. */
.btn, .pin-btn, .hint-btn, .rpd-add-btn, .reel-card .rpd-add-btn, .reel-follow, .more, .pin-input, main input, .fsheet-foot .btn { border-radius: 14px !important; }
.more { font: 600 14px/1 var(--sans) !important; min-height: 48px; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 20px !important; }
input, button, select, textarea { font-family: inherit; }
b, strong { font-weight: 600; }
.tx-h1, .empty h2 { font-size: 24px !important; }
/* One heart on every card: solid ivory disc, velvet icon. */
.card .heart { background: rgba(255, 255, 255, .92) !important; color: var(--primary) !important; backdrop-filter: none !important; box-shadow: var(--lift); }
/* Sort and Filter dock never clips its labels. */
.fdock { width: max-content; white-space: nowrap; }
.fdock .fbtn { flex: 0 0 auto; }
/* Carousels keep the page gutter when snapped. */
.rv2-row, .rs { scroll-padding-inline: 16px; }
/* Reels: the product strip and side actions sit above the tab bar. */
.reel-card .reel-overlay { padding-bottom: calc(66px + 14px + env(safe-area-inset-bottom, 0px)) !important; }
.reel-card .reel-sidebar { bottom: calc(118px + 66px) !important; }
/* Reel shelf: no loud % badges (the price line carries the saving). */
.rs-off { display: none !important; }
/* Bag lines read like cards: sans titles. */
.line .lt { font-family: var(--sans) !important; font-size: 14px !important; font-weight: 500; }
/* Menu: one type style for every entry. */
.drawer-a.lg { font: 500 20px/1.25 var(--serif); }
.drawer-a { font: 500 20px/1.25 var(--serif); }
.drawer-a small { font-family: var(--sans); }
/* Card names: two lines, so a piece is named, not cut to "Demi Fine 18K Gold..." */
.card .t { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; line-height: 1.35 !important; }
/* Category circles carry the full category name on one line (no "Sets" here and "Jewellery sets" elsewhere) */
.stories.circles .story { width: 90px; }
.stories.circles .story-l { max-width: 90px; }
/* Search with no query: what to try, then the categories */
.sr-empty { padding: 8px 16px 24px; display: grid; gap: 10px; }
.sr-empty .drawer-h { margin-top: 14px; }
.sr-cats { display: grid; }
.sr-count { margin: 0 16px 8px !important; padding: 0 !important; }
/* Empty states lead somewhere: a filled button, then bestsellers underneath */
.empty .more { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.empty { padding-block: 32px 16px !important; }

/* ---------- Type scale: 12 meta, 14 body and controls, 20 names and sub-heads (serif), 24 headings;
   price 26 and the review score 40 are the only display sizes. ---------- */
.chip, .reel-pill, .reel-pill.on, .card .t, .card .price, .card .price b, .rpd-title, .rpd-price, .rpd-add-btn, .rs-t, .reel-kicker, main b, #sticky b { font-size: 14px !important; }
main small, .rs-p, .reel-handle, .card .price s, .card-rating { font-size: 12px !important; }
.pi-t, .acc-avatar, main h2:not(.ed-h h2):not(.empty h2):not(.hero-t h2), .hint-card h2, .pincode-card h2, .acc-meta h2 { font-size: 20px !important; }
.pi-price b { font-size: 26px !important; }
.rv2-sum b { font-size: 40px !important; }
.et-cap b, .drawer-a, .drawer-a.lg { font-size: 20px !important; }
.ed-h h3, .ed-h h2, .tx-h1, .tx-h2, .empty h2, .hero-t h2 { font-size: 24px !important; }
.et-cap small { font-size: 12px !important; }
.tiles .card .t, .grid.tiles .t, div.t { font-size: 14px !important; }
.price .off, .line .price .off { font-size: 12px !important; }

/* Card names: two lines on product cards, one on category tiles (an earlier one-line clamp won). */
.card .t { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 2.7em !important; }
.tiles .card .t { -webkit-line-clamp: 1 !important; min-height: 0 !important; }