/* ---- fonts.css ---- */
/* Instrument Sans and Instrument Serif (SIL Open Font License 1.1, see ../fonts/OFL.txt),
   served from our own server: the privacy policy promises no font is loaded from Google Fonts.
   Generated from the Google Fonts CSS (latin and latin-ext subsets). */
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-69e21e25.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;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-adbdfd9a.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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-69e21e25.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;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-adbdfd9a.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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-be357e38.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;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-24e6c99c.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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-5f17a8dd.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;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-37ddf465.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;
}

/* ---- fonts-noto.css ---- */
/* Noto fonts for the scripts Instrument doesn't cover, self-hosted (bin/fetch-fonts.py).
   SIL Open Font License 1.1, see ../fonts/noto/OFL.txt. Generated: don't edit. */
/* Noto Sans 400 cyrillic-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-cyrillic-ext-400-b0a4cb21.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Noto Sans 400 cyrillic */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-cyrillic-400-6da63da2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Noto Sans 400 greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-greek-ext-400-f9699afc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* Noto Sans 400 greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-greek-400-20f0b4d5.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Noto Sans 400 vietnamese */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-vietnamese-400-0b436446.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Noto Sans 400 latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-latin-ext-400-2c285a0f.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Noto Sans 400 latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-latin-400-c916a811.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;
}
/* Noto Sans 600 cyrillic-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-cyrillic-ext-600-b0a4cb21.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Noto Sans 600 cyrillic */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-cyrillic-600-6da63da2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Noto Sans 600 greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-greek-ext-600-f9699afc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* Noto Sans 600 greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-greek-600-20f0b4d5.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Noto Sans 600 vietnamese */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-vietnamese-600-0b436446.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Noto Sans 600 latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-latin-ext-600-2c285a0f.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Noto Sans 600 latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-latin-600-c916a811.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;
}
/* Noto Serif 400 cyrillic-ext */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-serif-cyrillic-ext-400-e4139c28.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Noto Serif 400 cyrillic */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-serif-cyrillic-400-803624a4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Noto Serif 400 greek-ext */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-serif-greek-ext-400-4490bf90.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* Noto Serif 400 greek */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-serif-greek-400-9ce98342.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Noto Serif 400 vietnamese */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-serif-vietnamese-400-bcf1f0a8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Noto Serif 400 latin-ext */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-serif-latin-ext-400-320de1a0.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Noto Serif 400 latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-serif-latin-400-541afd78.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;
}
/* Noto Sans Hebrew 400 cyrillic-ext */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-hebrew-cyrillic-ext-400-03cf0ed2.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Noto Sans Hebrew 400 greek-ext */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-hebrew-greek-ext-400-03cf0ed2.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* Noto Sans Hebrew 400 hebrew */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-hebrew-hebrew-400-eb0d2a20.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* Noto Sans Hebrew 600 cyrillic-ext */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-hebrew-cyrillic-ext-600-03cf0ed2.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Noto Sans Hebrew 600 greek-ext */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-hebrew-greek-ext-600-03cf0ed2.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* Noto Sans Hebrew 600 hebrew */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-hebrew-hebrew-600-eb0d2a20.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* Noto Serif Hebrew 400 hebrew */
@font-face {
  font-family: 'Noto Serif Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-serif-hebrew-hebrew-400-df482c8a.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* Noto Sans Arabic 400 arabic */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-arabic-arabic-400-acc502ef.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* Noto Sans Arabic 400 math */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-arabic-math-400-5a362464.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* Noto Sans Arabic 400 symbols */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-arabic-symbols-400-bdf4763b.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
/* Noto Sans Arabic 600 arabic */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-arabic-arabic-600-acc502ef.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* Noto Sans Arabic 600 math */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-arabic-math-600-5a362464.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* Noto Sans Arabic 600 symbols */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-arabic-symbols-600-bdf4763b.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
/* Noto Naskh Arabic 400 arabic */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/noto/noto-naskh-arabic-arabic-400-422f7270.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* Noto Naskh Arabic 400 math */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/noto/noto-naskh-arabic-math-400-06d9eb22.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* Noto Naskh Arabic 400 symbols */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/noto/noto-naskh-arabic-symbols-400-f4becf3b.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
/* Noto Sans Devanagari 400 devanagari */
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-devanagari-devanagari-400-a454d576.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* Noto Sans Devanagari 600 devanagari */
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-devanagari-devanagari-600-a454d576.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* Noto Serif Devanagari 400 devanagari */
@font-face {
  font-family: 'Noto Serif Devanagari';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-serif-devanagari-devanagari-400-4088d1e5.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* Noto Sans Bengali 400 bengali */
@font-face {
  font-family: 'Noto Sans Bengali';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-bengali-bengali-400-dceb7f81.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1;
}
/* Noto Sans Bengali 600 bengali */
@font-face {
  font-family: 'Noto Sans Bengali';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-bengali-bengali-600-dceb7f81.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1;
}
/* Noto Serif Bengali 400 bengali */
@font-face {
  font-family: 'Noto Serif Bengali';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-serif-bengali-bengali-400-01283e32.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1;
}
/* Noto Sans Tamil 400 tamil */
@font-face {
  font-family: 'Noto Sans Tamil';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-tamil-tamil-400-1ef02ddc.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
/* Noto Sans Tamil 600 tamil */
@font-face {
  font-family: 'Noto Sans Tamil';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-tamil-tamil-600-1ef02ddc.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
/* Noto Serif Tamil 400 tamil */
@font-face {
  font-family: 'Noto Serif Tamil';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-serif-tamil-tamil-400-bce85db0.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
/* Noto Sans Telugu 400 telugu */
@font-face {
  font-family: 'Noto Sans Telugu';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-telugu-telugu-400-b430843a.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0B83, U+0C00-0C7F, U+1CD5-1CD6, U+1CD8, U+1CDA, U+1CF2, U+200C-200D, U+25CC;
}
/* Noto Sans Telugu 600 telugu */
@font-face {
  font-family: 'Noto Sans Telugu';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-telugu-telugu-600-b430843a.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0B83, U+0C00-0C7F, U+1CD5-1CD6, U+1CD8, U+1CDA, U+1CF2, U+200C-200D, U+25CC;
}
/* Noto Serif Telugu 400 telugu */
@font-face {
  font-family: 'Noto Serif Telugu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/noto/noto-serif-telugu-telugu-400-7dfdfcd5.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0B83, U+0C00-0C7F, U+1CD5-1CD6, U+1CD8, U+1CDA, U+1CF2, U+200C-200D, U+25CC;
}
/* Noto Sans Sinhala 400 sinhala */
@font-face {
  font-family: 'Noto Sans Sinhala';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-sinhala-sinhala-400-14967d50.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0D81-0DF4, U+1CF2, U+200C-200D, U+25CC, U+111E1-111F4;
}
/* Noto Sans Sinhala 600 sinhala */
@font-face {
  font-family: 'Noto Sans Sinhala';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-sinhala-sinhala-600-14967d50.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0D81-0DF4, U+1CF2, U+200C-200D, U+25CC, U+111E1-111F4;
}
/* Noto Serif Sinhala 400 sinhala */
@font-face {
  font-family: 'Noto Serif Sinhala';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-serif-sinhala-sinhala-400-cb0a3d01.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0D81-0DF4, U+1CF2, U+200C-200D, U+25CC, U+111E1-111F4;
}
/* Noto Sans Thai 400 thai */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-thai-thai-400-4dd2ca6f.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* Noto Sans Thai 600 thai */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-sans-thai-thai-600-4dd2ca6f.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* Noto Serif Thai 400 thai */
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto/noto-serif-thai-thai-400-f7c10c6e.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* ---- tokens.css ---- */
/* Dopamine Chic tokens as CSS variables, compiled from the system's tokens.json (light first, dark by data-theme). */
:root, [data-theme="light"] {
  --paper: #fbf8f4; --paper-raised: #ffffff; --paper-sunk: #f1ece5; --photo-well: #ece9e5; --line: #e2dad0;
  --ink: #1a1418; --ink-muted: #665b61; --on-photo: #1a1418;
  --rush: #c8175f; --rush-soft: #fce3ed; --on-rush: #ffffff;
  --scarcity: #8f4300; --scarcity-soft: #ffebd2;
  --flash: #ffd93d; --on-flash: #1a1418;
  --deal: #1a1418; --on-deal: #fbf8f4; --deal-accent: #ff7aae;
  --calm: #0b6874; --calm-soft: #ddf1f3;
  --sold: #8a7f85; --veil: rgba(251,248,244,0.62); --focus: #1a1418; --link: var(--ink);
  --shadow-raise: 0 1px 2px rgba(26,20,24,0.06), 0 8px 24px rgba(26,20,24,0.08);
}
[data-theme="dark"] {
  --paper: #141113; --paper-raised: #1f1a1d; --paper-sunk: #0c0a0b; --photo-well: #ece9e5; --line: #3a3337;
  --ink: #f6f1f3; --ink-muted: #b3a8ae; --on-photo: #1a1418;
  --rush: #ff5c9a; --rush-soft: #3d1024; --on-rush: #1a1418;
  --scarcity: #ffb45c; --scarcity-soft: #3a2408;
  --flash: #ffd93d; --on-flash: #1a1418;
  --deal: #f6f1f3; --on-deal: #1a1418; --deal-accent: #c8175f;
  --calm: #6ccfdc; --calm-soft: #0f2e33;
  --sold: #7d7278; --veil: rgba(20,17,19,0.62); --focus: #f6f1f3; --link: var(--ink);
  --shadow-raise: 0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.45);
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-0: 0px; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 999px;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- bundle.css ---- */
/* Dopamine Chic components. Every value comes from tokens.css. */
body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 22px; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
.dc-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.dc-stack { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.dc-num { font-variant-numeric: tabular-nums; }
:where(.dc-btn, .dc-size, .dc-wish, .dc-link):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Button */
.dc-btn { font: 600 15px/20px var(--font-sans); height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.dc-btn-primary { background: var(--rush); color: var(--on-rush); border-color: var(--rush); }
.dc-btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.dc-btn-quiet { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding: 0 var(--space-2); }
.dc-btn-lg { height: 52px; font-size: 16px; }
.dc-btn-block { width: 100%; }
.dc-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Badge */
.dc-badge { display: inline-flex; align-items: center; font: 600 11px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; border-radius: var(--radius-sm); white-space: nowrap; }
.dc-badge-discount { background: var(--rush); color: var(--on-rush); }
.dc-badge-flash { background: var(--flash); color: var(--on-flash); }
.dc-badge-deal { background: var(--deal); color: var(--on-deal); }
.dc-badge-low { background: var(--scarcity-soft); color: var(--scarcity); }
.dc-badge-soldout { background: var(--paper-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.dc-badge-new { background: var(--paper-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.dc-badge-calm { background: var(--calm-soft); color: var(--calm); }

/* PriceTag */
.dc-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-2); font-variant-numeric: tabular-nums; }
.dc-price-now { font: 600 16px/22px var(--font-sans); color: var(--rush); }
.dc-price-was { font-size: 13px; line-height: 18px; color: var(--ink-muted); text-decoration: line-through; }
.dc-price-off { font: 600 13px/18px var(--font-sans); color: var(--rush); }
.dc-price-lg .dc-price-now { font-size: 24px; line-height: 28px; }
.dc-price-lg .dc-price-was, .dc-price-lg .dc-price-off { font-size: 15px; line-height: 22px; }
.dc-price-sold .dc-price-now, .dc-price-sold .dc-price-off { color: var(--ink-muted); }

/* Countdown */
.dc-countdown { display: inline-flex; align-items: baseline; gap: var(--space-1); padding: 4px 10px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line); background: var(--paper-raised); font-size: 13px; line-height: 18px; color: var(--ink-muted); white-space: nowrap; }
.dc-countdown b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.dc-countdown-urgent { background: var(--scarcity-soft); box-shadow: none; color: var(--scarcity); }
.dc-countdown-urgent b { color: var(--scarcity); }
.dc-countdown-inherit { background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: inherit; }
.dc-countdown-inherit b { color: inherit; }

/* SocialProof */
.dc-proof { display: inline-flex; align-items: center; gap: var(--space-2); padding-block: 4px; padding-inline: 10px 12px; border-radius: var(--radius-pill); background: var(--paper-sunk); color: var(--ink); font-size: 13px; line-height: 18px; }
.dc-proof::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rush); }

/* SizePicker */
.dc-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--space-2); }
.dc-size { font: 600 15px/20px var(--font-sans); min-height: 52px; padding: 6px 4px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.dc-size small { font: 600 11px/14px var(--font-sans); color: var(--scarcity); }
.dc-size[aria-pressed="true"] { border: 2px solid var(--ink); background: var(--rush-soft); }
.dc-size-sold_out { background: var(--paper-sunk); color: var(--sold); text-decoration: line-through; text-decoration-color: var(--sold); cursor: not-allowed; }
.dc-size-sold_out small { color: var(--ink-muted); text-decoration: none; }
.dc-size-not_available { background: transparent; border-style: dashed; color: var(--ink-muted); font-weight: 400; cursor: not-allowed; }
.dc-size-not_available small { color: var(--ink-muted); font-weight: 400; }

/* ProductTile */
.dc-tile { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.dc-photo { position: relative; aspect-ratio: 4 / 5; background: var(--photo-well); border-radius: var(--radius-0); overflow: hidden; }
.dc-photo img, .dc-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The on-model photo fades in over the packshot, only where there is a mouse. Badges, heart and veil come later in the markup, so they stay on top. */
.dc-photo .dc-photo-hover { opacity: 0; background: var(--photo-well); transition: opacity 160ms ease-out; }
@media (hover: hover) and (pointer: fine) { .dc-tile:hover .dc-photo-hover { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dc-photo .dc-photo-hover { transition: none; } }
.dc-photo-badges { position: absolute; top: var(--space-2); inset-inline-start: var(--space-2); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.dc-wish { position: absolute; top: var(--space-1); inset-inline-end: var(--space-1); width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--on-photo); cursor: pointer; display: grid; place-items: center; }
.dc-wish svg { position: static; width: 22px; height: 22px; }
.dc-wish[aria-pressed="true"] { color: var(--rush); }
.dc-veil { position: absolute; inset: 0; background: var(--veil); display: grid; place-items: center; }
.dc-veil span { font: 600 11px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--paper-raised); padding: 6px 10px; border-radius: var(--radius-sm); }
.dc-tile-brand { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.dc-tile-name { font-size: 13px; line-height: 18px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-tile-text { display: flex; flex-direction: column; gap: 2px; }
.dc-tile-sold .dc-tile-name { color: var(--ink-muted); }
.dc-silhouette { fill: var(--paper-raised); stroke: var(--sold); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* CampaignCard */
.dc-campaign { display: grid; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.dc-campaign-photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; aspect-ratio: 3 / 2; }
.dc-campaign-photos > * { position: relative; background: var(--photo-well); overflow: hidden; }
.dc-campaign-photos > :first-child { grid-row: span 2; }
.dc-campaign-body { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.dc-campaign-brand { font: 400 40px/44px var(--font-display); margin: 0; }
.dc-campaign-headline { font: 600 15px/22px var(--font-sans); color: var(--rush); margin: 0; }
.dc-campaign-scope { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: 0; }
.dc-campaign-upcoming .dc-campaign-photos { filter: grayscale(1); opacity: .7; }
.dc-campaign-upcoming .dc-campaign-headline { color: var(--ink-muted); }

/* FlashBanner */
.dc-flash { background: var(--flash); color: var(--on-flash); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.dc-flash-eyebrow { font: 600 11px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 var(--space-1); }
.dc-flash-title { font: 400 40px/44px var(--font-display); margin: 0; }
.dc-flash-extra { font: 600 15px/22px var(--font-sans); margin: var(--space-1) 0 0; }
.dc-flash .dc-countdown { background: transparent; box-shadow: inset 0 0 0 1.5px var(--on-flash); color: var(--on-flash); }
.dc-flash .dc-countdown b { color: var(--on-flash); }

/* DealOfTheHour */
.dc-deal { background: var(--deal); color: var(--on-deal); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; grid-template-columns: minmax(120px, 2fr) 3fr; gap: var(--space-4); align-items: center; }
.dc-deal .dc-photo { border-radius: var(--radius-md); }
.dc-deal-eyebrow { font: 600 11px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--deal-accent); margin: 0; }
.dc-deal-off { font: 400 64px/60px var(--font-display); color: var(--deal-accent); margin: var(--space-1) 0; letter-spacing: -.01em; }
.dc-deal-name { font-size: 13px; line-height: 18px; margin: 0; }
.dc-deal-prices { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-2) 0; font-variant-numeric: tabular-nums; }
.dc-deal-prices strong { font: 600 24px/28px var(--font-sans); }
.dc-deal-prices s { font-size: 15px; opacity: .75; }
.dc-deal-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: 13px; line-height: 18px; }

/* CartTimer */
.dc-timer { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--paper-raised); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); }
.dc-timer-top { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.dc-timer-top b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dc-timer-track { height: 6px; border-radius: var(--radius-pill); background: var(--paper-sunk); overflow: hidden; }
.dc-timer-fill { height: 100%; background: var(--ink); border-radius: var(--radius-pill); }
.dc-timer-urgent .dc-timer-top b, .dc-timer-urgent .dc-timer-top { color: var(--scarcity); }
.dc-timer-urgent .dc-timer-fill { background: var(--scarcity); }

/* TrackingTimeline */
.dc-track { list-style: none; margin: 0; padding: 0; display: grid; }
.dc-step { display: grid; grid-template-columns: 20px 1fr; column-gap: var(--space-3); position: relative; padding-bottom: var(--space-4); }
.dc-step::before { content: ""; position: absolute; inset-inline-start: 9px; top: 20px; bottom: 0; width: 2px; background: var(--line); }
.dc-step:last-child::before { display: none; }
.dc-step-done::before { background: var(--calm); }
.dc-dot { width: 12px; height: 12px; margin: 5px 4px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); background: var(--paper); }
.dc-step-done .dc-dot { background: var(--calm); box-shadow: none; }
.dc-step-current .dc-dot { box-shadow: inset 0 0 0 3px var(--ink); }
.dc-step-stopped .dc-dot { background: var(--sold); box-shadow: none; }
.dc-step-label { font: 600 15px/22px var(--font-sans); }
.dc-step-upcoming .dc-step-label { font-weight: 400; color: var(--ink-muted); }
.dc-step-time { grid-column: 2; font-size: 13px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.dc-excuse { grid-column: 2; margin: var(--space-2) 0 0; font: italic 400 24px/30px var(--font-display); color: var(--ink); }

/* Notice */
.dc-notice { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--paper-sunk); color: var(--ink-muted); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 13px; line-height: 18px; }
.dc-notice::before { content: "i"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--calm); color: var(--paper); font: italic 600 12px/18px var(--font-display); text-align: center; }
.dc-notice strong { color: var(--ink); font-weight: 600; }

/* Toast */
.dc-toast { display: flex; align-items: center; gap: var(--space-3); background: var(--paper-raised); color: var(--ink); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-raise); font-size: 15px; line-height: 22px; max-width: 420px; }
.dc-toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); }
.dc-toast-rush::before { background: var(--rush); }
.dc-toast-scarcity::before { background: var(--scarcity); }
.dc-toast-calm::before { background: var(--calm); }

/* ---- site.css ---- */
/* Dopamine Chic — site layout
   ------------------------------------------------------------------
   One HTML per page for every screen width. Only this file changes the
   layout: mobile first, desktop from 960 px.

   In the design canvas the breakpoint is a container query on .page, so
   the same page can be shown at 390 px and 1440 px side by side.
   IN PRODUCTION: replace every "@media (" with "@media (",
   and remove the `container` line from .page. Nothing in the HTML changes.

   Overlays (menu, sheets, modals) use position: fixed. .page--locked is
   the page while an overlay is open (production: body scroll lock).
   Builds on tokens.css (colours, fonts, radii) and bundle.css (dc-*).
   ------------------------------------------------------------------ */

/* Base */
.page{position:relative;width:100%;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font:400 15px/22px var(--font-sans)}
.page--locked{position:absolute;inset:0;overflow:hidden}
.page *,.page *::before,.page *::after{box-sizing:border-box}
.page h1,.page h2,.page h3,.page p,.page ul,.page ol,.page figure,.page blockquote,.page fieldset,.page form{margin:0}
.page ul,.page ol{padding:0;list-style:none}
.page fieldset{border:0;padding:0;min-width:0}
.page legend{padding:0}
/* Low-specificity link colours, so any class that sets a colour (buttons, pills, promo cards) wins */
:where(.page) a{color:var(--ink)}
:where(.page) a:where(:hover){color:var(--rush)}
.page a.plain{text-decoration:none;color:inherit}
.page input[type=radio],.page input[type=checkbox]{accent-color:var(--ink);width:20px;height:20px;margin:0;flex-shrink:0}
.page textarea,.page input[type=text],.page input[type=search]{font:400 15px/22px var(--font-sans);color:var(--ink);background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px;width:100%}
.page textarea{resize:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.main{flex-grow:1;display:flex;flex-direction:column}

/* Spacing and stacks */
.wrap{padding-inline:16px}
.sec{padding-block:24px}
.sec--tight{padding-block:16px}
.sec--top0{padding-top:0}
.stack{display:flex;flex-direction:column;gap:var(--gap,16px)}
.row{display:flex;align-items:center;gap:var(--gap,12px)}
.row--between{justify-content:space-between}
.row--base{align-items:baseline}
.row--top{align-items:flex-start}
.row--wrap{flex-wrap:wrap}
.row--end{justify-content:flex-end}
.grow{flex-grow:1;min-width:0}
.shrink0{flex-shrink:0}
.self-start{align-self:flex-start}
.self-center{align-self:center}
.center{text-align:center;align-items:center}
.g4{--gap:4px}.g6{--gap:6px}.g8{--gap:8px}.g10{--gap:10px}.g12{--gap:12px}.g16{--gap:16px}.g20{--gap:20px}.g24{--gap:24px}.g28{--gap:28px}.g32{--gap:32px}.g40{--gap:40px}

/* Page layouts (all one column on mobile) */
.l-aside,.l-split,.l-split-57,.l-sidebar,.l-half{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.l-narrow{width:100%;max-width:640px;margin-inline:auto}

/* Grids */
.g-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
.g-tiles--3{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.g-2,.g-3,.g-4{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap,12px)}
.g-4m2,.g-2m2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap,8px)}
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
.rail>*{flex:0 0 44%;scroll-snap-align:start}
.tile-link{text-decoration:none;color:inherit;min-width:0;display:block}
.span-all{grid-column:1/-1}

/* Type */
.t-hero{font:400 48px/46px var(--font-display);letter-spacing:-.01em}
.t-h1{font:400 36px/40px var(--font-display)}
.t-h1x{font:400 44px/44px var(--font-display);letter-spacing:-.01em}
.t-h2{font:400 26px/30px var(--font-display)}
.t-h2s{font:400 22px/26px var(--font-display)}
.t-h3{font:600 17px/24px var(--font-sans)}
.t-quote{font:italic 400 24px/30px var(--font-display)}
.t-money{font:400 72px/72px var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.t-count{font:400 56px/56px var(--font-display);font-variant-numeric:tabular-nums}
.t-stat{font:400 28px/30px var(--font-display);font-variant-numeric:tabular-nums}
.eyebrow{font:600 11px/14px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.lead{font-size:17px;line-height:26px}
.muted{color:var(--ink-muted)}
.small{font-size:13px;line-height:18px}
.xsmall{font-size:12px;line-height:16px}
.strong{font-weight:600}
.num{font-variant-numeric:tabular-nums}
.c-rush{color:var(--rush)}.c-calm{color:var(--calm)}.c-scarcity{color:var(--scarcity)}.c-sold{color:var(--sold)}.c-inherit{color:inherit}
.maxw{max-width:600px}

/* Surfaces */
.card{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg)}
.panel{background:var(--paper-sunk);border-radius:var(--radius-lg)}
.panel--calm{background:var(--calm-soft)}
.panel--rush{background:var(--rush-soft);color:var(--rush)}
.panel--scarcity{background:var(--scarcity-soft)}
.panel--flash{background:var(--flash);color:var(--on-flash)}
.panel--deal{background:var(--deal);color:var(--on-deal)}
.panel--flash .eyebrow,.panel--deal .eyebrow{color:inherit}
.panel--brand{background:#efe6d6}
.pad{padding:16px}
.pad-lg{padding:24px 20px}
.bordered{border-bottom:1px solid var(--line)}

/* Header (SiteHeader) */
.hdr{position:relative;background:var(--paper);border-bottom:1px solid var(--line)}
.hdr-bar{position:relative;z-index:30;height:56px;display:flex;align-items:center;gap:2px;padding-inline:4px 8px;background:var(--paper)}
.hdr-logo{flex-grow:1;padding-inline-start:4px;font:400 22px/28px var(--font-display);color:var(--ink);text-decoration:none}
.page a.hdr-logo:hover{color:var(--ink)}
.hdr-tabs{display:none}
.hdr-search{width:44px;height:44px;display:grid;place-items:center;color:var(--ink);text-decoration:none;flex-shrink:0}
.hdr-search-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hdr-actions{display:flex;align-items:center;gap:2px}
.hdr-streak{display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 8px;border-radius:var(--radius-pill);background:var(--paper-sunk);font:600 13px/18px var(--font-sans);text-decoration:none;color:var(--ink)}
.hdr-note{flex-grow:1;text-align:end;font-size:13px;color:var(--ink-muted);padding-inline-end:8px}
.icon-btn{position:relative;width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;padding:0;border:0;background:transparent;color:var(--ink);text-decoration:none;cursor:pointer}
.dot{position:absolute;top:9px;inset-inline-end:9px;width:9px;height:9px;border-radius:50%;background:var(--rush);box-shadow:0 0 0 2px var(--paper)}
.count{position:absolute;top:4px;inset-inline-end:1px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:var(--paper);font:600 11px/18px var(--font-sans);text-align:center}
.hdr-bar--search{gap:8px;padding-inline:12px}
.search-box{flex-grow:1;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:2px solid var(--ink);border-radius:var(--radius-md);background:var(--paper-raised)}
.page .search-box input{border:0;padding:0;background:transparent;outline:none;font-size:16px}
/* Menu: full screen on mobile, mega menu on desktop */
.menu-veil{position:fixed;inset:0;z-index:20;background:var(--veil)}
.menu{position:fixed;z-index:25;top:56px;left:0;right:0;bottom:0;overflow:auto;background:var(--paper);padding:8px 16px 32px;display:flex;flex-direction:column;gap:28px}
.menu-depts a{display:flex;justify-content:space-between;align-items:center;min-height:52px;border-bottom:1px solid var(--line);text-decoration:none;font:400 26px/30px var(--font-display)}
.menu-list a{display:flex;justify-content:space-between;align-items:center;min-height:44px;border-bottom:1px solid var(--line);text-decoration:none}
.menu-promos{display:flex;flex-direction:column;gap:10px}
.menu-promo{display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:var(--radius-lg);text-decoration:none}
.page a.menu-promo:hover{color:inherit}
.search-panel{position:fixed;z-index:25;top:56px;left:0;right:0;bottom:0;overflow:auto;background:var(--paper);padding:16px 16px 32px;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-content:start}
.sugg a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--radius-md);text-decoration:none}
.sugg a.is-hl{background:var(--paper-sunk)}

/* Footer (SiteFooter) */
.ftr{margin-top:auto;border-top:1px solid var(--line);padding:24px 16px 32px;display:flex;flex-direction:column;gap:16px;font-size:13px;line-height:18px;color:var(--ink-muted)}
.ftr-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.page .ftr a{color:var(--ink-muted)}

/* Strips above content */
.strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 16px;padding:10px 16px;font-size:14px;line-height:20px;text-decoration:none;text-align:center}
.strip--flash{background:var(--flash);color:var(--on-flash)}
.strip--deal{background:var(--deal);color:var(--on-deal)}
.page a.strip:hover{color:var(--on-flash)}
.strip-btn{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:var(--radius-md);font:600 14px/20px var(--font-sans);text-decoration:none}
.page a.strip-btn--solid{background:var(--on-deal);color:var(--deal)}
.strip-btn--line{background:transparent;color:var(--on-deal);border:1.5px solid var(--on-deal)}

/* Controls */
.pills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.pill{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:var(--radius-pill);background:var(--paper-sunk);color:var(--ink);font:400 14px/20px var(--font-sans);text-decoration:none;border:0;white-space:nowrap}
.pill--on{background:var(--ink);color:var(--paper);font-weight:600}
.page a.pill--on:hover{color:var(--paper)}
.pill--soft{background:var(--rush-soft);font-weight:600}
.pill--line{background:transparent;border:1.5px solid currentColor}
.select{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-raised);color:var(--ink);font:400 14px/20px var(--font-sans);white-space:nowrap;cursor:pointer}
.select--open{border:2px solid var(--ink)}
.toolbar{display:flex;flex-direction:column;gap:12px}
.toolbar-controls{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.check{display:flex;align-items:center;gap:10px;min-height:32px;font-size:14px}
.size-btns{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.size-btn{height:44px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-raised);color:var(--ink);font:600 13px/18px var(--font-sans)}
.size-btn--on{border:2px solid var(--ink);background:var(--rush-soft)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}
.swatch--on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.radio-card{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 16px;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-md)}
.radio-card--on{border:2px solid var(--ink)}
.kv{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.kv-list{border-top:1px solid var(--line)}
.sum{display:flex;justify-content:space-between;gap:16px}
.sum--total{padding-top:12px;border-top:1px solid var(--line);font-weight:600;font-size:17px}
.progress{height:6px;border-radius:var(--radius-pill);background:var(--paper-sunk);overflow:hidden}
.progress>span{display:block;height:100%;border-radius:var(--radius-pill);background:var(--calm)}
.crumbs{font-size:13px;line-height:18px;color:var(--ink-muted)}
.page .crumbs a{color:var(--ink-muted)}
.check-circle{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--calm-soft);color:var(--calm)}
.qr{width:72px;height:72px;flex-shrink:0;border:1px dashed currentColor;display:grid;place-items:center;font-size:11px}
.app-promo{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--radius-lg)}

