/* =====================================================================================================
   Craftora storefront design system (M1) — one stylesheet, mobile-first, no framework.
   Sections: 1 fonts · 2 tokens · 3 base · 4 type · 5 layout · 6 buttons · 7 forms · 8 feedback · 9 surfaces
   10 commerce · 11 drawers/modals · 12 header · 13 mega menu · 14 mobile nav · 15 footer · 16 product card
   17 scroller · 18 home · 19 content pages · 20 error · 21 utilities/motion/print
   Other modules append their own delimited blocks AFTER the "end M1 core" marker (tokens only).
   ===================================================================================================== */

/* ---------------------------------------------------------------- 1. fonts (self-hosted, swap) */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 800;font-display:swap;src:url('../fonts/fraunces-latin-normal-500-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:500 700;font-display:swap;src:url('../fonts/fraunces-latin-italic-500-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/jakarta-latin-normal-400-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/jakarta-latin-ext-normal-400-800.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:400 600;font-display:swap;src:url('../fonts/jakarta-latin-italic-400-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:400 600;font-display:swap;src:url('../fonts/jakarta-latin-ext-italic-400-600.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------------------------------------- 2. design tokens */
:root{
  /* palette — warm paper, deep ink, berry signature, tangerine accent (WCAG AA checked) */
  --c-bg:#FFF8F0;            /* cream paper */
  --c-surface:#FFFFFF;
  --c-surface-2:#F7EFE4;     /* sand */
  --c-surface-3:#F1E6D8;
  --c-ink:#1D1530;           /* deep ink (16.9:1 on bg) */
  --c-ink-2:#5E556B;         /* muted text (6.9:1 on bg) */
  --c-ink-3:#6E6580;         /* hints, counts, small labels (5.2:1 on bg, 4.8:1 on surface-2) */
  --c-line:#EADFD2;
  --c-line-2:#DDCFBF;
  --c-brand:#C0266D;         /* berry (5.6:1 with white) */
  --c-brand-600:#A41D5C;
  --c-brand-700:#86174B;
  --c-brand-ink:#FFFFFF;
  --c-brand-soft:#FCE4EF;
  --c-accent:#FF8A3D;        /* tangerine — use with ink text */
  --c-accent-600:#E8701F;
  --c-accent-soft:#FFE9D6;
  --c-sun:#FFC83D;           /* stars, sparkles */
  --c-success:#15704B;       /* 5.2:1 on success-soft, 6:1 with white */
  --c-success-soft:#DDF3E8;
  --c-warning:#8A5000;       /* 5.8:1 on warning-soft */
  --c-warning-soft:#FFF1D1;
  --c-danger:#B02824;        /* 5.5:1 on danger-soft */
  --c-danger-soft:#FDE4E2;
  --c-info:#3559C7;
  --c-info-soft:#E3EAFF;
  --c-night:#1D1530;         /* dark sections */
  --c-night-2:#2A2042;
  /* pastel category tints */
  --tint-1:#FFE3D3; --tint-2:#D9F2E6; --tint-3:#E8E0FF; --tint-4:#DCEEFF;
  --tint-5:#FFF1C2; --tint-6:#FFE0EA; --tint-7:#E3EDD5; --tint-8:#F3E3FF;
  /* shape */
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --radius-pill:999px;
  /* shadows (layered, warm ink) */
  --shadow-sm:0 1px 2px rgba(29,21,48,.06),0 1px 3px rgba(29,21,48,.05);
  --shadow:0 2px 4px rgba(29,21,48,.04),0 10px 24px -8px rgba(29,21,48,.14);
  --shadow-lg:0 4px 10px rgba(29,21,48,.05),0 28px 56px -16px rgba(29,21,48,.26);
  --ring:0 0 0 3px rgba(192,38,109,.28);
  /* type */
  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem;
  /* layout */
  --container:1320px;
  --gutter:clamp(16px,4vw,32px);
  --gap:clamp(14px,2.2vw,24px);
  --section-y:clamp(40px,6vw,76px);
  --header-h:118px;          /* full sticky header height (bar + search row < 1024px); app.js sets the exact value */
  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.15s; --t:.25s; --t-slow:.5s;
}

/* ---------------------------------------------------------------- 3. base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--font-body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
main{flex:1 0 auto;display:block}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--c-brand)}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
p,ul,ol,dl,figure,blockquote{margin:0}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;line-height:1.2}
hr{border:0;border-top:1px solid var(--c-line);margin:24px 0}
table{border-collapse:collapse}
[hidden]{display:none!important}
::selection{background:var(--c-brand);color:#fff}
:focus{outline:none}
:focus-visible{outline:2.5px solid var(--c-brand);outline-offset:2px;border-radius:6px}
.icon{display:inline-block;width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.icon--sm{width:1em;height:1em}
.icon--lg{width:1.6em;height:1.6em}
.skip-link{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--c-ink);color:#fff;padding:10px 16px;border-radius:var(--radius-sm);font-weight:700;text-decoration:none;transition:top var(--t) var(--ease)}
.skip-link:focus{top:12px;color:#fff}

/* ---------------------------------------------------------------- 4. typography */
.h1,.h2,.h3,.page-title{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-optical-sizing:auto;color:var(--c-ink);text-wrap:balance}
.h1,.page-title{font-size:clamp(2rem,1.35rem + 2.9vw,3.5rem);line-height:1.06}
.h2{font-size:clamp(1.55rem,1.2rem + 1.5vw,2.35rem);line-height:1.12}
.h3{font-size:clamp(1.2rem,1.08rem + .5vw,1.45rem);line-height:1.25;letter-spacing:-.01em}
.h4{font-family:var(--font-body);font-size:1.075rem;font-weight:750;line-height:1.35;letter-spacing:-.005em}
.h1 em,.h2 em,.h3 em,.page-title em{font-style:italic;font-weight:600;color:var(--c-brand)}
.eyebrow{display:inline-flex;align-items:center;gap:.45em;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-brand)}
.eyebrow .icon{width:1.1em;height:1.1em}
.lead{font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);line-height:1.65;color:var(--c-ink-2)}
.muted{color:var(--c-ink-2)}
.small{font-size:var(--fs-sm);line-height:1.5}
.text-center{text-align:center}
.kbd{display:inline-block;min-width:1.6em;padding:.1em .45em;border:1px solid var(--c-line-2);border-bottom-width:2px;border-radius:6px;background:var(--c-surface);font:600 .8em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:center}
.page-header{padding-block:clamp(28px,5vw,56px) clamp(22px,4vw,40px);background:
  radial-gradient(600px 200px at 8% 0%,var(--c-brand-soft),transparent 70%),
  radial-gradient(500px 220px at 95% 10%,var(--c-accent-soft),transparent 70%),var(--c-bg);border-bottom:1px solid var(--c-line)}
.page-header .page-title{margin-top:.2em}
.page-header .lead,.page-header .muted{margin-top:.6em;max-width:62ch}
.page-header .breadcrumbs{margin-bottom:14px}

/* rich text (pages, descriptions) */
.prose{color:var(--c-ink);font-size:1.02rem;line-height:1.75;max-width:72ch}
.prose>*+*{margin-top:1.05em}
.prose h2{font-family:var(--font-display);font-size:clamp(1.35rem,1.2rem + .7vw,1.75rem);letter-spacing:-.015em;margin-top:1.8em;line-height:1.2}
.prose h3{font-size:1.18rem;margin-top:1.6em;line-height:1.3}
.prose h4,.prose h5{font-size:1.02rem;margin-top:1.4em}
.prose a{color:var(--c-brand);font-weight:600;text-decoration:underline;text-decoration-color:rgba(192,38,109,.35)}
.prose a:hover{text-decoration-color:currentColor}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose ul li::marker{color:var(--c-brand)}
.prose blockquote{border-left:4px solid var(--c-accent);background:var(--c-surface);padding:14px 18px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--c-ink-2)}
.prose img{border-radius:var(--radius)}
.prose table{width:100%;font-size:.95rem;display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--c-line);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--c-surface-2);font-weight:700}
.prose code{background:var(--c-surface-2);padding:.1em .35em;border-radius:6px;font-size:.9em}
.prose pre{background:var(--c-night);color:#F6EFFF;padding:16px;border-radius:var(--radius-sm);overflow-x:auto}
.prose pre code{background:none;padding:0}
.prose hr{margin:2em 0}
.prose strong{font-weight:750}

/* ---------------------------------------------------------------- 5. layout */
.container{width:100%;max-width:calc(var(--container) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:calc(820px + var(--gutter) * 2)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(24px,4vw,44px)}
.section + .section--flush,.section--flush + .section{padding-top:0}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px 20px;margin-bottom:clamp(18px,2.6vw,28px)}
.section-head__text{min-width:0;max-width:62ch}
.section-head__text .eyebrow{margin-bottom:.45em}
.section-head__sub{margin-top:.35em;color:var(--c-ink-2);max-width:62ch}
.section-head>.section-head__sub{grid-column:1/-1;margin-top:-6px}
.section-head__aside{display:flex;align-items:center;gap:10px;margin-left:auto}
.section-head--center{grid-template-columns:1fr;justify-items:center;text-align:center}
/* phones: the title gets the full width; the link / rating / arrows drop below it */
@media (max-width:639px){.section-head{grid-template-columns:minmax(0,1fr)}.section-head__aside{grid-row:3;margin-left:0;justify-content:space-between;flex-wrap:wrap;width:100%}.section-head>.section-head__sub{grid-row:2;margin-top:-4px}.section-head__aside:not(:has(.reviews-summary)){justify-content:flex-start}}
.section-head--center .section-head__text,.section-head--center .section-head__sub{margin-inline:auto}
.link-more{display:inline-flex;align-items:center;gap:.35em;font-weight:700;font-size:.95rem;color:var(--c-ink);text-decoration:none;white-space:nowrap;padding:6px 2px;border-bottom:2px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.link-more::after{content:"";width:.95em;height:.95em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--t) var(--ease)}
.link-more:hover{color:var(--c-brand);border-bottom-color:currentColor}
.link-more:hover::after{transform:translateX(3px)}
.stack{display:flex;flex-direction:column;gap:var(--stack-gap,16px)}
.stack--sm{--stack-gap:8px}
.stack--lg{--stack-gap:28px}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cluster-gap,10px)}
.grid-2,.grid-3{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,2vw,22px)}
@media (min-width:640px){.grid-products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.grid-products{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1400px){.grid-products{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* --fill grids show only complete rows: 6 cards (2 cols) · 9 (3) · 8 (4) · 10 (5) */
.grid-products--fill>:nth-child(n+7){display:none}
@media (min-width:640px){.grid-products--fill>:nth-child(-n+9){display:flex}.grid-products--fill>:nth-child(n+10){display:none}}
@media (min-width:1024px){.grid-products--fill>:nth-child(n+9){display:none}}
@media (min-width:1400px){.grid-products--fill>:nth-child(-n+10){display:flex}}
.sidebar-layout .grid-products{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.sidebar-layout .grid-products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1400px){.sidebar-layout .grid-products{grid-template-columns:repeat(4,minmax(0,1fr))}}
.split{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}.split--wide-left{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.split--wide-right{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}}
.sidebar-layout{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:1fr;align-items:start}
.sidebar-layout>.sidebar,.sidebar-layout>.main{min-width:0}
@media (min-width:1024px){.sidebar-layout{grid-template-columns:272px minmax(0,1fr)}.sidebar-layout>.sidebar{position:sticky;top:calc(var(--header-h) + 20px);max-height:calc(100vh - var(--header-h) - 40px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}}

/* ---------------------------------------------------------------- 6. buttons */
.btn{--btn-bg:var(--c-surface);--btn-fg:var(--c-ink);--btn-bd:var(--c-line-2);--btn-bg-h:var(--c-surface-2);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.62em 1.25em;
  border:1.5px solid var(--btn-bd);border-radius:var(--radius-pill);background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-body);font-size:.95rem;font-weight:700;line-height:1.2;letter-spacing:-.005em;text-align:center;text-decoration:none;white-space:nowrap;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease)}
.btn:hover{background:var(--btn-bg-h);color:var(--btn-fg)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2.5px solid var(--c-brand);outline-offset:2px}
/* on dark surfaces the focus ring turns white (berry on night is too faint) */
.announcement :focus-visible,.site-footer :focus-visible,.membership-band :focus-visible,.member :focus-visible,.mnav__cta :focus-visible,.hero-slider :focus-visible,.promo--image:focus-visible,.toast :focus-visible{outline-color:#fff}
.member .plan :focus-visible{outline-color:var(--c-brand)}
.btn .icon{width:1.15em;height:1.15em}
.btn--primary{--btn-bg:var(--c-brand);--btn-fg:var(--c-brand-ink);--btn-bd:var(--c-brand);--btn-bg-h:var(--c-brand-600);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 6px 16px -6px rgba(192,38,109,.55)}
.btn--primary:hover{--btn-bd:var(--c-brand-600);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 22px -8px rgba(192,38,109,.6)}
.btn--secondary{--btn-bg:var(--c-surface);--btn-fg:var(--c-ink);--btn-bd:var(--c-ink);--btn-bg-h:var(--c-ink)}
.btn--secondary:hover{--btn-fg:#fff}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--c-ink);--btn-bd:transparent;--btn-bg-h:rgba(29,21,48,.06)}
.btn--danger{--btn-bg:var(--c-danger);--btn-fg:#fff;--btn-bd:var(--c-danger);--btn-bg-h:#8E1F1C}
.btn--dark{--btn-bg:var(--c-ink);--btn-fg:#fff;--btn-bd:var(--c-ink);--btn-bg-h:#352a4f}
.btn--accent{--btn-bg:var(--c-accent);--btn-fg:var(--c-ink);--btn-bd:var(--c-accent);--btn-bg-h:#FF9D5C;box-shadow:0 8px 20px -8px rgba(255,138,61,.7)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--c-ink);--btn-bd:#fff;--btn-bg-h:var(--c-bg)}
.btn--lg{min-height:54px;padding:.8em 1.7em;font-size:1.02rem}
.btn--sm{min-height:36px;padding:.42em .95em;font-size:.85rem}
.btn--block{display:flex;width:100%}
.btn--icon{width:44px;min-width:44px;padding:0;border-radius:50%}
.btn--icon.btn--sm{width:36px;min-width:36px}
.btn[disabled],.btn.is-disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none;box-shadow:none}
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading>*{visibility:hidden}
.btn.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:1.15em;height:1.15em;border-radius:50%;border:2.5px solid var(--btn-fg);border-right-color:transparent;animation:spin .7s linear infinite;visibility:visible}
/* add-to-cart morph: [data-add-to-cart] buttons get .is-added from cart.js */
.btn__idle,.btn__done{display:inline-flex;align-items:center;justify-content:center;gap:.45em}
.btn .btn__done{display:none}
.btn.is-added{--btn-bg:var(--c-success);--btn-bd:var(--c-success);--btn-fg:#fff;--btn-bg-h:var(--c-success);animation:pop .4s var(--ease-bounce)}
.btn.is-added .btn__idle{display:none}
.btn.is-added .btn__done{display:inline-flex;align-items:center;gap:.4em}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---------------------------------------------------------------- 7. forms */
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.label{font-size:.9rem;font-weight:700;color:var(--c-ink)}
.label .muted,.label small{font-weight:500}
.input,.select,.textarea{width:100%;min-height:48px;padding:.7em 1em;border:1.5px solid var(--c-line-2);border-radius:var(--radius-sm);background:var(--c-surface);color:var(--c-ink);font-size:1rem;line-height:1.4;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);appearance:none;-webkit-appearance:none}
.input::placeholder,.textarea::placeholder{color:var(--c-ink-3)}
.input:hover,.select:hover,.textarea:hover{border-color:#C9B8A6}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--c-brand);box-shadow:var(--ring)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"],.field.has-error .input,.field.has-error .textarea,.field.has-error .select{border-color:var(--c-danger);box-shadow:0 0 0 3px rgba(201,48,44,.14)}
.input[disabled],.select[disabled],.textarea[disabled]{background:var(--c-surface-2);color:var(--c-ink-2);cursor:not-allowed}
.textarea{min-height:140px;resize:vertical}
.select{padding-right:2.6em;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1530' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85em center;background-size:1.1em}
.select--sm,.input--sm{min-height:38px;padding-block:.4em;font-size:.9rem}
.field-error{display:flex;align-items:flex-start;gap:.35em;color:var(--c-danger);font-size:.85rem;font-weight:600;line-height:1.4}
.field-hint{color:var(--c-ink-2);font-size:.83rem;line-height:1.45}
.checkbox,.radio{display:inline-flex;align-items:flex-start;gap:.65em;cursor:pointer;font-size:.95rem;line-height:1.45;min-height:24px}
.checkbox input,.radio input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:.1em 0 0;border:1.5px solid var(--c-line-2);background:var(--c-surface);border-radius:6px;display:grid;place-content:center;cursor:pointer;transition:background-color var(--t-fast),border-color var(--t-fast)}
.radio input{border-radius:50%}
.checkbox input::before{content:"";width:12px;height:12px;background:#fff;transform:scale(0);transition:transform var(--t-fast) var(--ease-bounce);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.radio input::before{content:"";width:10px;height:10px;border-radius:50%;background:#fff;transform:scale(0);transition:transform var(--t-fast) var(--ease-bounce)}
.checkbox input:checked,.radio input:checked{background:var(--c-brand);border-color:var(--c-brand)}
.checkbox input:checked::before,.radio input:checked::before{transform:scale(1)}
.checkbox input:focus-visible,.radio input:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px;box-shadow:var(--ring)}
.input-group{display:flex;align-items:stretch;gap:0;border-radius:var(--radius-pill);background:var(--c-surface);border:1.5px solid var(--c-line-2);padding:4px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.input-group:focus-within{border-color:var(--c-brand);box-shadow:var(--ring)}
.input-group .input{border:0;box-shadow:none;background:transparent;min-height:42px;border-radius:var(--radius-pill);flex:1;min-width:0;padding-inline:1em}
.input-group .input:focus{box-shadow:none}
.input-group .btn{flex:none;min-height:42px}
.form-row{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:640px){.form-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;font-weight:700}

/* ---------------------------------------------------------------- 8. feedback */
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-sm);border:1px solid;font-size:.95rem;line-height:1.5;background:var(--c-surface)}
.alert>.icon{margin-top:.1em;width:1.3em;height:1.3em}
.alert a{font-weight:700}
.alert--success{background:var(--c-success-soft);border-color:#B6E3CC;color:#11573A}
.alert--error{background:var(--c-danger-soft);border-color:#F6C3BF;color:#8E1F1C}
.alert--info{background:var(--c-info-soft);border-color:#C6D3FB;color:#23408F}
.alert--warning{background:var(--c-warning-soft);border-color:#F7DC9C;color:#6E4100}
.badge{display:inline-flex;align-items:center;gap:.3em;padding:.3em .7em;border-radius:var(--radius-pill);font-size:.72rem;font-weight:800;letter-spacing:.03em;line-height:1.1;text-transform:uppercase;background:var(--c-surface-2);color:var(--c-ink);white-space:nowrap}
.badge .icon{width:1.05em;height:1.05em}
.badge--sale{background:var(--c-brand);color:#fff}
.badge--new{background:var(--c-sun);color:var(--c-ink)}
.badge--best{background:var(--c-ink);color:#fff}
.badge--free{background:var(--c-success);color:#fff}
.badge--muted{background:var(--c-surface-2);color:var(--c-ink-2)}
.badge--member{background:linear-gradient(135deg,var(--c-brand),#8D2BD1);color:#fff}
.chip{display:inline-flex;align-items:center;gap:.4em;min-height:36px;padding:.4em .95em;border:1.5px solid var(--c-line-2);border-radius:var(--radius-pill);background:var(--c-surface);color:var(--c-ink);font-size:.88rem;font-weight:650;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color var(--t-fast),background-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.chip:hover{border-color:var(--c-ink);color:var(--c-ink)}
.chip.is-active,.chip[aria-pressed="true"],.chip[aria-current="page"]{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.chip .count,.chip small{font-weight:600;opacity:.65;font-size:.85em}
.chip .icon{width:1.05em;height:1.05em}
.toast-stack{position:fixed;z-index:1200;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;transform:translateX(-50%);width:min(440px,calc(100vw - 24px));display:flex;flex-direction:column;gap:10px;pointer-events:none}
@media (min-width:768px){.toast-stack{left:auto;right:20px;transform:none;top:calc(env(safe-area-inset-top,0px) + 20px)}}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;padding:13px 14px 13px 16px;border-radius:var(--radius);background:var(--c-night);color:#fff;box-shadow:var(--shadow-lg);font-size:.93rem;font-weight:600;line-height:1.45;animation:toast-in .35s var(--ease) both}
.toast__icon{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--c-success);color:#fff}
.toast__icon .icon{width:15px;height:15px;stroke-width:2.6}
.toast--error .toast__icon{background:var(--c-danger)}
.toast--info .toast__icon{background:var(--c-info)}
.toast--warning .toast__icon{background:var(--c-accent);color:var(--c-ink)}
.toast__msg{flex:1;min-width:0;padding-top:2px}
.toast__msg a{color:#FFC2DD}
.toast__close{flex:none;display:grid;place-items:center;width:28px;height:28px;margin:-2px -4px 0 0;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.7)}
.toast__close:hover{background:rgba(255,255,255,.12);color:#fff}
.toast.is-leaving{animation:toast-out .3s var(--ease) forwards}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:clamp(32px,6vw,64px) 20px;max-width:520px;margin-inline:auto}
.empty-state__icon{display:grid;place-items:center;width:84px;height:84px;margin-bottom:8px;border-radius:30% 70% 62% 38%/42% 38% 62% 58%;background:var(--c-brand-soft);color:var(--c-brand)}
.empty-state__icon .icon{width:36px;height:36px;stroke-width:1.6}
.empty-state .h3,.empty-state .h4{margin-top:4px}
.empty-state p{color:var(--c-ink-2)}
.empty-state .btn-row,.empty-state .cluster{justify-content:center;margin-top:10px}
.skeleton{position:relative;overflow:hidden;background:var(--c-surface-2);border-radius:var(--radius-sm);min-height:1em}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.4s infinite}
.skeleton-card{display:flex;flex-direction:column;gap:10px;padding:6px 6px 14px;border-radius:var(--radius);background:var(--c-surface);border:1px solid var(--c-line)}
.skeleton-card .skeleton:first-child{aspect-ratio:1;border-radius:calc(var(--radius) - 4px)}
.skeleton-card .skeleton:not(:first-child){height:12px;margin-inline:8px;border-radius:6px}
.skeleton-card .skeleton:nth-child(3){width:60%}
.spinner{display:inline-block;width:22px;height:22px;border-radius:50%;border:2.5px solid var(--c-line-2);border-top-color:var(--c-brand);animation:spin .7s linear infinite;vertical-align:middle}
.spinner--lg{width:40px;height:40px;border-width:3.5px}

/* ---------------------------------------------------------------- 9. surfaces */
.card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.card-body{padding:clamp(16px,2.4vw,24px)}
.card--hover{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.panel{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:clamp(16px,2.4vw,24px)}
.panel--soft{background:var(--c-surface-2);border-color:transparent}
.divider{height:1px;background:var(--c-line);border:0;margin:20px 0}
.divider--text{display:flex;align-items:center;gap:12px;height:auto;background:none;color:var(--c-ink-2);font-size:.85rem;font-weight:600}
.divider--text::before,.divider--text::after{content:"";flex:1;height:1px;background:var(--c-line)}

/* ---------------------------------------------------------------- 10. commerce */
.price{font-weight:800;font-size:1.05rem;color:var(--c-ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.price--free{color:var(--c-success)}
.price--lg{font-size:1.6rem}
.price-compare{color:var(--c-ink-2);text-decoration:line-through;text-decoration-thickness:1.5px;font-size:.9em;font-weight:500;margin-left:.35em;font-variant-numeric:tabular-nums}
.price-save{display:inline-flex;align-items:center;margin-left:.45em;padding:.15em .5em;border-radius:var(--radius-pill);background:var(--c-brand-soft);color:var(--c-brand-700);font-size:.75rem;font-weight:800;vertical-align:.12em}
.price-wrap{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0}
.stars{--size:15px;--rating:0;display:inline-block;flex:none;width:calc(var(--size) * 5);height:var(--size);vertical-align:-2px;
  background:linear-gradient(90deg,var(--c-sun) calc(var(--rating) / 5 * 100%),#E6DACB calc(var(--rating) / 5 * 100%));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E") 0 0/var(--size) var(--size) repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E") 0 0/var(--size) var(--size) repeat-x}
.stars--sm{--size:13px}
.stars--lg{--size:20px}
.rating{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--c-ink-2);font-weight:600}
.rating strong{color:var(--c-ink)}
.qty-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-pill);background:var(--c-ink);color:#fff;font-size:.72rem;font-weight:800;line-height:1}
.qty-badge.is-empty{display:none}
.summary{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:clamp(16px,2.4vw,24px);display:flex;flex-direction:column;gap:10px}
.summary-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.95rem;color:var(--c-ink-2)}
.summary-row>:last-child{color:var(--c-ink);font-weight:650;font-variant-numeric:tabular-nums}
.summary-total{padding-top:12px;margin-top:4px;border-top:1px dashed var(--c-line-2);font-size:1.12rem;font-weight:800;color:var(--c-ink)}
.summary-total>:last-child{font-weight:800}
.line-item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--c-line)}
.line-item img{width:72px;height:72px;object-fit:cover;border-radius:12px;background:var(--c-surface-2)}
.line-item__title{font-weight:700;line-height:1.35;text-decoration:none}
.line-item__meta{font-size:.82rem;color:var(--c-ink-2)}
.trust-list{display:flex;flex-direction:column;gap:12px;list-style:none;padding:0}
.trust-list li{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;line-height:1.45;color:var(--c-ink-2)}
.trust-list li>.icon{flex:none;width:22px;height:22px;color:var(--c-brand);margin-top:1px}
.trust-list strong{color:var(--c-ink);display:block}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--c-line);margin-bottom:20px}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:none;display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:.5em 1em;border:0;background:none;color:var(--c-ink-2);font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap;cursor:pointer}
.tab::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--c-brand);transform:scaleX(0);transition:transform var(--t) var(--ease)}
.tab:hover{color:var(--c-ink)}
.tab.is-active,.tab[aria-selected="true"]{color:var(--c-ink)}
.tab.is-active::after,.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tab-panel[hidden]{display:none}
.accordion{border-bottom:1px solid var(--c-line)}
.accordion>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 2px;font-weight:700;font-size:1.02rem;line-height:1.4;cursor:pointer;list-style:none}
.accordion>summary::-webkit-details-marker{display:none}
.accordion>summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--c-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1530' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/15px no-repeat;transition:transform var(--t) var(--ease),background-color var(--t)}
.accordion[open]>summary::after{transform:rotate(45deg);background-color:var(--c-brand-soft)}
.accordion>summary:hover{color:var(--c-brand)}
.accordion__body,.accordion>div{padding:0 2px 18px;color:var(--c-ink-2);line-height:1.7}
.accordion__body>*+*{margin-top:.8em}
.breadcrumbs{font-size:.85rem;color:var(--c-ink-2);min-width:0}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 2px;list-style:none;padding:0;margin:0}
.breadcrumbs li{display:inline-flex;align-items:center;min-width:0}
.breadcrumbs li+li::before{content:"";width:14px;height:14px;margin:0 4px;flex:none;background:var(--c-ink-3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.breadcrumbs a{color:var(--c-ink-2);text-decoration:none;padding:4px 0}
.breadcrumbs a:hover{color:var(--c-brand);text-decoration:underline}
.breadcrumbs [aria-current]{color:var(--c-ink);font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:28ch}
/* phones: one tidy line that scrolls sideways instead of wrapping a lone chevron onto a second line */
@media (max-width:639px){.breadcrumbs ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);padding-right:20px}.breadcrumbs ol::-webkit-scrollbar{display:none}.breadcrumbs li{flex:none}.breadcrumbs [aria-current]{max-width:22ch}}
.pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:clamp(28px,4vw,48px)}
.pagination a,.pagination span{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border-radius:var(--radius-pill);font-weight:700;font-size:.95rem;text-decoration:none;color:var(--c-ink);font-variant-numeric:tabular-nums}
.pagination a{background:var(--c-surface);border:1.5px solid var(--c-line)}
.pagination a:hover{border-color:var(--c-ink);color:var(--c-ink)}
.pagination .is-current,.pagination [aria-current="page"]{background:var(--c-ink);color:#fff;border:1.5px solid var(--c-ink)}
.pagination__gap{min-width:24px!important;padding:0!important;color:var(--c-ink-3)!important}
.pagination__prev,.pagination__next{gap:6px;display:inline-flex!important;align-items:center}
.pagination .is-disabled{opacity:.4;pointer-events:none;border:1.5px solid var(--c-line)}
@media (max-width:520px){.pagination__label{display:none}.pagination a,.pagination span{min-width:40px;height:40px;padding:0 8px}}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--c-line)}
.toolbar .select{width:auto;min-width:190px}
.toolbar__count{color:var(--c-ink-2);font-size:.92rem}
.toolbar__count strong{color:var(--c-ink)}
.filters{display:flex;flex-direction:column;gap:6px}
.filter-group{padding:14px 0;border-bottom:1px solid var(--c-line)}
.filter-group:last-child{border-bottom:0}
.filter-group__title,.filter-group>h3,.filter-group>summary{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink);margin-bottom:10px;cursor:pointer;list-style:none}
.filter-group>summary::-webkit-details-marker{display:none}
.filter-group ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:4px}
.filter-group a{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;margin-inline:-8px;border-radius:8px;text-decoration:none;font-size:.92rem;color:var(--c-ink)}
.filter-group a:hover{background:var(--c-surface-2);color:var(--c-ink)}
.filter-group a.is-active{background:var(--c-brand-soft);color:var(--c-brand-700);font-weight:700}
.filter-group .count{color:var(--c-ink-3);font-size:.82rem;font-variant-numeric:tabular-nums}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-surface)}
.table{width:100%;font-size:.93rem}
.table th,.table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--c-line);vertical-align:middle}
.table th{font-size:.75rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--c-ink-2);background:var(--c-surface-2);white-space:nowrap}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:#FFFCF8}

