/** Shopify CDN: Minification failed

Line 439:10 Expected identifier but found whitespace
Line 439:11 Unexpected "\"\""

**/
/* ═══════════════════════════════════════════════════════════════════
   YourDoctor — components (The Agentic Lab®, Part2 2026-09-03, A)
   Every value here is a token from yd-config.css. Logical properties only; RTL is first-class.
   Reuse credits are inline ([REUSE: path]); see MODIFICATIONS.md for the ledger.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. Base ─────────────────────────────────────────────────────── */
html[dir="rtl"] body,
html[dir="rtl"] .h0, html[dir="rtl"] .h1, html[dir="rtl"] .h2, html[dir="rtl"] .h3,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .button,
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select {
  font-family: var(--yd-font-arabic);
  letter-spacing: 0;                     /* Cairo does not want Poppins' tracking */
}
html[dir="rtl"] body { font-size: 1.7rem; }   /* §3.2: Arabic body reads 17px against Latin 16px */
.yd-eyebrow {
  font-size: var(--yd-fs-label); font-weight: 700; line-height: var(--yd-lh-label);
  letter-spacing: var(--yd-track-label); text-transform: uppercase; color: var(--yd-indigo-600);
}
html[dir="rtl"] .yd-eyebrow { letter-spacing: 0; text-transform: none; font-size: var(--yd-fs-small); }
.yd-flip-rtl { transition: transform 0s; }
html[dir="rtl"] .yd-flip-rtl { transform: scaleX(-1); }   /* §11: directional icons flip, others never */
.yd-icon { display: inline-block; vertical-align: middle; flex: none; }

/* ── 1. Focus (§12: never outline:none without a replacement) ─── */
.yd-whatsapp:focus-visible, .yd-back-to-top:focus-visible {
  outline: none; box-shadow: var(--yd-focus-ring);
}

/* ── 2. Scroll reveal [REUSE: RYZE assets/ryze-custom.js .ryze-reveal · BLNCO blnco-custom.js]
      audit r1 #5: the default is VISIBLE; the pre-reveal state exists only once the head script has run (html.yd-reveals) and until the
      observer lets it in, so print, reader mode, a screenshot tool or JS off never ship a blank band. ── */
.yd-reveal { transition: opacity var(--yd-reveal-duration, 440ms) var(--yd-ease-out), transform var(--yd-reveal-duration, 440ms) var(--yd-ease-out); transition-delay: var(--yd-reveal-delay, 0ms); }   /* Part10 smoothness: the delay is set per batch by yd-custom.js (items that enter together stagger 80 apart, an item that enters alone rises at once) and cleared after the rise */
html.yd-reveals .yd-reveal:not(.is-in) { opacity: 0; transform: translateY(var(--yd-reveal-distance)); }
/* THE RESTORE (Part10): held invisible while the reload's spot is being placed (at most 600ms), and the items already in view at the restored spot settle without a rise */
html.yd-restoring body { visibility: hidden; }
.yd-reveal.yd-reveal--instant { transition: none; }   /* Part10 smoothness: no will-change before the rise (81 waiting layers on the help centre, 64 on the home); Safari promotes on the transition itself */
.yd-reveal.is-in { opacity: 1; transform: none; }
/* audit r1 #2: ONE gutter on the page. Dawn's .page-width pads 1.5rem (15px) on the phone; every yd band pads --yd-gutter (16px). */
@media (max-width: 749px) { .page-width { padding-inline: var(--yd-gutter); } }
/* Part10 smoothness: the nth-child stagger retired (every item past the fourth in a long list waited 320 after it entered: the lag Sawy saw on the FAQ); the batch delay lives in yd-custom.js */
@media (prefers-reduced-motion: reduce) {
  .yd-reveal { opacity: 1; transform: none; transition-duration: 0.01ms !important; }
}

/* ── 3. THE TWO FLOATERS (owner 2026-09-05: "kill the glow, clean and minimal, the bright brand blue with a little frost; the
      back-to-top is the same button"). One recipe, two corners: sky-500 at 72% over a 12px frost, one hairline of white, the
      mark in ink (indigo-700 on sky = 5:1), no sheen, no inset light, no lift. The bubble never hides and never retints.
      [REUSE: RYZE .ryze-whatsapp placement + sticky-ATC lift; BLNCO blnco-scroll.js "THE RISE"] ── */