/* Products */
.photo{position:relative;aspect-ratio:4/5;background:var(--photo-well);overflow:hidden}
.photo>svg{position:absolute;inset:0;width:100%;height:100%}
.photo-badges{position:absolute;top:12px;inset-inline-start:12px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.photo--gone{filter:grayscale(1);opacity:.7}
.gallery{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;scrollbar-width:none}
.gallery>.photo{flex:0 0 100%;scroll-snap-align:start}
.gallery-note{font-size:12px;line-height:16px;color:var(--ink-muted)}
.thumb{width:96px;aspect-ratio:4/5;flex-shrink:0;background:var(--photo-well)}
.thumb--s{width:48px}
.buybar{display:flex;align-items:center;gap:12px}
.buybar>.dc-btn-primary{flex-grow:1;text-decoration:none}
.line-item{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding-block:16px;border-bottom:1px solid var(--line)}
.line-item--3{grid-template-columns:96px minmax(0,1fr)}
.line-item--3>:last-child{grid-column:2}
.line-item--gone .thumb{filter:grayscale(1);opacity:.6}

/* Hero blocks */
.hero-brand{padding:28px 20px;border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:16px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:var(--radius-md);background:var(--paper-sunk);text-decoration:none;color:var(--ink)}
.steps{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;padding:16px}
.step>:first-child{grid-row:span 2;font:400 40px/40px var(--font-display);color:var(--rush)}
.soon{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-lg);background:var(--paper-sunk)}
.ach{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:var(--radius-md);min-height:64px}
.ach--done{background:var(--calm-soft)}
.ach--open{background:var(--paper-raised);border:1px solid var(--line);position:relative;overflow:hidden}
.ach__bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--line)}
.ach__bar>span{display:block;height:100%;background:var(--calm)}
.ach--hidden{background:var(--paper-sunk)}
.order-link{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}