/* ---------------------------------------------------------------- 11. drawers & modals */
.drawer{position:fixed;z-index:1001;top:0;bottom:0;right:0;width:min(440px,94vw);display:flex;flex-direction:column;background:var(--c-surface);box-shadow:var(--shadow-lg);
  transform:translateX(104%);visibility:hidden;transition:transform .38s var(--ease),visibility 0s linear .38s;overscroll-behavior:contain;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.is-open{transform:none;visibility:visible;transition:transform .38s var(--ease),visibility 0s}
/* no-JS fallback: the header menu link targets #mobile-nav */
html:not(.js) .drawer:target{transform:none;visibility:visible;transition:none}
.drawer--left{right:auto;left:0;transform:translateX(-104%);border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.drawer:not(.drawer--left){border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 14px 20px;border-bottom:1px solid var(--c-line)}
.drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.drawer__foot{padding:16px 20px;border-top:1px solid var(--c-line)}
#cart-drawer-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
#cart-drawer-body:empty{align-items:center;justify-content:center}
#cart-drawer-body:empty::before{content:"";width:28px;height:28px;border-radius:50%;border:3px solid var(--c-line-2);border-top-color:var(--c-brand);animation:spin .7s linear infinite}
.drawer-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(29,21,48,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.drawer-backdrop.is-open{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
html.is-locked,html.is-locked body{overflow:hidden}
.modal{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:16px;background:rgba(29,21,48,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s linear .25s}
.modal.is-open{opacity:1;visibility:visible;transition:opacity .25s var(--ease),visibility 0s}
.modal__dialog{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--c-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:clamp(20px,4vw,32px);transform:translateY(16px) scale(.98);transition:transform .3s var(--ease)}
.modal.is-open .modal__dialog{transform:none}
.modal__close{position:absolute;top:12px;right:12px}
@media (max-width:639px){.modal{align-items:end;padding:0}.modal__dialog{width:100%;border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:92vh;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}}

/* ---------------------------------------------------------------- 12. announcement + header */
.announcement{position:relative;background:var(--c-night);color:#FFF4EA;font-size:.84rem;font-weight:600;line-height:1.35;z-index:2}
.announcement__inner{display:flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding-block:7px;padding-right:44px;text-align:center}
.announcement__text{display:block;text-wrap:balance}
.announcement__text .icon{color:var(--c-accent);width:15px;height:15px;vertical-align:-2px;margin-right:6px}
.announcement__text a{margin-left:6px;white-space:nowrap}
@media (max-width:639px){.announcement{font-size:.78rem}.announcement__inner{min-height:36px;padding-left:4px}}
.announcement a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);font-weight:800}
.announcement a:hover{color:var(--c-accent)}
.announcement__close{position:absolute;right:max(8px,calc(var(--gutter) - 12px));top:50%;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.75)}
.announcement__close:hover{background:rgba(255,255,255,.12);color:#fff}

.site-header{position:sticky;top:0;z-index:900;background:rgba(255,248,240,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:transform .35s var(--ease),box-shadow var(--t) var(--ease),border-color var(--t),background-color var(--t)}
.site-header.is-scrolled{border-bottom-color:var(--c-line);box-shadow:0 8px 24px -18px rgba(29,21,48,.35);background:rgba(255,248,240,.94)}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header__bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"menu logo actions" "search search search";align-items:center;column-gap:6px;row-gap:8px;padding-block:8px 10px;transition:padding var(--t) var(--ease)}
.site-header__menu{grid-area:menu;margin-left:-8px}
.logo{grid-area:logo;display:inline-flex;align-items:center;gap:9px;min-width:0;text-decoration:none;color:var(--c-ink);justify-self:start}
.logo:hover{color:var(--c-ink)}
.logo__mark{flex:none;width:34px;height:34px;transition:transform .5s var(--ease-bounce)}
.logo:hover .logo__mark{transform:rotate(-8deg) scale(1.06)}
.logo__text{font-family:var(--font-display);font-weight:750;font-size:1.42rem;letter-spacing:-.03em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo__img{height:36px;width:auto;max-width:180px;object-fit:contain}
.header-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;gap:2px}
.header-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 10px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--c-ink);text-decoration:none;font-weight:700;font-size:.9rem;transition:background-color var(--t-fast),color var(--t-fast)}
.header-icon:hover{background:rgba(29,21,48,.06);color:var(--c-ink)}
.header-icon .icon{width:24px;height:24px}
.header-icon__label{display:none}
.header-icon--account{display:none}
@media (min-width:768px){.header-icon--account{display:inline-flex}}
.count-badge{position:absolute;top:3px;right:1px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:var(--radius-pill);background:var(--c-brand);color:#fff;font-size:.68rem;font-weight:800;line-height:1;border:2px solid var(--c-bg);font-variant-numeric:tabular-nums;transition:transform var(--t) var(--ease-bounce)}
.count-badge:empty,.count-badge.is-empty{display:none}
.count-badge.m4-bump,.count-badge.is-bump{animation:pop .45s var(--ease-bounce)}
.header-cta{padding-inline:.95em;min-height:38px;font-size:.84rem;margin-right:4px}
.header-cta .header-cta__long{display:none}
.member-pill{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px 0 8px;margin-right:4px;border-radius:var(--radius-pill);background:linear-gradient(135deg,#FCE4EF,#EFE3FF);color:var(--c-brand-700);font-size:.8rem;font-weight:800;text-decoration:none;white-space:nowrap}
.member-pill .icon{width:18px;height:18px;color:var(--c-brand)}
.member-pill:hover{color:var(--c-brand-700);box-shadow:0 0 0 2px var(--c-brand-soft)}
.site-search{grid-area:search;position:relative;display:flex;align-items:center;min-width:0}
.site-search__field{position:relative;display:flex;align-items:center;width:100%;height:46px;border:1.5px solid var(--c-line-2);border-radius:var(--radius-pill);background:var(--c-surface);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.site-search__field:focus-within{border-color:var(--c-brand);box-shadow:var(--ring)}
.site-search__icon{position:absolute;left:15px;width:20px;height:20px;color:var(--c-ink-2);pointer-events:none}
.site-search input{flex:1;min-width:0;height:100%;padding:0 12px 0 44px;border:0;background:transparent;font-size:16px;outline:none;border-radius:var(--radius-pill);-webkit-appearance:none;appearance:none}
.site-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.site-search input::placeholder{color:var(--c-ink-3)}
.site-search__submit{flex:none;height:36px;margin-right:4px;padding:0 16px;border:0;border-radius:var(--radius-pill);background:var(--c-ink);color:#fff;font-weight:700;font-size:.85rem;display:none}
.site-search__submit:hover{background:var(--c-brand)}
#search-suggest{position:absolute;z-index:950;top:calc(100% + 8px);left:0;right:0;max-height:min(70vh,640px);overflow:auto;overscroll-behavior:contain;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
@media (min-width:480px){.header-cta .header-cta__short{display:none}.header-cta .header-cta__long{display:inline}}
@media (max-width:379px){.header-actions:has(.header-icon--cart:not([hidden])) .header-icon--wish{display:none}.logo__text{font-size:1.25rem}.header-cta{padding-inline:.8em}}
@media (min-width:1024px){
  :root{--header-h:128px}   /* bar + department nav */
  .site-header__bar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo search actions";column-gap:clamp(18px,2.4vw,36px);padding-block:14px}
  .site-header.is-scrolled .site-header__bar{padding-block:10px}
  .site-header__menu{display:none}
  .logo__mark{width:38px;height:38px}
  .logo__text{font-size:1.6rem}
  .site-search{max-width:680px;width:100%;justify-self:center}
  .site-search__field{height:50px}
  .site-search__submit{display:inline-block}
  .header-icon__label{display:inline}
  .header-icon--wish .header-icon__label,.header-icon--cart .header-icon__label{display:none}
  .header-cta{min-height:42px;font-size:.9rem;padding-inline:1.2em;margin-right:8px}
  .count-badge{border-color:var(--c-bg)}
}

/* ---------------------------------------------------------------- 13. main nav + mega menu (desktop) */
.site-nav{display:none}
@media (min-width:1024px){
  .site-nav{display:block;position:relative;border-top:1px solid rgba(234,223,210,.7)}
  .site-nav::after{content:"";position:absolute;top:1px;bottom:0;right:0;width:120px;background:linear-gradient(90deg,rgba(255,248,240,0),rgba(255,248,240,.96) 55%);pointer-events:none;opacity:0;transition:opacity var(--t)}
  .site-nav.is-overflowing:not(.is-end)::after{opacity:1}
  .site-nav__more{position:absolute;z-index:2;right:max(12px,calc((100vw - var(--container)) / 2 - 20px));top:50%;transform:translateY(-50%);display:none;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--c-line-2);background:var(--c-surface);color:var(--c-ink);box-shadow:var(--shadow-sm)}
  .site-nav__more:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
  .site-nav__more .icon{width:18px;height:18px}
  .site-nav.is-overflowing .site-nav__more{display:grid}
  .site-nav.is-end .site-nav__more{transform:translateY(-50%) rotate(180deg)}
  .mainnav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
  .site-nav.is-overflowing .mainnav__list{padding-right:56px}
  .mainnav__list::-webkit-scrollbar{display:none}
  .mainnav__item{flex:none}
  .mainnav__link{position:relative;display:inline-flex;align-items:center;gap:5px;height:48px;padding:0 12px;color:var(--c-ink);font-size:.9rem;font-weight:700;text-decoration:none;white-space:nowrap;border-radius:10px;letter-spacing:-.005em}
  .mainnav__link .icon{width:15px;height:15px;color:var(--c-ink-3);transition:transform var(--t) var(--ease)}
  .mainnav__link::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2.5px;border-radius:2px;background:var(--c-brand);transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
  .mainnav__link:hover,.mainnav__item.is-open>.mainnav__link,.mainnav__link[aria-current="page"]{color:var(--c-brand)}
  .mainnav__item.is-open>.mainnav__link::after,.mainnav__link:hover::after,.mainnav__link[aria-current="page"]::after{transform:scaleX(1)}
  .mainnav__item.is-open>.mainnav__link .icon{transform:rotate(180deg);color:var(--c-brand)}
  .mainnav__link--free{color:var(--c-success)}
  .mainnav__link--free .icon{color:var(--c-success)}
  .mainnav__link--pricing,.mainnav__link--pricing .icon{color:var(--c-brand)}
  .mainnav__link--pricing .icon{width:16px;height:16px}
  .mainnav__item--more>.mainnav__link{color:var(--c-ink-2)}
  .mega--more .mega__inner{grid-template-columns:minmax(0,1fr)}
  .mega-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px 24px;list-style:none;margin:0;padding:0}
  .mega-more__head{display:flex;align-items:center;gap:12px;padding:8px;margin:-8px -8px 4px;border-radius:14px;color:var(--c-ink);text-decoration:none}
  .mega-more__head:hover{background:var(--c-surface-2);color:var(--c-brand)}
  .mega-more__head strong{display:block;font-family:var(--font-display);font-size:1.08rem;letter-spacing:-.01em;line-height:1.2}
  .mega-more__head small{display:block;font-size:.78rem;font-weight:600;color:var(--c-ink-2)}
  .mega-more__ico{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;background:var(--tint,var(--tint-1));color:var(--c-ink)}
  .mega-more__ico .icon{width:21px;height:21px}
  .mega-more__cats{list-style:none;margin:0 0 0 54px;padding:0}
  .mega-more__cats a{display:block;padding:4px 0;font-size:.9rem;font-weight:550;color:var(--c-ink-2);text-decoration:none}
  .mega-more__cats a:hover{color:var(--c-brand);text-decoration:underline}
  .mainnav__sep{flex:none;width:1px;height:22px;background:var(--c-line-2);margin:0 6px}
  .mega{position:absolute;left:0;right:0;top:100%;z-index:940;background:var(--c-surface);border-top:1px solid var(--c-line);box-shadow:0 30px 60px -30px rgba(29,21,48,.35);
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .25s var(--ease),visibility 0s linear .25s}
  .mainnav__item.is-open>.mega{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease),transform .25s var(--ease),visibility 0s}
  .mega__inner{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;padding-block:28px 32px;max-height:calc(100vh - 160px);overflow:auto}
  .mega__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--c-line)}
  .mega__title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
  .mega__title small{font-family:var(--font-body);font-size:.85rem;font-weight:600;color:var(--c-ink-2);margin-left:10px;letter-spacing:0}
  .mega__cols{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,240px));gap:8px 32px}
  .mega__range{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-3);margin-bottom:6px;padding-left:10px}
  .mega__list{list-style:none;padding:0;margin:0}
  .mega__list a{display:flex;align-items:baseline;justify-content:flex-start;gap:8px;max-width:280px;padding:6px 10px;border-radius:9px;color:var(--c-ink);font-size:.92rem;font-weight:550;text-decoration:none;line-height:1.35}
  .mega__list a:hover{background:var(--c-surface-2);color:var(--c-brand)}
  .mega__list .count{margin-left:auto;font-size:.75rem;color:var(--c-ink-2);font-weight:600;font-variant-numeric:tabular-nums}
  .mega__promo{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:var(--radius-lg);background:var(--tint,var(--tint-6));overflow:hidden;isolation:isolate}
  .mega__promo::before{content:"";position:absolute;z-index:-1;width:220px;height:220px;right:-70px;top:-80px;border-radius:50%;background:rgba(255,255,255,.45)}
  .mega__promo-media{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .mega__promo-media img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
  .mega__promo-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:#fff;color:var(--c-brand);box-shadow:var(--shadow-sm)}
  .mega__promo-icon .icon{width:30px;height:30px}
  .mega__promo-title{font-family:var(--font-display);font-weight:700;font-size:1.25rem;line-height:1.2;letter-spacing:-.015em}
  .mega__promo-links{display:flex;flex-wrap:wrap;gap:6px}
  .mega__promo-links .chip{background:rgba(255,255,255,.75);border-color:transparent;min-height:32px;font-size:.8rem}
  .mega__promo-links .chip:hover{background:#fff;border-color:var(--c-ink)}
  .mega--themes .mega__inner{grid-template-columns:minmax(0,1fr) 300px}
  .theme-chips{display:flex;flex-wrap:wrap;gap:8px}
  .theme-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:5px 14px 5px 5px;border-radius:var(--radius-pill);background:var(--tint,var(--tint-1));color:var(--c-ink);text-decoration:none;font-weight:700;font-size:.88rem;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast)}
  .theme-chip:hover{color:var(--c-ink);transform:translateY(-2px);box-shadow:var(--shadow)}
  .theme-chip img,.theme-chip__dot{width:30px;height:30px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.7);flex:none;display:grid;place-items:center;font-size:.8rem}
  .theme-chip .count{font-weight:600;font-size:.75rem;color:var(--c-ink-2)}
}

/* ---------------------------------------------------------------- 14. mobile nav drawer */
.mobile-nav{width:min(400px,90vw)}
.mobile-nav .drawer__head .logo__text{font-size:1.25rem}
.mnav{padding:8px 0 24px}
.mnav__cta{margin:12px 16px 8px;padding:18px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--c-night),#43285E);color:#fff}
.mnav__cta p{font-size:.85rem;color:rgba(255,255,255,.8);margin:4px 0 12px}
.mnav__cta strong{font-family:var(--font-display);font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.mnav__section{padding:10px 8px}
.mnav__label{padding:8px 12px;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-3)}
.mnav__list{list-style:none;padding:0;margin:0}
.mnav__link,.mnav__group>summary{display:flex;align-items:center;gap:12px;min-height:50px;padding:6px 12px;border-radius:12px;color:var(--c-ink);font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;list-style:none}
.mnav__group>summary::-webkit-details-marker{display:none}
.mnav__link:hover,.mnav__group>summary:hover{background:var(--c-surface-2);color:var(--c-ink)}
.mnav__ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;background:var(--tint,var(--tint-1));color:var(--c-ink)}
.mnav__ico .icon{width:19px;height:19px}
.mnav__group>summary .mnav__chev{margin-left:auto;width:18px;height:18px;color:var(--c-ink-3);transition:transform var(--t) var(--ease)}
.mnav__group[open]>summary .mnav__chev{transform:rotate(180deg)}
.mnav__group[open]>summary{background:var(--c-surface-2)}
.mnav__sub{list-style:none;margin:4px 0 8px 30px;padding:2px 0 2px 16px;border-left:2px solid var(--c-line)}
.mnav__sub a{display:flex;justify-content:space-between;gap:10px;min-height:42px;align-items:center;padding:4px 12px;border-radius:10px;color:var(--c-ink);text-decoration:none;font-size:.95rem;font-weight:550}
.mnav__sub a:hover{background:var(--c-surface-2)}
.mnav__sub .count{font-size:.78rem;color:var(--c-ink-3)}
.mnav__sub .mnav__all{font-weight:800;color:var(--c-brand)}
.mnav__themes{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px}
.mnav__themes .chip{min-height:38px}
.mnav__foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px}
.mnav__foot .btn{min-height:44px}