.yd-whatsapp, .yd-back-to-top {
  position: fixed;
  bottom: calc(var(--yd-sp-5) + var(--yd-bubble-lift) + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--yd-indigo-700);
  background: rgba(117, 208, 242, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%;
  box-shadow: var(--yd-shadow-sm);
  cursor: pointer;
  transition: background-color var(--yd-duration-fast) ease, bottom 0.4s cubic-bezier(0.32,0.72,0,1), opacity var(--yd-duration-base) var(--yd-ease-out), transform var(--yd-duration-base) var(--yd-ease-out), translate 420ms cubic-bezier(0.32, 0.72, 0, 1);
  translate: 0 calc(-1 * var(--yd-lane-lift, 0px));   /* THE LANE LIFT (Part10, Sawy 07:52): while a pill is up at the floor the bubbles ride above it on the pill's own curve and come back down with it; yd-custom.js sets --yd-lane-lift on body */
}
.yd-whatsapp { inset-inline-end: var(--yd-sp-5); z-index: 998; }
.yd-back-to-top { inset-inline-start: var(--yd-sp-5); z-index: 997; opacity: 0; transform: translateY(8px); pointer-events: none; }
.yd-back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.yd-whatsapp:hover, .yd-back-to-top:hover { background-color: rgba(117, 208, 242, 0.92); }
.yd-whatsapp:active, .yd-back-to-top:active { background-color: var(--yd-sky-500); }
.yd-whatsapp svg { width: 28px; height: 28px; position: relative; }
.yd-back-to-top svg { width: 22px; height: 22px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .yd-whatsapp, .yd-back-to-top { background: rgba(117, 208, 242, 0.96); } }
/* Part10 smoothness: a fixed frosted disc re-blurs the page under it on every scrolled frame; on touch devices the floaters wear the same sky solid instead (the drawer's law 2: no frost over scrolling content on iOS) */
@media (pointer: coarse) { .yd-whatsapp, .yd-back-to-top { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(117, 208, 242, 0.94); } }

.yd-whatsapp__label {
  position: absolute; inset-inline-end: calc(100% + var(--yd-sp-3)); top: 50%; transform: translateY(-50%);
  white-space: nowrap; background: var(--yd-slate-900); color: var(--yd-white);
  font: 700 var(--yd-fs-small)/1 var(--yd-font); padding: var(--yd-sp-2) var(--yd-sp-3);
  border-radius: var(--yd-radius-badge); box-shadow: var(--yd-shadow-md);
  opacity: 0; pointer-events: none; transition: opacity var(--yd-duration-fast);
}
.yd-whatsapp:hover .yd-whatsapp__label, .yd-whatsapp:focus-visible .yd-whatsapp__label { opacity: 1; }
@media (max-width: 749px) { .yd-whatsapp__label { display: none; } }
/* Mobile facets / menu drawer open → the bubble steps aside (RYZE rule) */
body:has(.mobile-facets details.menu-opening) .yd-whatsapp,
body:has(header-drawer details[open]) .yd-whatsapp { opacity: 0; pointer-events: none; }


/* ═══ 5. Typography + buttons on top of Refresh (design-system-v0 §3, §8) ═══ */
body { line-height: var(--yd-lh-body); }
.h0, .h1, h1, .h2, h2, .h3, h3 { letter-spacing: -0.005em; }
.h0, h1.h0 { font-size: var(--yd-fs-display); line-height: var(--yd-lh-display); letter-spacing: -0.01em; }
.h1, h1 { font-size: var(--yd-fs-h1); line-height: var(--yd-lh-h1); }
.h2, h2 { font-size: var(--yd-fs-h2); line-height: var(--yd-lh-h2); }
.h3, h3 { font-size: var(--yd-fs-h3); line-height: var(--yd-lh-h3); }
.caption, .caption-with-letter-spacing { font-size: var(--yd-fs-small); line-height: var(--yd-lh-small); }
.button, .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded {
  min-height: 48px; font-size: var(--yd-fs-button); font-weight: 700; letter-spacing: 0.01em;
  padding-inline: 28px; box-shadow: var(--yd-shadow-xs); transition: background var(--yd-duration-fast), transform var(--yd-duration-fast) var(--yd-ease-out), box-shadow var(--yd-duration-fast);
}
.button--primary:hover, .button:not(.button--secondary):not(.button--tertiary):hover { --color-button: 47 59 116; }  /* indigo-700 (Dawn stores rgb triplets) */
.button:active { transform: translateY(1px); }
.button--secondary { --color-button-text: 59 74 145; box-shadow: none; }
.button--secondary:hover { background: var(--yd-indigo-50); }
.button:focus-visible, .field__input:focus-visible, .link:focus-visible, .header__icon:focus-visible { outline: none; box-shadow: var(--yd-focus-ring) !important; }
.field__input, .select__select, .customer .field input { min-height: 48px; border-radius: var(--yd-radius-input); }
.field:after, .select:after, .customer .field:after { box-shadow: 0 0 0 1px var(--yd-slate-200); border: none; }
.field:hover.field:after, .field__input:focus ~ .field:after { box-shadow: 0 0 0 2px var(--yd-indigo-400); }

/* ═══ 6. Announcement bar — indigo strip, calm, no separator ═══ */
.announcement-bar-section .utility-bar { border: none; }
.announcement-bar { min-height: 40px; }
.announcement-bar__message { font-size: var(--yd-fs-small); font-weight: 600; letter-spacing: 0.01em; padding: var(--yd-sp-2) var(--yd-sp-4); }
.announcement-bar__link { text-decoration: none; }
.announcement-bar__link:hover .announcement-bar__message { text-decoration: underline; text-underline-offset: 3px; }
.slider-button .icon { color: var(--yd-white); opacity: 0.85; }
.announcement-bar-section .localization-form .localization-form__select { color: var(--yd-white); }
.announcement-bar-section .disclosure__button { color: var(--yd-white); font-weight: 600; }

/* ═══ 7. Header — white, hairline, indigo icons, 44px targets, logo breathing room ═══ */
.header-wrapper--border-bottom { border-bottom: var(--yd-border-hairline); }
.header { padding-block: var(--yd-sp-3); }
.header__icon, .header__icon--menu, .header__icon--summary { width: var(--yd-tap); height: var(--yd-tap); color: var(--yd-indigo-700); }
.header__icon .icon { width: 22px; height: 22px; }
.header__heading-logo-wrapper { max-width: 132px; }
@media (min-width: 990px) { .header__heading-logo-wrapper { max-width: 150px; } .header { padding-block: var(--yd-sp-4); } }
.header__heading-logo { object-fit: contain; }
.cart-count-bubble { background: var(--yd-sky-500); color: var(--yd-slate-900); font-weight: 700; }

/* Menu drawer (stock Refresh markup, restyled) */
.menu-drawer { border-inline-end: var(--yd-border-hairline); }
.menu-drawer .list-social__link { color: var(--yd-indigo-700); }

/* ═══ 8. Trust strip ═══ */

/* ═══ 9. Footer — slate-50, hairline, indigo links, tidy bottom row ═══ */
.footer { border-top: none; }
.footer .field__input { background: var(--yd-white); }
.footer .field__button { color: var(--yd-indigo-600); width: 48px; }
/* Powered by The Agentic Lab — one quiet line [REUSE: RYZE .ryze-footer__powered] */
.yd-footer__powered { display: block; text-align: center; font-size: 11px; color: var(--yd-slate-400); padding: var(--yd-sp-3) 0 0; text-decoration: none; }
.yd-footer__powered:hover { color: var(--yd-indigo-600); }

/* ═══ 10. Legal strip [REUSE: RYZE .ryze-footer__legalbar / __payment-logos / __powered] ═══ */
.yd-legal { padding-block: var(--yd-sp-5) var(--yd-sp-6); text-align: center; }
.yd-legal__bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: var(--yd-sp-5); row-gap: var(--yd-sp-2); }
.yd-legal__copy, .yd-legal__bar a { font-size: var(--yd-fs-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--yd-slate-500); text-decoration: none; }
html[dir="rtl"] .yd-legal__copy, html[dir="rtl"] .yd-legal__bar a { letter-spacing: 0; text-transform: none; font-size: var(--yd-fs-small); }
.yd-legal__copy { color: var(--yd-slate-700); font-weight: 700; }
.yd-legal__bar a:hover { color: var(--yd-indigo-600); text-decoration: underline; text-underline-offset: 3px; }
.yd-legal__payment { display: flex; justify-content: center; align-items: center; gap: var(--yd-sp-2); margin-top: var(--yd-sp-5); flex-wrap: wrap; }
.yd-legal__payment img { height: 26px; width: auto; border-radius: 4px; box-shadow: var(--yd-shadow-xs); background: var(--yd-white); }
.yd-legal__cod { font-size: var(--yd-fs-label); font-weight: 700; color: var(--yd-indigo-700); background: var(--yd-indigo-50); border-radius: var(--yd-radius-badge); padding: 5px 12px; line-height: 1; }
.yd-footer__powered { margin-top: var(--yd-sp-4); letter-spacing: 0.06em; text-transform: uppercase; }
html[dir="rtl"] .yd-footer__powered { letter-spacing: 0; text-transform: none; }

/* Announcement slider: one slide at a time, message may wrap (stock Refresh lets slides sit side by side once the 100vw hack is gone) */
.announcement-bar .slider__slide, .utility-bar .slider__slide { width: 100%; flex: 0 0 100%; }
.announcement-bar__message { white-space: normal; overflow: visible; text-overflow: clip; }

/* Footer accordions on mobile [REUSE: RYZE footer accordion JS] */
@media (max-width: 749px) {
}
.announcement-bar-slider .slider { overflow-x: hidden; scrollbar-width: none; }   /* one announcement at a time, on every width */

/* ═══ 11. Section rhythm + heads (shared by yd-* sections) ═══ */
.yd-reels, .yd-why, .yd-brands { padding-block: var(--yd-section-pad); }
.yd-reels:not(.yd-reels--page) { padding-block: 0 var(--yd-sp-4); }   /* Part10 (Sawy 01:25, 01:54): on the home the shelf's 32 is the whole gap above the reels' eyebrow, and the reels end 16 so the plate's 16 makes 32; the reels page keeps its own head */
.yd-why { padding-block-start: var(--yd-sp-4); }   /* Part10 (Sawy 01:54): the last plate's 16 + 16 = 32 to the why's eyebrow */
.yd-reels__head, .yd-why__head { text-align: center; margin-bottom: var(--yd-sp-7); }
.yd-why__head { margin-bottom: var(--yd-sp-4); }   /* Part10: head → the cards 16 */
.yd-reels__head .yd-eyebrow, .yd-why__head .yd-eyebrow { margin: 0 0 var(--yd-sp-2); }
.yd-reels__head .h2, .yd-why__head .h2 { margin: 0; }
.yd-reels__subtitle { margin: var(--yd-sp-3) auto 0; max-width: 46ch; color: var(--yd-slate-500); font-size: var(--yd-fs-small); }

/* ═══ 12. Reels: moved to assets/yd-reels.css (Part7, THE REELS rebuilt as Instagram cards; loaded by the reels sections) ═══ */

/* ═══ 13. Why cards ═══ */
.yd-why__grid { display: grid; gap: var(--yd-sp-4); list-style: none; margin: 0; padding: 0; }
@media (min-width: 750px) { .yd-why__grid { grid-template-columns: repeat(3, 1fr); gap: var(--yd-sp-5); } }
.yd-why__card { background: var(--yd-white); border: var(--yd-border-hairline); border-radius: var(--yd-radius-card); box-shadow: var(--yd-shadow-sm); padding: var(--yd-sp-6); transition: box-shadow var(--yd-duration-base), border-color var(--yd-duration-base), transform var(--yd-duration-base) var(--yd-ease-out); }
.yd-why__card:hover { box-shadow: var(--yd-shadow-md); border-color: transparent; }   /* Part10: no hover fly (Part3 law) */
.yd-why__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--yd-sky-100); color: var(--yd-indigo-600); margin-bottom: var(--yd-sp-4); }
.yd-why__title { font-size: var(--yd-fs-h3); font-weight: 700; margin: 0 0 var(--yd-sp-2); }
.yd-why__text { margin: 0; color: var(--yd-slate-600); font-size: var(--yd-fs-small); line-height: 1.6; }

/* (§14 brand rail retired 2026-09-05: sections/yd-brands.liquid deleted, THE BRAND WALL took its place) */