/* Ads: one slot, sized by the layout (use responsive ad units) */
.ad{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:var(--radius-md);background:var(--paper-sunk)}
.ad>.eyebrow{align-self:flex-start}
.ad-slot{display:grid;place-items:center;border:1px dashed var(--line);color:var(--ink-muted);font-size:13px;width:300px;height:250px}
.ad-slot::after{content:"[Ad slot · 300 × 250]"}

/* Overlays */
.veil{position:fixed;inset:0;z-index:40;background:var(--veil)}
.sheet{position:fixed;z-index:50;inset-inline:0;bottom:0;max-height:88%;overflow:auto;background:var(--paper);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:8px 16px 24px;display:flex;flex-direction:column;gap:20px}
.sheet-grip{align-self:center;width:40px;height:4px;border-radius:2px;background:var(--line)}
.sheet-foot{position:sticky;bottom:-24px;margin:0 -16px -24px;padding:12px 16px 16px;background:var(--paper);border-top:1px solid var(--line);display:flex;gap:12px}
.pop{position:fixed;z-index:50;inset-inline:0;bottom:0;background:var(--paper);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:8px 16px 24px;display:flex;flex-direction:column;gap:4px}
.pop-anchor{position:relative}
.pop-item{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 4px;border-bottom:1px solid var(--line);text-decoration:none}
.modal{position:fixed;z-index:50;left:0;right:0;bottom:0;background:var(--paper);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:32px 20px 28px;display:flex;flex-direction:column;gap:14px}
.modal-close{position:absolute;top:8px;inset-inline-end:8px}
.toast-float{position:fixed;z-index:60;left:16px;right:16px;bottom:16px}
.table{border-collapse:collapse;width:100%;font-size:14px}
.table th{text-align:start;padding:10px 8px;font:600 13px/18px var(--font-sans);color:var(--ink-muted);border-bottom:1px solid var(--line)}
.table td{padding:10px 8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.table tr.is-mine{background:var(--rush-soft);font-weight:600}
.ghost{background:var(--paper-sunk);border-radius:var(--radius-md)}
.ghost--photo{background:var(--photo-well);aspect-ratio:4/5;border-radius:0}

/* Visibility helpers: same HTML, shown per layout */
@media (max-width:959.98px){.only-d{display:none!important}.ach>.small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* ------------------------------------------------------------------
   Desktop, 960 px and wider
   ------------------------------------------------------------------ */
@media (min-width:960px){
  .only-m{display:none!important}
  .wrap{padding-inline:80px}
  .sec{padding-block:48px}
  .sec--tight{padding-block:24px}
  .sec--top0{padding-top:0}

  .l-aside{grid-template-columns:minmax(0,1fr) 400px;gap:56px}
  .l-aside--300{grid-template-columns:minmax(0,1fr) 324px}
  .l-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}
  .l-split-57{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}
  .l-sidebar{grid-template-columns:240px minmax(0,1fr);gap:40px}
  .l-half{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
  .l-sticky{position:sticky;top:24px}

  .g-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px}
  .g-tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .g-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap,24px)}
  .g-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap,20px)}
  .g-4,.g-4m2{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap,12px)}
  .rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;overflow:visible;margin-inline:0;padding-inline:0}

  .t-hero{font-size:96px;line-height:92px;letter-spacing:-.02em}
  .t-h1{font-size:56px;line-height:56px}
  .t-h1x{font-size:72px;line-height:72px}
  .t-h2{font-size:36px;line-height:40px}
  .t-h2s{font-size:26px;line-height:30px}
  .t-quote{font-size:32px;line-height:40px}
  .t-money{font-size:120px;line-height:112px}
  .t-count{font-size:88px;line-height:88px}
  .t-stat{font-size:40px;line-height:40px}
  .lead{font-size:19px;line-height:28px}
  .pad{padding:20px 24px}
  .pad-lg{padding:40px}

  .hdr-bar{height:72px;gap:32px;padding-inline:80px}
  .hdr-burger{display:none}
  .hdr-logo{flex-grow:0;padding-inline-start:0;font-size:30px;line-height:34px}
  .hdr-tabs{display:flex;gap:24px;flex-grow:1}
  .hdr-tab{padding:24px 0;text-decoration:none;color:var(--ink)}
  .hdr-tab--on{font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
  .page .hdr-tab--deal{color:var(--rush);font-weight:600}
  .hdr-search{width:260px;height:40px;display:flex;justify-content:flex-start;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-raised);color:var(--ink-muted);font-size:14px}
  .hdr-search-text{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .hdr-actions{gap:4px}
  .hdr-bar--search{gap:32px;padding-inline:80px}
  .menu{position:absolute;top:100%;bottom:auto;padding:32px 80px 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 360px;gap:48px;border-bottom:1px solid var(--line);box-shadow:0 24px 48px rgba(0,0,0,.12)}
  .search-panel{position:absolute;top:100%;left:80px;right:80px;bottom:auto;padding:24px;grid-template-columns:320px minmax(0,1fr);gap:32px;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:0 24px 48px rgba(0,0,0,.12)}

  .ftr{flex-direction:row;justify-content:space-between;align-items:center;padding:28px 80px}

  .pills,.toolbar-controls{margin-inline:0;padding-inline:0;flex-wrap:wrap;overflow:visible}
  .toolbar{flex-direction:row;justify-content:space-between;align-items:center}
  .size-btns{grid-template-columns:repeat(3,minmax(0,1fr))}

  .gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:0;overflow:visible}
  .gallery-note{grid-column:1/-1}
  .thumb{width:120px}
  .thumb--s{width:48px}
  .line-item{grid-template-columns:120px minmax(0,1fr);gap:20px;padding-block:20px}
  .line-item--3{grid-template-columns:120px minmax(0,1fr) auto;align-items:center}
  .line-item--3>:last-child{grid-column:auto}

  .hero-brand{padding:48px;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:32px}
  .stats{gap:12px}
  .stat{padding:16px 20px}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .step{grid-template-columns:minmax(0,1fr);padding:24px}
  .step>:first-child{grid-row:auto;font-size:48px;line-height:48px}
  .ach{padding:16px;min-height:88px}

  .ad-slot--banner{width:728px;height:90px}
  .ad-slot--banner::after{content:"[Ad slot · 728 × 90]"}
  .ad-slot--tower{width:300px;height:600px}
  .ad-slot--tower::after{content:"[Ad slot · 300 × 600]"}

  .sheet{top:0;inset-inline-start:auto;width:560px;max-height:none;border-radius:0;padding:28px 40px;box-shadow:0 24px 64px rgba(0,0,0,.25)}
  .sheet-grip{display:none}
  .sheet-foot{bottom:-28px;margin:0 -40px -28px;padding:16px 40px}
  .pop{position:absolute;top:calc(100% + 8px);inset-inline-start:auto;inset-inline-end:0;bottom:auto;width:280px;padding:8px;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:0 16px 40px rgba(0,0,0,.14);gap:0}
  .pop .sheet-grip,.pop-title{display:none}
  .pop-item{min-height:40px;padding:0 12px;border-bottom:0;border-radius:var(--radius-sm)}
  .pop-item--on{background:var(--paper-sunk)}
  .veil--pop{display:none}
  .modal{left:50%;right:auto;bottom:auto;top:160px;width:560px;transform:translateX(-50%);border-radius:var(--radius-lg);padding:40px;box-shadow:0 24px 64px rgba(0,0,0,.25)}
  .toast-float{left:50%;right:auto;bottom:auto;top:88px;transform:translateX(-50%)}
}