/* ---------------------------------------------------------------- 15. footer */
.membership-band{position:relative;overflow:hidden;background:linear-gradient(100deg,var(--c-brand) 0%,#9E2AB8 100%);color:#fff}
.membership-band::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,138,61,.35);filter:blur(60px);right:-120px;top:-220px}
.membership-band__inner{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-block:22px}
.membership-band__text{display:flex;align-items:center;gap:14px;min-width:0}
.membership-band__icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.16)}
.membership-band__icon .icon{width:24px;height:24px}
.membership-band__title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,1rem + .6vw,1.4rem);letter-spacing:-.01em;line-height:1.25}
.membership-band__sub{font-size:.88rem;color:rgba(255,255,255,.85)}
.site-footer{background:var(--c-night);color:#E9E2F2;margin-top:auto;position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(192,38,109,.35),transparent 65%);left:-200px;top:-260px;pointer-events:none}
.site-footer a{color:#E9E2F2;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--c-accent)}
.footer-main{position:relative;display:grid;gap:36px 28px;grid-template-columns:1fr 1fr;padding-block:clamp(44px,6vw,72px) 36px}
.footer-brand{grid-column:1/-1;max-width:420px}
.footer-brand .logo{color:#fff}
.footer-brand .logo__text{color:#fff}
.footer-brand p{margin-top:14px;font-size:.92rem;line-height:1.65;color:#BDB3CB}
.footer-social{display:flex;gap:8px;margin-top:18px}
.footer-social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;transition:background-color var(--t-fast),transform var(--t-fast)}
.footer-social a:hover{background:var(--c-brand);transform:translateY(-2px);text-decoration:none}
.footer-social .icon{width:19px;height:19px}
.footer-col h2{font-family:var(--font-body);font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.footer-col li a{display:inline-flex;align-items:center;min-height:34px;font-size:.92rem;color:#C9C0D6}
.footer-news{grid-column:1/-1}
.footer-news h2{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:#fff;letter-spacing:-.01em;margin-bottom:6px;text-transform:none}
.footer-news p{font-size:.88rem;color:#BDB3CB;margin-bottom:12px}
.footer-news .input-group{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.footer-news .input-group .input{color:#fff}
.footer-news .input-group .input::placeholder{color:#9C92AC}
.footer-news .newsletter__msg{color:#D8F5E6}
.footer-bottom{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)) var(--gutter) 0/calc(100% - var(--gutter) * 2) 1px no-repeat;font-size:.84rem;color:#A79DB8}
.footer-bottom__links{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer-bottom__links a,.footer-bottom__links button{color:#A79DB8;font-size:.84rem;background:none;border:0;padding:0;cursor:pointer}
.footer-bottom__links button:hover{color:#fff;text-decoration:underline}
.pay-badges{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.pay-badges li{display:grid;place-items:center;width:46px;height:30px;border-radius:7px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.pay-badges svg{width:36px;height:22px}
@media (min-width:720px){.footer-main{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-news{grid-column:auto / span 3}}
@media (min-width:1100px){.footer-main{grid-template-columns:1.5fr repeat(3,minmax(0,.8fr)) 1.4fr}.footer-brand{grid-column:auto}.footer-news{grid-column:auto}}

/* ---------------------------------------------------------------- 16. product card */
.product-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);
  container-type:inline-size;isolation:isolate;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
@media (hover:hover){.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}}
.product-card__media{position:relative;display:block;margin:6px 6px 0;aspect-ratio:1/1;border-radius:calc(var(--radius) - 5px);overflow:hidden;background:var(--c-surface-2)}
.product-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s var(--ease),transform .7s var(--ease)}
.product-card__img--hover{opacity:0}
@media (hover:hover){
  .product-card:hover .product-card__img--hover{opacity:1}
  .product-card:hover .product-card__media img{transform:scale(1.045)}
}
.product-card__badges{position:absolute;z-index:2;top:8px;left:8px;right:52px;display:flex;flex-wrap:wrap;gap:5px;pointer-events:none}

.product-card__badges .badge{box-shadow:0 2px 6px rgba(29,21,48,.15);font-size:.66rem;padding:.35em .6em}
.product-card__wish{position:absolute;z-index:3;top:8px;right:8px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--c-ink);box-shadow:0 2px 8px rgba(29,21,48,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform var(--t-fast) var(--ease),color var(--t-fast),background-color var(--t-fast)}
.product-card__wish:hover{transform:scale(1.08);color:var(--c-brand)}
.product-card__wish .icon{width:21px;height:21px;grid-area:1/1}
.product-card__wish .i-on{opacity:0;transform:scale(.4);color:var(--c-brand);transition:opacity var(--t-fast),transform .3s var(--ease-bounce)}
.product-card__wish[aria-pressed="true"] .i-on,[data-wishlist][aria-pressed="true"] .i-on{opacity:1;transform:scale(1)}
.product-card__wish[aria-pressed="true"] .i-off{opacity:0}
.product-card__wish[aria-pressed="true"]{color:var(--c-brand)}
/* Overlays stay off the artwork's printed title (top band) and format strip (bottom band): the badge is a small corner
   tab in the top-left corner, the heart sits in the card body on the eyebrow row. The card is an inline-size container,
   so 100cqw - 6px is the bottom edge of the square media. */
.product-card__badges{top:6px;left:6px;right:auto}
.product-card__badges .badge{border-radius:calc(var(--radius) - 5px) 0 12px 0;box-shadow:none;font-size:.62rem;padding:.45em .7em .4em}
@supports (top:1cqw){
  .product-card__wish{top:calc(100cqw + 1px);right:6px;width:36px;height:36px;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--c-ink-2)}
  .product-card__wish:hover{background:var(--c-surface-2);transform:none}
  .product-card__wish .icon{width:20px;height:20px}
  .product-card .product-card__eyebrow{min-height:26px;display:block;line-height:26px;max-width:calc(100% - 34px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* small cards (2-column phones): the title band spans the full width, so the badge drops to the bottom-left corner */
@container (max-width:220px){
  .product-card__badges{top:calc(100cqw - 6px);transform:translateY(-100%)}
  .product-card__badges .badge{border-radius:0 12px 0 calc(var(--radius) - 5px);font-size:.58rem}
  .product-card__body:not(:has(.product-card__eyebrow)) .product-card__title{padding-right:30px}
}
[data-wishlist].is-popping .i-on,[data-wishlist].is-popping>.icon{animation:heart-pop .5s var(--ease-bounce)}
[data-wishlist].is-popping::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--c-brand);animation:ring-burst .5s var(--ease) forwards;pointer-events:none}
.product-card__body{display:flex;flex-direction:column;flex:1;gap:6px;padding:11px 12px 12px}
.product-card__eyebrow{position:relative;z-index:2;align-self:flex-start;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brand);text-decoration:none;line-height:1.2}
.product-card__eyebrow:hover{text-decoration:underline}
.product-card__title{font-family:var(--font-body);font-size:.9rem;font-weight:700;line-height:1.35;letter-spacing:-.005em;color:var(--c-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.product-card__title a{color:inherit;text-decoration:none}
.product-card__title a::after{content:"";position:absolute;z-index:1;inset:0;border-radius:var(--radius)}
.product-card__title a:hover{color:var(--c-brand)}
.product-card__title a:focus-visible{outline:none}
.product-card:has(.product-card__title a:focus-visible){box-shadow:0 0 0 3px rgba(192,38,109,.45)}
.product-card__cta,.product-card__member-cta,.product-card__eyebrow{position:relative;z-index:2}
.product-card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:18px}
.product-card__rating{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;color:var(--c-ink-2);font-weight:600}
.product-card__formats{display:flex;flex-wrap:wrap;gap:4px}
.fmt{display:inline-block;padding:.2em .45em;border-radius:6px;background:var(--c-surface-2);color:var(--c-ink-2);font-size:.62rem;font-weight:800;letter-spacing:.04em;line-height:1.2}
.product-card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.product-card__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 2px;min-width:0;line-height:1.2}
.product-card__price .price{font-size:1rem}
.product-card__price .price-compare{font-size:.78rem;margin-left:.3em}
.product-card__cta{position:relative;z-index:2;flex:none;min-height:40px;padding:0;width:40px;min-width:40px;border-radius:50%}
.product-card__cta .btn__label{display:none}
.product-card__cta.is-added .btn__done span{display:none}
.product-card__included{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:800;color:var(--c-brand-700);line-height:1.25;min-width:0}
.product-card__included .icon{width:15px;height:15px;color:var(--c-brand)}
.product-card__foot--stack{flex-direction:column;align-items:stretch;gap:8px}
.product-card__foot--stack .product-card__cta{width:100%;min-width:0;border-radius:var(--radius-pill);padding:0 12px}
.product-card__foot--stack .product-card__cta .btn__label{display:inline}
@container (min-width:230px){
  .product-card__title{font-size:.95rem}
  .product-card__cta{width:auto;padding:0 14px;border-radius:var(--radius-pill);font-size:.82rem}
  .product-card__cta .btn__label{display:inline}
  .product-card__cta.is-added .btn__done span{display:inline}
  .fmt{font-size:.66rem}
}
@container (max-width:180px){.product-card__formats{display:none}.product-card__body{padding:9px 9px 10px}}
.product-card--compact .product-card__formats,.product-card--compact .product-card__eyebrow{display:none}

/* ---------------------------------------------------------------- 17. horizontal scroller (rails, carousels) */
.scroller{position:relative}
.scroller__track{display:grid;grid-auto-flow:column;grid-auto-columns:var(--item-w,calc((100% - 12px) / 2.15));gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;padding:6px var(--gutter) 22px;margin:-6px calc(var(--gutter) * -1) -22px}
.scroller__track::-webkit-scrollbar{display:none}
.scroller__track>*{scroll-snap-align:start}
@media (min-width:640px){.scroller__track{--item-w:calc((100% - 36px) / 3.3);gap:16px}}
@media (min-width:1024px){.scroller__track{--item-w:calc((100% - 60px) / 4.25);gap:20px}}
@media (min-width:1400px){.scroller__track{--item-w:calc((100% - 80px) / 5)}}
.scroller__nav{display:none;gap:8px}
@media (min-width:768px){.scroller__nav{display:inline-flex}}
.scroller__btn{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--c-line-2);background:var(--c-surface);color:var(--c-ink);transition:background-color var(--t-fast),border-color var(--t-fast),opacity var(--t-fast)}
.scroller__btn:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.scroller__btn[disabled]{opacity:.35;pointer-events:none}
.scroller__btn .icon{width:20px;height:20px}

/* ---------------------------------------------------------------- 18. home */
/* hero */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(24px,4vw,52px) clamp(36px,5vw,64px)}
.hero::before{content:"";position:absolute;z-index:-2;inset:0;background:
  radial-gradient(700px 420px at 100% 0%,rgba(252,228,239,.95),transparent 70%),
  radial-gradient(520px 360px at 0% 100%,rgba(255,233,214,.9),transparent 70%),
  radial-gradient(420px 300px at 55% 60%,rgba(232,224,255,.55),transparent 70%)}
.hero::after{content:"";position:absolute;z-index:-1;inset:0;opacity:.35;mix-blend-mode:multiply;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero__grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,56px);align-items:center}
@media (min-width:980px){.hero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.hero__copy{min-width:0}
.hero__kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:var(--radius-pill);background:var(--c-surface);box-shadow:var(--shadow-sm);font-size:.82rem;font-weight:700;color:var(--c-ink);border:1px solid var(--c-line)}
.hero__kicker b{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-pill);background:var(--c-ink);color:#fff;font-size:.72rem;letter-spacing:.04em}
.hero__kicker b .icon{width:13px;height:13px;color:var(--c-accent)}
.hero__title{margin-top:16px;font-family:var(--font-display);font-weight:750;font-size:clamp(2.3rem,1.25rem + 3.3vw,3.95rem);line-height:1.03;letter-spacing:-.035em;color:var(--c-ink);text-wrap:balance}
.hero__title em{position:relative;display:inline-block;font-style:italic;font-weight:600;color:var(--c-brand);padding-right:.06em}
.hero__title em::after{content:"";position:absolute;left:2%;right:0;bottom:-.08em;height:.2em;background:url("../img/squiggle.svg") center/100% 100% no-repeat}
.hero__lead{margin-top:16px;max-width:560px;font-size:clamp(1.02rem,.95rem + .4vw,1.2rem);line-height:1.6;color:var(--c-ink-2)}
.hero__lead strong{color:var(--c-ink)}
.hero-search{margin-top:24px;max-width:600px}
.hero-search__field{display:flex;align-items:center;gap:6px;padding:6px;border-radius:var(--radius-pill);background:var(--c-surface);border:1.5px solid var(--c-line-2);box-shadow:var(--shadow);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.hero-search__field:focus-within{border-color:var(--c-brand);box-shadow:var(--ring),var(--shadow)}
.hero-search__field>.icon{margin-left:12px;width:22px;height:22px;color:var(--c-ink-2)}
.hero-search input{flex:1;min-width:0;height:48px;border:0;background:transparent;outline:none;font-size:16px;padding:0 6px}
.hero-search .btn{min-height:48px}
.hero-search__label{display:none}
@media (max-width:479px){.hero-search .btn .btn__label{display:none}.hero-search .btn{width:48px;padding:0}}
.hero__chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.hero__chips-label{font-size:.82rem;font-weight:700;color:var(--c-ink-2);margin-right:2px}
.hero__chips .chip{min-height:32px;padding:.3em .8em;font-size:.82rem;background:rgba(255,255,255,.7)}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
.hero__micro{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:12px;font-size:.84rem;color:var(--c-ink-2);font-weight:600}
.hero__micro span{display:inline-flex;align-items:center;gap:6px}
.hero__micro .icon{width:16px;height:16px;color:var(--c-success);stroke-width:2.4}
/* hero collage */
.collage{position:relative;aspect-ratio:1/.92;max-width:600px;width:100%;justify-self:center}
.collage__blob{position:absolute;inset:6% 4% 4% 8%;border-radius:42% 58% 55% 45%/48% 42% 58% 52%;background:linear-gradient(140deg,var(--c-brand-soft),#EFE3FF 60%,var(--c-accent-soft));animation:blob 18s ease-in-out infinite alternate}
.collage__item{position:absolute;margin:0;border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg);border:5px solid #fff;transition:transform .5s var(--ease)}
.collage__item img{width:100%;height:100%;object-fit:cover}
.collage__item--1{width:46%;aspect-ratio:1;left:4%;top:6%;transform:rotate(-6deg)}
.collage__item--2{width:38%;aspect-ratio:1;right:4%;top:0;transform:rotate(5deg)}
.collage__item--3{width:34%;aspect-ratio:1;left:14%;bottom:2%;transform:rotate(4deg)}
.collage__item--4{width:40%;aspect-ratio:1;right:8%;bottom:6%;transform:rotate(-4deg)}
.collage__item--5{width:24%;aspect-ratio:1;left:44%;top:40%;transform:rotate(-2deg);z-index:2}
.collage:hover .collage__item--1{transform:rotate(-8deg) translate(-4px,-4px)}
.collage:hover .collage__item--2{transform:rotate(7deg) translate(4px,-4px)}
.collage:hover .collage__item--4{transform:rotate(-2deg) translate(4px,4px)}
.collage__tile{display:grid;place-items:center;width:100%;height:100%;background:var(--tint,var(--tint-1));color:var(--c-ink)}
.collage__tile .icon{width:38%;height:38%;stroke-width:1.4;color:var(--c-brand)}
.float-badge{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 9px;border-radius:var(--radius-pill);background:#fff;box-shadow:var(--shadow-lg);font-size:.82rem;font-weight:800;color:var(--c-ink);white-space:nowrap;animation:float 6s ease-in-out infinite}
.float-badge__ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c-success-soft);color:var(--c-success)}
.float-badge__ico .icon{width:17px;height:17px;stroke-width:2.2}
.float-badge--1{left:-2%;top:48%}
.float-badge--2{right:-1%;top:44%;animation-delay:-3s}
.float-badge--2 .float-badge__ico{background:var(--c-brand-soft);color:var(--c-brand)}
.float-badge--3{left:30%;bottom:-3%;animation-delay:-1.5s}
.float-badge--3 .float-badge__ico{background:#FFF1C2;color:#A35F00}
.float-badge small{display:block;font-size:.7rem;font-weight:600;color:var(--c-ink-2)}
@media (max-width:979px){
  .collage{max-width:460px;aspect-ratio:1/.8}
  .collage__item--5{display:none}
  .float-badge{font-size:.74rem;padding:7px 12px 7px 7px}
  .float-badge__ico{width:26px;height:26px}
  .float-badge--3{display:none}
}
@media (max-width:479px){.collage{aspect-ratio:1/.86}.float-badge--1{left:0;top:auto;bottom:10%}.float-badge--2{right:0;top:6%}}
/* hero slider (banners placement=hero) */
.hero-slider-wrap{padding-block:clamp(12px,2vw,24px) clamp(24px,3.4vw,44px)}
.hero-slider{position:relative;overflow:hidden;border-radius:var(--radius-xl)}
.hero-slider__track{display:flex;transition:transform .6s var(--ease);touch-action:pan-y}
.hero-slide{position:relative;flex:0 0 100%;min-height:clamp(380px,48vw,560px);display:flex;align-items:center;background:var(--slide-bg,var(--c-night));color:#fff;overflow:hidden;isolation:isolate}
.hero-slide__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(29,21,48,.78) 0%,rgba(29,21,48,.35) 55%,transparent 100%)}
.hero-slide--plain::after{background:radial-gradient(500px 300px at 90% 10%,rgba(255,255,255,.15),transparent 70%)}
.hero-slide__content{padding:clamp(28px,5vw,64px);max-width:640px}
.hero-slide__eyebrow{display:inline-block;padding:5px 12px;border-radius:var(--radius-pill);background:rgba(255,255,255,.16);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.hero-slide__title{margin-top:14px;font-family:var(--font-display);font-size:clamp(2rem,1.3rem + 3vw,3.6rem);line-height:1.04;letter-spacing:-.03em;font-weight:750;color:#fff}
.hero-slide__sub{margin-top:14px;font-size:clamp(1rem,.95rem + .3vw,1.15rem);color:rgba(255,255,255,.88);max-width:48ch}
.hero-slide .btn{margin-top:24px}
.hero-slider__controls{position:absolute;z-index:2;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;padding:0 8px 0 2px;border-radius:var(--radius-pill);background:rgba(29,21,48,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-slider__pause{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff}
.hero-slider__pause:hover{background:rgba(255,255,255,.14)}
.hero-slider__pause .icon{grid-area:1/1;width:18px;height:18px}
.hero-slider__pause .i-play,.hero-slider__pause.is-stopped .i-pause{display:none}
.hero-slider__pause.is-stopped .i-play{display:block}
.hero-slider__dots{display:flex;align-items:center}
/* 44px-tall hit areas around small visual dots */
.hero-slider__dot{position:relative;display:grid;place-items:center;width:30px;height:44px;padding:0;border:0;background:transparent;transition:width var(--t) var(--ease)}
.hero-slider__dot::before{content:"";width:10px;height:10px;border-radius:var(--radius-pill);background:rgba(255,255,255,.55);transition:width var(--t) var(--ease),background-color var(--t)}
.hero-slider__dot:hover::before{background:rgba(255,255,255,.85)}
.hero-slider__dot[aria-current="true"]{width:44px}
.hero-slider__dot[aria-current="true"]::before{width:28px;background:#fff}
.hero-slider__arrow{position:absolute;top:50%;transform:translateY(-50%);display:none;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--c-ink);box-shadow:var(--shadow)}
.hero-slider__arrow--prev{left:14px}
.hero-slider__arrow--next{right:14px}
@media (min-width:768px){
  .hero-slider__arrow{display:grid}
  /* keep the copy clear of the round arrows (14px inset + 46px arrow + gap) */
  .hero-slider:has(.hero-slider__arrow) .hero-slide__content{padding-inline:max(clamp(28px,5vw,64px),84px)}
}
/* tablets & small laptops (640–1199px): two columns — copy on the slide colour (left), art anchored right with a soft fade (no text on the art);
   the control pill sits bottom-right so it never meets the CTA */
@media (min-width:640px) and (max-width:1199px){
  .hero-slide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"copy art";align-items:center}
  .hero-slide__img{grid-area:art;position:relative;inset:auto;z-index:0;height:100%;min-height:100%;object-position:88% 50%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%);mask-image:linear-gradient(90deg,transparent,#000 28%)}
  .hero-slide::after{display:none}
  .hero-slide__content{grid-area:copy;max-width:none;padding-block:36px 80px}
  .hero-slider:has(.hero-slider__arrow) .hero-slide__content{padding-right:8px}
  .hero-slide--plain .hero-slide__content{grid-column:1/-1}
  .hero-slide__title{font-size:clamp(1.8rem,1rem + 2.4vw,2.5rem)}
  .hero-slide__sub{font-size:.98rem}
  .hero-slider__controls{left:auto;right:16px;transform:none}
}
/* phones: art on top (focal point on the right, where the banner illustrations live), copy below on the slide colour */
@media (max-width:639px){
  .hero-slider{border-radius:var(--radius-lg)}
  .hero-slide{flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0}
  .hero-slide__img{position:relative;inset:auto;z-index:0;height:auto;aspect-ratio:16/10;object-position:85% 50%;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
  .hero-slide::after{display:none}
  .hero-slide__content{margin-top:-28px;padding:0 20px 76px;position:relative}
  .hero-slide--plain .hero-slide__content{margin-top:0;padding-top:32px}
  .hero-slide__title{margin-top:10px;font-size:clamp(1.75rem,1.2rem + 3vw,2.2rem)}
  .hero-slide__sub{font-size:.98rem}
  .hero-slide .btn{margin-top:18px;width:100%}
}
/* trust bar */
.trust-bar{border-block:1px solid var(--c-line);background:var(--c-surface)}
.trust-bar__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;list-style:none;margin-block:0;padding-block:18px}
.trust-bar__item{display:flex;align-items:center;gap:12px;min-width:0}
.trust-bar__ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--tint,var(--tint-1));color:var(--c-ink)}
.trust-bar__ico .icon{width:21px;height:21px}
.trust-bar__text{min-width:0}
.trust-bar__text strong{display:block;font-size:.88rem;line-height:1.3}
.trust-bar__text span{display:block;font-size:.78rem;color:var(--c-ink-2);line-height:1.35}
@media (max-width:639px){.trust-bar__text span{display:none}.trust-bar__ico{width:36px;height:36px;border-radius:12px}.trust-bar__list{padding-block:14px;gap:12px}}
@media (min-width:900px){.trust-bar__list{grid-template-columns:repeat(4,minmax(0,1fr));padding-block:22px}}
/* department tiles */
.dept-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
@media (min-width:640px){.dept-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.dept-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1280px){.dept-grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}}
.dept-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:clamp(170px,15vw,206px);padding:16px;border-radius:var(--radius-lg);background:var(--tint,var(--tint-1));color:var(--c-ink);text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.dept-tile::before{content:"";position:absolute;z-index:-1;width:140px;height:140px;right:-40px;bottom:-50px;border-radius:50%;background:rgba(255,255,255,.5);transition:transform .5s var(--ease)}
.dept-tile:hover{color:var(--c-ink);transform:translateY(-4px);box-shadow:var(--shadow)}
.dept-tile:hover::before{transform:scale(1.35)}
.dept-tile__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#fff;color:var(--c-brand);box-shadow:var(--shadow-sm)}
.dept-tile__icon .icon{width:24px;height:24px}
.dept-tile__img{position:absolute;z-index:-1;right:12px;top:12px;width:min(42%,104px);aspect-ratio:1;border-radius:18px;object-fit:cover;box-shadow:var(--shadow);transform:rotate(6deg);border:3px solid #fff;background:#fff;transition:transform .45s var(--ease)}
.dept-tile:hover .dept-tile__img{transform:rotate(2deg) scale(1.05)}
.dept-tile__name{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.02rem,.95rem + .4vw,1.22rem);line-height:1.15;letter-spacing:-.015em;max-width:92%}
.dept-tile__text{display:block}
.dept-tile__count{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px;font-size:.78rem;font-weight:700;color:rgba(29,21,48,.66)}
.dept-tile__go{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c-ink);color:#fff;transform:translateX(-4px);opacity:0;transition:opacity var(--t),transform var(--t) var(--ease)}
.dept-tile__go .icon{width:16px;height:16px}
.dept-tile:hover .dept-tile__go,.dept-tile:focus-visible .dept-tile__go{opacity:1;transform:none}
@media (hover:none){.dept-tile__go{opacity:1;transform:none}}
/* themes (round cards) */
.theme-rail .scroller__track{--item-w:112px;gap:14px}
@media (min-width:1024px){.theme-rail .scroller__track{--item-w:136px;gap:22px}}
.theme-card{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--c-ink);text-align:center}
.theme-card__img{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--tint,var(--tint-3));box-shadow:0 0 0 0 var(--c-brand);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.theme-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.theme-card__img .icon{width:38%;height:38%;color:var(--c-ink);opacity:.75}
.theme-card__letter{font-family:var(--font-display);font-size:2.4rem;font-weight:700;color:rgba(29,21,48,.7)}
.theme-card:hover{color:var(--c-brand)}
.theme-card:hover .theme-card__img{box-shadow:0 0 0 4px var(--c-bg),0 0 0 6.5px var(--c-brand);transform:translateY(-3px)}
.theme-card:hover .theme-card__img img{transform:scale(1.08)}
.theme-card__name{font-weight:750;font-size:.92rem;line-height:1.25}
.theme-card__count{display:block;font-size:.74rem;font-weight:600;color:var(--c-ink-2);margin-top:2px}
/* membership showcase */
.member{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius-xl);background:var(--c-night);color:#EFE8F7;padding:clamp(26px,5vw,64px)}
.member::before,.member::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.75}
.member::before{width:460px;height:460px;background:#C0266D;left:-160px;top:-200px}
.member::after{width:420px;height:420px;background:#FF8A3D;right:-160px;bottom:-240px;opacity:.5}
.member__grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:1000px){.member__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.member .eyebrow{color:var(--c-accent)}
.member__title{margin-top:12px;font-family:var(--font-display);font-weight:750;font-size:clamp(1.9rem,1.3rem + 2.6vw,3.2rem);line-height:1.05;letter-spacing:-.03em;color:#fff}
.member__title em{font-style:italic;font-weight:600;color:#FFB488}
.member__lead{margin-top:14px;color:#CFC5DD;font-size:1.05rem;max-width:48ch}
.member__props{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px;list-style:none;padding:0}
.member__prop{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--radius);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.member__prop-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,138,61,.16);color:#FFB488}
.member__prop-ico .icon{width:20px;height:20px}
.member__prop strong{font-size:.95rem;color:#fff;line-height:1.3}
.member__prop span{font-size:.8rem;color:#B9AEC9;line-height:1.45}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--radius-lg);background:#fff;color:var(--c-ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.plan--featured{background:linear-gradient(160deg,#FFF6EE,#FFFFFF 40%);outline:2.5px solid var(--c-accent);outline-offset:-2.5px}
.plan__badge{position:absolute;top:-12px;right:18px;padding:6px 12px;border-radius:var(--radius-pill);background:var(--c-accent);color:var(--c-ink);font-size:.72rem;font-weight:800;letter-spacing:.02em;box-shadow:0 6px 14px -6px rgba(255,138,61,.8)}
.plan__name{font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-2)}
.plan__price{display:flex;align-items:baseline;gap:4px;font-family:var(--font-display);font-size:2.5rem;font-weight:750;letter-spacing:-.03em;line-height:1}
.plan__price small{font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--c-ink-2);letter-spacing:0}
.plan__note{font-size:.84rem;color:var(--c-ink-2);min-height:1.4em}
.plan__note strong{color:var(--c-success)}
.plan__features{list-style:none;padding:0;margin:4px 0 6px;display:flex;flex-direction:column;gap:8px;font-size:.88rem}
.plan__features li{display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.plan__features .icon{flex:none;width:17px;height:17px;margin-top:1px;color:var(--c-success);stroke-width:2.4}
.plan .btn{margin-top:auto}
.plan__fine{font-size:.76rem;color:var(--c-ink-2);text-align:center;line-height:1.35}
.member__compare{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.member__compare:hover{color:#FFB488}
@media (max-width:639px){.member{padding:26px 18px;border-radius:var(--radius-lg)}.member__props{gap:10px;margin-top:20px}.member__prop{flex-direction:row;align-items:center;padding:10px 12px;gap:10px}.member__prop span:not(.member__prop-ico){display:none}.member__prop strong{font-size:.84rem}.member__prop-ico{flex:none;width:32px;height:32px}.plan--featured{order:-1}.plan:not(.plan--featured) .plan__features{display:none}.plan{padding:20px 18px}}
.member__foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:18px;font-size:.84rem;color:#CFC5DD}
.member__foot .icon{width:16px;height:16px}
.member__foot>span{display:inline-flex;align-items:center;gap:6px}
.member__wallets{display:inline-flex;align-items:center;gap:6px}
.member__wallets .pay-badges li{width:42px;height:27px}
/* how it works */
.steps{display:grid;grid-template-columns:1fr;gap:14px;list-style:none;padding:0;counter-reset:step}
@media (min-width:800px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.step{position:relative;padding:24px 22px 22px;border-radius:var(--radius-lg);background:var(--c-surface);border:1px solid var(--c-line);overflow:hidden;isolation:isolate}
.step::before{counter-increment:step;content:counter(step);position:absolute;z-index:-1;right:18px;top:8px;font-family:var(--font-display);font-size:5.5rem;font-weight:800;line-height:1;color:var(--tint,var(--tint-1))}
.step__ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--tint,var(--tint-1));color:var(--c-ink);margin-bottom:16px}
.step__ico .icon{width:26px;height:26px}
.step h3{font-family:var(--font-display);font-size:1.25rem;letter-spacing:-.015em;margin-bottom:6px}
.step p{color:var(--c-ink-2);font-size:.93rem}
@media (max-width:799px){.step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;padding:18px}.step__ico{grid-row:span 3;margin:0;width:46px;height:46px}.step::before{font-size:4rem;top:6px}.step h3{font-size:1.12rem}}
.step__wallets{display:flex;gap:6px;margin-top:12px}
/* phones: the big decorative numeral would sit behind the copy, so the step number becomes a small badge on the icon */
@media (max-width:799px){.step{counter-increment:step}.step::before{content:none}.step__ico{position:relative}.step__ico::after{content:counter(step);position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--c-ink);color:#fff;font:800 .68rem/20px var(--font-body);text-align:center;box-shadow:0 0 0 2px var(--c-surface)}}
.step__wallets .pay-badges li{box-shadow:0 0 0 1px var(--c-line)}
/* promo banners */
.promo-grid{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media (min-width:860px){.promo-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.promo{position:relative;display:flex;align-items:center;min-height:240px;padding:clamp(24px,4vw,44px);border-radius:var(--radius-xl);overflow:hidden;isolation:isolate;background:var(--promo-bg,var(--c-accent-soft));color:var(--c-ink);text-decoration:none}
.promo:hover{color:var(--c-ink)}
.promo::before{content:"";position:absolute;z-index:-1;width:380px;height:380px;right:-90px;top:-150px;border-radius:50%;background:rgba(255,255,255,.42);pointer-events:none}
.promo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.promo--image{color:#fff}
.promo--image::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(29,21,48,.75),rgba(29,21,48,.1))}
.promo--image:hover{color:#fff}
.promo__content{display:block;max-width:520px;position:relative}
.promo__content>span{display:block}
.promo__content>.btn{display:inline-flex}
.promo__content>.promo__eyebrow,.promo__eyebrow{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-brand)}
.promo--image .promo__eyebrow{color:var(--c-sun)}
.promo__title{margin-top:10px;font-family:var(--font-display);font-size:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);font-weight:750;line-height:1.08;letter-spacing:-.025em}
.promo__sub{margin-top:10px;font-size:1rem;line-height:1.55;opacity:.85;max-width:44ch}
.promo .btn{margin-top:20px}
.promo--free{background:linear-gradient(120deg,#DDF3E8 0%,#FFF1C2 100%)}
.promo--free .promo__eyebrow{color:var(--c-success)}
.promo__art{position:absolute;z-index:-1;right:clamp(12px,4vw,56px);top:50%;transform:translateY(-50%);width:min(26%,210px);display:none}
@media (min-width:700px){.promo__art{display:block}}
.promo__art-stack{position:relative;display:block;aspect-ratio:1}
.promo__art-stack img,.promo__art-stack .collage__tile{position:absolute;width:62%;aspect-ratio:1;border-radius:20px;border:4px solid #fff;box-shadow:var(--shadow-lg);object-fit:cover;background:#fff}
.promo__art-stack>:nth-child(1){left:0;top:10%;transform:rotate(-8deg)}
.promo__art-stack>:nth-child(2){right:4%;top:0;transform:rotate(7deg);z-index:1}
.promo__art-stack>:nth-child(3){left:22%;bottom:0;transform:rotate(2deg);z-index:2}
.promo__gift{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;background:#fff;color:var(--c-success);box-shadow:var(--shadow)}
/* reviews */
.reviews-summary{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:var(--radius-pill);background:var(--c-surface);border:1px solid var(--c-line);font-weight:700;font-size:.9rem}
.reviews-summary strong{font-family:var(--font-display);font-size:1.3rem}
.review-card{display:flex;flex-direction:column;gap:12px;height:100%;padding:20px;border-radius:var(--radius-lg);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--shadow-sm)}
.review-card__quote{color:var(--c-brand);opacity:.9}
.review-card__quote .icon{width:28px;height:28px}
.review-card__title{font-weight:800;font-size:1rem;line-height:1.35}
.review-card__body{color:var(--c-ink-2);font-size:.93rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.review-card__foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--c-line-2)}
.review-card__avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--tint,var(--tint-3));font-weight:800;font-size:.9rem}
.review-card__who{min-width:0;flex:1;font-size:.84rem;line-height:1.35}
.review-card__who strong{display:block;font-size:.9rem}
.review-card__who a{color:var(--c-ink-2);text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.review-card__who a:hover{color:var(--c-brand)}
.review-card__thumb{flex:none;width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--c-surface-2)}
.verified{display:inline-flex;align-items:center;gap:3px;color:var(--c-success);font-weight:700;font-size:.75rem}
.verified .icon{width:13px;height:13px;stroke-width:2.6}
.reviews-rail .scroller__track{--item-w:min(84%,340px)}
@media (min-width:1024px){.reviews-rail .scroller__track{--item-w:calc((100% - 60px) / 3.3)}}
/* newsletter */
.newsletter-band{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius-xl);padding:clamp(28px,5vw,56px);background:linear-gradient(120deg,var(--c-brand-soft) 0%,#F3E3FF 55%,var(--c-accent-soft) 100%)}
.newsletter-band::before{content:"";position:absolute;z-index:-1;width:300px;height:300px;right:-80px;top:-120px;border-radius:50%;background:rgba(255,255,255,.55)}
.newsletter-band__grid{display:grid;grid-template-columns:1fr;gap:20px 40px;align-items:center}
@media (min-width:900px){.newsletter-band__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.newsletter-band__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:#fff;color:var(--c-brand);box-shadow:var(--shadow-sm);margin-bottom:14px;transform:rotate(-6deg)}
.newsletter-band__icon .icon{width:28px;height:28px}
.newsletter-band .h2{max-width:18ch}
.newsletter-band p{margin-top:8px;color:var(--c-ink-2)}
.newsletter{display:flex;flex-direction:column;gap:10px}
.newsletter .input-group{box-shadow:var(--shadow)}
.newsletter__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.newsletter__fine{font-size:.78rem;color:var(--c-ink-2)}
.newsletter__msg{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:var(--c-success)}
.newsletter__msg.is-error{color:var(--c-danger)}
.newsletter__code{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;border-radius:var(--radius-pill);border:2px dashed var(--c-brand);background:#fff;font-weight:800;letter-spacing:.08em;color:var(--c-ink)}
.newsletter.is-done .input-group,.newsletter.is-done .newsletter__fine{display:none}
/* SEO block */
.seo-block{max-width:880px;margin-inline:auto;border-top:1px solid var(--c-line);padding-top:8px}
.seo-block>summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;cursor:pointer;list-style:none;font-weight:700;color:var(--c-ink-2);font-size:.92rem}
.seo-block>summary::-webkit-details-marker{display:none}
.seo-block>summary .icon{transition:transform var(--t) var(--ease)}
.seo-block[open]>summary .icon{transform:rotate(180deg)}
.seo-block .prose{font-size:.93rem;color:var(--c-ink-2);margin:8px auto 0}
.seo-block .prose h2{font-size:1.25rem;color:var(--c-ink)}
/* personalised rec block placeholder */
[data-recs]:empty{display:none}
.recs-skeleton .grid-products{overflow:hidden;grid-auto-rows:auto}
/* FAQ teaser */
.faq-list{max-width:860px;margin-inline:auto}

/* ---------------------------------------------------------------- 19. content pages */
.page-layout{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media (min-width:1000px){.page-layout{grid-template-columns:minmax(0,1fr) 300px}}
.page-aside{display:flex;flex-direction:column;gap:16px}
@media (min-width:1000px){.page-aside{position:sticky;top:calc(var(--header-h) + 24px)}}
.page-aside__card{padding:20px;border-radius:var(--radius-lg);background:var(--c-surface);border:1px solid var(--c-line)}
.page-aside__card h2{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-2);margin-bottom:10px}
.page-aside__nav{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.page-aside__nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;margin-inline:-10px;border-radius:10px;text-decoration:none;font-weight:600;font-size:.93rem}
.page-aside__nav a:hover{background:var(--c-surface-2)}
.page-aside__nav a[aria-current="page"]{background:var(--c-brand-soft);color:var(--c-brand-700);font-weight:800}
.page-aside__help{background:linear-gradient(150deg,var(--c-night),#43285E);color:#EFE8F7;border:0}
.page-aside__help h2{color:#FFB488}
.page-aside__help p{font-size:.9rem;color:#CFC5DD;margin-bottom:14px}
.page-body{min-width:0}
.page-updated{margin-top:28px;font-size:.84rem;color:var(--c-ink-3)}
.faq{display:flex;flex-direction:column;max-width:820px}
.faq .accordion>summary{font-size:1.05rem}
.faq-group+.faq-group{margin-top:28px}
.faq-group>h2{font-family:var(--font-display);font-size:1.35rem;letter-spacing:-.015em;margin-bottom:6px}
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,48px);align-items:start}
@media (min-width:960px){.contact-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr)}}
.contact-card{padding:clamp(20px,3.5vw,36px);border-radius:var(--radius-xl);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--shadow)}
.contact-info{display:flex;flex-direction:column;gap:14px}
.contact-info__item{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--radius-lg);background:var(--tint,var(--tint-1))}
.contact-info__item .icon{flex:none;width:24px;height:24px;margin-top:2px}
.contact-info__item strong{display:block;font-size:.98rem}
.contact-info__item p,.contact-info__item a{font-size:.9rem;color:var(--c-ink-2)}
.contact-info__item a{font-weight:700;color:var(--c-ink)}
.contact-success{text-align:center;padding:clamp(20px,4vw,40px) 10px}
.contact-success .empty-state__icon{margin-inline:auto;background:var(--c-success-soft);color:var(--c-success)}
.hp-field{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------- 20. error page */
.error-page{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(40px,8vw,96px);text-align:center}
.error-page::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(600px 320px at 50% 0%,var(--c-brand-soft),transparent 70%),radial-gradient(500px 300px at 90% 100%,var(--c-accent-soft),transparent 70%)}
.error-art{width:min(300px,70vw);margin:0 auto 10px}
.error-code{font-family:var(--font-display);font-weight:800;font-size:clamp(4.5rem,3rem + 8vw,8rem);line-height:.9;letter-spacing:-.05em;color:var(--c-ink);opacity:.08;margin-bottom:-.35em}
.error-page .h1{max-width:18ch;margin-inline:auto}
.error-page .lead{max-width:52ch;margin:14px auto 0}
.error-search{max-width:520px;margin:26px auto 0}
.error-links{justify-content:center;margin-top:22px}

/* ---------------------------------------------------------------- 21. utilities, motion, print */
.sr-only,.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:8px!important}.mt-2{margin-top:16px!important}.mt-3{margin-top:24px!important}.mt-4{margin-top:40px!important}
.mb-0{margin-bottom:0!important}.mb-2{margin-bottom:16px!important}
.w-100{width:100%}
.nowrap{white-space:nowrap}
.hide-mobile{display:none}
@media (min-width:768px){.hide-mobile{display:initial}.hide-desktop{display:none!important}}
.to-top{position:fixed;z-index:800;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:var(--c-ink);color:#fff;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity var(--t),transform var(--t) var(--ease),visibility 0s linear var(--t)}
.to-top.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity var(--t),transform var(--t) var(--ease),visibility 0s}
.to-top:hover{background:var(--c-brand)}
/* lazy images fade in (JS adds .js on <html>; without JS images simply show) */
.js img.fade-in{opacity:0;transition:opacity .5s var(--ease)}
.js img.fade-in.is-loaded{opacity:1}
/* reveal on scroll */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* touch screens: every control gets a 44px target (CONVENTIONS §7); small inline links grow their hit area only */
@media (pointer:coarse){
  .btn--sm,.header-cta,.member-pill,.chip,.select--sm,.input--sm,.product-card__cta{min-height:44px}
  .btn--icon.btn--sm{width:44px;min-width:44px}
  .announcement__close,.scroller__btn{width:44px;height:44px}
  .announcement__close{right:max(4px,calc(var(--gutter) - 16px))}
  .pagination a,.pagination span{min-width:44px;height:44px}
  .mnav__sub a{min-height:44px}
  .mnav__themes .chip{min-height:44px}
  .hero__chips .chip{min-height:40px}
  .product-card__wish::before{content:"";position:absolute;inset:-4px;border-radius:50%}
  .breadcrumbs a{display:inline-block;padding-block:10px;margin-block:-6px}
  .footer-col li a{min-height:44px}
  .footer-bottom__links{gap:0 18px}
  .footer-bottom__links a,.footer-bottom__links button{display:inline-flex;align-items:center;min-height:44px}
  .link-more{min-height:44px}
}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{100%{transform:translateX(100%)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes heart-pop{0%{transform:scale(.3)}55%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes ring-burst{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes toast-in{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(-10px) scale(.97)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes blob{0%{border-radius:42% 58% 55% 45%/48% 42% 58% 52%;transform:rotate(0)}100%{border-radius:55% 45% 40% 60%/40% 55% 45% 60%;transform:rotate(8deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .collage__blob,.float-badge{animation:none}
}
@media print{
  .announcement,.site-header,.site-footer,.membership-band,.drawer,.drawer-backdrop,.toast-stack,.to-top,.cookie-consent,#search-suggest{display:none!important}
  body{background:#fff;color:#000}
  a{text-decoration:underline}
}
/* ===== end M1 core ===== */

/* ===== M6: tracking ===== */
/* Cookie consent banner (app/Views/partials/consent-banner.php, behaviour in js/track.js). Tokens only. */
.cookie-consent {
  position: fixed;
  z-index: 950;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .25s ease, transform .25s ease;
}
.cookie-consent.is-visible { opacity: 1; transform: none; }
.cookie-consent[hidden] { display: none; }
.cookie-consent__card {
  pointer-events: auto;
  max-width: 46rem;
  margin: 0 auto;
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.1rem 1rem;
  font-family: var(--font-body);
}
.cookie-consent__head { display: flex; gap: .85rem; align-items: flex-start; }
.cookie-consent__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-brand-soft);
  color: var(--c-brand);
}
.cookie-consent__text { min-width: 0; }
.cookie-consent__title {
  margin: 0 0 .25rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--c-ink);
}
.cookie-consent__desc { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--c-ink-2); }
.cookie-consent__desc a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cookie-consent__prefs { margin-top: .9rem; }
.cookie-consent__fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cookie-consent__sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cookie-consent__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: .7rem .85rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius, 10px);
  background: var(--c-surface-2);
  cursor: pointer;
}
div.cookie-consent__option { cursor: default; }
.cookie-consent__option-text { display: grid; gap: .1rem; min-width: 0; }
.cookie-consent__option-title { font-weight: 600; font-size: .9rem; color: var(--c-ink); }
.cookie-consent__option-desc { font-size: .8rem; line-height: 1.45; color: var(--c-ink-2); }
.cookie-consent__always { flex: none; font-size: .75rem; font-weight: 600; color: var(--c-success); white-space: nowrap; }
.cookie-consent__switch { position: relative; flex: none; width: 2.75rem; height: 1.6rem; }
.cookie-consent__switch input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.cookie-consent__slider {
  position: absolute; inset: 0; border-radius: 999px; background: var(--c-line);
  transition: background-color .2s ease;
}
.cookie-consent__slider::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.6rem - 6px); height: calc(1.6rem - 6px);
  border-radius: 50%; background: var(--c-surface); box-shadow: var(--shadow-sm); transition: transform .2s ease;
}
.cookie-consent__switch input:checked + .cookie-consent__slider { background: var(--c-brand); }
.cookie-consent__switch input:checked + .cookie-consent__slider::after { transform: translateX(1.15rem); }
.cookie-consent__switch input:focus-visible + .cookie-consent__slider { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.cookie-consent__actions {
  display: flex;
  flex-direction: column-reverse;
  gap: .5rem;
  margin-top: 1rem;
}
.cookie-consent__choices { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cookie-consent__choices .btn { width: 100%; min-height: 44px; justify-content: center; }
.cookie-consent__choices .btn[hidden] { display: none; }
.cookie-consent.is-expanded .cookie-consent__choices .btn[data-consent-action="accept"] { grid-column: 1 / -1; }
.cookie-consent__prefs-btn { align-self: center; min-height: 44px; }
/* Phones: compact bottom bar (~130px) so the title, price and main CTA of the page stay visible. */
@media (max-width: 639px) {
  .cookie-consent { padding: 0 .5rem calc(.5rem + env(safe-area-inset-bottom, 0px)); }
  .cookie-consent__card { padding: .7rem .85rem .65rem; border-radius: var(--radius, 10px); }
  .cookie-consent__icon, .cookie-consent__more { display: none; }
  .cookie-consent__title {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .cookie-consent__desc { font-size: .8125rem; line-height: 1.45; }
  .cookie-consent__actions { flex-direction: row; align-items: center; gap: .4rem; margin-top: .55rem; }
  .cookie-consent__prefs-btn { flex: none; padding-left: .45rem; padding-right: .45rem; }
  .cookie-consent__choices { flex: 1; min-width: 0; gap: .4rem; }
  .cookie-consent__choices .btn { padding-left: .5rem; padding-right: .5rem; font-size: .875rem; white-space: nowrap; }
  .cookie-consent.is-expanded .cookie-consent__actions { flex-direction: column-reverse; align-items: stretch; }
}
/* Tablet/desktop: a card anchored bottom-left, clear of the right-hand buy box. */
@media (min-width: 640px) {
  .cookie-consent {
    left: 1.5rem; right: auto;
    width: min(26rem, calc(100vw - 3rem));
    padding: 0 0 calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .cookie-consent__card { max-width: none; padding: 1.1rem 1.2rem 1rem; }
  .cookie-consent__desc { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-consent, .cookie-consent__slider, .cookie-consent__slider::after { transition: none; }
  .cookie-consent { transform: none; }
}
@media print { .cookie-consent { display: none !important; } }
/* ===== end M6 ===== */
/* ===== M4: cart & checkout ===== */
/* Cart drawer body, /cart, /checkout, /order/{token}. Design tokens only (CONVENTIONS §10). */

.m4-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.m4-center { justify-content: center; }
.m4-inline-form { display: inline; margin: 0; }
.m4-green { color: var(--c-success); font-weight: 600; }
.m4-cur { font-size: .72em; font-weight: 500; color: var(--c-ink-2); letter-spacing: .04em; margin-right: .15em; }
.m4-link-btn {
  appearance: none; background: none; border: 0; padding: .25rem 0; margin: 0; font: inherit; font-size: .875rem;
  color: var(--c-ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
}
.m4-link-btn:hover { color: var(--c-danger); }
.m4-link-btn .icon { width: 1em; height: 1em; }
.m4-link-btn:focus-visible, .m4-line__remove:focus-visible, .m4-summary-toggle:focus-visible, .m4-coupon__toggle:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: var(--radius-sm); }
.m4-empty-art {
  width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-brand-soft); color: var(--c-brand);
}
.m4-empty-art .icon { width: 2rem; height: 2rem; }
.m4-owned { display: flex; align-items: center; gap: .35rem; margin: .35rem 0 0; font-size: .8125rem; color: var(--c-success); font-weight: 600; }
.m4-owned .icon { width: 1rem; height: 1rem; flex: none; }
.m4-owned a { color: inherit; }
.input.is-invalid, .input[aria-invalid="true"] { border-color: var(--c-danger); }

/* header badge feedback */
[data-cart-count].m4-bump { animation: m4-bump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes m4-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
[data-add-to-cart].is-added { box-shadow: 0 0 0 3px var(--c-accent-soft); }

/* fallback toasts / drawer backdrop (used only when app.js UI kit is absent) */
.m4-toasts { position: fixed; z-index: 1000; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: .5rem; width: min(92vw, 420px); pointer-events: none; }
.m4-toast {
  pointer-events: auto; padding: .85rem 1rem; border-radius: var(--radius); background: var(--c-ink); color: var(--c-surface);
  box-shadow: var(--shadow-lg); font-weight: 600; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s;
}
.m4-toast.is-visible { opacity: 1; transform: none; }
.m4-toast--error { background: var(--c-danger); }
.m4-backdrop { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--c-ink) 45%, transparent); opacity: 0; pointer-events: none; transition: opacity .25s; }
.m4-backdrop.is-open { opacity: 1; pointer-events: auto; }
html.m4-lock { overflow: hidden; }

/* ------------------------------------------------------------------ line items (drawer + cart page) */
.m4-line {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: .9rem; align-items: start;
  padding: 1rem 0; border-bottom: 1px solid var(--c-line); transition: opacity .2s ease;
}
.m4-line:last-child { border-bottom: 0; }
.m4-line.is-removing { opacity: .35; pointer-events: none; }
.m4-line__thumb { display: block; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-surface-2); border: 1px solid var(--c-line); }
.m4-line__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m4-line__body { min-width: 0; }
.m4-line__eyebrow { margin: 0 0 .15rem; }
.m4-line__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 600; line-height: 1.35; color: var(--c-ink); text-decoration: none;
}
.m4-line__title:hover { color: var(--c-brand); }
.m4-line__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .35rem 0 0; font-size: .8125rem; color: var(--c-ink-2); }
.m4-format { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; padding: .1rem .4rem; border-radius: var(--radius-sm); background: var(--c-surface-2); color: var(--c-ink-2); }
.m4-line__side { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; text-align: right; }
.m4-line__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.m4-line__remove {
  appearance: none; border: 0; background: none; color: var(--c-ink-2); cursor: pointer; border-radius: 50%;
  width: 2.75rem; height: 2.75rem; margin: -.35rem -.75rem -.35rem 0; display: grid; place-items: center; transition: background .15s, color .15s;
}
.m4-line__remove:hover { background: var(--c-surface-2); color: var(--c-danger); }
.m4-line__remove .icon { width: 1.1rem; height: 1.1rem; }
.m4-line__remove-text { margin-top: .35rem; min-height: 2.75rem; }
.m4-line--compact { grid-template-columns: 4rem minmax(0, 1fr) auto; gap: .75rem; padding: .85rem 0; }
.m4-line--compact .m4-line__title { font-size: .9375rem; }
@media (min-width: 640px) {
  .m4-cart-items .m4-line { grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 1.25rem; padding: 1.25rem 0; }
}

/* ------------------------------------------------------------------ coupon block */
.m4-coupon { margin: .25rem 0 .75rem; }
.m4-coupon__toggle {
  list-style: none; display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .6rem 0; min-height: 2.75rem;
  font-size: .9rem; font-weight: 600; color: var(--c-ink);
}
.m4-coupon__toggle::-webkit-details-marker { display: none; }
.m4-coupon__toggle .icon { width: 1.05rem; height: 1.05rem; color: var(--c-ink-2); }
.m4-coupon__chev { margin-left: auto; transition: transform .2s; }
.m4-coupon__details[open] .m4-coupon__chev { transform: rotate(180deg); }
.m4-coupon__form { margin: .25rem 0 .25rem; }
.m4-coupon__form .input { text-transform: uppercase; letter-spacing: .04em; }
.m4-coupon__form .input::placeholder { text-transform: none; letter-spacing: 0; }
.m4-coupon__msg { margin: .4rem 0 0; }
.m4-coupon__applied { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.m4-coupon__chip { display: inline-flex; align-items: center; gap: .35rem; }
.m4-coupon__chip .icon { width: .95rem; height: .95rem; }
.m4-coupon__label { font-weight: 500; }

/* ------------------------------------------------------------------ totals */
.m4-totals { display: grid; gap: .45rem; padding-top: .75rem; border-top: 1px solid var(--c-line); font-variant-numeric: tabular-nums; }
.m4-totals .summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .9375rem; color: var(--c-ink-2); }
.m4-totals .summary-row > :last-child { color: var(--c-ink); }
.m4-totals .summary-total { margin-top: .35rem; padding-top: .75rem; border-top: 1px dashed var(--c-line); font-size: 1.125rem; font-weight: 800; color: var(--c-ink); }
.m4-totals .m4-discount, .m4-totals .m4-discount > :last-child { color: var(--c-success); font-weight: 600; }
.m4-checkout-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem; }
.m4-checkout-btn .icon { width: 1.05rem; height: 1.05rem; }
.m4-express-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .75rem; margin: .75rem 0 0; font-size: .8125rem; color: var(--c-ink-2); }
.m4-express-note__marks { display: inline-flex; gap: .5rem; }
.m4-express-note__marks > span {
  display: inline-flex; align-items: center; gap: .15rem; padding: .2rem .5rem; border: 1px solid var(--c-line);
  border-radius: 999px; font-weight: 700; font-size: .75rem; color: var(--c-ink); background: var(--c-surface);
}
.m4-express-note__marks .icon { width: .9rem; height: .9rem; }
.m4-express-note__text { width: 100%; text-align: center; }
.m4-min-note { margin: .75rem 0 0; font-size: .875rem; }

/* ------------------------------------------------------------------ cart drawer body */
#cart-drawer-body { height: 100%; }
.m4-drawer { display: flex; flex-direction: column; height: 100%; min-height: 100%; background: var(--c-surface); }
.m4-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--c-line); position: sticky; top: 0; background: var(--c-surface); z-index: 1;
}
.m4-drawer__title { margin: 0; display: flex; align-items: baseline; gap: .5rem; }
.m4-drawer__count { font-size: .8125rem; font-weight: 500; color: var(--c-ink-2); }
/* The drawer shell (M1) may bring its own header + close button: then hide ours. */
#cart-drawer > header ~ #cart-drawer-body .m4-drawer__head,
#cart-drawer > .drawer__head ~ #cart-drawer-body .m4-drawer__head,
#cart-drawer > .drawer-head ~ #cart-drawer-body .m4-drawer__head,
#cart-drawer > .drawer__header ~ #cart-drawer-body .m4-drawer__head { display: none; }
.m4-drawer__items { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.25rem; margin: 0; list-style: none; }
.m4-drawer__foot {
  padding: .75rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line);
  background: var(--c-surface); box-shadow: 0 -10px 24px -18px color-mix(in srgb, var(--c-ink) 40%, transparent);
}
.m4-drawer__foot .m4-coupon { margin-top: 0; }
.m4-drawer__foot .m4-checkout-btn { margin-top: .85rem; }
.m4-drawer__links { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .6rem; font-size: .875rem; }
.m4-drawer__viewcart { color: var(--c-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: .5rem 0; }
.m4-drawer__instant { display: inline-flex; align-items: center; gap: .3rem; color: var(--c-ink-2); }
.m4-drawer__instant .icon { width: .95rem; height: .95rem; color: var(--c-accent); }
.m4-drawer__empty { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 2rem 1.5rem; }
.m4-drawer__empty p { max-width: 30ch; margin-inline: auto; }
.m4-drawer__error { margin: 1.25rem; }
.m4-skel-row { display: flex; gap: .75rem; padding: 1rem 0; }
.m4-skel-thumb { width: 4rem; height: 4rem; border-radius: var(--radius-sm); flex: none; }
.m4-skel-lines { flex: 1; display: grid; gap: .5rem; align-content: center; }
.m4-skel-lines .skeleton { height: .8rem; border-radius: 4px; }
.m4-skel-lines .skeleton:last-child { width: 55%; }

/* ------------------------------------------------------------------ /cart page */
.m4-cart-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1.5rem; margin: .5rem 0 1.5rem; }
.m4-cart-head .page-title { margin: 0; }
.m4-cart-head__sub { margin: .35rem 0 0; }
.m4-cart-head .link-more { display: inline-flex; align-items: center; gap: .35rem; }
.m4-cart-head .link-more .icon { width: 1rem; height: 1rem; }
.m4-cart-grid { display: grid; gap: 1.5rem; align-items: start; }
.m4-cart-main { min-width: 0; }
.m4-cart-items {
  list-style: none; margin: 0; padding: 0 1rem; background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
@media (min-width: 640px) { .m4-cart-items { padding: 0 1.5rem; } }
.m4-cart-reassure { margin-top: 1rem; }
.m4-reassure { display: flex; gap: .85rem; align-items: flex-start; font-size: .9rem; color: var(--c-ink-2); }
.m4-reassure strong { display: block; color: var(--c-ink); margin-bottom: .15rem; }
.m4-reassure > .icon { width: 1.4rem; height: 1.4rem; flex: none; color: var(--c-brand); margin-top: .1rem; }
.m4-cart-side { display: grid; gap: 1rem; }
.m4-summary {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 1.25rem; box-shadow: var(--shadow-sm);
}
@media (min-width: 640px) { .m4-summary { padding: 1.5rem; } }
.m4-summary__title { margin: 0 0 .5rem; }
.m4-summary__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.m4-summary__head .m4-summary__title { margin: 0; }
.m4-summary__edit { color: var(--c-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.m4-trust { list-style: none; margin: 0; padding: 1rem 1.25rem; display: grid; gap: .9rem; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface-2); }
.m4-trust li { display: flex; gap: .75rem; align-items: flex-start; font-size: .875rem; color: var(--c-ink-2); }
.m4-trust li > .icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--c-brand); margin-top: .1rem; }
.m4-trust strong { display: block; color: var(--c-ink); font-size: .9rem; }
.m4-cart-empty { padding: 3rem 1.5rem; text-align: center; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.m4-cart-empty p { max-width: 44ch; margin-inline: auto; }
.m4-cart-empty .btn .icon { width: 1.1rem; height: 1.1rem; }
@media (min-width: 900px) {
  .m4-cart-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem; }
  .m4-cart-side { position: sticky; top: 1.5rem; }
}

/* ------------------------------------------------------------------ /checkout */
.m4-checkout { background: var(--c-surface-2); padding: 1rem 0 3rem; min-height: 70vh; }
.m4-checkout__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin: .25rem 0 1.25rem; font-size: .875rem; }
.m4-back { display: inline-flex; align-items: center; gap: .25rem; color: var(--c-ink-2); text-decoration: none; font-weight: 600; min-height: 2.75rem; }
.m4-back:hover { color: var(--c-ink); }
.m4-back .icon { width: 1rem; height: 1rem; }
.m4-steps { display: none; list-style: none; margin: 0; padding: 0; gap: .5rem; color: var(--c-ink-2); }
.m4-steps li { display: inline-flex; align-items: center; gap: .5rem; }
.m4-steps li + li::before { content: ""; width: 1.5rem; height: 1px; background: var(--c-line); }
.m4-steps .is-done { color: var(--c-success); }
.m4-steps .is-current { color: var(--c-ink); font-weight: 700; }
.m4-secure { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--c-success); }
.m4-secure .icon { width: 1rem; height: 1rem; }
@media (min-width: 720px) { .m4-steps { display: flex; } }

.m4-checkout__grid { display: grid; gap: 1.25rem; grid-template-areas: "side" "main" "trust"; align-items: start; }
.m4-checkout__side { grid-area: side; min-width: 0; }
.m4-checkout__main { grid-area: main; min-width: 0; }
.m4-checkout__trust { grid-area: trust; }
.m4-summary-toggle {
  appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1rem; min-height: 3rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface);
  font: inherit; font-weight: 600; color: var(--c-ink); cursor: pointer; margin-bottom: .75rem;
}
.m4-summary-toggle > span { display: inline-flex; align-items: center; gap: .45rem; color: var(--c-brand); }
.m4-summary-toggle .icon { width: 1.1rem; height: 1.1rem; }
.m4-summary-toggle strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.m4-checkout__side.is-collapsed .m4-summary { display: none; }
@media (min-width: 900px) {
  .m4-checkout { padding-top: 1.5rem; }
  .m4-checkout__grid { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 420px); grid-template-rows: auto 1fr; grid-template-areas: "main side" "main trust"; gap: 1.5rem 2.5rem; }
  .m4-summary-toggle { display: none; }
  .m4-checkout__side.is-collapsed .m4-summary { display: block; }
}

.m4-pay {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 1.25rem; box-shadow: var(--shadow-sm); display: grid; gap: 1.25rem;
}
@media (min-width: 640px) { .m4-pay { padding: 2rem; } }
.m4-pay__title { margin: 0; }
.m4-pay > .alert { margin: 0; }
.m4-express { display: grid; gap: .6rem; }
.m4-express__label { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); text-align: center; }
.m4-express__el { min-height: 48px; }
.m4-express__skeleton { height: 48px; border-radius: var(--radius); }
.m4-or { display: flex; align-items: center; gap: .9rem; color: var(--c-ink-2); font-size: .8125rem; }
.m4-or::before, .m4-or::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.m4-or[hidden] { display: none; }
.m4-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .9rem; }
.m4-legend { display: flex; align-items: center; gap: .6rem; padding: 0; margin: 0 0 .9rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--c-ink); }
.m4-legend__n { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: .8125rem; font-family: var(--font-body); background: var(--c-brand); color: var(--c-brand-ink); }
.m4-fieldset .field { margin: 0; }
.m4-mailcheck { margin: .35rem 0 0; font-size: .875rem; color: var(--c-warning); }
.m4-mailcheck .m4-link-btn { color: var(--c-brand); font-weight: 700; font-size: inherit; padding: 0; }
.m4-optin { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.m4-optin input { margin-top: .2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--c-brand); flex: none; }
.m4-payment-el { min-height: 120px; }
.m4-payment-el__skeleton { height: 190px; border-radius: var(--radius); }
.m4-stripe-note { display: flex; align-items: center; gap: .4rem; margin: .25rem 0 0; }
.m4-stripe-note .icon { width: .95rem; height: .95rem; flex: none; }
.m4-pay__btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.25rem; font-size: 1.0625rem; }
.m4-pay__btn .icon { width: 1.1rem; height: 1.1rem; }
.m4-legal { margin: -.25rem 0 0; font-size: .8125rem; line-height: 1.55; color: var(--c-ink-2); text-align: center; }
.m4-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.m4-account-note {
  display: flex; gap: .85rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--radius);
  background: var(--c-brand-soft); color: var(--c-ink); font-size: .875rem;
}
.m4-account-note > .icon { width: 1.3rem; height: 1.3rem; flex: none; color: var(--c-brand); margin-top: .1rem; }
.m4-account-note strong { display: block; }
.m4-account-note span { color: var(--c-ink-2); }
.m4-testnote { font-size: .875rem; }

/* demo (test mode) payment panel */
.m4-demo { display: grid; gap: .9rem; padding: 1rem; border: 1px dashed var(--c-warning); border-radius: var(--radius-lg); background: var(--c-surface); }
.m4-demo__banner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; font-size: .875rem; color: var(--c-ink-2); }
.m4-demo__banner strong { color: var(--c-ink); }
.m4-wallets { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.m4-wallet {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; height: 48px; border-radius: var(--radius);
  font: inherit; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; cursor: not-allowed; opacity: .55;
}
.m4-wallet .icon { width: 1.2rem; height: 1.2rem; }
.m4-wallet--apple { background: var(--c-ink); color: var(--c-surface); border: 1px solid var(--c-ink); }
.m4-wallet--google { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); }
.m4-demo__walletnote { margin: -.3rem 0 0; }
.m4-cardform { display: grid; gap: .9rem; }
.m4-cardform .field { margin: 0; }
.m4-cardform .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: end; }
.m4-cardinput { position: relative; }
.m4-cardinput .input { padding-right: 2.75rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.m4-cardinput .icon { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); width: 1.3rem; height: 1.3rem; color: var(--c-ink-2); pointer-events: none; }
.m4-freebox { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem; border-radius: var(--radius); background: var(--c-accent-soft); }
.m4-freebox > .icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--c-accent); }
.m4-freebox strong { display: block; }
.m4-freebox span { font-size: .9rem; color: var(--c-ink-2); }