/* ═══ 15. Product cards (stock Refresh card-product, restyled) ═══ */
.card-wrapper .card { border-radius: var(--yd-radius-card); }
.card--standard .card__inner, .card--card { border-radius: var(--yd-radius-card); box-shadow: var(--yd-shadow-sm); border: var(--yd-border-hairline); transition: box-shadow var(--yd-duration-base), border-color var(--yd-duration-base), transform var(--yd-duration-base) var(--yd-ease-out); }
.card-wrapper:hover .card--standard .card__inner, .card-wrapper:hover .card--card { box-shadow: var(--yd-shadow-md); border-color: transparent; transform: translateY(-2px); }
.card__media { border-radius: var(--yd-radius-card) var(--yd-radius-card) 0 0; background: var(--yd-white); }
.card__heading { font-size: var(--yd-fs-small); font-weight: 600; line-height: 1.35; }
.card__heading a::after { border-radius: var(--yd-radius-card); }
.card-information .price { font-weight: 700; color: var(--yd-indigo-700); }
.price__sale .price-item--sale { color: var(--yd-sale-600); }
.card__badge .badge { border-radius: var(--yd-radius-badge); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border: 0; }
.badge--bottom-left, .card__badge.bottom { inset-inline-start: var(--yd-sp-3); bottom: var(--yd-sp-3); }
.yd-play-badge { position: absolute; z-index: 2; inset-inline-end: var(--yd-sp-3); top: var(--yd-sp-3); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.92); color: var(--yd-indigo-600); box-shadow: var(--yd-shadow-md); pointer-events: none; }
.yd-play-badge svg { margin-inline-start: 2px; }
.quick-add__submit { border-radius: var(--yd-radius-button); }
.card .quick-add { margin-top: var(--yd-sp-2); }

/* ═══ 16. PDP ═══ */
.product__title h1 { font-size: var(--yd-fs-h1); line-height: var(--yd-lh-h1); letter-spacing: -0.01em; }
.product .price { font-size: 2rem; font-weight: 700; color: var(--yd-indigo-700); }
.product .price__sale .price-item--regular { color: var(--yd-slate-400); }
.product .price .badge { border-radius: var(--yd-radius-badge); }
.yd-chips { display: flex; flex-wrap: wrap; gap: var(--yd-sp-2); list-style: none; margin: 0 0 var(--yd-sp-4); padding: 0; }
.yd-chip { font-size: var(--yd-fs-label); font-weight: 700; color: var(--yd-success-text); background: var(--yd-success-tint); border-radius: var(--yd-radius-chip); padding: 5px 12px; line-height: 1.2; }
.product-form__submit { min-height: 52px; }
.yd-pdp-trust { display: grid; grid-template-columns: 1fr 1fr; gap: var(--yd-sp-2) var(--yd-sp-3); list-style: none; margin: var(--yd-sp-4) 0 var(--yd-sp-2); padding: var(--yd-sp-4); background: var(--yd-slate-50); border-radius: var(--yd-radius-card); border: var(--yd-border-hairline); }
.yd-pdp-trust li, .yd-pdp-trust a { display: flex; align-items: center; gap: var(--yd-sp-2); font-size: var(--yd-fs-label); font-weight: 600; color: var(--yd-slate-700); text-decoration: none; }
.yd-pdp-trust svg { color: var(--yd-indigo-600); flex: none; }
.yd-pdp-trust a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.product__accordion.accordion, .yd-pdp-accordion { border-top: var(--yd-border-hairline); border-bottom: 0; }
.product__accordion .summary__title .accordion__title, .yd-pdp-accordion .accordion__title { font-size: var(--yd-fs-body); font-weight: 700; }
.product__accordion details summary, .yd-pdp-accordion details summary { min-height: 52px; }
.accordion__content { color: var(--yd-slate-600); font-size: var(--yd-fs-small); line-height: 1.65; }
.product__info-container > .yd-pdp-accordion:last-of-type { border-bottom: var(--yd-border-hairline); }
.yd-disclaimer { margin: var(--yd-sp-5) 0 0; padding: var(--yd-sp-4); border-radius: var(--yd-radius-card); background: var(--yd-info-tint); border: 1px solid rgba(55,114,207,0.18); }
.yd-disclaimer__title { display: block; font-size: var(--yd-fs-label); font-weight: 700; letter-spacing: var(--yd-track-label); text-transform: uppercase; color: var(--yd-info-text); margin-bottom: var(--yd-sp-1); }
html[dir="rtl"] .yd-disclaimer__title { letter-spacing: 0; text-transform: none; }
.yd-disclaimer__text { margin: 0; font-size: var(--yd-fs-label); line-height: 1.55; color: var(--yd-slate-600); }
/* gallery: media radius + thumbs */
.product__media-wrapper .product__media, .product__media-list .product__media { border-radius: var(--yd-radius-media); overflow: hidden; background: var(--yd-slate-50); }
.thumbnail-list__item .thumbnail { border-radius: 12px; border: var(--yd-border-hairline); }
.thumbnail[aria-current="true"] { border: 2px solid var(--yd-indigo-600); box-shadow: none; }
.thumbnail__badge { background: rgba(255,255,255,0.92); color: var(--yd-indigo-600); border-radius: 50%; }
.deferred-media__poster-button { width: 60px; height: 60px; background: rgba(255,255,255,0.92); color: var(--yd-indigo-600); border: 0; box-shadow: var(--yd-shadow-md); }
.deferred-media__poster-button .icon { width: 22px; height: 22px; margin-inline-start: 3px; }
/* sticky buy bar */
/* Judge.me widget → the design system */
.yd-reviews { padding-block: var(--yd-section-pad); }
.yd-reviews__head { text-align: center; margin-bottom: var(--yd-sp-6); }
.yd-reviews__head .yd-eyebrow { margin: 0 0 var(--yd-sp-2); }
.jdgm-widget { font-family: var(--yd-font) !important; color: var(--yd-slate-900); }
.jdgm-star, .jdgm-star.jdgm--on, .jdgm-star.jdgm--half { color: var(--yd-warning) !important; }
.jdgm-rev-widg { border: 0 !important; padding: 0 !important; }
.jdgm-rev-widg__title { display: none; }
.jdgm-rev-widg__summary-text { color: var(--yd-slate-600); }
.jdgm-histogram__bar { background: var(--yd-slate-100) !important; border-radius: var(--yd-radius-badge); overflow: hidden; }
.jdgm-histogram__bar-content { background: var(--yd-indigo-600) !important; }
.jdgm-write-rev-link, .jdgm-btn, .jdgm-submit-rev, .jdgm-write-rev-link[href] { background: var(--yd-indigo-600) !important; color: var(--yd-white) !important; border: 0 !important; border-radius: var(--yd-radius-button) !important; padding: 12px 24px !important; font-weight: 700 !important; }
.jdgm-write-rev-link:hover, .jdgm-btn:hover { background: var(--yd-indigo-700) !important; }
.jdgm-rev { background: var(--yd-white); border: var(--yd-border-hairline) !important; border-radius: var(--yd-radius-card); padding: var(--yd-sp-5) !important; margin-bottom: var(--yd-sp-3); box-shadow: var(--yd-shadow-sm); }
.jdgm-rev__author { font-weight: 700; }
.jdgm-rev__timestamp { color: var(--yd-slate-400); }
.jdgm-rev__buyer-badge { background: var(--yd-success-tint) !important; color: var(--yd-success-text) !important; border-radius: var(--yd-radius-badge); font-size: 11px; padding: 2px 8px; }
.jdgm-rev__pics .jdgm-rev__pic-img, .jdgm-rev__pics img { border-radius: 10px; }
.jdgm-paginate .jdgm-paginate__page { border-radius: 50%; }
.jdgm-paginate .jdgm-curt { background: var(--yd-indigo-600); color: var(--yd-white); }
.jdgm-form input, .jdgm-form textarea { border-radius: var(--yd-radius-input) !important; border: 1px solid var(--yd-slate-200) !important; }
.jdgm-form textarea { border-radius: var(--yd-radius-card) !important; }
.jdgm-prev-badge__text { color: var(--yd-slate-500); font-size: var(--yd-fs-small); }
/* PDP buttons: Add to cart is the hero (filled), dynamic checkout is the quiet second */
.product-form__submit.button--secondary, .product-form__submit { --color-button: 59 74 145; --color-button-text: 255 255 255; --alpha-button-background: 1; --alpha-button-border: 1; background: rgb(var(--color-button)); color: rgb(var(--color-button-text)); box-shadow: var(--yd-shadow-xs); }
.product-form__submit:hover { --color-button: 47 59 116; }
.shopify-payment-button__button--unbranded { background: var(--yd-white) !important; color: var(--yd-indigo-600) !important; border: 1.5px solid var(--yd-indigo-600) !important; border-radius: var(--yd-radius-button) !important; min-height: 48px; font-weight: 700; box-shadow: none; }
.shopify-payment-button__button--unbranded:hover { background: var(--yd-indigo-50) !important; }
.shopify-payment-button__more-options { color: var(--yd-slate-500); }