/* Category filters: a bottom sheet on mobile (when open), the sidebar on desktop */
.filters{display:none}
.filters.sheet{display:flex}
.filters-group{display:flex;flex-direction:column;gap:10px}
.filters-group>legend,.filters-title{font:600 14px/20px var(--font-sans);padding-bottom:10px}
.range{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:960px){
  .filters,.filters.sheet{display:flex;flex-direction:column;gap:28px;position:static;width:auto;max-height:none;overflow:visible;padding:0;border-radius:0;box-shadow:none;background:transparent;z-index:auto}
  .filters .sheet-foot{position:static;margin:0;padding:0;border:0;background:transparent}
  .filters .sheet-head{display:none}
}

/* ------------------------------------------------------------------
   App mode: the app shows these same pages in its web view, with
   .is-app on .page. The app adds its own tab bar, header and screens.
   ------------------------------------------------------------------ */
.is-app .main{padding-bottom:88px}
.is-app .app-promo,.is-app .hdr-burger{display:none}
.hdr-bar--app{gap:2px;padding-inline:16px 8px}
.app-top{padding-top:44px}               /* phone safe area; the OS draws the status bar */
.tabbar{position:absolute;z-index:35;left:0;right:0;bottom:0;height:83px;padding-bottom:26px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--paper);border-top:1px solid var(--line)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 11px/14px var(--font-sans);color:var(--ink-muted);text-decoration:none}
.tab--on{color:var(--ink)}
.page a.tab:hover{color:var(--ink)}
.tab .count{top:2px;inset-inline-end:calc(50% - 22px)}
.appbar{height:56px;display:flex;align-items:center;gap:4px;padding-inline:4px 16px;border-bottom:1px solid var(--line)}
.appbar-title{flex-grow:1;font:600 17px/24px var(--font-sans)}
.onb{position:absolute;inset:0;display:flex;flex-direction:column;padding:44px 24px 40px;gap:24px}
.onb-art{flex-grow:1;display:grid;place-items:center;min-height:0}
.dots{display:flex;gap:6px}
.dots>span{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dots>span.on{width:24px;border-radius:4px;background:var(--ink)}
.page input.switch{appearance:none;-webkit-appearance:none;width:51px;height:31px;border-radius:16px;background:var(--line);position:relative;cursor:pointer;flex-shrink:0;transition:background .15s}
.page input.switch::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:inset-inline-start .15s}
.page input.switch:checked{background:var(--calm)}
.page input.switch:checked::after{inset-inline-start:22px}
.set-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.inbox-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.inbox-ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.unread{width:8px;height:8px;border-radius:50%;background:var(--rush);margin-top:6px}
.widget{border-radius:22px;background:var(--paper-raised);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.12);padding:16px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.widget--s{width:158px;height:158px}
.widget--m{width:338px;height:158px}
.cat-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:1;padding:12px;border-radius:var(--radius-md);background:var(--photo-well);text-decoration:none;color:var(--ink)}
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:3px;border-radius:var(--radius-md);background:var(--paper-sunk)}
.seg>a{display:grid;place-items:center;height:36px;border-radius:var(--radius-sm);text-decoration:none;font-weight:600;color:var(--ink-muted)}
.seg>a.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* Ads switched off (ADS_ENABLED = false): the server leaves the ad blocks out.
   A side column that held only the ad disappears, so the content takes the full width. */
@media (min-width:960px){
  .l-aside:not(:has(> :nth-child(2))),
  .l-half:not(:has(> :nth-child(2))),
  .l-split:not(:has(> :nth-child(2))){grid-template-columns:minmax(0,1fr)}
}