/* summary mini items */
.m4-summary__items { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .8rem; max-height: 22rem; overflow-y: auto; }
.m4-mini { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; }
.m4-mini__thumb { aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-surface-2); border: 1px solid var(--c-line); }
.m4-mini__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m4-mini__body { min-width: 0; display: grid; gap: .1rem; }
.m4-mini__title { font-size: .9rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m4-mini__meta { font-size: .75rem; color: var(--c-ink-2); }
.m4-mini__price { font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ /order/{token} thank-you */
.m4-thanks { position: relative; overflow: hidden; overflow: clip; /* clip keeps the sticky account card working */ }
.m4-thanks__container { position: relative; }
.m4-thanks__hero { text-align: center; max-width: 46rem; margin: 0 auto 2.5rem; }
.m4-thanks__icon {
  width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-success); color: var(--c-surface); box-shadow: 0 0 0 10px color-mix(in srgb, var(--c-success) 16%, transparent);
  animation: m4-pop .6s cubic-bezier(.2, 1.4, .4, 1) both;
}
.m4-thanks__icon .icon { width: 2.1rem; height: 2.1rem; }
@keyframes m4-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.m4-thanks__title { margin: .25rem 0 .5rem; text-wrap: balance; }
.m4-thanks__lead { margin: 0 auto; max-width: 38rem; }
.m4-thanks__meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 1.5rem auto 0; max-width: 40rem;
  background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden;
}
.m4-thanks__meta > div { background: var(--c-surface); padding: .8rem 1rem; text-align: left; }
.m4-thanks__meta dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-2); }
.m4-thanks__meta dd { margin: .15rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .m4-thanks__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.m4-thanks__grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .m4-thanks__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; } }
.m4-thanks__state { max-width: 36rem; margin: 2rem auto; text-align: center; }
.m4-dl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
.m4-dl-head .h3, .m4-dl-head p { margin: 0; }
.m4-dl-head .btn { display: inline-flex; align-items: center; gap: .45rem; }
.m4-dl-head .btn .icon { width: 1.05rem; height: 1.05rem; }
.m4-dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.m4-dl { padding: 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: var(--shadow-sm); }
@media (min-width: 640px) { .m4-dl { padding: 1.25rem; } }
.m4-dl__head { display: flex; gap: .9rem; align-items: center; }
.m4-dl__thumb { width: 4.5rem; flex: none; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-surface-2); border: 1px solid var(--c-line); }
.m4-dl__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m4-dl__info { min-width: 0; }
.m4-dl__title { font-weight: 700; color: var(--c-ink); text-decoration: none; line-height: 1.35; }
a.m4-dl__title:hover { color: var(--c-brand); }
.m4-dl__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: .35rem 0 0; font-size: .8125rem; color: var(--c-ink-2); }
.m4-files { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.m4-file {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .75rem; align-items: center;
  padding: .7rem .8rem; border-radius: var(--radius); background: var(--c-surface-2);
}
.m4-file__ext {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--c-surface); border: 1px solid var(--c-line); font-size: .6875rem; font-weight: 800; letter-spacing: .03em; color: var(--c-brand);
}
.m4-file__body { min-width: 0; display: grid; gap: .1rem; }
.m4-file__name { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.m4-file__meta { font-size: .75rem; color: var(--c-ink-2); }
.m4-file__btn, .m4-file > .badge { grid-column: 1 / -1; justify-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; }
.m4-file__btn .icon { width: 1rem; height: 1rem; }
@media (min-width: 520px) {
  .m4-file { grid-template-columns: auto minmax(0, 1fr) auto; }
  .m4-file__btn, .m4-file > .badge { grid-column: auto; justify-self: end; }
}
.m4-files-empty { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0; font-size: .875rem; color: var(--c-ink-2); }
.m4-files-empty .icon { width: 1rem; height: 1rem; flex: none; }
.m4-dl-note { margin: 1rem 0 0; }
.m4-thanks__side { display: grid; gap: 1rem; }
@media (min-width: 900px) { .m4-thanks__side { position: sticky; top: calc(var(--header-h) + 16px); } }
/* license / All Access / help: one full-width row under downloads + account (no tall sidebar next to a short list) */
.m4-thanks__extras { position: relative; z-index: 1; display: grid; gap: 1rem; margin-top: 2rem; align-items: stretch; }
@media (min-width: 640px) { .m4-thanks__extras { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.m4-thanks__extras > * { display: flex; flex-direction: column; align-items: flex-start; }
.m4-thanks__extras .link-more, .m4-thanks__extras .m4-upsell .btn { margin-top: auto; }
.m4-thanks__extras .m4-upsell { display: flex; }
.m4-thanks__extras .m4-upsell .btn { align-self: stretch; }
.m4-side-card { padding: 1.25rem; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); }
.m4-side-card h2 { margin: .6rem 0 .35rem; }
.m4-side-card p { margin: 0 0 .9rem; font-size: .9rem; color: var(--c-ink-2); }
.m4-side-card p strong { color: var(--c-ink); overflow-wrap: anywhere; }
.m4-side-card__icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-brand-soft); color: var(--c-brand); }
.m4-side-card__icon .icon { width: 1.2rem; height: 1.2rem; }
.m4-side-card__more { margin: .75rem 0 0 !important; }
.m4-side-card .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.m4-side-card .btn .icon { width: 1rem; height: 1rem; }
.m4-account-card { border-color: color-mix(in srgb, var(--c-brand) 35%, var(--c-line)); }
.m4-magic-form { margin: 0; }