/* Secondary buttons: Refresh draws the border on ::after; make it explicit so no cascade order can lose it */
.button--secondary::after, .quick-add__submit.button--secondary::after { box-shadow: 0 0 0 1.5px var(--yd-indigo-600) !important; }
.button--secondary:hover::after { box-shadow: 0 0 0 1.5px var(--yd-indigo-700) !important; }

/* ═══ 17. Collection intro ═══ */
.yd-cintro { padding-block: var(--yd-sp-7) var(--yd-sp-6); border-bottom: var(--yd-border-hairline); margin-bottom: var(--yd-sp-6); }
.yd-cintro__grid { display: grid; gap: var(--yd-sp-6); }
@media (min-width: 990px) { .yd-cintro__grid { grid-template-columns: 1.3fr 1fr; gap: var(--yd-sp-8); align-items: start; } }
.yd-cintro__copy .yd-eyebrow { margin: 0 0 var(--yd-sp-2); }
.yd-cintro__copy .h2 { margin: 0 0 var(--yd-sp-3); }
.yd-cintro__body { color: var(--yd-slate-600); font-size: var(--yd-fs-small); line-height: 1.65; max-width: 60ch; }
.yd-cintro__steps { list-style: none; margin: 0; padding: var(--yd-sp-5); background: var(--yd-white); border: var(--yd-border-hairline); border-radius: var(--yd-radius-card); box-shadow: var(--yd-shadow-sm); display: grid; gap: var(--yd-sp-3); counter-reset: none; }
.yd-cintro__step { display: flex; gap: var(--yd-sp-3); align-items: flex-start; font-size: var(--yd-fs-small); font-weight: 600; line-height: 1.4; }
.yd-cintro__num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--yd-indigo-600); color: var(--yd-white); display: grid; place-items: center; font-size: var(--yd-fs-label); font-weight: 700; }
.yd-cintro__picks-title { margin: var(--yd-sp-6) 0 var(--yd-sp-3); font-size: var(--yd-fs-label); font-weight: 700; letter-spacing: var(--yd-track-label); text-transform: uppercase; color: var(--yd-slate-500); }
html[dir="rtl"] .yd-cintro__picks-title { letter-spacing: 0; text-transform: none; }
.yd-cintro__picks { display: grid; gap: var(--yd-sp-3); list-style: none; margin: 0; padding: 0; }
@media (min-width: 750px) { .yd-cintro__picks { grid-template-columns: repeat(3, 1fr); } }
.yd-cintro__pick-link { display: flex; gap: var(--yd-sp-3); align-items: center; padding: var(--yd-sp-3); background: var(--yd-white); border: var(--yd-border-hairline); border-radius: var(--yd-radius-card); text-decoration: none; color: inherit; transition: box-shadow var(--yd-duration-base); }
.yd-cintro__pick-link:hover { box-shadow: var(--yd-shadow-md); }
.yd-cintro__pick-img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--yd-slate-100); flex: none; }
.yd-cintro__pick-copy { display: flex; flex-direction: column; min-width: 0; }
.yd-cintro__pick-title { font-size: var(--yd-fs-small); font-weight: 600; line-height: 1.3; }
.yd-cintro__pick-price { font-size: var(--yd-fs-small); font-weight: 700; color: var(--yd-indigo-700); }
.collection-hero { padding-block: var(--yd-sp-7) var(--yd-sp-2); }
.collection-hero__title { font-size: var(--yd-fs-h1); }

/* ═══ 18. Blog ═══ retired in Part10 (Sawy 2026-09-06 00:21: the Skin guide blog deleted with every link to it; the .yd-blognav, .blog, .article-*, .yd-arel rules went with it) */

/* ═══ 19. Ingredient encyclopedia ═══ */
.yd-ing { padding-block: var(--yd-sp-7) var(--yd-section-pad); }
.yd-ing__head { max-width: 62ch; margin-bottom: var(--yd-sp-6); }
.yd-ing__head .yd-eyebrow { margin: 0 0 var(--yd-sp-2); }
.yd-ing__head .h1 { margin: 0 0 var(--yd-sp-2); }
.yd-ing__one { font-size: 1.8rem; color: var(--yd-slate-600); margin: 0 0 var(--yd-sp-3); }
.yd-ing__grid { display: grid; gap: var(--yd-sp-7); }
@media (min-width: 990px) { .yd-ing__grid { grid-template-columns: 1.4fr 1fr; gap: var(--yd-sp-9); align-items: start; } .yd-ing__aside { position: sticky; top: 120px; } }
.yd-ing__img { width: 100%; height: auto; border-radius: var(--yd-radius-media); margin-bottom: var(--yd-sp-5); }
.yd-ing__block { margin-bottom: var(--yd-sp-6); }
.yd-ing__block .h3 { margin: 0 0 var(--yd-sp-2); }
.yd-ing__block .rte { color: var(--yd-slate-700); line-height: 1.7; }
.yd-ing__block--care { padding: var(--yd-sp-5); background: var(--yd-warning-tint); border-radius: var(--yd-radius-card); }
.yd-ing__block--care .h3 { color: var(--yd-warning-text); }
.yd-ing__aside .h3 { margin: 0 0 var(--yd-sp-3); }
.yd-ing__products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--yd-sp-3); list-style: none; margin: 0 0 var(--yd-sp-5); padding: 0; }
.yd-ing__back { width: 100%; }
/* (the .yd-ingidx__* index grammar retired 2026-09-05: the encyclopedia v2 renders its own .yd-ing2 layer from assets/yd-ingredients.css) */

/* ═══ 20. Announcement ticker — 32px, one line at a time, the next rolls UP into place (JS steps, CSS eases on --yd-duration-slow / --yd-ease-in-out) ═══ */
.yd-ann { --yd-ann-h: 32px; height: var(--yd-ann-h); overflow: hidden; background: rgb(var(--color-background)); background-image: none; background-attachment: scroll; }   /* Part8 Fork E: Dawn's .gradient put background-attachment: fixed on the band (a viewport-anchored paint that repaints on every scroll frame and cannot be composited on iOS); the scheme colour is flat, so it paints as a plain box colour */
.yd-ann__item { will-change: transform, opacity; backface-visibility: hidden; color: var(--yd-white); }   /* the footer's white (Sawy 05:30), the scheme no longer decides the line's colour */   /* the three lines stay persistent compositor layers: no promotion at each roll and demotion 700ms later, so the band underneath is never re-rasterised mid-roll */
.yd-ann__viewport { height: 100%; overflow: hidden; }
.yd-ann__list { position: relative; list-style: none; margin: 0; padding: 0; height: 100%; }
.yd-ann__item { position: absolute; inset: 0; height: var(--yd-ann-h); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.3rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(100%); pointer-events: none;
  transition: transform var(--yd-duration-slow, 600ms) var(--yd-ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)), opacity var(--yd-duration-slow, 600ms) var(--yd-ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)); }   /* Part8 (Sawy 2026-09-05: "abrupt, very fast"): the two lines ride ONE curve, the fade rides the same one, so the step reads as one strip rolling. The old 0.55s hard ease-out spent most of its 32px in the first 150ms and the 0.4s fade blinked. */