/* Text pages (legal) */
.l-doc{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.toc{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.toc a{flex-shrink:0;display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--radius-pill);background:var(--paper-sunk);font-size:14px;text-decoration:none;white-space:nowrap}
.prose{max-width:720px;display:flex;flex-direction:column;gap:14px}
.prose h2{font:400 26px/30px var(--font-display);margin-top:20px}
.prose p,.prose li{font-size:16px;line-height:25px}
.prose ul{list-style:disc;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px}
.ph{background:var(--scarcity-soft);border-radius:4px;padding:0 4px;font-weight:600}
.draft{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:var(--radius-md);background:var(--scarcity-soft);font-size:14px;line-height:20px}
/* QR codes and camera */
.qr-code{width:240px;height:240px;padding:14px;background:#fff;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--line)}
.qr-code>svg{width:100%;height:100%;display:block}
.viewfinder{position:relative;flex-grow:1;background:#1b1a19;display:grid;place-items:center}
.viewfinder-frame{width:240px;height:240px;border-radius:18px;box-shadow:0 0 0 2000px rgba(0,0,0,.45);outline:3px solid #fff;outline-offset:-3px}
.steps-list{counter-reset:s;display:flex;flex-direction:column;gap:12px}
.steps-list li{counter-increment:s;display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start}
.steps-list li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:600}
.big-code{font:400 160px/140px var(--font-display);letter-spacing:-.04em;color:var(--rush)}
@media (min-width:960px){
  .l-doc{grid-template-columns:240px minmax(0,1fr);gap:64px}
  .toc{position:sticky;top:24px;flex-direction:column;gap:2px;margin:0;padding:0;overflow:visible}
  .toc a{background:transparent;height:auto;padding:6px 0;border-radius:0}
  .toc a.on{font-weight:600;box-shadow:inset 2px 0 0 var(--ink);padding-inline-start:12px}
  [dir="rtl"] .toc a.on{box-shadow:inset -2px 0 0 var(--ink)}
  .big-code{font-size:280px;line-height:240px}
}

/* Header between 960 and 1280 px: tighter, search becomes an icon so the tabs fit
   (also covers longer German and Korean tab labels) */
@media (min-width:960px) and (max-width:1279.98px){
  .hdr-bar,.hdr-bar--search{padding-inline:32px;gap:20px}
  .hdr-tabs{gap:16px}
  .hdr-search{width:44px;padding:0;border:0;background:transparent;justify-content:center;color:var(--ink)}
  .hdr-search-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .wrap{padding-inline:32px}
  .menu{padding-inline:32px}
  .search-panel{left:32px;right:32px}
}

/* Campaign banners: each brand type brings its own colours (fixed, same in both themes).
   Values mirror brand_archetypes[].banner in the taxonomy. */
.look{background:var(--b-bg);color:var(--b-ink)}
.look .eyebrow,.look .muted{color:inherit;opacity:.85}
.look .b-accent{color:var(--b-accent)}
.look--scandi-minimal{--b-bg:#eceae4;--b-ink:#1d1d1b;--b-accent:#3f5e49}
.look--parisian-classic{--b-bg:#1f2a44;--b-ink:#f6f1e7;--b-accent:#ff9c94}
.look--italian-tailoring{--b-bg:#2b2826;--b-ink:#f1ebe3;--b-accent:#e2bb85}
.look--streetwear{--b-bg:#111111;--b-ink:#ffffff;--b-accent:#ff8a33}
.look--boho{--b-bg:#f0d9c4;--b-ink:#3b2417;--b-accent:#9a3f18}
.look--athleisure{--b-bg:#dcd8f2;--b-ink:#1c1a2e;--b-accent:#4a2fc0}
.look--fast-trend{--b-bg:#ff4f93;--b-ink:#1a0010;--b-accent:#1a0010}
.look--outdoor-heritage{--b-bg:#3f4a33;--b-ink:#f2eee2;--b-accent:#f0b565}
.look--preppy-coastal{--b-bg:#dbe7f3;--b-ink:#13233d;--b-accent:#a51d27}
.look--evening-glam{--b-bg:#140f1a;--b-ink:#f5ecd9;--b-accent:#e0bd64}
.look--quiet-luxury{--b-bg:#efe6d6;--b-ink:#2a241c;--b-accent:#7e4f22}
.look--accessories-label{--b-bg:#f3e3e1;--b-ink:#2a1718;--b-accent:#8c1c2c}

/* ------------------------------------------------------------------
   Other scripts. Instrument Sans and Serif cover Latin only, so every other
   script names a fallback after them: the browser uses it only for the
   characters Instrument lacks, so Latin brand names and prices stay in
   Instrument. Load a fallback only on pages in its language (the Google
   Fonts families are listed in the taxonomy as languages.<code>.fonts).
   ------------------------------------------------------------------ */
.page:lang(ko){--font-display:'Instrument Serif','Gowun Batang',serif;--font-sans:'Instrument Sans','Noto Sans KR',sans-serif}
.page:lang(zh-Hans){--font-display:'Instrument Serif','Noto Serif SC',serif;--font-sans:'Instrument Sans','Noto Sans SC',sans-serif}
.page:lang(zh-Hant){--font-display:'Instrument Serif','Noto Serif TC',serif;--font-sans:'Instrument Sans','Noto Sans TC',sans-serif}
.page:lang(zh-Hant-HK){--font-display:'Instrument Serif','Noto Serif HK',serif;--font-sans:'Instrument Sans','Noto Sans HK',sans-serif}
.page:lang(ja){--font-display:'Instrument Serif','Noto Serif JP',serif;--font-sans:'Instrument Sans','Noto Sans JP',sans-serif}
.page:is(:lang(bg),:lang(mk),:lang(ru),:lang(uk),:lang(el)){--font-display:'Instrument Serif','Noto Serif Display',serif;--font-sans:'Instrument Sans','Noto Sans',sans-serif}
.page:is(:lang(hi),:lang(mr),:lang(ne)){--font-display:'Instrument Serif','Noto Serif Devanagari',serif;--font-sans:'Instrument Sans','Noto Sans Devanagari',sans-serif}
.page:lang(bn){--font-display:'Instrument Serif','Noto Serif Bengali',serif;--font-sans:'Instrument Sans','Noto Sans Bengali',sans-serif}
.page:lang(te){--font-display:'Instrument Serif','Noto Serif Telugu',serif;--font-sans:'Instrument Sans','Noto Sans Telugu',sans-serif}
.page:lang(ta){--font-display:'Instrument Serif','Noto Serif Tamil',serif;--font-sans:'Instrument Sans','Noto Sans Tamil',sans-serif}
.page:lang(si){--font-display:'Instrument Serif','Noto Serif Sinhala',serif;--font-sans:'Instrument Sans','Noto Sans Sinhala',sans-serif}
.page:lang(ar){--font-display:'Instrument Serif','Noto Naskh Arabic',serif;--font-sans:'Instrument Sans','Noto Sans Arabic',sans-serif}
.page:lang(fa){--font-display:'Instrument Serif','Noto Naskh Arabic',serif;--font-sans:'Instrument Sans','Vazirmatn',sans-serif}
.page:lang(ur){--font-display:'Instrument Serif','Noto Nastaliq Urdu',serif;--font-sans:'Instrument Sans','Noto Nastaliq Urdu',sans-serif}
.page:lang(he){--font-display:'Instrument Serif','Noto Serif Hebrew',serif;--font-sans:'Instrument Sans','Noto Sans Hebrew',sans-serif}
.page:lang(th){--font-display:'Instrument Serif','Noto Serif Thai',serif;--font-sans:'Instrument Sans','Noto Sans Thai',sans-serif}
/* Vietnamese is Latin, but Instrument has no Vietnamese subset: with Instrument first, letters with stacked
   accents (ế, ộ) would come from the fallback and mix two fonts inside a word. Noto covers it all. */
.page:lang(vi){--font-display:'Noto Serif Display',serif;--font-sans:'Noto Sans',sans-serif}

/* Scripts without true italics or letter case, or where letter spacing breaks
   the writing (Arabic letters join; Indic letters hang from a shared line; Thai marks stack):
   no italics, no tracking. Uppercase simply has no effect there. */
.page:is(:lang(ko),:lang(zh),:lang(ja),:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(ur),:lang(he),:lang(th)) *,.page:is(:lang(ko),:lang(zh),:lang(ja),:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(ur),:lang(he),:lang(th)) *::before,.page:is(:lang(ko),:lang(zh),:lang(ja),:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(ur),:lang(he),:lang(th)) *::after{letter-spacing:0!important}
.page:is(:lang(ko),:lang(zh),:lang(ja),:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(ur),:lang(he),:lang(th)) :is(.t-quote,.dc-excuse,em,i){font-style:normal}

/* Hangul, Chinese and Japanese: display sizes about 15% smaller, taller lines.
   Korean breaks between words; Chinese and Japanese between characters, with
   the strict line-breaking rules. */
.page:lang(ko){word-break:keep-all}
.page:is(:lang(zh),:lang(ja)){line-break:strict}
.page:is(:lang(ko),:lang(zh),:lang(ja)){line-height:24px}
.page:is(:lang(ko),:lang(zh),:lang(ja)) .t-hero{font-size:40px;line-height:52px}
.page:is(:lang(ko),:lang(zh),:lang(ja)) .t-h1{font-size:30px;line-height:40px}
.page:is(:lang(ko),:lang(zh),:lang(ja)) .t-h1x{font-size:36px;line-height:48px}
.page:is(:lang(ko),:lang(zh),:lang(ja)) .t-h2{font-size:22px;line-height:30px}
.page:is(:lang(ko),:lang(zh),:lang(ja)) .t-h2s{font-size:19px;line-height:26px}
.page:is(:lang(ko),:lang(zh),:lang(ja)) .t-quote{font-size:20px;line-height:30px}
.page:is(:lang(ko),:lang(zh),:lang(ja)) .lead{line-height:28px}
@media (min-width:960px){
  .page:is(:lang(ko),:lang(zh),:lang(ja)) .t-hero{font-size:80px;line-height:100px}
  .page:is(:lang(ko),:lang(zh),:lang(ja)) .t-h1{font-size:46px;line-height:60px}
  .page:is(:lang(ko),:lang(zh),:lang(ja)) .t-h1x{font-size:60px;line-height:78px}
  .page:is(:lang(ko),:lang(zh),:lang(ja)) .t-h2{font-size:30px;line-height:40px}
  .page:is(:lang(ko),:lang(zh),:lang(ja)) .t-quote{font-size:27px;line-height:40px}
}

/* Indic scripts, Arabic, Persian and Thai: marks above and below the letters need
   taller lines; display sizes a little smaller, since words run longer. */
.page:is(:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(th)){line-height:26px}
.page:is(:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(th)) .t-hero{font-size:42px;line-height:60px}
.page:is(:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(th)) .t-h1{font-size:32px;line-height:48px}
.page:is(:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(th)) .t-h1x{font-size:38px;line-height:54px}
.page:is(:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(th)) .t-h2{font-size:24px;line-height:36px}
.page:is(:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(th)) .t-h2s{font-size:20px;line-height:30px}
.page:is(:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(th)) .t-quote{font-size:21px;line-height:34px}
.page:is(:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(th)) .lead{line-height:30px}
.page:is(:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(th)) :is(.dc-badge,.eyebrow,.dc-flash-eyebrow,.dc-deal-eyebrow){line-height:18px}
@media (min-width:960px){
  .page:is(:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(th)) .t-hero{font-size:80px;line-height:112px}
  .page:is(:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(th)) .t-h1{font-size:48px;line-height:68px}
  .page:is(:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(th)) .t-h1x{font-size:60px;line-height:84px}
  .page:is(:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(th)) .t-h2{font-size:32px;line-height:46px}
  .page:is(:lang(hi),:lang(mr),:lang(ne),:lang(bn),:lang(te),:lang(ta),:lang(si),:lang(ar),:lang(fa),:lang(th)) .t-quote{font-size:28px;line-height:42px}
}
/* Urdu is set in Nastaliq, which slopes and stacks: much taller lines, smaller display sizes */
.page:lang(ur){line-height:34px}
.page:lang(ur) .t-hero{font-size:34px;line-height:72px}
.page:lang(ur) .t-h1{font-size:26px;line-height:56px}
.page:lang(ur) .t-h1x{font-size:30px;line-height:64px}
.page:lang(ur) .t-h2{font-size:20px;line-height:44px}
.page:lang(ur) .t-h2s{font-size:18px;line-height:40px}
.page:lang(ur) .t-quote{font-size:18px;line-height:40px}
.page:lang(ur) .lead{line-height:38px}
.page:lang(ur) :is(.dc-badge,.eyebrow,.dc-flash-eyebrow,.dc-deal-eyebrow,.small,.xsmall){line-height:26px}
@media (min-width:960px){
  .page:lang(ur) .t-hero{font-size:64px;line-height:128px}
  .page:lang(ur) .t-h1{font-size:40px;line-height:84px}
  .page:lang(ur) .t-h1x{font-size:48px;line-height:100px}
  .page:lang(ur) .t-h2{font-size:28px;line-height:60px}
}

/* ------------------------------------------------------------------
   Right to left (Arabic, Persian, Urdu, Hebrew: languages.<code>.dir = "rtl").
   The page sets dir="rtl" on <html>. The layout uses logical properties
   (inline-start/end), so rows, grids, sheets and badges mirror by themselves.
   ------------------------------------------------------------------ */
/* Icons that point along the reading direction (chevrons, back arrows) turn around */
[dir="rtl"] .i-dir{transform:scaleX(-1)}
/* Prices, countdowns, sizes and brand names are isolated, so a Latin or numeric run
   never reorders the words around it */
.page :is(.dc-price,.dc-num,.num,.dc-countdown b,.dc-timer-top b,.dc-tile-brand,.dc-campaign-brand,.dc-size,.size-btn,.dc-deal-prices){unicode-bidi:isolate}

/* Buttons that are links keep their own colours (the generic .page a colour must not win) */
.page a.dc-btn-primary,.page a.dc-btn-primary:hover{color:var(--on-rush)}
.page a.dc-btn-secondary,.page a.dc-btn-quiet{color:var(--ink)}
.page a.dc-btn-secondary:hover,.page a.dc-btn-quiet:hover{color:var(--rush)}
.hdr-logo{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:clip}

.soon .dc-btn{white-space:nowrap;flex-shrink:0}

/* Fixes from the visual check */
.rail,.gallery{scroll-padding-inline:16px}
.stack>.dc-countdown,.stack>.dc-proof,.stack>.dc-toast{align-self:flex-start}
.tab .count{inset-inline-start:calc(50% + 4px);inset-inline-end:auto;top:4px}
.page a.select{text-decoration:none}
.veil,.menu-veil{background:rgba(26,20,24,.45)}
.sheet,.pop,.modal{box-shadow:0 -8px 32px rgba(26,20,24,.18)}

/* ------------------------------------------------------------------
   From the live site: details the shop added after the first designs
   (owner's decisions; see the PHP site's CLAUDE.md)
   ------------------------------------------------------------------ */

/* Header: Women / Men open their menu on click, with a chevron that turns when open;
   while a menu is open, only its tab is highlighted, not the current page's */
.hdr-tab{white-space:nowrap}
.hdr-tab:has(.hdr-tab-chev){display:inline-flex;align-items:center;gap:4px}
.hdr-tab-chev{transition:transform .15s}
.hdr-tab[aria-expanded="true"] .hdr-tab-chev{transform:rotate(180deg)}
.hdr-tabs:has([aria-expanded="true"]) .hdr-tab--on:not([aria-expanded="true"]){font-weight:400;box-shadow:none}
.hdr-tab[aria-expanded="true"]{font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}

/* Header: country & language. A flag among the icons on phones; after the tabs on desktop,
   with the country's name from 1400 px, so the search box keeps its place whatever the country */
.hdr-country{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);white-space:nowrap;flex-shrink:0}
.hdr-actions .hdr-country{height:44px;padding:0 10px}
.page a.hdr-country:hover{color:var(--rush)}
.hdr-country img,.hdr-country svg{width:20px;height:15px;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px var(--line);object-fit:cover}
.hdr-country-name{display:none;max-width:120px;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1400px){.hdr-tabs .hdr-country-name{display:inline}}

/* Wishlist: a saved item's heart is filled (the colour change alone is hard to see) and pops when tapped */
.dc-wish[aria-pressed="true"] svg,[data-wish][aria-pressed="true"] svg{fill:currentColor}
.dc-btn-secondary[data-wish][aria-pressed="true"],.btn-link[data-wish][aria-pressed="true"]{color:var(--rush)}
[data-wish].is-popped svg{animation:wish-pop .35s ease-out}
@keyframes wish-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* "Remind me" once set: a check mark and an outline, tap again to remove */
[data-remind][aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px currentColor}
[data-remind][aria-pressed="true"]::before{content:"";display:inline-block;width:14px;height:8px;margin-inline-end:8px;border:solid currentColor;border-width:0 0 2px 2px;transform:translateY(-3px) rotate(-45deg)}

/* Upcoming campaigns and flash sales show a few small photos of what's coming (names and prices stay hidden) */
.peek{display:flex;gap:6px;margin-top:8px}
.peek>img,.peek>span{position:relative;overflow:hidden;flex-shrink:0;width:48px;height:60px;object-fit:cover;border-radius:var(--radius-sm);background:var(--paper)}
.peek>span svg{position:absolute;inset:0;width:100%;height:100%}
.soon:has(.peek){flex-direction:column;align-items:flex-start;justify-content:flex-start}
.soon:has(.peek) .dc-btn-quiet{margin-top:auto;margin-inline-start:-12px}

/* Flash banner with a strip of photos from the sale */
.flash-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
.flash-photo{position:relative;aspect-ratio:4/5;border-radius:var(--radius-md);overflow:hidden;background:var(--photo-well)}
.flash-photo img,.flash-photo svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dc-flash--photos{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:16px}
/* Flash banner beside the deal card (home, bag): it fills the row's height, title at the top, countdown at the bottom */
.g-2>.tile-link{display:flex}
.g-2>.tile-link>.dc-flash,.g-2>.tile-link>.dc-deal,.g-2>.dc-flash{flex:1 1 auto}
.g-2 .dc-flash{flex-direction:column;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap}
@media (min-width:960px){.g-2 .dc-flash .dc-flash-title{font-size:56px;line-height:60px}}

/* Home strip: the number and its label on one line, the explanation below */
.stat-head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
.stat .xsmall{margin-top:4px}
@media (max-width:599px){.stats{grid-template-columns:1fr}}
.stat--paper{background:var(--paper)}

/* Legal texts: numbered lists, links and tables; tables scroll sideways on phones */
.prose ol{list-style:decimal;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px}
.prose a{color:inherit;text-decoration:underline;overflow-wrap:anywhere}
.prose a.dc-btn{text-decoration:none}
.prose-table{overflow-x:auto;margin-inline:-16px;padding-inline:16px}
.prose table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px;line-height:20px}
.prose th,.prose td{text-align:start;vertical-align:top;padding-block:10px;padding-inline:0 12px;border-bottom:1px solid var(--line)}
.prose th{font-weight:600;border-bottom-color:var(--ink)}
@media (min-width:960px){.prose-table{margin-inline:0;padding-inline:0}.prose table{min-width:0}.toc a{white-space:normal;line-height:20px}}

/* ------------------------------------------------------------------
   Sharing: receipt, live band, shared tracking, report, public wishlist
   ------------------------------------------------------------------ */
/* The receipt is an image people post, so it keeps paper colours in both themes. Sizes are in em: .receipt--l and --xl scale it for the share images. */
.receipt{--receipt-ink:#1a1418;box-sizing:border-box;width:100%;max-width:27.7em;margin-inline:auto;padding:2.2em 1.8em 1.6em;background:#fff;color:var(--receipt-ink);font:400 13px/1.55 ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;position:relative;box-shadow:0 1px 2px rgba(26,20,24,.08),0 12px 32px rgba(26,20,24,.1)}
.receipt *{box-sizing:border-box}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-.75em;height:.8em;background:radial-gradient(circle at .55em 0,#fff .5em,transparent .53em) 0 0/1.1em .8em repeat-x}
.receipt-logo{font:400 2em/1.15 var(--font-display);text-align:center}
.receipt-sub{margin-top:.3em;text-align:center;font-size:.85em;letter-spacing:.06em;text-transform:uppercase}
.receipt-rule{border:0;border-top:1px dashed var(--receipt-ink);margin:.9em 0}
.receipt-row{display:flex;justify-content:space-between;gap:1em}
.receipt-row>span:last-child{text-align:end;white-space:nowrap}
.receipt-item{display:flex;flex-direction:column;margin-bottom:.35em}
.receipt-note{padding-inline-start:1em;opacity:.7}
.receipt-strong{font-weight:700}
.receipt-total{font-weight:700;font-size:1.3em}
.receipt-bars{height:3.6em;margin:1.1em 0 .5em;background:repeating-linear-gradient(90deg,var(--receipt-ink) 0 2px,transparent 2px 4px,var(--receipt-ink) 4px 5px,transparent 5px 8px,var(--receipt-ink) 8px 11px,transparent 11px 12px,var(--receipt-ink) 12px 13px,transparent 13px 17px)}
.receipt-foot{text-align:center;font-size:.85em;line-height:1.6}
.receipt--l{font-size:15px}
.receipt--xl{font-size:27px;max-width:27.7em}
.receipt-stage{display:grid;place-items:center;padding:32px 16px 48px;background:var(--paper-sunk);border-radius:var(--radius-lg)}

/* Live band on the home page: the running total and the feed */
.live{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:16px;border-radius:var(--radius-lg);background:var(--paper-sunk);color:var(--ink)}
.live-count{font:400 40px/44px var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.feed{display:flex;flex-direction:column;gap:8px}
.feed li{display:flex;gap:10px;align-items:baseline;font-size:14px;line-height:20px}
.feed-dot{width:8px;height:8px;border-radius:50%;background:var(--rush);flex-shrink:0}
.feed-time{margin-inline-start:auto;padding-inline-start:8px;font-size:12px;line-height:20px;color:var(--ink-muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Shared tracking */
.hurry{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--radius-lg);background:var(--rush-soft);color:var(--ink)}
.hurry-count{font:400 44px/44px var(--font-display);font-variant-numeric:tabular-nums;color:var(--rush)}
.hurry-bar{height:8px;border-radius:4px;background:color-mix(in srgb,var(--rush) 18%,transparent);overflow:hidden}
.hurry-bar-fill{height:100%;border-radius:4px;background:var(--rush);transition:width .4s ease}
.gift-card{display:flex;flex-direction:column;gap:8px;padding:20px 24px;border-radius:var(--radius-lg);background:var(--paper-raised);border:1px solid var(--line)}

/* Report */
.figs{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.fig{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:var(--radius-lg);background:var(--paper-sunk)}
.fig-num{font:400 34px/38px var(--font-display);font-variant-numeric:tabular-nums}
.fig-name{font:400 24px/30px var(--font-display)}

/* Link sharing and simple text fields */
.linkbox{display:flex;align-items:center;gap:8px;min-height:52px;padding:4px 4px 4px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-raised)}
.linkbox>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field{display:flex;flex-direction:column;gap:6px}
.field input{height:48px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-raised);color:var(--ink);font:inherit}

@media (min-width:600px){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){
.live{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;padding:24px 32px;align-items:center}
.live-count{font-size:56px;line-height:60px}
.figs{grid-template-columns:repeat(3,minmax(0,1fr))}
.fig-num{font-size:44px;line-height:48px}
.fig-name{font-size:28px;line-height:34px}
.receipt-stage{padding:48px 32px 64px}
}
/* Cards in a row stretch to the tallest; keep the extra height below the text, not in the photos (a taller photo row would widen the 3:2 photo block past its column) */
.dc-campaign{align-content:start}

/* Money not spent: the payoff number on Home and Me */
.saved-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:20px 24px;border-radius:var(--radius-lg);background:var(--rush-soft);color:var(--ink);text-decoration:none}
.page a.saved-band:hover{color:var(--ink)}
.saved-num{font:400 56px/56px var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--rush)}
.saved-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-pill);background:var(--paper);font:600 13px/18px var(--font-sans);font-variant-numeric:tabular-nums}
@media (min-width:960px){.saved-num{font-size:72px;line-height:72px}.saved-band{padding:24px 32px}}

/* ---- app.css ---- */
/* Dopamine Chic — production additions on top of site.css (the design's stylesheet).
   Only what the canvas didn't need: real dialogs, toasts, hidden states, focus. */

[hidden]{display:none !important}
body{margin:0;background:var(--paper)}
.page{min-height:100vh;min-height:100dvh}
.main{flex-grow:1}

/* Overlays use <dialog> in production (SPEC §14); the design's .veil/.modal sit inside it */
dialog.ov{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:auto}
dialog.ov::backdrop{background:transparent}
dialog.ov .veil{position:fixed;inset:0}
/* Modals taller than the screen scroll inside instead of being cut off */
dialog.ov .modal{box-sizing:border-box;max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain}
@media (min-width: 960px){dialog.ov .modal{max-height:calc(100dvh - 184px)}}
@media (min-width: 960px) and (max-height: 760px){dialog.ov .modal{top:24px;max-height:calc(100dvh - 48px)}}
body.is-locked{overflow:hidden}
/* A dialog opened with show(), not showModal(): the cookie consent panel. No veil, the page stays usable;
   along the bottom on phones, in the bottom right corner from 960 px */
dialog.ov.ov-panel{inset:auto 0 0 0;width:auto;height:auto;overflow:visible;z-index:55}
dialog.ov.ov-panel .modal{position:relative;inset:auto;transform:none;width:auto;gap:10px;padding:20px 16px 16px;max-height:min(75dvh,640px)}
dialog.ov.ov-panel .modal p{margin:0}
.consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:4px}
.consent-actions [data-consent="choose"]{grid-column:1/-1;order:3}
@media (min-width: 960px){
  dialog.ov.ov-panel{inset:auto 24px 24px auto;width:420px}
  dialog.ov.ov-panel .modal{padding:24px;max-height:calc(100dvh - 48px);border-radius:var(--radius-lg);box-shadow:0 24px 64px rgba(0,0,0,.25)}
}

/* Menu as a page (no JavaScript) */
.menu-page .menu{position:static;box-shadow:none;border:0}

/* Toast stack */
.toasts{position:fixed;z-index:60;inset-inline:16px;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toasts .dc-toast{pointer-events:auto;max-width:560px}
@media (min-width: 960px){.toasts{bottom:32px}}

/* Buttons that are forms */
form.inline{display:inline}
.btn-link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* Countdown digits don't jump */
[data-end]{font-variant-numeric:tabular-nums}

/* The hover photo is created on first hover (bundle.css positions .dc-photo-hover in tiles) */
.dc-tile[data-hover] .dc-photo{position:relative}
/* ... and on single photos: campaign cards, flash banners, the deal card, peeks (their boxes are positioned) */
:not(.dc-tile)[data-hover]>.dc-photo-hover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;background:var(--photo-well);transition:opacity 160ms ease-out}
@media (hover:hover) and (pointer:fine){:not(.dc-tile)[data-hover]:hover>.dc-photo-hover{opacity:1}}
@media (prefers-reduced-motion:reduce){:not(.dc-tile)[data-hover]>.dc-photo-hover{transition:none}}
.peek>span>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Peek photos fill the upcoming box's width at every size: four to a row, each a quarter (the design had 48px thumbnails) */
.soon:has(.peek)>.stack{align-self:stretch}
.peek>img,.peek>span{flex:0 1 calc((100% - 18px) / 4);width:auto;height:auto;aspect-ratio:4/5}
/* Photos of what hasn't started yet are black and white everywhere, as on upcoming campaign cards (bundle.css) */
.upcoming-photos{filter:grayscale(1);opacity:.7}
/* Never the empty photo well: a hover photo shows only once it has loaded (app.js adds .is-ready) */
.dc-photo-hover:not(.is-ready){visibility:hidden}

/* Real photos where the canvas only had placeholder SVGs */
/* Cards in a row stretch to the tallest; keep the extra height below the text, not in the photos
   (a taller photo row would widen the 3:2 photo block past its column) */
.dc-campaign{align-content:start}
.dc-campaign-photos>div{position:relative;overflow:hidden}
.dc-campaign-photos img,.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Quiet buttons on a coloured campaign banner take the banner's ink */
.look .dc-btn-quiet{color:inherit}
/* Ad units: the design's placeholder caption is only for the canvas */
ins.ad-slot::after{content:none}
ins.ad-slot{border:0}

/* Bag and checkout thumbnails hold real photos (or the placeholder silhouette) */
.thumb{position:relative;overflow:hidden;display:block}
.thumb>img,.thumb>svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.line-item--gone .thumb{filter:grayscale(1);opacity:.6}
/* A note about a bag line (size gone), under the whole line and as wide as the bag */
.line-item-note{grid-column:1/-1}
.line-item-note .dc-toast{max-width:none}

/* App promo buttons keep their label on one line */
.app-promo .dc-btn{white-space:nowrap;flex-shrink:0}
/* On phones the text gets the whole width and the button its own line, full width */
@media (max-width: 599px){.app-promo{flex-wrap:wrap}.app-promo>.dc-btn{width:100%}}
/* The app is on Google Play only (app.js sets .is-ios) */
.is-ios [data-get-app]{display:none}



/* Room for the country between 1280 and 1600: a narrower search box, tighter gaps */
@media (min-width: 1280px) and (max-width: 1599px){.hdr-search{width:200px}.hdr-bar{gap:24px}.hdr-tabs{gap:20px}}
.hdr-search svg{flex-shrink:0}
@media (min-width: 960px){.hdr-search-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* The design turns the search box into an icon from 960 to 1280 px (a 1920 px screen at 150 %); keep the box,
   narrower, and let the header fitting (data-fit 2, below) make it an icon only when the tabs don't fit */
@media (min-width: 960px) and (max-width: 1279.98px){.hdr-search{width:200px;padding:0 12px;border:1px solid var(--line);background:var(--paper-raised);justify-content:flex-start;color:var(--ink-muted)}.hdr-search-text{position:static;width:auto;height:auto;clip:auto}}
.hdr-country-name{max-width:240px}
/* On phones the country and the streak live in the burger menu, not the header */
.menu-country,.menu-streak{display:inline-flex;align-items:center;gap:8px}
/* Phone menu, second level: a back row to the first level */
.menu-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-inline-start:-4px;text-decoration:none;font-weight:600}
/* Narrowest desktop range: longer tab labels (Polish) must not squeeze the logo */
@media (min-width: 960px){.hdr-logo{flex-shrink:0}}
@media (min-width: 960px) and (max-width: 1099px){.hdr-bar,.hdr-bar--search{gap:14px}.hdr-tabs{gap:12px}.hdr-tab{font-size:14px}.hdr-actions{gap:0}}
/* French has the longest tab labels ("Bon plan de l'heure", "Comment ça marche"): the search box
   gives way first (its text ellipsizes, down to 120 px), and below 1280 px French tabs sit tighter */
@media (min-width: 960px){.hdr-search{flex-shrink:1;min-width:120px}}
@media (min-width: 960px) and (max-width: 1279.98px){html:lang(fr) .hdr-bar{gap:12px}html:lang(fr) .hdr-tabs{gap:12px}}
@media (min-width: 960px) and (max-width: 1099.98px){html:lang(fr) .hdr-bar{padding-inline:24px}html:lang(fr) .hdr-tabs{gap:10px}html:lang(fr) .hdr-tab{font-size:13px}}
/* The header country, menu chevrons, filled wishlist hearts, "Remind me" state, peek photos, flash photo
   strip, home strip and legal text styles are in the design's site.css now */
/* Filter controls (and the same controls elsewhere) look clickable */
.check:has(input:not(:disabled)),.check input:not(:disabled),.swatch,.size-btn:not(:disabled),.pill,.select{cursor:pointer}
/* A card that is one big link but holds a button: the title's link covers the card, the button sits above */
.has-cover{position:relative}
.cover-link{color:inherit;text-decoration:none}
.cover-link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.has-cover .dc-btn{position:relative;z-index:2}
.dc-flash-actions{align-items:center;justify-content:space-between;width:100%}
.dc-flash .dc-btn-secondary{background:transparent;color:var(--on-flash);box-shadow:inset 0 0 0 1.5px var(--on-flash)}
/* "Your collection" strip (excuses, streak, achievements): not on phones */
@media (max-width: 599px){[data-collection-strip],.sec--tight:has(>[data-collection-strip]){display:none}}
/* Share dialog on a computer (partials/share-dialog.php: stopped deliveries, products) */
.share-dlg{gap:20px}
.share-nets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.share-net{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-md);color:var(--ink);text-decoration:none;font-weight:600}
.share-net:hover{border-color:var(--ink)}
.share-net:focus-visible{outline:2px solid var(--rush);outline-offset:2px}
.share-net>svg{flex-shrink:0}
.share-net--facebook>svg{color:#0866ff}
.share-net--whatsapp>svg{color:#25d366}
.share-net--telegram>svg{color:#26a5e4}
.share-net--reddit>svg{color:#ff4500}
.share-net--naver>svg{color:#03c75a}
.share-insta{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"net btn" "note note";align-items:center;gap:8px 16px;padding:16px 0;border-block:1px solid var(--line)}
.share-insta>.share-net{grid-area:net;border:0;padding:0;min-height:0}
.share-insta>.small{grid-area:note}
.share-insta>.dc-btn{grid-area:btn}
@media (max-width:599px){.share-insta{grid-template-columns:minmax(0,1fr);grid-template-areas:"net" "note" "btn"}.share-insta>.dc-btn{width:100%}}
.receipt-shot{display:block;max-width:100%;height:auto;box-shadow:0 1px 2px rgba(26,20,24,.08),0 12px 32px rgba(26,20,24,.1)}
.receipt-shot--story{width:min(100%,360px)}
.share-net--band>svg{color:#2bc35b}
.share-net--instagram>svg{color:#ff0069}
.share-net--linkedin>svg{color:#0a66c2}
.share-net--bluesky>svg{color:#1185fe}
.share-copy{display:flex;gap:8px}
.share-copy__url{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-sunk);color:var(--ink-muted);font:inherit;font-size:14px}
.share-copy .dc-btn{white-space:nowrap}
@media (max-width: 599px){.share-nets{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Product page: share, opposite the brand */
.product-share{gap:8px;flex-grow:1}
/* Listing filters: "Clear all" under the last group, in line with the labels; the phone sheet keeps only "Show N items" */
.filters-clear{align-self:flex-start;padding-inline:0}
/* Button groups (.btn-row) and lone buttons (.m-block): side by side or as wide as the label from 600 px, full width and stacked on phones */
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,12px)}
@media (max-width: 599px){.btn-row{flex-direction:column;align-items:stretch}.btn-row>.dc-btn,.m-block{width:100%;align-self:stretch}}

/* Notification settings: one column, kept narrow so the switches stay near their labels. */
.notify-settings{max-width:760px}

/* "Show more" under listings: fixed width from phones up, full width on phones (.m-block) */
@media (min-width: 600px){.more-btn{width:280px}}
/* The "next up" row stacks when it shows photos; its outlined button then takes the full width on phones */
@media (max-width: 599px){.soon:has(.peek)>.dc-btn-secondary{align-self:stretch}}
/* Notification settings while notifications are off */
.notify-prefs.is-off{opacity:.5;filter:grayscale(1)}
.notify-prefs.is-off .set-row,.notify-prefs.is-off .switch{cursor:default}

/* ------------------------------------------------------------------
   Fonts for every script (fonts-noto.css, bin/fetch-fonts.py). Instrument draws Latin; Noto, self-hosted
   and sliced by unicode-range, draws Cyrillic, Greek, Hebrew, Arabic, the Indic scripts and Thai, so a
   page loads only what it uses. Vietnamese is Noto throughout (its accents would mix fonts otherwise).
   Chinese, Japanese and Korean use the system's own fonts: theirs would be tens of megabytes.
   ------------------------------------------------------------------ */
:root{
  --font-sans:"Instrument Sans","Noto Sans","Noto Sans Hebrew","Noto Sans Arabic","Noto Sans Devanagari","Noto Sans Bengali","Noto Sans Tamil","Noto Sans Telugu","Noto Sans Sinhala","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Instrument Serif","Noto Serif","Noto Serif Hebrew","Noto Naskh Arabic","Noto Serif Devanagari","Noto Serif Bengali","Noto Serif Tamil","Noto Serif Telugu","Noto Serif Sinhala","Noto Serif Thai","Iowan Old Style",Georgia,serif;
}
html:lang(vi){--font-sans:"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--font-display:"Noto Serif",Georgia,serif}
html:lang(ja){--font-sans:"Instrument Sans","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP","Noto Sans CJK JP",sans-serif;--font-display:"Instrument Serif","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Noto Serif CJK JP",serif}
/* The design's per-language stacks on .page (site.css) name fonts that are never loaded (Noto Sans/Serif
   JP, KR, SC, TC, Gowun Batang, Vazirmatn, Noto Nastaliq Urdu): the page inherits the stacks above instead
   (the doubled :not() only outranks site.css's .page:lang() rules) */
.page:not(.x-fonts):not(.x-fonts){--font-sans:inherit;--font-display:inherit}
/* Japanese: proportional kana, as Japanese sites set them (full-width kana look letter-spaced) */
html:lang(ja) body{font-feature-settings:"palt"}
html:lang(ko){--font-sans:"Instrument Sans","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",sans-serif;--font-display:"Instrument Serif","AppleMyungjo",Batang,"Noto Serif KR","Noto Serif CJK KR",serif}
html:lang(zh-Hans){--font-sans:"Instrument Sans","PingFang SC","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif;--font-display:"Instrument Serif","Songti SC",SimSun,"Noto Serif SC","Noto Serif CJK SC",serif}
html:lang(zh-Hant){--font-sans:"Instrument Sans","PingFang TC","Microsoft JhengHei","Noto Sans TC","Noto Sans CJK TC",sans-serif;--font-display:"Instrument Serif","Songti TC",PMingLiU,"Noto Serif TC","Noto Serif CJK TC",serif}

/* Header fitting (partials/header.php): languages with long tab labels get a tighter bar, one step at a time,
   until it fits: 1 tighter gaps, 2 smaller tabs and the search box as an icon, 3 without "How it works"
   (it's in the menu and the footer too), 4 the smallest type */
@media (min-width: 960px){
.hdr-bar[data-fit]{gap:12px;padding-inline:24px}
.hdr-bar[data-fit] .hdr-tabs{gap:12px}
.hdr-bar[data-fit="2"] .hdr-tab,.hdr-bar[data-fit="3"] .hdr-tab,.hdr-bar[data-fit="4"] .hdr-tab{font-size:13px}
.hdr-bar[data-fit="2"] .hdr-tabs,.hdr-bar[data-fit="3"] .hdr-tabs,.hdr-bar[data-fit="4"] .hdr-tabs{gap:10px}
.hdr-bar[data-fit="2"] .hdr-search,.hdr-bar[data-fit="3"] .hdr-search,.hdr-bar[data-fit="4"] .hdr-search{width:44px;min-width:0;flex-shrink:0;padding:0;border:0;background:transparent;justify-content:center;color:var(--ink)}
.hdr-bar[data-fit="2"] .hdr-search-text,.hdr-bar[data-fit="3"] .hdr-search-text,.hdr-bar[data-fit="4"] .hdr-search-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hdr-bar[data-fit="3"] .hdr-tab--about,.hdr-bar[data-fit="4"] .hdr-tab--about{display:none}
.hdr-bar[data-fit="4"] .hdr-tab{font-size:12px}
.hdr-bar[data-fit="4"] .hdr-tabs{gap:8px}
.hdr-bar[data-fit="4"] .hdr-logo{font-size:26px}
}
/* The deal card on phones: long "next deal in" labels (Romanian, Telugu…) wrap instead of widening the card */
.dc-deal>*{min-width:0}
.dc-deal .dc-countdown{white-space:normal;max-width:100%;height:auto;min-height:28px;text-align:start}
.dc-deal-prices{flex-wrap:wrap;column-gap:var(--space-2);row-gap:0}
/* The design's pink hover of secondary and quiet buttons covers links only (site.css): buttons too, so
   "Share" beside "Get the receipt" behaves the same */
.page button.dc-btn-secondary:hover:not(:disabled),.page button.dc-btn-quiet:hover:not(:disabled){color:var(--rush)}
/* Where hurries sent the parcel: in the body font, so the quoted non-delivery excuse stays the one display line */
.dc-excuse--plain{font:400 15px/22px var(--font-sans);color:var(--ink)}
/* Space between a step's time and its excuse (the design's margin loses to site.css's .page p reset) */
.page .dc-excuse{margin-top:8px}

/* A word longer than a phone line in a big heading ("конфиденциальности"): hyphenate in the page language, else break it */
.page :is(h1,h2,.t-hero,.t-h1x,.t-h1,.t-h2){overflow-wrap:break-word;hyphens:auto}

/* Filter swatches: silver and gold with a sheen (flat, they read as light grey and mustard), multicolour
   (no hex) as a colour wheel; as the app draws them */
.swatch[data-swatch="silver"]{background:linear-gradient(135deg,#F4F4F4,#9E9E9E,#E2E2E2,#8A8A8A)!important}
.swatch[data-swatch="gold"]{background:linear-gradient(135deg,#F6E39A,#B08A2E,#EBCF72,#9A7524)!important}
.swatch[data-swatch="multicolour"]{background:conic-gradient(#B22222,#FFD93D,#3B6FB6,#A3B18A,#B22222)}

/* The page's main action (buy, pay, save the receipt): fixed at the bottom of a phone's screen, as in
   the app; in the page's flow from 960 px, where it stays in view anyway */
.action-bar{display:contents}
@media (max-width: 959.98px){
.action-bar{display:block;position:fixed;z-index:15;inset-inline:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
.action-bar>.dc-btn{width:100%;max-width:600px;margin-inline:auto;display:flex}
/* Two actions side by side (the receipt's "Save image" and "Share"), 600 px at most together */
.action-bar--two{display:flex;gap:12px;justify-content:center}
.action-bar--two>.dc-btn{flex:1 1 0;min-width:0;max-width:294px;margin-inline:0}
.page:has(.action-bar) .ftr{padding-bottom:calc(108px + env(safe-area-inset-bottom))}
body:has(.action-bar) .toasts{bottom:92px}
}
/* Tile badges ("ONLY 2 LEFT", "DEAL OF THE HOUR" in longer languages): beside the heart, wrapping to a second
   line rather than running under it or off the photo */
.dc-photo-badges{inset-inline-end:var(--space-2)}
.dc-photo-badges .dc-badge{white-space:normal;max-width:100%}
.dc-photo-badges .dc-badge:first-child{max-width:calc(100% - 40px)}
/* Size buttons: a long note ("Wyprzedane", "Ausverkauft") hyphenates in the page language instead of overflowing */
.dc-size small{max-width:100%;hyphens:auto}
/* The empty wishlist's flash sale and deal: stacked beside the message on a computer, as in the app */
.wl-promos .g-2{grid-template-columns:minmax(0,1fr)}
/* Checkout's "Nothing here is real" note: beside the logo from 960 px, a strip under the bar on phones
   (squeezed into two tiny lines beside the logo otherwise) */
.hdr-strip{margin:0;padding:6px 16px;background:var(--paper-sunk);border-top:1px solid var(--line);font-size:13px;line-height:18px;text-align:center;color:var(--ink-muted)}
/* Buttons on one line, "…" when the label doesn't fit (owner's decision, 2026-10-18; a wrapped label
   spilled out of the fixed 44/52 px). The design's buttons are flex boxes, where text-overflow can't
   reach the text, so text-only ones become one centred line; quiet ones are text links and may wrap */
.dc-btn:not(.dc-btn-quiet):not(:has(svg,img)){display:inline-block;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;line-height:41px;min-width:0}
.dc-btn-lg:not(.dc-btn-quiet):not(:has(svg,img)){line-height:49px}
.dc-btn:not(.dc-btn-quiet):has(svg,img){white-space:nowrap;overflow:hidden;min-width:0}
/* With an icon (share, download, copy: Ui::iconLabel) the label is a span that ends in "…" */
.dc-btn:not(.dc-btn-quiet)>svg{flex-shrink:0}
.dc-btn:not(.dc-btn-quiet)>svg+span{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width: 959.98px){.action-bar>.dc-btn:not(.dc-btn-quiet):not(:has(svg,img)){display:block}}
/* Achievement tiles: name and description on one line each at every width (site.css does the descriptions on phones only) */
.ach>.small,.ach .strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* …so the design's min-height (64/88 px, for text that wrapped) only left space at the bottom */
.ach{min-height:0}
/* Home's money-not-spent band: a box (the amount is the link to the account), its side holds the last order's chip and the coffee link */
.saved-band-side{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:440px}
@media (min-width:960px){.saved-band-side{align-items:flex-end;text-align:end}}
/* On phones (no collection strip under it) the band sits as close to the promos as they sit to each other */
@media (max-width: 599px){.saved-band-wrap{padding-bottom:0}}
/* Streak box: the explanation follows "Longest streak" as the next line of one paragraph (no 4 px margin, and part of the gap taken back) */
.stat>.small+.xsmall{margin-top:-2px}
/* The real merch shop and Buy Me a Coffee (partials/promo.php): a dashed card labelled "Real shop" or the service, with the
   address, never a product tile or a shop button, so nobody takes it for the pretend shop */
.merch-link{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1.5px dashed var(--ink-muted);border-radius:var(--radius-md);background:var(--paper);text-align:start}
/* Full width like the cards around it; compact inside the money-not-spent panels (home band, account) */
.panel .merch-link,.saved-band .merch-link{max-width:440px;align-self:flex-start}
.page a.merch-link,.page a.merch-link:hover{color:var(--ink);text-decoration:none}
.page a.merch-link:hover .strong{text-decoration:underline}
.merch-label{display:inline-flex;align-items:center;gap:4px;font:600 11px/14px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.saved-band-side .merch-link{align-self:auto}
.modal .merch-link{align-self:center}
.ftr-ext{display:inline-flex;align-items:center;gap:3px}
/* The country flag (Ctx::flag()): in the header and the menu the country's SVG inline (an <img> for the ornate ones),
   on the chooser from the sprite (flags.css, linked there only); the same 20 × 15 box either way */
.flag{display:inline-block;flex-shrink:0;width:20px;height:15px;vertical-align:middle;border-radius:2px;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.flag>svg,.flag>img{display:block;width:100%;height:100%;border-radius:0;box-shadow:none}
.flag:not(:empty){background:none}