/* confetti — decorative, first view only, disabled for reduced motion */
.m4-confetti { position: absolute; inset: 0 0 auto 0; height: 100vh; pointer-events: none; overflow: hidden; z-index: 0; }
.m4-thanks__hero, .m4-thanks__grid { position: relative; z-index: 1; }
.m4-confetti__p {
  position: absolute; top: -12px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; opacity: 0;
  transform: scale(var(--s)) rotate(var(--r));
  animation: m4-fall var(--t) cubic-bezier(.25, .6, .45, 1) var(--d) 1 forwards;
}
.m4-confetti__p--0 { background: var(--c-brand); }
.m4-confetti__p--1 { background: var(--c-accent); border-radius: 50%; width: 9px; height: 9px; }
.m4-confetti__p--2 { background: var(--c-success); }
.m4-confetti__p--3 { background: var(--c-warning); height: 6px; width: 14px; }
@keyframes m4-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(var(--s)) rotate(var(--r)); }
  8% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift), 85vh, 0) scale(var(--s)) rotate(calc(var(--r) + 540deg)); }
}

/* All Access upsell (CONVENTIONS §13) */
.m4-upsell { display: grid; gap: .5rem; padding: 1.25rem; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--c-brand-soft), var(--c-accent-soft)); border: 1px solid var(--c-line); }
.m4-upsell .badge { justify-self: start; }
.m4-upsell__title { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; color: var(--c-ink); }
.m4-upsell__text { margin: 0 0 .35rem; font-size: .875rem; color: var(--c-ink-2); }
.m4-upsell .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.m4-upsell .btn .icon { width: 1rem; height: 1rem; }

/* processing */
.m4-processing__box { max-width: 34rem; margin: 3rem auto; text-align: center; }
.m4-processing__spinner { display: grid; place-items: center; margin-bottom: 1rem; }
.m4-processing__spinner .spinner { width: 2.5rem; height: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
  .m4-confetti { display: none; }
  .m4-thanks__icon, [data-cart-count].m4-bump { animation: none; }
  .m4-line, .m4-toast, .m4-backdrop, .m4-coupon__chev { transition: none; }
}
/* ===== end M4 ===== */