.yd-ann__item.is-current { opacity: 1; transform: translateY(0); pointer-events: auto; }
.yd-ann__item.is-leaving { opacity: 0; transform: translateY(-100%); }
.yd-ann__item > span { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
html[dir="rtl"] .yd-ann__item { font-size: 1.4rem; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .yd-ann__item { transition: none; } }

/* ═══ 21. THE HEADSTACK — ticker + header as one sticky slab [REUSE: BLNCO .blnco-headstack] ═══ */
.yd-headstack { position: sticky; top: 0; z-index: 5; transform: translateY(0); transition: transform var(--yd-slab-beat, 0.16s) cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; }
body.yd-ann-hidden .yd-headstack { transform: translateY(calc(-1 * var(--yd-ann-h-live, 32px))); }
/* Part10 (Sawy 2026-09-06 03:24, the strip stayed indigo on his simulator even scrolled, only the drawer turned it white): a Safari that does not
   apply theme-color paints the strip under its status bar from a SAMPLE of the page's top, taken at load (the ticker's indigo) and kept until
   something in that region changes its layer; the drawer's open changes the slab's z-index, so it re-sampled and found the white header. Now
   every hide and return of the ticker steps the slab's stacking by one, so Safari re-samples: the header when the ticker is away, the ticker
   when it is back. Nothing else stacks between 5 and 6. */
body.yd-ann-hidden .yd-headstack { z-index: 6; }
.yd-headstack.is-knock { z-index: 7; }   /* THE KNOCK (yd-headstack.js): two frames one step higher, so Safari re-samples the page top after a door has settled */
/* Part10 (Sawy 2026-09-06 03:05, the search sheet on the iPhone: "you still see the blue badge up top", the drawer was white): hidden, the
   slab sits translated up with the ticker parked exactly under iOS's status bar, and iOS paints that strip from the DOCUMENT; the meta
   already says white, but the parked ticker is still painted there. Once the slide has landed the ticker stops painting (visibility, on the
   slab's own beat), and it is visible again the instant it is asked back, so THE RETURN still slides a painted bar down. */
.yd-ann { transition: visibility 0s linear 0s; }
body.yd-ann-hidden .yd-ann { visibility: hidden; transition-delay: var(--yd-slab-beat, 0.16s); }
.yd-headstack__sentinel { height: 1px; margin-top: -1px; pointer-events: none; }
.yd-headstack .header-wrapper { background: var(--yd-white); transition: box-shadow var(--yd-duration-base); position: relative; margin-top: -1px; padding-top: 1px; }   /* THE OVERLAP (Part8 Fork E, Sawy: "a very thin white line when the text settles to the next one, at certain places in the page"): the header paints 1px over the band's foot. On iOS the slab sits on fractional scroll offsets and, during a roll, the band's edge is rasterised in its own layer against the header's, and two anti-aliased edges meeting at a fraction can leave a hairline of page white between them. With the header over the band's last pixel there is no seam to show: the junction is white over the band's own colour. The slab stays 93 (32 + 62 - 1), the bar's travel stays 32. */
.yd-headstack.is-stuck .header-wrapper { box-shadow: 0 6px 20px rgba(20,27,60,0.06); }
.yd-headstack .shopify-section-group-header-group { position: static; }      /* Refresh's own sticky is off (sticky_header_type: none) */
html { scroll-padding-top: calc(var(--yd-headstack-h, 96px) + 8px); }
/* THE CURTAIN (Part9): the white document-flow sheet under both doors (yd-headstack.js claim/release); it arrives on the door's in-beat and
   leaves on the out-beat with the door's own closing state, so the page shows through the fade exactly as before */
.yd-curtain, .yd-curtain:empty { display: block; }   /* Dawn's div:empty hides an empty div (the reel veil's trap, Part8) */
.yd-curtain { position: absolute; left: 0; right: 0; z-index: 4; background: var(--yd-white); opacity: 0; pointer-events: none; transition: opacity var(--yd-sheet-in, 460ms) var(--yd-sheet-ease, cubic-bezier(0.32, 0.72, 0, 1)); }
.yd-curtain.is-on { opacity: 1; }
.yd-search-layer.is-portal.is-closing ~ .yd-curtain.is-on, body:has(.yd-nav__root.is-closing) .yd-curtain.is-on { opacity: 0; transition-duration: var(--yd-sheet-out, 340ms); }
@media (prefers-reduced-motion: reduce) { .yd-headstack { transition: none; } }

/* (§22 HERO moved to assets/yd-hero.css, THE GALLERY, Part5 A 2026-09-05) */
/* (§23 quick links retired 2026-09-05: sections/yd-quick-links.liquid deleted) */

/* ═══ 24. Marquee band — the BLNCO band on a tilted plane [REUSE: blnco-marquee-track.liquid] ═══ */
.yd-marquee { overflow: hidden; margin-top: 0; }   /* Part10 (Sawy 2026-09-06 00:54): the band sits right under the hero deck (the deck's own 12 is the gap); the sheen retired ("clean looking and crisp clear") */
.yd-marquee__stage { position: relative; perspective: 900px; perspective-origin: 50% 50%; }
.yd-marquee__viewport { position: relative; overflow: hidden; min-height: 44px; display: flex; align-items: center; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%); }
.yd-marquee--drum .yd-marquee__viewport { transform: rotateX(22deg); transform-origin: 50% 100%; transform-style: preserve-3d; }
.yd-marquee--drum .yd-marquee__stage::before, .yd-marquee--drum .yd-marquee__stage::after { content: ""; position: absolute; inset-inline: 0; height: 1px; background: rgba(255,255,255,0.14); pointer-events: none; }
.yd-marquee--drum .yd-marquee__stage::before { top: 0; }
.yd-marquee--drum .yd-marquee__stage::after { bottom: 0; background: rgba(255,255,255,0.28); }
/* THE REFLECTION (owner 2026-09-05: "a static reflection is ugly; make it move as the phone moves, like iOS 26, or remove it").
   The sheen is not on a clock any more: yd-marquee-clock.js places it from the page's motion (the band's position in the
   viewport as you scroll) and from the phone's tilt where the browser exposes it without a prompt (deviceorientation gamma).
   Still hands: still light. Reduced motion: no sheen at all. */
.yd-marquee__track { display: flex; flex-wrap: nowrap; align-items: center; width: max-content; will-change: transform; animation: yd-marquee-scroll var(--yd-marquee-duration, 55s) linear infinite; }
html[dir="rtl"] .yd-marquee__viewport { direction: ltr; }   /* audit r1 #1: the loop is direction-free; the track never overflows left */
.yd-marquee__group { display: inline-flex; flex: 0 0 auto; align-items: center; white-space: nowrap; }
.yd-marquee__text { font-family: var(--yd-font); font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: 0.16em; font-size: 1.4rem; white-space: nowrap; opacity: 0.9; padding-block: 14px; }
html[dir="rtl"] .yd-marquee__text { letter-spacing: 0; text-transform: none; font-size: 1.44rem; }
.yd-marquee__sep { flex: 0 0 auto; margin-inline: 1.4em; display: inline-flex; align-items: center; }
.yd-marquee__sep .yd-cross { display: block; }
/* THE BRAND BAND (owner 2026-09-05): sky tint ground, ink text, the mark as the separator; the drum hairlines turn to ink */
.yd-marquee--sky { background: var(--yd-sky-100) !important; color: var(--yd-indigo-800) !important; }
.yd-marquee--sky .yd-marquee__text { opacity: 1; }
.yd-marquee--sky.yd-marquee--drum .yd-marquee__stage::before { background: rgba(20,27,60,0.08); }
.yd-marquee--sky.yd-marquee--drum .yd-marquee__stage::after { background: rgba(20,27,60,0.14); }
@media (hover: hover) and (pointer: fine) { .yd-marquee__viewport:hover .yd-marquee__track { animation-play-state: paused; } }
.yd-marquee__viewport:has(:focus-visible) .yd-marquee__track { animation-play-state: paused; }
@keyframes yd-marquee-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (min-width: 750px) { .yd-marquee__text { font-size: 1.5rem; } .yd-marquee__viewport { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { .yd-marquee__track { animation: none; width: 100%; justify-content: center; } .yd-marquee__group[aria-hidden="true"] { display: none; } .yd-marquee--drum .yd-marquee__viewport { transform: none; } }
.footer .field__label { color: var(--yd-slate-600); }

/* ═══ 25. Cart drawer, cart page, search, account — the stock surfaces in the system ═══ */
cart-drawer .drawer__inner { border-start-start-radius: var(--yd-radius-media); border-end-start-radius: var(--yd-radius-media); box-shadow: var(--yd-shadow-lg); }
cart-drawer .drawer__header { border-bottom: var(--yd-border-hairline); }
cart-drawer .drawer__heading { font-size: var(--yd-fs-h3); font-weight: 700; }
cart-drawer .drawer__close { width: var(--yd-tap); height: var(--yd-tap); color: var(--yd-indigo-700); }
cart-drawer .cart-item__image { border-radius: 12px; border: var(--yd-border-hairline); }
cart-drawer .cart-item__name { font-size: var(--yd-fs-small); font-weight: 600; }
cart-drawer .drawer__footer { border-top: var(--yd-border-hairline); }
cart-drawer .totals__total-value { font-weight: 700; color: var(--yd-indigo-700); }
cart-drawer .cart__checkout-button { min-height: 52px; }
.cart-item__image { border-radius: 12px; }
.quantity { border-radius: var(--yd-radius-input); }
.quantity__button { width: var(--yd-tap); }
.cart__ctas .button { min-height: 52px; }
.cart__blocks { border-radius: var(--yd-radius-card); }
.cart-drawer .cart__login-title { font-size: var(--yd-fs-h3); }
/* predictive search */
.search-modal__content { border-radius: 0 0 var(--yd-radius-media) var(--yd-radius-media); }
.search-modal__form .search__input { border-radius: var(--yd-radius-input); min-height: 48px; }
.predictive-search { border-radius: var(--yd-radius-card); box-shadow: var(--yd-shadow-lg); border: var(--yd-border-hairline); }
.predictive-search__item:hover { background: var(--yd-indigo-50); }
/* account */
.customer .field, .customer select { border-radius: var(--yd-radius-input); }
.customer h1, .customer .title { font-size: var(--yd-fs-h1); }
.customer table th { font-size: var(--yd-fs-label); letter-spacing: var(--yd-track-label); text-transform: uppercase; color: var(--yd-slate-500); }
.customer .addresses li > button, .customer button { min-height: 44px; }
/* section headings on stock sections (Best sellers, Shop by concern) */
.collection .title, .collection-list-title, .featured-collection .title, .related-products__heading, .title-wrapper .title { font-size: var(--yd-fs-h2); letter-spacing: -0.005em; }
.collection-list__item .card__heading { font-size: var(--yd-fs-small); font-weight: 700; }
.collection-list .card__inner, .collection-list .card { border-radius: var(--yd-radius-card-alt); }
/* pagination + facets */
.pagination__item { border-radius: 50%; width: var(--yd-tap); height: var(--yd-tap); }
.pagination__item--current::after { background: var(--yd-indigo-600); height: 2px; }
.facets__summary, .mobile-facets__open { font-weight: 600; }
.mobile-facets__inner { border-start-end-radius: var(--yd-radius-media); }
.facets__disclosure-vertical .facets__summary, .facets__disclosure .facets__summary { border-radius: var(--yd-radius-badge); }
.active-facets__button-inner { border-radius: var(--yd-radius-chip); background: var(--yd-indigo-50); color: var(--yd-indigo-700); }

/* ═══ 26. SAWY DESIGN LAW pass (02_architecture/SAWY_DESIGN_LAW.md) ═══ */
/* A9 · THE 16PX FLOOR — iOS never zooms a field */
@media (pointer: coarse) { input, select, textarea, .field__input, .search__input { font-size: 16px !important; } }
/* law 4 · ticker line ellipsises inside the bar, never at the viewport edge */
.yd-ann__item { padding-inline: 40px; }
/* law 8 · ONE toggle mark: the Phosphor caret, rotating, on footer + help + PDP accordions */
  content: ""; width: 18px; height: 18px; background: currentColor; color: var(--yd-indigo-600);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/></svg>") center / contain no-repeat;
  transition: transform var(--yd-duration-base) var(--yd-ease-out);
}
/* law 19 · THE CORNER LAW: heart top-inline-end, flag/play top-inline-start, one centre line (12/12) */
.card__media .yd-wishlist-btn--card { inset-inline-start: auto !important; inset-inline-end: calc(var(--yd-sp-2) - 5px) !important; top: calc(var(--yd-sp-2) - 5px) !important; }   /* Part10 (Sawy 2026-09-06 02:38, "up and right a bit more, OCD"): the 26 glyph sits 8 from the image's corner (the 36 tap keeps 5 of air), the mirror of the plate's own mark at the bottom corner */
.yd-play-badge { inset-inline-end: auto; inset-inline-start: var(--yd-sp-3); }
/* law A10 · desktop is the bigger twin: card type steps up */
@media (min-width: 990px) { .card__heading { font-size: var(--yd-fs-body); } .card-information .price { font-size: 1.7rem; } .card__information { padding-bottom: var(--yd-sp-4); } }
/* law 18 · THE CARD FOOT: one button height, one line */
.quick-add__submit { min-height: 44px; white-space: nowrap; }
/* law 27 · no loupe on the PDP media; the media stays clickable to the lightbox */
.product__media-toggle .product__media-icon, .product__modal-opener .product__media-icon { display: none; }
/* PDP description written with "* " bullets → rendered as a list by yd-custom.js */
.product__description ul.yd-desc-list { margin: var(--yd-sp-3) 0; padding-inline-start: 1.2em; }
.product__description ul.yd-desc-list li { margin-bottom: 4px; }

/* ═══ PART3 — THE BUTTON PAIR, explicit end states (owner 2026-09-04: "the blue button disappears on hover, the white one
   loses its text"). Dawn paints buttons through rgb-triplet vars and a ::after ring; a var swap mid-transition painted the
   fill transparent. Every state below is a literal colour, one 180ms colour curve, no lift, no ring growth. ═══ */
.button, .shopify-challenge__button, .customer button { transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.button:not(.button--secondary):not(.button--tertiary):not(.yd-hero__cta--ghost) { background-color: var(--yd-indigo-600); color: var(--yd-white); }
.button:not(.button--secondary):not(.button--tertiary):not(.yd-hero__cta--ghost):hover { background-color: var(--yd-indigo-700); color: var(--yd-white); }
.button:not(.button--secondary):not(.button--tertiary)::after { box-shadow: none !important; }
.button:active { transform: none; }
.button--secondary { background-color: transparent; color: var(--yd-indigo-600); }
.button--secondary:hover { background-color: var(--yd-indigo-50); color: var(--yd-indigo-700); }
/* Part3 (A): law 38, one legal strip. Dawn's own copyright + "Powered by Shopify" line retires; yd-footer-legal carries it. */

/* ═══ PART3 AUDIT ROUND 1 FIXES (A, 2026-09-04) — numbers refer to 00_admin/PART3_AUDIT_ROUND1.md ═══ */
/* #4 law 4: the ticker line ellipsises INSIDE the bar, 40px in from both edges, never cut by the viewport */
.yd-ann__item { display: block; inset-inline: 40px; line-height: var(--yd-ann-h); text-overflow: ellipsis; }
/* #9 law 32: the tax/shipping boilerplate retires from the PDP price block (Delivery & returns explains COD and pricing) */
.product__info-container .product__tax { display: none; }
/* #15 the locked pair never wraps its label */
.button { white-space: nowrap; }
/* #12 law 40: the canvas past the last pixel is the footer's own tint, the content area stays white */
/* law 40 canvas: THE DARK FOOTER owns the end of the page now (yd-footer.css, Part5); the content area stays white */
#MainContent { background: var(--yd-white); }
/* #22 A9 one well shape: the intro's step numerals are THE WELL (40px circle, indigo-50 ground, indigo-600 numeral) */
.yd-cintro__num { width: 40px; height: 40px; background: var(--yd-indigo-50); color: var(--yd-indigo-600); font-size: var(--yd-fs-small); font-weight: 700; }
/* design-system §3.1: Latin body is 16px (Dawn's own body is 1.5rem = 15px) */
body { font-size: 1.6rem; }
html[dir="rtl"] body { font-size: 1.7rem; }
/* Part3 close (A): cart drawer line — the total never breaks "LE" from its number; the stock PRODUCT/TOTAL table head retires in the
   drawer (the line card says it); the "(n in cart)" rule reads as its own quiet caption under the quantity label */
cart-drawer .cart-items thead { display: none; }
.cart-item__totals .price, .cart-item__price-wrapper .price { white-space: nowrap; }
.product__info-container .form__label .quantity__rules-cart { display: block; margin-top: 4px; font-size: var(--yd-fs-label); }
/* ═══ THE STUCK SLAB (owner 2026-09-04 evening: "the header bar and the moving bar completely disappear when I scroll") ═══
   base.css declares `html, body { overflow-x: hidden }`; with overflow set on BOTH, the body stops propagating to the viewport and
   becomes its own scroll container, so `position: sticky` on .yd-headstack sticks to the body's scrollport, not the window, and the
   whole stack scrolls away. `clip` clips the horizontal overflow exactly the same way without creating a scroll container. */
html, body { overflow-x: clip; overflow-y: visible; }

/* ═══ THE ADDRESS — breadcrumb (owner 2026-09-04): one quiet 12px line, slate-500, the current page in ink, carets as separators ═══ */
.yd-crumb { padding-block: var(--yd-sp-3) 0; }
.yd-crumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--yd-sp-1); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.yd-crumb__list::-webkit-scrollbar { display: none; }
.yd-crumb__item { display: inline-flex; align-items: center; gap: var(--yd-sp-1); white-space: nowrap; font-size: var(--yd-fs-label); line-height: var(--yd-lh-label); font-weight: 600; color: var(--yd-slate-500); }
.yd-crumb__sep { display: inline-flex; color: var(--yd-slate-300); }
.yd-crumb__link { color: inherit; text-decoration: none; transition: color var(--yd-duration-fast); }
.yd-crumb__link:hover { color: var(--yd-indigo-600); }
.yd-crumb__current { color: var(--yd-slate-800); overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
html[dir="rtl"] .yd-crumb__item { font-family: var(--yd-font-arabic); letter-spacing: 0; }
/* on the product page it sits first in the info column, under the gallery on the phone; no page-width padding there (the column has its own) */
.product__info-container .yd-crumb { padding: 0 0 var(--yd-sp-3); margin: 0; max-width: none; }
/* the global line breathes 12px under the header before the first section */
main > .yd-crumb + * { margin-top: 0; }

/* ═══ THE SEAT FIELD — design-system component (owner 2026-09-04: "the blue circle button inside the pill, make it universal") ═══
   One pill, 56px, hairline that turns ink on focus, and a 40px indigo disc seated 8px inside the end. Used by the 404 search, the
   footer newsletter, and any single-action field. Apply `.yd-seatfield` on the wrapper and `.yd-seatfield__go` on the button. */
.yd-seatfield { position: relative; display: block; width: 100%; }
.yd-seatfield .field { margin: 0; position: relative; }
.yd-seatfield .field::after, .yd-seatfield .field::before { content: none !important; }
.yd-seatfield .field__input, .yd-seatfield input.field__input { height: 56px; min-height: 56px; padding: 0 64px 0 22px; border: 1px solid var(--yd-slate-200); border-radius: 28px; background: var(--yd-white); font-size: 16px; color: var(--yd-slate-900); box-shadow: none !important; outline: none; -webkit-text-fill-color: var(--yd-slate-900); transition: border-color var(--yd-duration-fast); }
html[dir="rtl"] .yd-seatfield .field__input { padding: 0 22px 0 64px; }
.yd-seatfield .field__input::placeholder { color: var(--yd-slate-400); opacity: 1; }
.yd-seatfield .field__input:hover { border-color: var(--yd-slate-300); }
.yd-seatfield .field__input:focus, .yd-seatfield .field__input:focus-visible { border-color: var(--yd-indigo-600); box-shadow: none !important; outline: none; }
.yd-seatfield .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yd-seatfield__go, .yd-seatfield .yd-seatfield__go, .yd-seatfield .field__button.yd-seatfield__go { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--yd-indigo-600); color: var(--yd-white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none; transition: background var(--yd-duration-fast), transform var(--yd-duration-fast) var(--yd-ease-out); right: 8px; }
html[dir="rtl"] .yd-seatfield__go { right: auto; left: 8px; }
.yd-seatfield__go:hover { background: var(--yd-indigo-700); }
/* Part11 (THE AUDIT, F2): the 404's go disc was indigo; the one field (search-field-law) ends in the sky-500 disc with the indigo-900 glyph */
.yd-404__search.yd-seatfield .yd-seatfield__go, .yd-404__search.yd-seatfield .field__button.yd-seatfield__go { background: var(--yd-sky-500); color: var(--yd-indigo-900); }
.yd-404__search.yd-seatfield .yd-seatfield__go:hover, .yd-404__search.yd-seatfield .field__button.yd-seatfield__go:hover { background: var(--yd-sky-300); color: var(--yd-indigo-900); }
.yd-seatfield__go:active { transform: scale(0.96); }
.yd-seatfield__go svg { width: 18px; height: 18px; color: var(--yd-white); }
.yd-seatfield__go:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--yd-white), 0 0 0 4px var(--yd-indigo-400); }
/* footer newsletter takes the seat */
.footer .yd-seatfield .field__input { padding-right: 64px; }
.footer .yd-seatfield .field__button.yd-seatfield__go { color: var(--yd-white); width: 40px; height: 40px; }
.footer .yd-seatfield .field__button.yd-seatfield__go .icon, .footer .yd-seatfield .field__button.yd-seatfield__go svg { color: var(--yd-white); width: 16px; height: 16px; }