/* ===== M5: account ===== */
/* Accounts, sign-in, library, orders, settings, wishlist (M5). Design tokens only; fallbacks keep it usable before tokens load. */
.acct-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Auth pages ------------------------------------------------------------ */
.auth {
  position: relative;
  padding-block: clamp(28px, 6vw, 80px);
  background:
    radial-gradient(900px 420px at 0% -10%, var(--c-brand-soft, #fdecee), transparent 62%),
    radial-gradient(760px 420px at 105% 110%, var(--c-accent-soft, #fdf0e7), transparent 60%);
}
.auth-shell { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; grid-template-columns: minmax(0, 1fr); max-width: 1060px; }
@media (min-width: 900px) { .auth-shell { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); } }
.auth-shell.auth-shell--single { grid-template-columns: minmax(0, 1fr); justify-items: center; max-width: 560px; }
.auth-card {
  width: 100%; max-width: 460px; margin-inline: auto; box-sizing: border-box;
  display: grid; gap: 18px;
  padding: clamp(22px, 5vw, 36px);
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line, #ebe4df);
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-lg, 0 24px 60px -24px rgba(28, 25, 23, .25));
}
.auth-card > * { margin: 0; }
.auth-card__head { display: grid; gap: 8px; justify-items: center; text-align: center; }
.auth-card__head > * { margin: 0; }
.auth-badge {
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  background: var(--c-brand-soft, #fdecee); color: var(--c-brand, #d61f2c);
}
.auth-badge .icon { width: 26px; height: 26px; }
.auth-badge--mail { animation: m5-float 3.2s ease-in-out infinite; }
.auth-badge--warn { background: var(--c-accent-soft, #fdf0e7); color: var(--c-warning, #b45309); }
.auth-badge--ok { background: var(--c-surface-2, #faf7f5); color: var(--c-success, #15803d); }
.auth-title { font-family: var(--font-display, inherit); letter-spacing: -.01em; }
.auth-lead { max-width: 36ch; margin-inline: auto; }
.auth-email { color: var(--c-ink, #1c1917); word-break: break-all; }

.auth-tabs.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0;
  background: var(--c-surface-2, #faf7f5); border: 1px solid var(--c-line, #ebe4df); border-radius: 999px;
}
.auth-tabs .tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; margin: 0; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--c-ink-2, #6b6461); font-weight: 600; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.auth-tabs .tab::after { display: none; }
.auth-tabs .tab:hover { color: var(--c-ink, #1c1917); }
.auth-tabs .tab.is-active { background: var(--c-surface, #fff); color: var(--c-ink, #1c1917); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .1)); }
.auth-tabs .tab:focus-visible { outline: 2px solid var(--c-brand, #d61f2c); outline-offset: 2px; }
.auth-panel.tab-panel { padding: 0; border: 0; margin: 0; }
.auth-panel[hidden] { display: none !important; }
.auth-form { display: grid; gap: 16px; margin: 0; }
.auth-form .field, .auth-code-form .field { margin: 0; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-label-row .label { margin-bottom: 0; }
.auth-label-row a, .auth-foot a { color: var(--c-brand, #d61f2c); font-weight: 600; }
.auth-hint {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px;
  border-radius: var(--radius, 12px); background: var(--c-surface-2, #faf7f5); color: var(--c-ink-2, #6b6461); line-height: 1.5;
}
.auth-hint .icon { flex: none; margin-top: 2px; color: var(--c-brand, #d61f2c); }
.auth-foot { text-align: center; color: var(--c-ink-2, #6b6461); font-size: .95rem; }
.auth-optin { display: flex; gap: 10px; align-items: flex-start; color: var(--c-ink-2, #6b6461); font-size: .93rem; line-height: 1.5; cursor: pointer; }
.auth-optin input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--c-brand, #d61f2c); }
.auth-legal { margin: 0; text-align: center; }
.auth-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.auth-sent { display: grid; gap: 14px; justify-items: center; text-align: center; }
.auth-sent > * { margin: 0; }
.auth-sent .auth-code-form { width: 100%; display: grid; gap: 14px; margin: 4px 0 0; text-align: left; }
.auth-mailbox { max-width: 280px; }
.auth-sent__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.auth-sent__actions form { margin: 0; }
.auth-note { max-width: 38ch; }

.code-input.input {
  height: 64px; text-align: center; font-size: clamp(1.6rem, 7vw, 2rem); font-weight: 700;
  letter-spacing: .45em; padding-left: .45em; font-variant-numeric: tabular-nums;
}
.code-input::placeholder { color: var(--c-line, #ebe4df); letter-spacing: .45em; }
.field.is-complete .code-input { border-color: var(--c-success, #15803d); }

.pw-field { position: relative; }
.pw-field .input { width: 100%; padding-right: 52px; box-sizing: border-box; }
.pw-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--radius-sm, 8px); background: transparent; color: var(--c-ink-2, #6b6461); cursor: pointer;
}
.pw-toggle:hover, .pw-toggle.is-active { color: var(--c-brand, #d61f2c); }
.pw-toggle:focus-visible { outline: 2px solid var(--c-brand, #d61f2c); outline-offset: -4px; }
.pw-toggle.is-active::after { content: ""; position: absolute; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(-45deg); }

.auth-aside { display: none; }
@media (min-width: 900px) { .auth-aside { display: block; padding: 8px 0; } }
.auth-aside > .eyebrow { margin: 0; }
.auth-aside__title { margin: 8px 0 26px; max-width: 17ch; font-family: var(--font-display, inherit); font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.15; letter-spacing: -.015em; }
.auth-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.auth-perks li { display: flex; gap: 14px; align-items: flex-start; }
.auth-perks__icon {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--c-surface, #fff); color: var(--c-brand, #d61f2c);
  border: 1px solid var(--c-line, #ebe4df); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .08));
}
.auth-perks strong { display: block; color: var(--c-ink, #1c1917); }
.auth-perks__text { display: block; margin-top: 2px; color: var(--c-ink-2, #6b6461); font-size: .94rem; line-height: 1.5; }

/* --- Account shell ----------------------------------------------------------- */
.account-header__sub { margin: 6px 0 0; }
.account-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; color: var(--c-ink-2, #6b6461); text-decoration: none; }
.account-back:hover { color: var(--c-ink, #1c1917); }
.account-shell { display: grid; gap: clamp(18px, 3vw, 40px); padding-block: clamp(18px, 3vw, 36px) clamp(48px, 7vw, 88px); }
@media (min-width: 960px) { .account-shell { grid-template-columns: 236px minmax(0, 1fr); align-items: start; } }
.account-main { display: grid; gap: clamp(20px, 3vw, 32px); min-width: 0; align-content: start; }
.account-main > * { margin: 0; }

.account-nav { min-width: 0; }
.account-nav__list {
  list-style: none; margin: 0; padding: 2px 0 4px; display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.account-nav__list::-webkit-scrollbar { display: none; }
.account-nav__list > li { flex: none; scroll-snap-align: start; }
.account-nav__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--c-line, #ebe4df); border-radius: 999px; background: var(--c-surface, #fff);
  color: var(--c-ink-2, #6b6461); font: inherit; font-weight: 600; font-size: .95rem; white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.account-nav__link:hover { color: var(--c-ink, #1c1917); }
.account-nav__link:focus-visible { outline: 2px solid var(--c-brand, #d61f2c); outline-offset: 2px; }
.account-nav__link.is-active { background: var(--c-ink, #1c1917); border-color: var(--c-ink, #1c1917); color: var(--c-surface, #fff); }
.account-nav__count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box;
  border-radius: 999px; background: var(--c-brand-soft, #fdecee); color: var(--c-brand, #d61f2c); font-size: .75rem; font-weight: 700;
}
.account-nav__count[hidden] { display: none; }
.account-nav__sep form { margin: 0; }
@media (min-width: 960px) {
  .account-nav { position: sticky; top: calc(var(--header-h, 80px) + 16px); }
  .account-nav__list {
    flex-direction: column; gap: 2px; overflow: visible; padding: 8px;
    background: var(--c-surface, #fff); border: 1px solid var(--c-line, #ebe4df); border-radius: var(--radius-lg, 20px);
  }
  .account-nav__link { width: 100%; border: 0; border-radius: var(--radius, 12px); background: transparent; }
  .account-nav__link:hover { background: var(--c-surface-2, #faf7f5); }
  .account-nav__link.is-active { background: var(--c-brand-soft, #fdecee); color: var(--c-brand, #d61f2c); }
  .account-nav__count { margin-left: auto; }
  .account-nav__sep { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--c-line, #ebe4df); }
}

/* --- Dashboard --------------------------------------------------------------- */
.account-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 14px); }
.stat-tile {
  display: grid; gap: 2px; height: 100%; box-sizing: border-box; padding: clamp(14px, 2.4vw, 20px);
  border: 1px solid var(--c-line, #ebe4df); border-radius: var(--radius-lg, 20px); background: var(--c-surface, #fff);
  color: var(--c-ink, #1c1917); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat-tile:hover { transform: translateY(-2px); border-color: transparent; box-shadow: var(--shadow, 0 10px 30px -12px rgba(0, 0, 0, .2)); }
.stat-tile__icon { width: 38px; height: 38px; margin-bottom: 8px; border-radius: 12px; display: grid; place-items: center; background: var(--c-brand-soft, #fdecee); color: var(--c-brand, #d61f2c); }
.stat-tile__value { font-family: var(--font-display, inherit); font-size: clamp(1.35rem, 3.2vw, 1.9rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-tile__label { color: var(--c-ink-2, #6b6461); font-size: .9rem; }

.member-card {
  display: grid; gap: 16px; align-items: center; padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--c-line, #ebe4df); border-radius: var(--radius-lg, 20px);
  background: linear-gradient(135deg, var(--c-brand-soft, #fdecee), var(--c-accent-soft, #fdf0e7));
}
@media (min-width: 720px) { .member-card { grid-template-columns: auto minmax(0, 1fr) auto; } }
.member-card--active { background: linear-gradient(135deg, var(--c-surface, #fff) 30%, var(--c-brand-soft, #fdecee)); border-left: 4px solid var(--c-brand, #d61f2c); }
.member-card__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--c-surface, #fff); color: var(--c-brand, #d61f2c); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .08)); }
.member-card__icon .icon { width: 24px; height: 24px; }
.member-card__body > * { margin: 0; }
.member-card__title { margin: 2px 0 4px !important; }
.member-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.verify-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.verify-banner > .icon { flex: none; }
.verify-banner__text { flex: 1 1 260px; display: grid; gap: 2px; }
.verify-banner__form { margin: 0; }
.account-block > .section-head { margin-bottom: 14px; }
.account-block > .section-head > * { margin: 0; }
.account-since { text-align: center; }

.account-empty {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: clamp(28px, 5vw, 52px) 20px; border: 1px dashed var(--c-line, #ebe4df); border-radius: var(--radius-lg, 20px); background: var(--c-surface, #fff);
}
.account-empty > .icon { width: 28px; height: 28px; padding: 16px; box-sizing: content-box; border-radius: 50%; background: var(--c-brand-soft, #fdecee); color: var(--c-brand, #d61f2c); }
.account-empty h2, .account-empty h3 { margin: 8px 0 0; }
.account-empty p { max-width: 46ch; margin: 0 0 10px; }

/* --- Library ----------------------------------------------------------------- */
.library-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.library-search { flex: 1 1 280px; max-width: 460px; margin: 0; }
.library-chips { gap: 8px; }
.library-count { margin-top: -8px !important; }
.library-list { display: grid; gap: 12px; }
.library-list--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.library-item {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px;
  border: 1px solid var(--c-line, #ebe4df); border-radius: var(--radius-lg, 20px); background: var(--c-surface, #fff);
  scroll-margin-top: calc(var(--header-h, 80px) + 24px); transition: border-color .2s ease, box-shadow .2s ease;
}
@media (min-width: 640px) { .library-item { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 16px; } }
.library-item:target { border-color: var(--c-brand, #d61f2c); box-shadow: 0 0 0 3px var(--c-brand-soft, #fdecee); }
.library-item__media { display: block; align-self: start; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius, 12px); background: var(--c-surface-2, #faf7f5); }
.library-item__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.library-item__body { min-width: 0; display: grid; gap: 8px; align-content: start; }
.library-item__title { margin: 0; font-size: 1.02rem; line-height: 1.35; font-weight: 700; }
.library-item__title a { color: inherit; text-decoration: none; }
.library-item__title a:hover { color: var(--c-brand, #d61f2c); }
.library-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.library-item__meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.library-item__notice { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--c-ink-2, #6b6461); }
.library-item__notice .icon { flex: none; margin-top: 2px; }
.library-item__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.library-item--compact { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; }
.library-item--compact .library-item__title { font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.library-item__files { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 640px) { .library-item__media { grid-row: span 2; } .library-item__files { grid-column: 2; } }
.file-list { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.file-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 6px 6px 6px 12px; border-radius: var(--radius, 12px); background: var(--c-surface-2, #faf7f5);
}
.file-row__icon { color: var(--c-ink-2, #6b6461); }
.file-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; font-weight: 600; }
.file-row__size { white-space: nowrap; }
.file-row__btn { white-space: nowrap; }
@media (max-width: 520px) {
  .file-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0; }
  .file-row__name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .file-row__size { grid-column: 2; grid-row: 2; }
  .file-row__btn { grid-column: 3; grid-row: 1 / span 2; }
}
.file-row.is-exhausted .file-row__name { color: var(--c-ink-2, #6b6461); }

/* --- Orders ------------------------------------------------------------------ */
.orders-table-wrap { overflow-x: auto; border: 1px solid var(--c-line, #ebe4df); border-radius: var(--radius-lg, 20px); background: var(--c-surface, #fff); }
.orders-table { width: 100%; margin: 0; border: 0; }
.orders-table th, .orders-table td { vertical-align: middle; }
.orders-table__number { color: var(--c-ink, #1c1917); font-weight: 700; text-decoration: none; }
.orders-table__number:hover { color: var(--c-brand, #d61f2c); }
.orders-table__method { display: block; }
.orders-table__action { text-align: right; }
.order-thumbs { display: inline-flex; align-items: center; gap: 10px; }
.order-thumbs img { width: 36px; height: 36px; margin-left: -14px; object-fit: cover; border-radius: 9px; border: 2px solid var(--c-surface, #fff); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .1)); background: var(--c-surface-2, #faf7f5); }
.order-thumbs img:first-child { margin-left: 0; }
@media (max-width: 719px) {
  .orders-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .orders-table, .orders-table tbody, .orders-table tr, .orders-table th, .orders-table td { display: block; width: 100%; box-sizing: border-box; }
  .orders-table tr { padding: 14px 16px; border-bottom: 1px solid var(--c-line, #ebe4df); }
  .orders-table tr:last-child { border-bottom: 0; }
  .orders-table th, .orders-table td { padding: 3px 0; border: 0; text-align: left; }
  .orders-table [data-label] { display: flex; align-items: center; gap: 8px; }
  .orders-table [data-label]::before { content: attr(data-label); margin-right: auto; color: var(--c-ink-2, #6b6461); font-size: .85rem; font-weight: 500; }
  .orders-table__method { display: inline; margin-left: 6px; }
  .orders-table__action { padding-top: 10px !important; text-align: left; }
  .orders-table__action .btn { width: 100%; }
}
.order-status { gap: 8px 14px; align-items: center; }
.order-layout { display: grid; gap: 20px; }
@media (min-width: 1100px) { .order-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .order-aside { position: sticky; top: calc(var(--header-h, 80px) + 16px); } }
.order-items { display: grid; gap: 12px; }
.order-item__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.order-aside { display: grid; gap: 14px; }
.order-aside__links { gap: 8px; }

/* --- Settings ---------------------------------------------------------------- */
.settings { max-width: 780px; }
.settings-panel { display: grid; gap: 16px; padding: clamp(18px, 3vw, 28px); }
.settings-panel__head > * { margin: 0; }
.settings-panel__head h2 { margin-bottom: 4px; }
.settings-panel form { margin: 0; }
.settings .form-row > .field { align-content: start; }
.settings-verified { display: inline-flex; align-items: center; gap: 4px; color: var(--c-success, #15803d); font-weight: 600; }
.settings-verified .icon { width: 14px; height: 14px; }
.settings .input[readonly] { background: var(--c-surface-2, #faf7f5); color: var(--c-ink-2, #6b6461); }

/* --- Wishlist ---------------------------------------------------------------- */
.wishlist-guest { display: grid; gap: 22px; padding-block: clamp(18px, 3vw, 30px) clamp(48px, 7vw, 88px); }
.wishlist-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px;
  border: 1px solid var(--c-line, #ebe4df); border-radius: var(--radius-lg, 20px);
  background: linear-gradient(135deg, var(--c-brand-soft, #fdecee), var(--c-accent-soft, #fdf0e7));
}
.wishlist-banner__icon { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--c-surface, #fff); color: var(--c-brand, #d61f2c); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .08)); }
.wishlist-banner__text { flex: 1 1 240px; display: grid; gap: 2px; }
.wishlist-banner__text span { color: var(--c-ink-2, #6b6461); font-size: .93rem; }
[data-wishlist-page] .is-removing { opacity: 0; transform: scale(.96); transition: opacity .25s ease, transform .25s ease; }

/* Wishlist hearts anywhere (behaviour in account.js) */
[data-wishlist][aria-pressed="true"], [data-wishlist].is-active { color: var(--c-brand, #d61f2c); }
[data-wishlist].is-popping .icon { animation: m5-pop .45s ease; }

/* Fallback toasts (only used when the UI kit's toast is unavailable) */
.acct-toasts { position: fixed; z-index: 1000; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 380px); pointer-events: none; }
.acct-toast { padding: 12px 16px; border-radius: var(--radius, 12px); background: var(--c-ink, #1c1917); color: var(--c-surface, #fff); box-shadow: var(--shadow-lg, 0 20px 40px -20px rgba(0, 0, 0, .4)); font-size: .95rem; animation: m5-in .25s ease; transition: opacity .3s ease, transform .3s ease; }
.acct-toast--error { background: var(--c-danger, #b91c1c); }
.acct-toast.is-leaving { opacity: 0; transform: translateY(8px); }

@keyframes m5-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes m5-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes m5-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .auth-badge--mail, [data-wishlist].is-popping .icon, .acct-toast { animation: none; }
  .stat-tile, .stat-tile:hover { transition: none; transform: none; }
}
/* ===== end M5 ===== */

/* ===== M3: search ===== */
/* Autocomplete dropdown (#search-suggest, behaviour in js/search.js), /search page, recommendation rails. Tokens only. */

/* --- autocomplete ------------------------------------------------------------------------------------------ */
#search-suggest.ss{padding:8px;font-size:.92rem;scrollbar-width:thin}
#site-search.ss-loading::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--c-brand),transparent);transform:translateX(-100%);animation:shimmer 1s var(--ease) infinite}
.ss-cols{display:grid;gap:4px 18px}
@media (min-width:720px){.ss-cols{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)}.ss-cols--single{grid-template-columns:1fr}}
.ss-col{min-width:0}
.ss-section{padding:4px 0 6px}
.ss-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 10px 4px;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-3)}
.ss-clear{border:0;background:none;padding:4px 6px;margin:-4px -6px;border-radius:6px;font:inherit;letter-spacing:.08em;color:var(--c-brand);cursor:pointer}
.ss-clear:hover{background:var(--c-brand-soft)}
.ss [role="option"]{display:flex;align-items:center;gap:10px;min-height:40px;padding:7px 10px;border-radius:12px;color:var(--c-ink);text-decoration:none;line-height:1.3;cursor:pointer;outline:none;transition:background-color var(--t-fast)}
.ss [role="option"]:hover,.ss [role="option"].is-active{background:var(--c-surface-2);color:var(--c-ink)}
.ss [role="option"].is-active{box-shadow:inset 3px 0 0 var(--c-brand)}
.ss [role="option"] .icon{flex:none;width:17px;height:17px;color:var(--c-ink-3)}
.ss mark{background:none;color:var(--c-brand-700,var(--c-brand));font-weight:800;padding:0}
.ss-row{position:relative;display:flex;align-items:center}
.ss-row>[role="option"]{flex:1;min-width:0;padding-right:40px}
.ss-remove{position:absolute;right:4px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--c-ink-3);cursor:pointer}
.ss-remove:hover{background:var(--c-surface-3,var(--c-surface-2));color:var(--c-ink)}
.ss-remove .icon{width:14px;height:14px}
.ss-cat{justify-content:space-between}
.ss-cat__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ss-cat .count{flex:none;font-size:.75rem;font-weight:700;color:var(--c-ink-3);font-variant-numeric:tabular-nums}
.ss-product{display:grid!important;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px!important;row-gap:2px;align-items:center}
.ss-product img{grid-row:1/3;width:56px;height:56px;object-fit:cover;border-radius:10px;background:var(--c-surface-2);border:1px solid var(--c-line)}
.ss-product__title{align-self:end;font-weight:650;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ss-product__price{align-self:start;display:flex;align-items:baseline;gap:6px;font-size:.85rem}
.ss-product__price .price{font-weight:800;color:var(--c-ink)}
.ss-product__price .price-compare{font-size:.8rem}
.ss-product__price .ss-included{font-size:.76rem;font-weight:800;color:var(--c-brand-700)}
.ss-all{margin-top:6px;justify-content:center;border:1.5px dashed var(--c-line-2);font-weight:650}
.ss-all .icon:last-child{transition:transform var(--t) var(--ease)}
.ss-all:hover .icon:last-child,.ss-all.is-active .icon:last-child{transform:translateX(3px);color:var(--c-brand)}
.ss-empty{margin:8px 10px 4px;color:var(--c-ink-2)}
.ss-cancel{display:none}

/* Phones: focused header search becomes a full-screen search sheet. */
@media (max-width:767px){
  #site-search.ss-overlay{position:fixed;z-index:1200;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;
    padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;background:var(--c-surface);border-bottom:1px solid var(--c-line);box-shadow:var(--shadow-sm)}
  #site-search.ss-overlay>*:not(#search-suggest):not(.ss-cancel):not(.sr-only){flex:1;min-width:0}
  #site-search.ss-overlay .ss-cancel{display:inline-flex;align-items:center;flex:none;min-height:44px;padding:0 6px;border:0;background:none;color:var(--c-brand);font-weight:700;cursor:pointer}
  #site-search.ss-overlay #search-suggest{position:fixed;top:calc(66px + env(safe-area-inset-top,0px));left:0;right:0;bottom:0;max-height:none;
    border:0;border-radius:0;box-shadow:none;padding:6px 8px calc(16px + env(safe-area-inset-bottom,0px));background:var(--c-surface)}
  /* the sticky header's backdrop-filter/transform would trap position:fixed children — lift them while searching */
  html.ss-locked .site-header{-webkit-backdrop-filter:none;backdrop-filter:none;transform:none;transition:none}
  #site-search.ss-overlay::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--c-surface)}
  #site-search.ss-overlay.ss-loading::after{bottom:0;left:0;right:0}
  html.ss-locked #search-suggest.ss [role="option"]{min-height:48px}
}

/* --- /search page ------------------------------------------------------------------------------------------ */
.srch-hero .eyebrow{margin-bottom:.2em}
.srch-hero__q{color:var(--c-brand);font-style:italic;font-weight:600;overflow-wrap:anywhere}
.srch-hero__form{margin-top:clamp(16px,2.4vw,24px);max-width:640px}
.srch-hero__form .input-group{background:var(--c-surface);box-shadow:var(--shadow-sm)}
.srch-note{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:10px 14px;max-width:640px;border-radius:14px;background:var(--c-surface);border:1px solid var(--c-line);color:var(--c-ink-2);font-size:.95rem;line-height:1.5}
.srch-note .icon{flex:none;width:18px;height:18px;margin-top:2px;color:var(--c-brand)}
.srch-note strong{color:var(--c-ink)}
.srch-note a{font-weight:700;color:var(--c-brand)}

.srch-filters__head{display:none}
.srch-group>summary{min-height:32px}
.srch-group__chev{width:16px;height:16px;color:var(--c-ink-3);transition:transform var(--t) var(--ease)}
.srch-group[open]>summary .srch-group__chev{transform:rotate(180deg)}
.srch-options{display:flex;flex-direction:column;gap:2px}
.srch-option{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:4px 8px;margin-inline:-8px;border-radius:8px;transition:background-color var(--t-fast)}
.srch-option:hover{background:var(--c-surface-2)}
.srch-option input{margin:0}
.srch-option__label{flex:1;min-width:0;display:inline-flex;align-items:center;gap:6px}
.srch-option .count,.srch-filters .count{margin-left:auto;color:var(--c-ink-3);font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.srch-more{margin-top:6px;margin-left:-8px;min-height:32px;padding-inline:8px;color:var(--c-brand)}
.srch-chip .icon{width:14px;height:14px}
.srch-filters__actions{display:flex;flex-direction:column;gap:8px;padding-top:16px}
html.m3-js .srch-filters__form.is-loading{opacity:.6;pointer-events:none;transition:opacity var(--t)}
@media (min-width:1024px){html.m3-js .srch-filters [data-facet-apply]{display:none}}

.srch-toolbar{gap:10px 14px}
.srch-toolbar .toolbar__count{margin:0;margin-right:auto}
.srch-sort{display:flex;align-items:center;gap:8px}
.srch-sort .select{min-width:190px}
.srch-filter-toggle .badge{margin-left:2px}
.srch-active{margin:-4px 0 18px}
.srch-active .chip{min-height:34px;font-size:.84rem}
.srch-clear{font-size:.88rem}
.srch-capped{text-align:center;margin-top:12px}
.srch-block{margin-top:clamp(18px,3vw,28px)}
.srch-related{margin-bottom:16px;align-items:center}
.srch-related__label{font-size:.88rem;font-weight:700;color:var(--c-ink-2)}
.srch-related .count,.srch-block .chip .count{font-size:.78rem;font-weight:700;color:var(--c-ink-3);font-variant-numeric:tabular-nums}
.srch-block .h4{margin-bottom:12px}
.srch-block .chip .icon{width:14px;height:14px;color:var(--c-ink-3)}
.srch-empty .empty-state{padding-bottom:clamp(16px,3vw,28px)}
.srch-trending{padding-bottom:0}

/* Filters become an off-canvas sheet below the desktop breakpoint. */
@media (max-width:1023px){
  .srch-filters{position:fixed;z-index:1001;top:0;bottom:0;left:0;width:min(380px,90vw);display:flex;flex-direction:column;
    background:var(--c-surface);box-shadow:var(--shadow-lg);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
    transform:translateX(-104%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s linear .35s;overscroll-behavior:contain}
  .srch-filters.is-open{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
  .srch-filters__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px;border-bottom:1px solid var(--c-line)}
  .srch-filters__form{flex:1;overflow-y:auto;padding:4px 20px 0;-webkit-overflow-scrolling:touch}
  .srch-filters__actions{position:sticky;bottom:0;margin:0 -20px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));background:var(--c-surface);border-top:1px solid var(--c-line)}
  .srch-filters .filter-group:last-of-type{border-bottom:0}
}
@media (min-width:1024px){
  .srch-filter-toggle,.srch-backdrop{display:none}
  .srch-filters{padding-right:4px}
}
@media (max-width:639px){
  .srch-toolbar .toolbar__count{order:3;flex-basis:100%;font-size:.85rem}
  .srch-sort .select{min-width:0;max-width:52vw}
}
@media (max-width:767.98px){.srch-sort .select{font-size:16px}} /* ≥16px: no iOS focus zoom (as the collection toolbar) */

/* --- recommendation rails (/api/recs → partials/recs-block) ----------------------------------------------- */
[data-recs][aria-busy="true"]{min-height:120px}
.recs-block+.recs-block{margin-top:clamp(36px,5vw,64px)}
.recs-sub{display:flex;align-items:center;gap:8px}
.recs-sub .icon{flex:none;width:18px;height:18px;color:var(--c-sun,var(--c-accent))}
.recs-track .recs-item{min-width:0}
.recs-track .recs-item>.product-card{height:100%}
.recs-skeleton__title{width:min(280px,60%);height:30px;margin-bottom:22px;border-radius:10px}
.recs-skeleton .scroller__track{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .srch-filters,.srch-group__chev,.ss-all .icon:last-child{transition:none}
  #site-search.ss-loading::after{animation:none;transform:none;opacity:.5}
}
@media print{#search-suggest,.srch-filters,.srch-toolbar,[data-recs]{display:none!important}}
/* ===== end M3 ===== */
/* ===== M2: catalog ===== */
/* Collection pages (/collections/*, /themes), product page (/products/*), reviews. Design tokens only (CONVENTIONS §10). */
.m2-hide-sm,.m2-select-wrap.m2-hide-sm{display:none}
@media (min-width:640px){.m2-hide-sm{display:revert}.m2-select-wrap.m2-hide-sm{display:inline-flex}}

/* ------------------------------------------------------------------ collection hero */
.m2-hero{padding-block:clamp(14px,2.2vw,24px) clamp(14px,2vw,22px)}
.m2-hero__inner{display:flex;flex-direction:column;gap:12px}
.m2-hero .breadcrumbs{margin-bottom:0}
.m2-hero__main{display:flex;align-items:center;gap:clamp(14px,2.4vw,22px)}
.m2-hero__img{width:clamp(64px,9vw,96px);height:clamp(64px,9vw,96px);border-radius:var(--radius);object-fit:cover;background:var(--m2-accent,var(--c-surface-2));box-shadow:var(--shadow-sm);flex:none}
.m2-hero__text{min-width:0}
.m2-hero__heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.m2-hero .m2-hero__title{margin:.1em 0 0;font-size:clamp(1.9rem,1.35rem + 2.1vw,3rem);line-height:1.08}
.m2-hero__count{display:inline-flex;align-items:center;gap:.4em;margin:0;padding:.25em .8em;border-radius:var(--radius-pill);background:var(--c-surface);border:1px solid var(--c-line);font-size:var(--fs-sm);font-weight:700;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.m2-hero__desc{max-width:72ch;margin:0;color:var(--c-ink-2);font-size:1rem}
/* long category SEO text: below the results, never pushing products below the fold */
.m2-about{margin-top:clamp(36px,5vw,64px);padding-top:clamp(24px,3.5vw,40px);border-top:1px solid var(--c-line)}
.m2-about__body{max-width:78ch;color:var(--c-ink-2)}
.m2-about__body h2{font-size:1.3rem;color:var(--c-ink)}
.m2-empty{display:flex;justify-content:center;padding-block:clamp(12px,3vw,40px)}
.m2-empty .empty-state{margin-inline:auto}
.m2-hero__desc.prose h2{font-size:1.2rem;margin-top:0}
.m2-hero__desc.prose>*+*{margin-top:.7em}
.m2-hero__desc.is-clamped{max-height:6.2em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.m2-readmore{align-self:flex-start;margin-top:-6px;padding:4px 0;border:0;background:none;color:var(--c-brand);font-weight:700;font-size:var(--fs-sm);text-decoration:underline;text-underline-offset:3px}
.m2-hero--theme{background:radial-gradient(640px 220px at 6% 0%,var(--m2-accent,var(--c-accent-soft)),transparent 70%),radial-gradient(520px 240px at 96% 12%,var(--c-brand-soft),transparent 70%),var(--c-bg)}

/* chip scroller (categories A–Z, siblings, "across departments") */
.m2-chips{display:flex;flex-direction:column;gap:8px;min-width:0}
.m2-chips__title{font-weight:700;letter-spacing:.02em}
.m2-chips__scroller{position:relative;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-block:2px 6px}
.m2-chips__scroller::-webkit-scrollbar{display:none}
.m2-chips__scroller.has-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.m2-chips__scroller.has-left.has-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.m2-chips__scroller.has-left:not(.has-right){-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.m2-chips__list{display:flex;gap:8px;list-style:none;padding:0;margin:0;width:max-content}
.m2-chips__list li{scroll-snap-align:start}
.m2-chip{min-height:40px;padding:.35em .95em;background:var(--c-surface)}
.m2-chip--img{padding-left:.3em}
.m2-chip img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--c-surface-2)}
.m2-chip__count{font-weight:600;font-size:.8em;opacity:.6;font-variant-numeric:tabular-nums}
.m2-chip.is-active .m2-chip__count{opacity:.8}

/* A–Z browser (large departments, /themes) */
.m2-az{border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-surface);max-width:100%}
.m2-az>summary{display:flex;align-items:center;gap:.5em;min-height:46px;padding:10px 16px;font-weight:700;font-size:.95rem;cursor:pointer;list-style:none}
.m2-az>summary::-webkit-details-marker{display:none}
.m2-az>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform var(--t) var(--ease)}
.m2-az[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.m2-az>summary:hover{color:var(--c-brand)}
.m2-az__letters{display:flex;flex-wrap:wrap;gap:6px;padding:4px 16px 12px}
.m2-az__letters a{display:inline-grid;place-items:center;min-width:36px;height:36px;border-radius:10px;background:var(--c-surface-2);font-weight:800;font-size:.85rem;text-decoration:none;color:var(--c-ink)}
.m2-az__letters a:hover{background:var(--c-ink);color:#fff}
.m2-az__letters--hero{padding:0}
.m2-az__letters--hero a{background:var(--c-surface);border:1px solid var(--c-line)}
.m2-az__groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px 28px;padding:6px 16px 18px;max-height:min(60vh,520px);overflow:auto}
.m2-az__group{scroll-margin-top:calc(var(--header-h) + 20px)}
.m2-az__letter{font-family:var(--font-display);font-size:1.3rem;color:var(--c-brand);margin-bottom:4px}
.m2-az__group ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:2px}
.m2-az__group a{display:flex;justify-content:space-between;gap:10px;padding:5px 0;text-decoration:none;font-size:.93rem}
.m2-az__group a:hover{color:var(--c-brand)}

/* ------------------------------------------------------------------ results: filters, toolbar, grid */
.m2-wrap{padding-top:clamp(18px,3vw,32px)}
.m2-layout{position:relative}
.m2-main{min-width:0}
.m2-group>summary{margin-bottom:8px}
.m2-group:not([open])>summary{margin-bottom:0}
.m2-group>summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--c-ink-3);border-bottom:2px solid var(--c-ink-3);transform:rotate(45deg) translateY(-3px);transition:transform var(--t) var(--ease)}
.m2-group[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.m2-fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:2px}
.m2-option{display:flex;align-items:center;gap:.65em;width:100%;min-height:38px;padding:4px 8px;margin-inline:-8px;width:calc(100% + 16px);border-radius:8px;font-size:.93rem}
.m2-option:hover{background:var(--c-surface-2)}
.m2-option input{margin-top:0}
.m2-option>span:not(.m2-count){flex:1;min-width:0;overflow-wrap:anywhere}
.m2-option input:checked~span:not(.m2-count){font-weight:700}
.m2-count{margin-left:auto;padding-left:8px;color:var(--c-ink-3);font-size:.82rem;font-variant-numeric:tabular-nums}
.m2-rating-label{display:inline-flex;align-items:center;gap:.45em}
.m2-rating-label .stars{--size:13px}
.m2-links .m2-link{align-items:center}
.m2-more{margin-top:6px;padding:6px 0;border:0;background:none;color:var(--c-brand);font-weight:700;font-size:.85rem;text-decoration:underline;text-underline-offset:3px}
.m2-filters__head,.m2-filters__foot{display:none}
.m2-filters__apply{padding-top:14px}
.m2-backdrop{display:none}
html:not(.m2-js) [data-m2-js-only]{display:none}
.m2-cartform{display:contents} /* no-JS cart / buy-now forms keep the button layout */
.m2-toolbar{position:relative}
.m2-toolbar__filters{display:inline-flex}
.m2-toolbar__count{margin-right:auto}
.m2-toolbar__count strong{color:var(--c-ink)}
.m2-toolbar__controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.m2-toolbar .m2-select{min-width:0;width:auto;min-height:40px;padding-block:.45em;font-size:.9rem;font-weight:600}
@media (max-width:767.98px){.m2-toolbar .m2-select{font-size:16px}} /* ≥16px: no iOS focus zoom */
.m2-select-wrap{display:inline-flex}
.m2-badge{background:var(--c-brand);color:#fff;padding:.2em .5em;font-size:.7rem}
.m2-active{gap:8px;margin-bottom:18px;align-items:center}
.m2-x{gap:.35em;min-height:34px;padding:.3em .8em}
.m2-x .icon{width:.95em;height:.95em}
.m2-clear{font-size:var(--fs-sm);font-weight:700;color:var(--c-brand);text-decoration:underline;text-underline-offset:3px;margin-left:4px}
.m2-note{margin-bottom:18px}
#m2-results .grid-products{transition:opacity var(--t) var(--ease)}
#m2-results.is-loading .grid-products,#m2-results.is-loading .pagination{opacity:.45;pointer-events:none}
#m2-results.is-loading .m2-toolbar::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:40%;background:var(--c-brand);border-radius:2px;animation:m2-load 1s var(--ease) infinite}
@keyframes m2-load{0%{left:0;width:10%}50%{left:30%;width:40%}100%{left:100%;width:10%}}
#m2-results-title:focus{outline:none}

@media (max-width:1023.98px){
  .m2-filters{position:fixed;z-index:1001;top:0;bottom:0;left:0;width:min(400px,92vw);display:flex;flex-direction:column;background:var(--c-surface);box-shadow:var(--shadow-lg);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
    transform:translateX(-104%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s linear .35s;padding-bottom:env(safe-area-inset-bottom,0px)}
  .m2-filters.is-open,html:not(.m2-js) .m2-filters:target{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
  .m2-filters__head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 20px;border-bottom:1px solid var(--c-line)}
  .m2-filters__form{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 20px 12px}
  .m2-filters__foot{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--c-line);background:var(--c-surface)}
  .m2-filters__foot .m2-filters__show{flex:1}
  .m2-option{min-height:44px}
  .m2-backdrop{display:block;position:fixed;inset:0;z-index:1000;background:rgba(29,21,48,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .m2-toolbar{gap:10px}
  .m2-toolbar__count{order:3;width:100%;margin:0}
}
@media (min-width:1024px){
  .m2-toolbar__filters{display:none}
  .m2-filters__apply{padding-bottom:4px}
}

/* ------------------------------------------------------------------ product page */
.m2-preview{border-radius:0;margin:0}
.m2-pdp{padding-top:clamp(12px,2vw,20px)}
.m2-crumbs{margin-bottom:clamp(12px,2vw,20px)}
.m2-pdp__top{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3.5vw,48px);align-items:start}
@media (min-width:1024px){
  .m2-pdp__top{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .m2-pdp__media{position:sticky;top:calc(var(--header-h) + 16px)}
}

/* gallery */
.m2-gallery{display:flex;flex-direction:column;gap:12px;min-width:0}
.m2-gallery__stage{position:relative;aspect-ratio:1/1;border-radius:var(--radius-lg);background:var(--c-surface);border:1px solid var(--c-line);overflow:hidden;touch-action:pan-y}
.m2-gallery__zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.m2-gallery__img{width:100%;height:100%;object-fit:contain}
.m2-gallery__hint{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:var(--shadow-sm);color:var(--c-ink);opacity:0;transition:opacity var(--t)}
.m2-gallery__stage:hover .m2-gallery__hint,.m2-gallery__zoom:focus-visible .m2-gallery__hint{opacity:1}
.m2-gallery__nav{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--c-line);background:rgba(255,255,255,.92);color:var(--c-ink);box-shadow:var(--shadow-sm);transition:opacity var(--t),background-color var(--t)}
.m2-gallery__nav:hover{background:var(--c-surface)}
.m2-gallery__nav--prev{left:10px}
.m2-gallery__nav--next{right:10px}
@media (hover:hover) and (min-width:1024px){.m2-gallery__nav{opacity:0}.m2-gallery__stage:hover .m2-gallery__nav,.m2-gallery__nav:focus-visible{opacity:1}}
.m2-gallery__counter{position:absolute;right:12px;bottom:12px;padding:.2em .7em;border-radius:var(--radius-pill);background:rgba(29,21,48,.72);color:#fff;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
.m2-gallery__thumbs{display:flex;gap:10px;list-style:none;padding:2px;margin:0;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity}
.m2-gallery__thumbs li{flex:none;scroll-snap-align:start}
.m2-thumb{display:block;width:clamp(58px,8vw,78px);aspect-ratio:1/1;padding:0;border:2px solid var(--c-line);border-radius:12px;overflow:hidden;background:var(--c-surface);transition:border-color var(--t-fast),transform var(--t-fast)}
.m2-thumb img{width:100%;height:100%;object-fit:cover}
.m2-thumb:hover{border-color:var(--c-line-2)}
.m2-thumb.is-active{border-color:var(--c-brand);box-shadow:var(--ring)}

/* lightbox */
.m2-lightbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(18,12,30,.96);color:#fff;overflow:hidden}
.m2-lightbox::backdrop{background:rgba(18,12,30,.7)}
.m2-lightbox[open]{display:block}
.m2-lightbox__bar{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;align-items:center;gap:16px;padding:10px 12px 10px 20px;background:linear-gradient(rgba(18,12,30,.8),transparent)}
.m2-lightbox__tip{opacity:.7;margin-right:auto}
.m2-lightbox__close{color:#fff;background:rgba(255,255,255,.12);border-color:transparent}
.m2-lightbox__close:hover{background:rgba(255,255,255,.22);color:#fff}
.m2-lightbox__stage{position:absolute;inset:0;overflow:hidden;cursor:zoom-out;touch-action:none}
.m2-lightbox__stage.can-pan{cursor:move}
.m2-lightbox__stage img{position:absolute;top:0;left:0;max-width:none;user-select:none;-webkit-user-drag:none;will-change:transform}
.m2-lightbox__nav{position:absolute;z-index:2;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff}
.m2-lightbox__nav:hover{background:rgba(255,255,255,.26)}
.m2-lightbox__nav--prev{left:14px}
.m2-lightbox__nav--next{right:14px}
@media (max-width:639px){.m2-lightbox__tip{display:none}}

/* buy box */
.m2-buy{display:flex;flex-direction:column;gap:16px}
.m2-buy__eyebrow{display:flex;flex-wrap:wrap;gap:.2em .45em}
.m2-buy__eyebrow a{color:inherit;text-decoration:none}
.m2-buy__eyebrow a:hover{text-decoration:underline}
.m2-buy__title{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);line-height:1.1;overflow-wrap:anywhere}
.m2-buy__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:-4px}
.m2-rating{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;font-size:.93rem}
.m2-rating:hover .muted{color:var(--c-brand);text-decoration:underline}
.m2-rating--none{color:var(--c-brand);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.m2-exclusive-badge{background:var(--c-accent-soft);color:var(--c-ink)}
.m2-price{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.m2-pill{display:inline-flex;align-items:center;gap:.45em;padding:.45em 1em;border-radius:var(--radius-pill);background:var(--c-brand-soft);color:var(--c-brand-700);font-weight:800;font-size:.95rem}
.m2-pill--ok{background:var(--c-success-soft);color:var(--c-success)}
.m2-exclusive{display:flex;gap:.5em;align-items:flex-start;margin-top:-6px;color:var(--c-ink-2)}
.m2-exclusive .icon{color:var(--c-accent-600);margin-top:1px}
.m2-buy__short{color:var(--c-ink-2);font-size:1.02rem;line-height:1.6}
.m2-facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.m2-fact{cursor:default;min-height:34px;font-size:.84rem;background:var(--c-surface-2);border-color:transparent}
.m2-fact:hover{border-color:transparent}
.m2-fact .icon{color:var(--c-brand)}
.m2-cta{display:flex;flex-direction:column;gap:10px;padding:clamp(16px,2.4vw,22px);border-radius:var(--radius-lg);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--shadow-sm)}
.m2-cta__main{min-height:56px;font-size:1.05rem;white-space:normal;text-align:center}
.m2-cta__terms{text-align:center;margin-top:-2px}
.m2-cta__signin{text-align:center}
.m2-cta__signin a{font-weight:700;color:var(--c-brand)}
.m2-cta__or{display:flex;align-items:center;gap:12px;color:var(--c-ink-3);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-block:4px}
.m2-cta__or::before,.m2-cta__or::after{content:"";flex:1;height:1px;background:var(--c-line)}
.m2-cta__single{text-align:center;font-size:.95rem}
.m2-cta__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m2-cta__row .btn{width:100%}
.m2-cta__row--main .btn{min-height:54px}
.m2-cta__note{display:flex;gap:.5em;align-items:flex-start;color:var(--c-success);font-weight:600}
.m2-downloads{display:flex;flex-direction:column;gap:8px}
.m2-files-pending{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid #C6D3FB;border-radius:14px;background:var(--c-info-soft);color:#23408F}
.m2-files-pending__ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--c-surface);color:#23408F}
.m2-files-pending__ico .icon{width:20px;height:20px}
.m2-files-pending__title{margin:0 0 2px;font-weight:700;color:var(--c-ink)}
.m2-files-pending__text{margin:0;color:#23408F;line-height:1.5}
.m2-dl{justify-content:space-between;gap:10px;text-align:left}
.m2-dl__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m2-dl__size{flex:none;font-size:.8rem;opacity:.8;font-weight:600}
.m2-cta__lib{align-self:center;display:inline-flex;align-items:center;gap:.35em;font-weight:700;color:var(--c-brand)}
.m2-wallets{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:-4px}
.m2-wallet{display:inline-flex;align-items:center;gap:.2em;padding:.2em .6em;border:1px solid var(--c-line-2);border-radius:8px;background:var(--c-surface);font-weight:700;font-size:.78rem;color:var(--c-ink)}
.m2-wallet .icon{width:1.05em;height:1.05em}
.m2-wallet--link{color:var(--c-success)}
.m2-share{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.m2-share__wish{gap:.45em}
.m2-share__wish[aria-pressed="true"]{color:var(--c-brand)}
.m2-share__wish[aria-pressed="true"] .icon{fill:currentColor}
.m2-share__sep{width:1px;height:22px;background:var(--c-line);margin-inline:6px 2px}
.m2-trust{padding:16px 18px;border-radius:var(--radius);background:var(--c-surface-2)}
.m2-trust a{color:var(--c-ink);font-weight:600}

/* details */
.m2-details{padding-bottom:0}
.m2-details__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
@media (min-width:1024px){.m2-details__grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.m2-details__aside{position:sticky;top:calc(var(--header-h) + 16px)}}
.m2-accordions{border-top:1px solid var(--c-line)}
.m2-acc>summary{font-size:1.08rem;min-height:60px}
.m2-acc__body{padding-bottom:22px}
.m2-included ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.m2-included li{position:relative;padding-left:30px}
.m2-included li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--c-success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C7F55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.m2-files{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.m2-files li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--c-line);border-radius:12px;background:var(--c-surface);color:var(--c-ink)}
.m2-files .icon{color:var(--c-brand)}
.m2-files__name{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:600;font-size:.93rem}
.m2-formats{display:grid;gap:8px;margin-bottom:12px}
.m2-formats div{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:baseline}
.m2-formats dt{font-weight:800;font-size:.8rem;letter-spacing:.04em;padding:.15em .5em;border-radius:6px;background:var(--c-surface-2);color:var(--c-ink);text-align:center}
.m2-formats dd{margin:0;font-size:.93rem}
.m2-steps{list-style:none;padding:0;counter-reset:m2step;display:flex;flex-direction:column;gap:14px}
.m2-steps li{position:relative;padding-left:46px;counter-increment:m2step;color:var(--c-ink-2)}
.m2-steps li strong{color:var(--c-ink)}
.m2-steps li::before{content:counter(m2step);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c-brand);color:#fff;font-weight:800;font-size:.9rem}
.m2-faq .h4{color:var(--c-ink);margin-top:14px}
.m2-faq .h4:first-child{margin-top:0}
.m2-faq p{margin-top:4px}
.m2-details__aside{display:flex;flex-direction:column;gap:16px}
.m2-tags .h4,.m2-help .h4{margin-bottom:10px}
.m2-tags .chip{min-height:34px;font-size:.84rem}
.m2-tag{color:var(--c-ink-2)}
.m2-help p{margin-bottom:12px}

/* reviews */
.m2-reviews__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:start}
@media (min-width:900px){.m2-reviews__grid{grid-template-columns:300px minmax(0,1fr)}.m2-reviews__summary{position:sticky;top:calc(var(--header-h) + 16px)}}
.m2-reviews__summary{display:flex;flex-direction:column;gap:8px}
.m2-reviews__avg{font-family:var(--font-display);font-size:3rem;font-weight:700;line-height:1;letter-spacing:-.03em}
.m2-bars{list-style:none;padding:0;margin:8px 0 10px;display:flex;flex-direction:column;gap:6px}
.m2-bars li{display:grid;grid-template-columns:40px 1fr 34px;gap:10px;align-items:center}
.m2-bars__label{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-size:.85rem}
.m2-bars__label .icon{width:.9em;height:.9em;color:var(--c-sun);fill:var(--c-sun)}
.m2-bars__track{height:8px;border-radius:var(--radius-pill);background:var(--c-surface-2);overflow:hidden}
.m2-bars__fill{display:block;height:100%;border-radius:inherit;background:var(--c-sun)}
.m2-bars__n{text-align:right;font-variant-numeric:tabular-nums}
.m2-reviews__list{list-style:none;padding:0;margin:0}
.m2-review{padding:18px 0;border-bottom:1px solid var(--c-line)}
.m2-review:first-child{padding-top:4px}
.m2-review:focus{outline:none}
.m2-review__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.m2-review__title{font-size:1rem;font-weight:800}
.m2-review__body{margin-top:8px;color:var(--c-ink);line-height:1.65;overflow-wrap:anywhere}
.m2-review__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px}
.m2-review__name{font-weight:700;color:var(--c-ink)}
.m2-verified{background:var(--c-success-soft);color:var(--c-success);text-transform:none;letter-spacing:0;font-size:.74rem}
.m2-reviews__more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px}
.m2-reviews__empty{padding:18px 20px;border:1.5px dashed var(--c-line-2);border-radius:var(--radius);text-align:center}
.m2-reviews__empty .h4{margin-bottom:4px}
.m2-review-form__submit{align-self:flex-start;min-width:180px}
.m2-review-form{margin-top:24px;display:flex;flex-direction:column;gap:14px;scroll-margin-top:calc(var(--header-h) + 20px)}
.m2-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.m2-stars-input{border:0;margin:0;padding:0;min-width:0}
.m2-stars-input__row{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;margin-top:4px}
.m2-stars-input__row input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.m2-stars-input__row label{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;cursor:pointer;color:var(--c-line-2);transition:color var(--t-fast),transform var(--t-fast)}
.m2-stars-input__row label .icon{width:30px;height:30px;fill:currentColor;stroke:currentColor}
.m2-stars-input__row label:hover,.m2-stars-input__row label:hover~label,.m2-stars-input__row input:checked~label{color:var(--c-sun)}
.m2-stars-input__row label:hover{transform:scale(1.12)}
.m2-stars-input__row input:focus-visible+label{box-shadow:var(--ring)}
.m2-stars-input.has-error .m2-stars-input__row label{color:var(--c-danger-soft)}

/* related */
.m2-recs:empty{display:none}
@media (min-width:1024px){.grid-products.m2-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* mobile sticky buy bar */
.m2-sticky{position:fixed;z-index:900;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--c-surface);border-top:1px solid var(--c-line);box-shadow:0 -8px 24px -12px rgba(29,21,48,.25);animation:m2-up .25s var(--ease)}
.m2-sticky__info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.m2-sticky__title{font-weight:700;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m2-sticky__price{font-size:.82rem;font-weight:700;color:var(--c-brand)}
.m2-sticky .btn{flex:none;white-space:nowrap}
@keyframes m2-up{from{transform:translateY(100%)}to{transform:none}}
@media (min-width:1024px){.m2-sticky{display:none!important}}
@media (max-width:1023.98px){
  html.m2-has-sticky .to-top{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  /* reserve room for the bar: the footer end stays reachable and focused elements are scrolled clear of it (WCAG 2.4.11) */
  html.m2-has-sticky body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  html.m2-has-sticky{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* toast fallback (when M1's UI.toast is unavailable) */
.m2-toast{position:fixed;z-index:1200;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);padding:10px 18px;border-radius:var(--radius-pill);background:var(--c-ink);color:#fff;font-weight:600;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity var(--t),transform var(--t)}
.m2-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* ------------------------------------------------------------------ themes index */
.m2-themes{padding-bottom:var(--section-y)}
.m2-themes .section-head .icon{color:var(--c-brand)}
.m2-themes__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,2vw,20px)}
@media (min-width:640px){.m2-themes__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1024px){.m2-themes__grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:640px){.m2-themes__grid--big{grid-template-columns:repeat(3,minmax(0,1fr))}}
.m2-theme{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--c-ink)}
.m2-theme__media{position:relative;display:grid;place-items:center;aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;background:var(--m2-accent,var(--tint-3));transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.m2-themes__grid > .m2-theme:nth-child(8n+1) .m2-theme__media{background:var(--m2-accent,var(--tint-1))}
.m2-themes__grid > .m2-theme:nth-child(8n+2) .m2-theme__media{background:var(--m2-accent,var(--tint-2))}
.m2-themes__grid > .m2-theme:nth-child(8n+3) .m2-theme__media{background:var(--m2-accent,var(--tint-3))}
.m2-themes__grid > .m2-theme:nth-child(8n+4) .m2-theme__media{background:var(--m2-accent,var(--tint-4))}
.m2-themes__grid > .m2-theme:nth-child(8n+5) .m2-theme__media{background:var(--m2-accent,var(--tint-5))}
.m2-themes__grid > .m2-theme:nth-child(8n+6) .m2-theme__media{background:var(--m2-accent,var(--tint-6))}
.m2-themes__grid > .m2-theme:nth-child(8n+7) .m2-theme__media{background:var(--m2-accent,var(--tint-7))}
.m2-themes__grid > .m2-theme:nth-child(8n+8) .m2-theme__media{background:var(--m2-accent,var(--tint-8))}
.m2-theme__media img{width:100%;height:100%;object-fit:cover}
.m2-theme__initial{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,5vw,3.4rem);color:var(--c-ink);opacity:.85}
.m2-theme__initial .icon{width:1em;height:1em;stroke-width:1.4}
.m2-theme--big .m2-theme__media{aspect-ratio:16/10}
.m2-theme__badge{position:absolute;top:10px;left:10px}
.m2-theme__body{display:flex;flex-direction:column;gap:2px;padding-inline:2px}
.m2-theme__name{font-weight:800;line-height:1.3}
.m2-theme--big .m2-theme__name{font-family:var(--font-display);font-size:1.25rem}
.m2-theme:hover{color:var(--c-ink)}
.m2-theme:hover .m2-theme__media{transform:translateY(-3px);box-shadow:var(--shadow)}
.m2-theme:hover .m2-theme__name{color:var(--c-brand)}
.m2-themes__az{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px 32px}
@media (prefers-reduced-motion:reduce){
  .m2-theme__media,.m2-thumb,.m2-stars-input__row label,.m2-filters,.m2-sticky{transition:none;animation:none}
  #m2-results.is-loading .m2-toolbar::after{animation:none}
}
@media print{.m2-filters,.m2-toolbar,.m2-sticky,.m2-share,.m2-cta,.m2-review-form,.m2-recs{display:none!important}}
/* touch screens: 44px targets (CONVENTIONS §7) for collection chips, the sort select and PDP tag chips */
@media (pointer:coarse){.m2-chip,.m2-toolbar .m2-select,.m2-tags .chip{min-height:44px}}
/* ===== end M2 ===== */

/* ===== M11: exclusive & hidden products (CONVENTIONS §14) ===== */
/* "Exclusive" badge (cards + product page): not included in All Access, sold individually. Tokens only. */
.badge--exclusive,.m2-exclusive-badge{background:linear-gradient(135deg,var(--c-sun),var(--c-accent));color:var(--c-ink)}
.badge--exclusive .icon,.m2-exclusive-badge .icon{width:1em;height:1em}
/* Exclusive product page = ads landing: one-time price note, dominant Buy now, wallet reassurance, subtle upsell */
.m11-price-note{margin-top:-6px;color:var(--c-success);font-weight:700;letter-spacing:.01em}
.m11-buy{min-height:58px;font-size:1.08rem;gap:.55em;box-shadow:0 10px 24px -10px rgba(192,38,109,.55)}
.m11-buy .icon{width:1.15em;height:1.15em}
.m11-wallet-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:0;color:var(--c-ink-2);text-align:center}
.m11-upsell{display:flex;gap:.6em;align-items:flex-start;margin-top:14px;padding:12px 14px;border:1px dashed var(--c-line-2);border-radius:var(--radius);color:var(--c-ink-2);line-height:1.5}
.m11-upsell .icon{flex:none;margin-top:.2em;color:var(--c-brand)}
.m11-upsell a{color:var(--c-brand);font-weight:700}
/* cart.js: "included in All Access" refusal toast with a trial CTA */
.m11-join-toast{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.m11-join-toast__cta.btn{color:var(--c-brand-ink);text-decoration:none}
@media (prefers-reduced-motion:reduce){.m11-buy{transition:none}}
/* ===== end M11 ===== */

/* ===== M10: membership ===== */
/* All Access: /pricing, /join, /join/complete, member download limit page, /account/membership. Tokens only. */

/* ---- shared bits */
.m10-linkbtn{display:inline;padding:0;border:0;background:none;color:var(--c-brand);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.m10-linkbtn:hover{color:var(--c-brand-600)}
.m10-inline-form{display:inline-flex;margin:0}
.m10-pill{display:inline-flex;align-items:center;gap:.4em;padding:.35em .8em;border-radius:var(--radius-pill);background:var(--c-accent-soft);color:var(--c-ink);font-size:.82rem;font-weight:800}
.m10-pill .icon{width:1.05em;height:1.05em;color:var(--c-accent-600)}
.m10-badge{display:inline-flex;align-items:center;gap:.4em;padding:.32em .75em;border-radius:var(--radius-pill);font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;background:var(--c-surface-2);color:var(--c-ink-2)}
.m10-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.m10-badge--ok{background:var(--c-success-soft);color:var(--c-success)}
.m10-badge--trial{background:var(--c-info-soft);color:var(--c-info)}
.m10-badge--warn{background:var(--c-warning-soft);color:var(--c-warning)}
.m10-badge--bad{background:var(--c-danger-soft);color:var(--c-danger)}

/* ---- pricing hero */
.m10-hero{position:relative;overflow:hidden;padding-block:clamp(40px,7vw,88px) clamp(28px,4vw,44px);text-align:center;
  background:radial-gradient(640px 280px at 12% 0%,var(--c-brand-soft),transparent 70%),radial-gradient(560px 300px at 92% 12%,var(--c-accent-soft),transparent 70%),var(--c-bg)}
.m10-hero__inner{display:flex;flex-direction:column;align-items:center;gap:16px}
.m10-hero__title{max-width:18ch;font-family:var(--font-display);font-weight:750;font-size:clamp(2.1rem,1.3rem + 3.6vw,4rem);line-height:1.04;letter-spacing:-.03em;color:var(--c-ink)}
.m10-hero__title em{font-style:italic;font-weight:600;color:var(--c-brand)}
.m10-hero__lead{max-width:58ch;margin-inline:auto}
.m10-hero__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;margin-top:6px}
.m10-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(760px,100%);margin:clamp(14px,3vw,26px) auto 0;padding:0;list-style:none}
@media (min-width:720px){.m10-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.m10-stats li{display:flex;flex-direction:column;gap:2px;padding:14px 12px;border:1px solid var(--c-line);border-radius:var(--radius);background:color-mix(in srgb,var(--c-surface) 78%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.m10-stats strong{font-family:var(--font-display);font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);line-height:1.1;letter-spacing:-.02em;color:var(--c-ink)}
.m10-stats span{font-size:.82rem;color:var(--c-ink-2);font-weight:600}

/* ---- plans */
.m10-plans-section{padding-top:clamp(8px,2vw,20px)}
.m10-plans{display:grid;gap:clamp(16px,2.4vw,26px);grid-template-columns:1fr;align-items:stretch;margin-inline:auto}
.m10-plans--1{max-width:440px}
.m10-plans--2{max-width:880px}
@media (max-width:699px){.m10-plans{gap:34px}}
@media (min-width:700px){.m10-plans--2,.m10-plans--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.m10-plans--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px}}
.m10-plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3vw,32px);border:1.5px solid var(--c-line);border-radius:var(--radius-lg);background:var(--c-surface);box-shadow:var(--shadow-sm);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.m10-plan:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.m10-plan.is-featured{border-color:var(--c-night);background:radial-gradient(420px 220px at 100% 0%,rgba(192,38,109,.45),transparent 70%),radial-gradient(360px 200px at 0% 100%,rgba(255,138,61,.22),transparent 70%),var(--c-night);color:#fff;box-shadow:var(--shadow-lg)}
@media (min-width:700px){.m10-plans--2 .m10-plan.is-featured,.m10-plans--3 .m10-plan.is-featured{transform:translateY(-8px)}.m10-plans--2 .m10-plan.is-featured:hover,.m10-plans--3 .m10-plan.is-featured:hover{transform:translateY(-11px)}}
.m10-plan.is-current{border-color:var(--c-brand)}
@media (max-width:699px){.m10-plan.is-featured{order:-1}}
.m10-plan__badge{position:absolute;top:-13px;left:clamp(22px,3vw,32px);display:inline-flex;align-items:center;gap:.4em;padding:.4em .9em;border-radius:var(--radius-pill);background:var(--c-ink);color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--shadow-sm)}
.m10-plan__badge .icon{width:1.05em;height:1.05em}
.m10-plan.is-featured .m10-plan__badge{background:linear-gradient(135deg,var(--c-brand),var(--c-accent));color:#fff}
.m10-plan.is-current .m10-plan__badge{background:var(--c-brand)}
.m10-plan__head{display:flex;flex-direction:column;gap:2px}
.m10-plan__name{font-family:var(--font-display);font-size:clamp(1.45rem,1.25rem + .6vw,1.8rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:inherit}
.m10-plan__sub{font-size:.88rem;color:var(--c-ink-2)}
.m10-plan.is-featured .m10-plan__sub{color:rgba(255,255,255,.72)}
.m10-plan__price{display:flex;align-items:baseline;gap:4px;margin-top:4px}
.m10-plan__amount{font-family:var(--font-display);font-size:clamp(2.6rem,2rem + 2vw,3.4rem);font-weight:750;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.m10-plan__per{font-size:1rem;font-weight:700;color:var(--c-ink-2)}
.m10-plan.is-featured .m10-plan__per{color:rgba(255,255,255,.72)}
.m10-plan__equiv{font-size:.88rem;color:var(--c-ink-2);min-height:1.4em}
.m10-plan.is-featured .m10-plan__equiv{color:rgba(255,255,255,.72)}
.m10-plan__save{display:inline-flex;margin-left:.4em;padding:.12em .55em;border-radius:var(--radius-pill);background:var(--c-success-soft);color:var(--c-success);font-size:.76rem;font-weight:800}
.m10-plan.is-featured .m10-plan__save{background:rgba(255,255,255,.14);color:#fff}
.m10-plan__trial{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--radius-sm);background:var(--c-accent-soft);color:var(--c-ink);font-size:.92rem;line-height:1.35}
.m10-plan__trial .icon{flex:none;width:1.2em;height:1.2em;color:var(--c-accent-600)}
.m10-plan__trial--used{background:var(--c-surface-2);color:var(--c-ink-2)}
.m10-plan__trial--used .icon{color:var(--c-ink-2)}
.m10-plan.is-featured .m10-plan__trial{background:rgba(255,255,255,.1);color:#fff}
.m10-plan.is-featured .m10-plan__trial .icon{color:var(--c-accent)}
.m10-plan .btn--lg{margin-top:2px}
.m10-plan .btn .icon{transition:transform var(--t) var(--ease)}
.m10-plan .btn:hover .icon{transform:translateX(3px)}
.m10-plan__terms{margin-top:-4px;font-size:.8rem;line-height:1.45;color:var(--c-ink-2);text-align:center}
.m10-plan.is-featured .m10-plan__terms{color:rgba(255,255,255,.7)}
.m10-plan__features{display:flex;flex-direction:column;gap:10px;margin-top:6px;padding:16px 0 0;border-top:1px dashed var(--c-line-2);list-style:none}
.m10-plan.is-featured .m10-plan__features{border-top-color:rgba(255,255,255,.18)}
.m10-plan__features li{display:flex;align-items:flex-start;gap:10px;font-size:.93rem;line-height:1.45}
.m10-plan__features .icon{flex:none;width:20px;height:20px;padding:3px;margin-top:1px;border-radius:50%;background:var(--c-success-soft);color:var(--c-success);stroke-width:3}
.m10-plan.is-featured .m10-plan__features .icon{background:rgba(255,255,255,.14);color:var(--c-accent)}
.m10-plans--compact .m10-plan{padding:22px}
.m10-plans--compact .m10-plan__amount{font-size:2.4rem}
.m10-reassure{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:clamp(22px,3vw,34px) 0 0;padding:0;list-style:none}
.m10-reassure li{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:650;color:var(--c-ink-2)}
.m10-reassure .icon{color:var(--c-brand)}
.m10-paymarks{display:flex;justify-content:center;margin-top:14px}
.m10-exclusive-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;text-align:center}
.m10-exclusive-note .icon{flex:none;color:var(--c-ink-2)}

/* ---- what's included / library / steps / quotes */
.m10-features{display:grid;gap:clamp(12px,2vw,20px);grid-template-columns:1fr;padding:0;list-style:none}
@media (min-width:640px){.m10-features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.m10-features{grid-template-columns:repeat(3,minmax(0,1fr))}}
.m10-feature{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2.4vw,26px);border:1px solid var(--c-line);border-radius:var(--radius-lg);background:var(--c-surface)}
.m10-feature__icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:4px;border-radius:14px;background:var(--tint,var(--c-brand-soft));color:var(--c-ink)}
.m10-feature__icon .icon{width:24px;height:24px}
.m10-feature p{color:var(--c-ink-2);font-size:.95rem;line-height:1.55}
@media (max-width:639px){.m10-feature{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:16px}.m10-feature__icon{grid-row:span 2;width:44px;height:44px;margin:0}.m10-feature p{font-size:.9rem}}
.m10-library__box{display:grid;gap:18px 32px;align-items:center;padding:clamp(20px,3.4vw,36px);border-radius:var(--radius-lg);background:var(--c-surface-2)}
@media (min-width:900px){.m10-library__box{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}}
.m10-library__box .h3{margin-top:4px}
.m10-library__box .muted{margin-top:6px}
.m10-library__chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.m10-library__chips .chip{background:var(--c-surface)}
.m10-steps{display:grid;gap:clamp(14px,2.4vw,24px);grid-template-columns:1fr;padding:0;list-style:none;counter-reset:none}
@media (min-width:800px){.m10-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.m10-step{position:relative;display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.6vw,28px);border-radius:var(--radius-lg);background:var(--c-surface);border:1px solid var(--c-line)}
.m10-step__n{display:grid;place-items:center;width:42px;height:42px;margin-bottom:4px;border-radius:50%;background:var(--c-brand);color:#fff;font-family:var(--font-display);font-weight:750;font-size:1.2rem;box-shadow:0 8px 18px -8px rgba(192,38,109,.7)}
.m10-step p{color:var(--c-ink-2);font-size:.95rem}
.m10-quotes__list{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:1fr;margin-top:22px;padding:0;list-style:none}
@media (min-width:900px){.m10-quotes__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.m10-quote{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--radius-lg);background:var(--c-surface);border:1px solid var(--c-line)}
.m10-quote__title{font-weight:750}
.m10-quote blockquote{margin:0;color:var(--c-ink-2);line-height:1.6}
.m10-quote__by{margin-top:auto;font-size:.85rem;color:var(--c-ink-2)}
.m10-quote__by a{color:var(--c-brand);font-weight:650}

/* ---- FAQ + final band */
.m10-faq__grid{display:grid;gap:clamp(18px,4vw,56px);grid-template-columns:1fr}
@media (min-width:960px){.m10-faq__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)}.m10-faq__intro{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}}
.m10-faq__intro .h2{margin:.25em 0 .4em}
.m10-faq__list{border-top:1px solid var(--c-line)}
.m10-faq__list .accordion__body a{color:var(--c-brand);font-weight:650}
.m10-final{position:relative;overflow:hidden;margin-top:clamp(12px,2vw,24px);padding-block:clamp(40px,6vw,72px);background:radial-gradient(520px 260px at 90% 0%,rgba(192,38,109,.55),transparent 70%),radial-gradient(460px 240px at 0% 100%,rgba(255,138,61,.3),transparent 70%),var(--c-night);color:#fff}
.m10-final__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.m10-final__title{font-family:var(--font-display);font-size:clamp(1.7rem,1.3rem + 1.6vw,2.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.12;color:#fff}
.m10-final__text{margin-top:8px;color:rgba(255,255,255,.75)}
.page-pricing .membership-band{display:none}

/* ---- /join */
.m10-join{padding-block:clamp(20px,4vw,48px) clamp(40px,6vw,72px);background:radial-gradient(560px 260px at 0% 0%,var(--c-brand-soft),transparent 70%),var(--c-bg)}
.m10-join__grid{display:grid;gap:clamp(18px,3vw,40px);grid-template-columns:1fr;align-items:start;max-width:1120px}
@media (min-width:960px){.m10-join__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}.m10-join__aside{position:sticky;top:calc(var(--header-h) + 20px)}}
.m10-join__aside{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:959px){.m10-join__aside{display:contents}.m10-join__main{order:2}.m10-join__trust{order:3}.m10-join__grid{gap:16px}}
.m10-join__back{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;color:var(--c-ink-2);font-weight:650;text-decoration:none}
.m10-join__back:hover{color:var(--c-brand)}
.m10-origin{display:flex;align-items:center;gap:14px;padding:12px;border-radius:var(--radius);background:var(--c-surface);border:1px solid var(--c-line)}
.m10-origin img{flex:none;width:64px;height:64px;object-fit:cover;border-radius:12px;background:var(--c-surface-2)}
.m10-origin__label{font-size:.8rem;color:var(--c-ink-2);font-weight:650}
.m10-origin__title{font-weight:750;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m10-summary{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(20px,3vw,28px);border-radius:var(--radius-lg);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--shadow-sm)}
.m10-summary__title{font-family:var(--font-display);font-size:clamp(1.5rem,1.3rem + .8vw,2rem);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.m10-summary__price{font-weight:700;color:var(--c-ink-2)}
.m10-summary__price span{font-family:var(--font-display);font-size:1.9rem;font-weight:750;color:var(--c-ink);letter-spacing:-.03em}
.m10-due{display:flex;flex-direction:column;gap:0;width:100%;margin:6px 0 0;border-radius:var(--radius-sm);background:var(--c-surface-2);padding:4px 14px}
.m10-due__row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:.93rem}
.m10-due__row+.m10-due__row{border-top:1px dashed var(--c-line-2)}
.m10-due dt{color:var(--c-ink-2)}
.m10-due dd{margin:0;font-weight:750;font-variant-numeric:tabular-nums}
.m10-due__row--today dt{color:var(--c-ink);font-weight:750}
.m10-due__row--today dd{font-size:1.15rem;color:var(--c-success)}
.m10-switch{width:100%;margin-top:4px}
.m10-switch__label{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-2);margin-bottom:8px}
.m10-switch__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.m10-switch__opt{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:10px 12px;border:1.5px solid var(--c-line-2);border-radius:var(--radius-sm);background:var(--c-surface);text-decoration:none;color:var(--c-ink);transition:border-color var(--t-fast),background-color var(--t-fast)}
.m10-switch__opt:hover{border-color:var(--c-ink);color:var(--c-ink)}
.m10-switch__opt.is-active{border-color:var(--c-brand);background:var(--c-brand-soft)}
.m10-switch__name{font-weight:750;font-size:.92rem}
.m10-switch__price{font-size:.82rem;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.m10-switch__trial{font-size:.74rem;font-weight:800;color:var(--c-brand-700)}
.m10-join__trust{padding:4px 2px}
.m10-join__trust span{display:block}
.m10-join__main{display:flex;flex-direction:column;gap:14px;min-width:0}
.m10-join__admin{font-size:.88rem}
.m10-checkout{display:flex;flex-direction:column;gap:16px;padding:clamp(18px,3vw,30px);border-radius:var(--radius-lg);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--shadow)}
.m10-checkout__title{margin-bottom:2px}
.m10-email-step{gap:16px}
.m10-email-step__foot{text-align:center}
.m10-embed{display:flex;flex-direction:column;gap:12px;min-height:420px}
.m10-embed__email{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--c-surface-2)}
.m10-embed__loading{display:grid;place-items:center;min-height:320px}
.m10-embed__mount{min-height:1px}
.m10-demo__banner{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-sm);background:var(--c-warning-soft);border:1px dashed var(--c-warning);color:var(--c-ink);font-size:.9rem;line-height:1.5}
.m10-demo__banner .icon{flex:none;margin-top:2px;color:var(--c-warning)}
.m10-wallets{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m10-wallet{display:flex;align-items:center;justify-content:center;gap:4px;min-height:48px;border-radius:var(--radius-sm);background:var(--c-ink);color:#fff;font-weight:700;font-size:1.02rem;opacity:.35;cursor:not-allowed}
.m10-wallet .icon{width:1.2em;height:1.2em}
.m10-wallet--google{background:var(--c-surface);color:var(--c-ink);border:1.5px solid var(--c-line-2)}
.m10-demo__walletnote{margin-top:-6px}
.m10-cardfield{position:relative}
.m10-cardfield .input{padding-right:3em;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.m10-cardfield .icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--c-ink-2);pointer-events:none}
.m10-demo__foot{text-align:center}
.m10-demo .form-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.m10-demo .divider--text{margin:4px 0 -4px}
.m10-terms{padding:12px 16px;border-radius:var(--radius-sm);background:var(--c-surface);border:1px solid var(--c-line);font-size:.92rem;font-weight:650;text-align:center}
.m10-legal{text-align:center;line-height:1.55}
.m10-legal a{color:inherit}

/* ---- /join/complete */
.m10-welcome{padding-block:clamp(36px,7vw,96px);background:radial-gradient(520px 280px at 50% 0%,var(--c-brand-soft),transparent 70%),radial-gradient(420px 220px at 100% 100%,var(--c-accent-soft),transparent 70%),var(--c-bg)}
.m10-welcome__card{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:620px;margin-inline:auto;padding:clamp(26px,5vw,48px);border-radius:var(--radius-xl);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--shadow-lg);text-align:center}
.m10-welcome__burst{width:120px;height:120px;margin-bottom:4px;animation:m10-pop .7s var(--ease-bounce) both}
.m10-welcome__title{font-family:var(--font-display);font-size:clamp(2rem,1.5rem + 2vw,2.9rem);font-weight:750;letter-spacing:-.03em;line-height:1.08}
.m10-welcome__facts{display:flex;flex-direction:column;gap:10px;width:100%;margin:8px 0 4px;padding:16px 18px;border-radius:var(--radius);background:var(--c-surface-2);list-style:none;text-align:left}
.m10-welcome__facts li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;line-height:1.45;color:var(--c-ink-2)}
.m10-welcome__facts .icon{flex:none;color:var(--c-brand);margin-top:1px}
.m10-welcome__facts a{color:var(--c-brand);font-weight:650}
.m10-welcome__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;margin-top:6px}
.m10-welcome__count{min-height:1.5em}
@keyframes m10-pop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}

/* ---- limit page */
.m10-limit .h2{margin-top:4px}

/* ---- /account/membership */
.m10-account{display:flex;flex-direction:column;gap:clamp(18px,2.6vw,26px)}
.m10-status{display:flex;flex-direction:column;gap:16px;padding:clamp(20px,3vw,28px);border-radius:var(--radius-lg);border:1px solid var(--c-line);background:var(--c-surface);box-shadow:var(--shadow-sm)}
.m10-status--ok,.m10-status--trial{background:radial-gradient(420px 200px at 100% 0%,var(--c-brand-soft),transparent 70%),var(--c-surface)}
.m10-status--bad{border-color:var(--c-danger)}
.m10-status__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px}
.m10-status__head .h3{margin-top:4px}
.m10-status__line{font-size:1.02rem;line-height:1.55}
.m10-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.m10-kv>div:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:1100px){.m10-kv{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.m10-kv>div:last-child:nth-child(odd){grid-column:auto}}
.m10-kv>div{padding:12px 14px;border-radius:var(--radius-sm);background:var(--c-surface-2)}
.m10-kv dt{font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-2)}
.m10-kv dd{margin:4px 0 0;font-weight:650;line-height:1.4}
.m10-status__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.m10-cancel-btn{color:var(--c-ink-2)}
.m10-cancel-btn:hover{color:var(--c-danger)}
.m10-lose{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px;padding:14px 16px;border-radius:var(--radius-sm);background:var(--c-surface-2);list-style:none}
.m10-lose li{display:flex;gap:10px;align-items:center;font-size:.93rem}
.m10-lose .icon{color:var(--c-brand)}
.m10-modal-actions{margin-top:16px;justify-content:flex-end}
.m10-danger-link{color:var(--c-danger)}
.m10-danger-link:hover{color:var(--c-danger);background:var(--c-danger-soft)}
.m10-dl__stats{margin-top:12px}
.m10-dl__stats .stat-tile__value small{font-size:.6em;font-weight:650;color:var(--c-ink-2)}
.m10-meter{height:8px;margin-top:12px;border-radius:var(--radius-pill);background:var(--c-surface-2);overflow:hidden}
.m10-meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--c-brand),var(--c-accent))}
.m10-recent{display:grid;gap:8px;grid-template-columns:1fr;margin-top:14px;padding:0;list-style:none}
@media (min-width:640px){.m10-recent{grid-template-columns:repeat(2,minmax(0,1fr))}}
.m10-recent a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--radius-sm);text-decoration:none;color:var(--c-ink);transition:background-color var(--t-fast)}
.m10-recent a:hover{background:var(--c-surface-2);color:var(--c-ink)}
.m10-recent img{flex:none;width:56px;height:56px;object-fit:cover;border-radius:10px;background:var(--c-surface-2)}
.m10-recent span{display:flex;flex-direction:column;min-width:0}
.m10-recent strong{font-size:.92rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m10-recent small{color:var(--c-ink-2);font-size:.8rem}
.m10-change{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.m10-change__opt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--c-line)}
.m10-change__opt>div{display:flex;flex-direction:column}
.m10-offer .m10-plans{margin-top:22px;margin-inline:0}
.m10-pay td,.m10-pay th{white-space:nowrap}
.m10-pay td:nth-child(2){white-space:normal;min-width:160px}
.m10-num{font-variant-numeric:tabular-nums;font-weight:650}
.m10-account__help{text-align:center}
@media (prefers-reduced-motion:reduce){.m10-plan,.m10-plan:hover,.m10-plan.is-featured{transform:none!important;transition:none}.m10-welcome__burst{animation:none}}
/* ===== end M10 ===== */
/* ===== trialfocus ===== */
/* Full subscription terms on /join right above the start/pay button: normal body text, full ink contrast (≥ 15:1),
   never faint, never smaller than 15px (owner rule 3). */
.tf-terms{margin:4px 0 12px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--c-surface-2);border:1px solid var(--c-line);color:var(--c-ink);font-size:.9375rem;line-height:1.5;font-weight:600;text-align:center;opacity:1}
.m10-demo .tf-terms,.m10-email-step .tf-terms{margin:0}
.plan.tf-plan .plan__price small{font-size:.5em;font-weight:700}
/* K1: /join top in trial-focused mode ("7 days free" + "$0.00 due today"; the paid summary replaces it if the trial is not available) */
.tf-join-top{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}
.tf-join-top[hidden]{display:none}
.tf-join-due{font-size:1.05rem}
.tf-join-due span{color:var(--c-success)}
/* ===== end trialfocus ===== */
/* ===== freegate ===== */
.fg-form{display:flex;flex-direction:column;gap:10px}
.fg-form__title{display:flex;align-items:center;gap:.45em;margin:0;font-weight:800;font-size:1.05rem;color:var(--c-ink)}
.fg-form__title .icon{color:var(--c-brand)}
.fg-form__row{display:flex;gap:8px;flex-wrap:wrap}
.fg-form__row .input{flex:1 1 220px;min-width:0;min-height:48px}
.fg-form__row .btn{flex:0 0 auto;min-height:48px}
.fg-form__optin{font-size:.9rem;color:var(--c-ink-2)}
.fg-form__note{margin:0}
.fg-form__note a{color:inherit}
.fg-form [data-fg-error]:not([hidden]){margin:0}
.fg-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.fg-success{display:flex;flex-direction:column;gap:10px;outline:none}
.fg-success__title{display:flex;align-items:flex-start;gap:.5em;margin:0;padding:10px 14px;border-radius:var(--radius-sm);background:var(--c-success-soft);color:#11573A;font-weight:700;line-height:1.45}
.fg-success__title .icon{flex:none;margin-top:.15em}
.fg-success__files{display:flex;flex-direction:column;gap:8px}
@media (max-width:420px){.fg-form__row .btn{flex:1 1 100%}}
/* ===== end freegate ===== */
/* ===== currency: footer currency switcher + DB-IP attribution ===== */
.cur-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.cur-switch{display:inline-flex;align-items:center;gap:8px;margin:0}
.cur-switch__label{color:#A79DB8;font-size:.84rem}
.cur-switch__select{min-height:36px;padding:4px 30px 4px 10px;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-sm);background:transparent;color:#fff;font:inherit;font-size:.84rem;cursor:pointer}
.cur-switch__select option{color:var(--c-ink);background:var(--c-surface)}
.cur-switch__select:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cur-switch__btn{min-height:36px;padding:4px 12px;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-sm);background:none;color:#fff;cursor:pointer}
.cur-attrib{margin:0;font-size:.78rem}
.cur-attrib a{color:#A79DB8}
.cur-attrib a:hover{color:#fff}
@media (pointer:coarse){.cur-switch__select,.cur-switch__btn{min-height:44px}}
/* ===== end currency ===== */
/* ===== email access (no-card email trial, K2/K3) ===== */
.ea-box{display:flex;flex-direction:column;gap:12px}
.ea-box:focus{outline:none}
.ea-box.is-fresh{animation:ea-in .35s ease-out}
@keyframes ea-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ea-form .fg-form__row .btn{gap:.45em}
.ea-perks{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;padding:0;list-style:none;color:var(--c-ink-2)}
.ea-perks li{display:inline-flex;align-items:center;gap:.4em}
.ea-perks .icon{flex:none;width:1.05em;height:1.05em;color:var(--c-success)}
.ea-form [data-ea-error]:not([hidden]){display:block;margin:0}
.ea-form [data-ea-error] a{color:var(--c-brand);font-weight:800;white-space:nowrap}
.ea-form__note{margin:0;color:var(--c-ink-3)}
.ea-form__note a{color:inherit}
.ea-hint{display:flex;align-items:flex-start;gap:.45em;margin:0;color:var(--c-ink-2)}
.ea-hint .icon{flex:none;width:1.05em;height:1.05em;margin-top:.2em;color:var(--c-success)}
.ea-meter{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--c-surface-2);color:var(--c-ink)}
.ea-meter__row{display:flex;align-items:center;gap:.5em}
.ea-meter__row .icon{flex:none;color:var(--c-brand)}
.ea-meter__main{margin:0}
.ea-meter__bar{display:block;height:6px;border-radius:var(--radius-pill);background:var(--c-line);overflow:hidden}
.ea-meter__bar>span{display:block;height:100%;min-width:0;border-radius:inherit;background:linear-gradient(90deg,var(--c-brand),var(--c-accent));transition:width .3s ease}
.ea-meter__sub{margin:0;color:var(--c-ink-2)}
.ea-ended{padding:12px 14px;border-radius:var(--radius-sm);background:var(--c-surface-2);border:1px solid var(--c-line)}
.ea-ended p{margin:0}
.ea-ended__title{display:flex;align-items:center;gap:.45em;font-weight:800;color:var(--c-ink);margin-bottom:4px!important}
.ea-ended__title .icon{flex:none;color:var(--c-brand)}
.ea-pill .ea-pill__long{display:none}
@media (min-width:480px){.ea-pill .ea-pill__long{display:inline}}
/* limit / status page */
.ea-limit{display:flex;flex-direction:column;gap:22px;max-width:560px;margin-inline:auto}
.ea-limit__head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.ea-limit__head .h2,.ea-limit__head .lead,.ea-limit__head .eyebrow{margin:0}
.ea-limit__icon{margin-bottom:2px}
.ea-meter--page{padding:14px 16px}
.ea-plan{display:flex;flex-direction:column;gap:16px;padding:clamp(18px,3vw,28px);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.ea-plan__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ea-plan__name{margin:0;font-weight:800;font-size:1.1rem;color:var(--c-ink)}
.ea-plan__tag{margin:2px 0 0;color:var(--c-ink-2)}
.ea-plan__price{margin:0;white-space:nowrap;color:var(--c-ink)}
.ea-plan__price strong{font-family:var(--font-display);font-size:2rem;line-height:1}
.ea-plan__price span{margin-left:2px;color:var(--c-ink-2);font-weight:600}
.ea-plan__list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ea-plan__list li{display:flex;align-items:flex-start;gap:.55em;color:var(--c-ink)}
.ea-plan__list .icon{flex:none;margin-top:.2em;color:var(--c-success)}
.ea-plan .btn{gap:.45em}
.ea-plan__terms{margin:0;text-align:center;color:var(--c-ink-2)}
.ea-limit__actions{justify-content:center}
/* messages inside the form row: under input + button on wide screens, between input and full-width button on phones */
.ea-form .fg-form__row>.ea-form__msg{flex:1 1 100%;order:2;margin:0}
.ea-suggest{color:var(--c-ink-2)}
.ea-suggest .m10-linkbtn{overflow-wrap:anywhere}
@media (max-width:520px){.ea-form .fg-form__row>.ea-form__msg{order:0}.ea-form .fg-form__row .btn{flex:1 1 100%}}
/* long file names: truncate the name, keep the extension visible */
.ea-dl__name{display:flex;min-width:0}
.ea-dl__base{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ea-dl__ext{flex:none}
.ea-reserved .m2-files-pending__ico{color:var(--c-success)}
@media (prefers-reduced-motion:reduce){.ea-box.is-fresh{animation:none}.ea-meter__bar>span{transition:none}}
/* ===== end email access ===== */