/* ═══ THE COUNTER STATES (owner 2026-09-04): 1..99, the ends fade, THE CAP NOTE above the plus ═══ */
quantity-input, .quantity { position: relative; }
quantity-input button.is-floor, .quantity button.is-floor { opacity: 0.28; cursor: default; }
quantity-input button.is-cap, .quantity button.is-cap { opacity: 0.28; cursor: default; }
quantity-input button.is-cap:hover, quantity-input button.is-floor:hover { background: transparent; }
.yd-qty__note { position: absolute; inset-inline-end: 0; bottom: calc(100% + 8px); z-index: 4; max-width: 280px; padding: 8px 12px; border-radius: 10px;
  background: var(--yd-indigo-700); color: var(--yd-white); font: 600 12px/1.4 var(--yd-font); letter-spacing: 0; text-transform: none; text-align: start;
  box-shadow: var(--yd-shadow-md); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 220ms cubic-bezier(0.32, 0.72, 0, 1), transform 220ms cubic-bezier(0.32, 0.72, 0, 1); }
.yd-qty__note::after { content: ''; position: absolute; inset-inline-end: 18px; top: 100%; border: 5px solid transparent; border-top-color: var(--yd-indigo-700); }
.has-note > .yd-qty__note { opacity: 1; transform: none; }
html[dir="rtl"] .yd-qty__note { font-family: var(--yd-font-arabic); }
@media (prefers-reduced-motion: reduce) { .yd-qty__note { transition: opacity 120ms linear; transform: none; } }
/* owner 2026-09-05 (iPhone): the announcement line must show whole; on the phone the insets drop to the gutter and the type steps
   down one notch, and a line that still cannot fit ellipsises inside the bar, never past the edge */
@media (max-width: 749px) { .yd-ann__item { inset-inline: var(--yd-gutter); padding-inline: 0; font-size: 1.2rem; letter-spacing: 0; } .yd-ann__item > span { white-space: nowrap; } }

/* ═══ SWEEP B FIXES (A, Part5 2026-09-05 night) ═══ */
/* #3 the WhatsApp floater steps aside while the filter sheet is open (it covered the Apply button at 390) */
body:has(.mobile-facets__disclosure[open]) .yd-whatsapp, body:has(menu-drawer.facets-container details[open]) .yd-whatsapp, body:has(.yd-sheet[open]) .yd-whatsapp, body:has(details-modal[open]) .yd-whatsapp { opacity: 0; pointer-events: none; }
/* #5 #6 #7 law 44: the tap targets nobody measured */
.yd-toast__link { min-height: 44px; display: inline-flex; align-items: center; }
.yd-crumb a, nav[aria-label="Breadcrumb"] a { display: inline-flex; align-items: center; min-height: 44px; }
.search-modal__close-button { width: 44px; height: 44px; display: grid; place-items: center; }
.yd-sheet__close, .mobile-facets__close-button, .facets__close { min-width: 44px; min-height: 44px; }
/* (#8 retired 2026-09-05: THE FRONT DESK contact page carries its own follow row in assets/yd-contact.css) */
/* #2 predictive search on the phone: the modal content, the form and the results panel span the screen (the header lane's
   flex row squeezed the modal to the icon's width) */
@media (max-width: 749px) {
  .search-modal { position: fixed; inset: 0 0 auto 0; width: 100%; }
  .search-modal__content { position: relative; width: 100%; max-width: none; margin: 0; padding: var(--yd-sp-3) var(--yd-gutter); display: flex; align-items: center; gap: var(--yd-sp-2); background: var(--yd-white); }
  .search-modal__form { flex: 1 1 auto; width: 100%; max-width: none; }
  .search-modal__form .field { width: 100%; }
  .search-modal__form .search__input { width: 100%; padding-inline-end: 96px; }
  predictive-search { position: static; width: 100%; display: block; }
  .search-modal__close-button { position: static; flex: none; }   /* Dawn parks it absolute over the field's end: it overprinted the search button */
  #predictive-search-results { position: absolute; left: 0; right: 0; top: 100%; width: auto; max-height: calc(100vh - 140px); overflow-y: auto; background: var(--yd-white); }
  .predictive-search { position: static; width: 100%; }
}

/* THE PLUS on the product tabs (Part6): the cross instead of Dawn's caret, 45 degrees when open */
.product__accordion summary .yd-plus--tab { flex: none; display: block; width: 20px; height: 20px; margin-inline-start: auto; transition: transform 250ms var(--yd-ease-in-out); }
.product__accordion details[open]:not(.is-closing) > summary .yd-plus--tab { transform: rotate(45deg); }

/* ═══ THE 44 LAW, sitewide pass (Part6, A 2026-09-06, WebKit sweep of 26 routes): every tap target at least 44px on the phone.
   Where the visual must stay small (the 32px announcement bar, the 40px discs, the 24px story bars, the 32px legal type) the
   hit area grows around the mark with padding and negative margins, so nothing on screen changes. ═══ */
.yd-toast .yd-toast__link, a.yd-toast__link { min-height: var(--yd-tap); display: inline-flex; align-items: center; }
.yd-search .yd-search__btn.field__button { width: var(--yd-tap); }
.header--yd .header__heading-link { min-height: var(--yd-tap); display: inline-flex; align-items: center; }
.yd-crumb__link { min-width: var(--yd-tap); justify-content: center; padding-inline: var(--yd-sp-1); }
.yd-footer .yd-legal__bar a, .yd-footer .yd-legal__copy { min-height: var(--yd-tap); }
.yd-footer .yd-legal__bar { row-gap: 0; }
.yd-footer .yd-footer__powered { min-height: var(--yd-tap); }
.yd-hero__bar { height: var(--yd-tap); margin-block: calc((var(--yd-hero-bars-row) - var(--yd-tap)) / 2); }
.yd-card__qty-btn, .quantity__button.yd-card__qty-btn { height: var(--yd-tap); min-height: var(--yd-tap); }
.card__heading .full-unstyled-link, .card__heading a.full-unstyled-link { display: flex; align-items: center; min-height: var(--yd-tap); }
.slider-button { width: var(--yd-tap); height: var(--yd-tap); }
.yd-stars__text, a.yd-stars__text { display: inline-flex; align-items: center; min-height: var(--yd-tap); }
.product-form__quantity .quantity__button, .quantity__button { min-height: var(--yd-tap); }
.yd-blognav__chip, .yd-hc__chip { min-height: var(--yd-tap); }
.yd-dr__policy-link { display: inline-flex; align-items: center; min-height: var(--yd-tap); }
.yd-reel__glyph, .yd-reel__disc--sound { min-width: var(--yd-tap); min-height: var(--yd-tap); }
.yd-seatfield__go, .yd-seatfield .field__button.yd-seatfield__go, .yd-404__go { overflow: visible; }
.yd-seatfield__go::before, .yd-404__go::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }   /* the 40px disc keeps its look, the hit box is 56 */

/* the policy pages' Arabic title (a heading-role paragraph, so EN and AR keep h2 parity and the page keeps one H1) reads as the page title */
.rte .yd-policy__ar-title, .yd-policy__ar-title { font-size: var(--yd-fs-h1); line-height: var(--yd-lh-h1); font-weight: 700; color: var(--yd-slate-900); margin: var(--yd-sp-9) 0 var(--yd-sp-6); direction: rtl; text-align: start; }
/* THE FUSION MARK (snippets/yd-mark-fusion.liquid): two overlapping discs, the first in front */
.yd-fusion { display: inline-flex; align-items: center; flex: none; }
.yd-fusion__well { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--yd-sky-50); color: var(--yd-indigo-600); box-shadow: 0 0 0 3px var(--yd-white); }
.yd-fusion__well--a { position: relative; z-index: 2; }
.yd-fusion__well--b { margin-inline-start: -20px; background: var(--yd-indigo-50); color: var(--yd-indigo-700); }
@media (min-width: 750px) { .yd-fusion--lg .yd-fusion__well { width: 88px; height: 88px; } .yd-fusion--lg .yd-icon { width: 40px; height: 40px; } .yd-fusion--lg .yd-fusion__well--b { margin-inline-start: -24px; } }
.yd-fusion--sm .yd-fusion__well { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--yd-white); }
.yd-fusion--sm .yd-fusion__well--b { margin-inline-start: -12px; }
/* THE LANGUAGE TOGGLE (Part9, ONE SOURCE snippets/yd-lang-toggle.liquid; the encyclopedia and the help centre wear it): two quiet segments at the top-right, the pressed one indigo */
.yd-lang { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--yd-slate-200); border-radius: 999px; background: var(--yd-white); }
.yd-lang__btn { min-height: 28px; padding-inline: 11px; border: 0; border-radius: 999px; background: transparent; color: var(--yd-slate-700); font: 600 12px/1 var(--yd-font); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 160ms var(--yd-ease-in-out), color 160ms var(--yd-ease-in-out); }
.yd-lang__btn[lang="ar"] { font-family: var(--yd-font-arabic); font-size: 13px; }
.yd-lang__btn[aria-pressed="true"] { background: var(--yd-indigo-600); color: var(--yd-white); }
.yd-lang__btn:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.yd-lang__btn:focus-visible { outline: 2px solid var(--yd-sky-500); outline-offset: 2px; }
/* THE BILINGUAL BODY (yd-lang.js bilingual()): one language at a time inside a .yd-policy block; the Arabic replica stays hidden until a
   host says data-lang="ar", so the first paint is English and never both */
.yd-lang-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; direction: ltr; margin: 0 0 8px; }
.yd-lang-line .yd-lang { margin-left: auto; }
.yd-lang-line__mark { margin-inline-start: 2px; }
/* no gap under the title: the body's first line and the Arabic replica's own heading sit on the rhythm */
.yd-page__body > .yd-policy > section > :first-child, .shopify-policy__container .yd-policy > :first-child { margin-top: 0; }
[data-lang="ar"] .yd-policy > section.yd-policy__ar > .yd-policy__ar-title, [data-lang="ar"] .yd-policy > .yd-policy__ar-title { margin-top: 0; }
.yd-page__body > .yd-policy > section.yd-policy__ar > .yd-policy__ar-title { margin-top: 0; }
.yd-policy > section.yd-policy__ar, .yd-policy > .yd-policy__ar-title, .yd-policy > .yd-policy__ar-title ~ * { display: none; }
[data-lang="ar"] .yd-policy > section.yd-policy__ar, [data-lang="ar"] .yd-policy > .yd-policy__ar-title, [data-lang="ar"] .yd-policy > .yd-policy__ar-title ~ * { display: revert; }
[data-lang="ar"] .yd-policy > section:not(.yd-policy__ar), [data-lang="ar"] .yd-policy > :not(section):not(.yd-policy__ar-title):not(.yd-policy__ar-title ~ *) { display: none; }
[data-lang="ar"] .yd-page__title, [data-lang="ar"] .shopify-policy__title { display: none; }   /* the Arabic replica carries its own heading; the English page title would double it */
.shopify-policy__container { padding-top: 8px !important; }
.shopify-policy__container .shopify-policy__title { margin: 0 0 12px !important; }
/* Shopify's own policy pages (/policies/*): the head on the rhythm, the title centred, the toggle line above it (yd-lang.js bilingual()) */
.shopify-policy__container { padding-top: 8px; }
.shopify-policy__title { margin: 0 0 12px; text-align: center; }
.shopify-policy__container .yd-lang-line { margin: 0 0 8px; }
/* Part10 smoothness: a band nobody can see does not animate (yd-marquee-clock.js toggles is-offscreen and re-phases on return) */
.yd-marquee.is-offscreen .yd-marquee__track, .yd-bw__band.is-offscreen .yd-bw__band-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .yd-whatsapp, .yd-back-to-top { transition-duration: 0s; } }
/* Part10 (Sawy 08:47): the 404's special-order door reads exactly as the empty states' (icon + words, one ghost pill) */
.yd-404__so { display: inline-flex; align-items: center; justify-content: center; gap: var(--yd-sp-2); }
.yd-404__so svg { width: 18px; height: 18px; flex: none; }

/* Part11 (THE AUDIT, F1): on the iPhone the hero's stage is sized so its buttons end at the first screen's floor, exactly where the WhatsApp bubble lives ("Special ord"). The bubble steps aside while the buttons row is on screen and returns the moment it scrolls away (yd-custom.js sets the class; the marquee under the hero says "Ask us on WhatsApp"). */
body.yd-hero-deck-in-view .yd-whatsapp { opacity: 0; pointer-events: none; }