/* YES Crystal frontend — imported from the design canvas bundle.
   Design tokens, base styles, keyframes, utilities and @font-face.
   Page markup carries its own inline styles (the design computed them in JS). */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/frontend/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/frontend/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/frontend/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/frontend/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/frontend/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/frontend/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/frontend/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/frontend/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/frontend/fonts/manrope-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/frontend/fonts/manrope-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/frontend/fonts/manrope-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/frontend/fonts/manrope-vietnamese.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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/frontend/fonts/manrope-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/frontend/fonts/manrope-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/frontend/fonts/manrope-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/frontend/fonts/manrope-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/frontend/fonts/manrope-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/frontend/fonts/manrope-vietnamese.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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/frontend/fonts/manrope-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/frontend/fonts/manrope-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/frontend/fonts/manrope-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/frontend/fonts/manrope-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/frontend/fonts/manrope-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/frontend/fonts/manrope-vietnamese.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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/frontend/fonts/manrope-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/frontend/fonts/manrope-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/frontend/fonts/manrope-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/frontend/fonts/manrope-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/frontend/fonts/manrope-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/frontend/fonts/manrope-vietnamese.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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/frontend/fonts/manrope-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/frontend/fonts/manrope-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/frontend/fonts/manrope-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/frontend/fonts/manrope-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/frontend/fonts/manrope-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/frontend/fonts/manrope-vietnamese.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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/frontend/fonts/manrope-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/frontend/fonts/manrope-latin.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;
}

/* ---------- tokens, base, keyframes ---------- */
:root{
  --bg:#0B1520;          /* one page colour — same as the footer */
  --surface:#101C28;     /* cards */
  --surface-2:#16242F;   /* inset panels, image wells */
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.13);
  --text:#EDF3F8;
  --text-2:#93A7B6;
  --text-3:#6E8494;
  --text-4:#4E6273;
  --gold:#E3AC4B;
  --gold-soft:#F6DFA6;
  --blue:#7FA8CB;
  --green:#7BC47F;
  --red:#E8897B;
}
html{background:#0B1520}
body{margin:0;background:#0B1520;color:#EDF3F8;font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#7FA8CB;text-decoration:none}
a:hover{color:#E3AC4B}
input,button,textarea,select{font-family:inherit}
input::placeholder{color:#4E6273}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24)}
::selection{background:rgba(227,172,75,.3)}
@keyframes ycPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.5)}}
@keyframes ycRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* centred modals keep their translate inside the keyframes, otherwise the
   animation's transform overrides the -50%/-50% centring */
@keyframes ycPop{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes ycZoom{from{transform:scale(1.06)}to{transform:scale(1.14)}}
@keyframes ycFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ycMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[data-zoom]{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
[data-zoomwrap]:hover [data-zoom]{transform:scale(1.05)}
[data-qv]{opacity:0;transition:opacity .24s ease}
[data-zoomwrap]:hover [data-qv]{opacity:1}

/* ---------- utilities ---------- */
.fx{display:flex}.col{display:flex;flex-direction:column}.grid{display:grid}.ac{align-items:center}.jc{justify-content:center}.jb{justify-content:space-between}.f1{flex:1}.noshrink{flex-shrink:0}.wrap{flex-wrap:wrap}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}.fs16{font-size:16px}.fs20{font-size:20px}.fs22{font-size:22px}.upper{text-transform:uppercase}.tc{text-align:center}.nowrap{white-space:nowrap}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}.m0{margin:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.posrel{position:relative}.posabs{position:absolute}.round{border-radius:50%}.ohide{overflow:hidden}.bbox{box-sizing:border-box}.pointer{cursor:pointer}.w100{width:100%}.b0{border:none}

/* ---------- interactive states ----------
   The design drove hover through a JS runtime (style-hover attributes) that the
   import strips, so these are restored as real CSS. The .scpN class groups come
   from the design; the rules are matched to what each group actually is in this
   markup. !important is required because every element carries inline styles.   */

.scp0:hover  { color: #E3AC4B !important; }                                  /* plain text links */
.scp2:hover  { border-color: #E3AC4B !important; color: #E3AC4B !important; }/* ghost buttons */
.scp4:hover  { color: #E8897B !important; }                                  /* destructive: Remove */
.scp5:hover  { background: #F6DFA6 !important; color: #0B1520 !important; }                             /* solid gold CTAs */
.scp6:focus  { border-color: #E3AC4B !important; }                           /* form inputs */
.scp8:hover  { border-color: rgba(227,172,75,.4) !important; }               /* product / category cards */
.scp9:hover  { background: #E3AC4B !important; border-color: #E3AC4B !important; color: #0B1520 !important; } /* ADD buttons */
.scpa:hover  { opacity: .75 !important; }
.scpb:hover  { border-color: #E3AC4B !important; color: #EDF3F8 !important; }/* social icon circles */
.scpc:hover  { color: #EDF3F8 !important; }                                  /* footer text links — brighten */
.scpd:hover  { border-color: #E8897B !important; color: #E8897B !important; }/* close "x" */

/* Clickables this project added, which never had a design class. Grouped by
   what the element looks like: plain text, outlined chip, solid gold, or a
   card wrapping an image. */
.yc-link:hover  { color: #E3AC4B !important; }
.yc-chip:hover  { border-color: #E3AC4B !important; color: #E3AC4B !important; }
.yc-solid:hover { background: #F6DFA6 !important; color: #0B1520 !important; }
.yc-logo:hover  { opacity: .8; }
.yc-card:hover  { border-color: rgba(227,172,75,.4) !important; }
/* A card is an <a> wrapping the design's own bordered panel — light the panel
   up from anywhere on the card, not only when the pointer is over the panel. */
.yc-card:hover .scp8 { border-color: rgba(227,172,75,.4) !important; }

/* Keyboard users get the same affordance as mouse users. */
.scp0:focus-visible, .scp2:focus-visible, .scp5:focus-visible, .scp9:focus-visible,
.scpb:focus-visible, .scpc:focus-visible, .yc-link:focus-visible,
.yc-chip:focus-visible, .yc-card:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid #E3AC4B;
  outline-offset: 2px;
}

/* Anything clickable should say so. */
a, button, [role="button"] { cursor: pointer; }
a, button { transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease; }

/* ---------- image pop-up ----------
   The live event poster, opened full size from "view details" or from its
   thumbnail. It is a native <dialog>, so these rules only dress it. */
.yc-lightbox-trigger {
  align-self: flex-start; margin-top: 4px; padding: 0;
  border: 0; background: none;
  font: 700 10px / 1 "Instrument Sans"; letter-spacing: .14em; color: #E3AC4B;
}
.yc-lightbox-trigger:hover { color: #F6DFA6; }
.yc-lightbox {
  width: min(92vw, 520px); max-width: none; max-height: 92vh;
  padding: 0; overflow: auto;
  border: 1px solid rgba(227,172,75,.22); border-radius: 18px;
  background: #101C28; color: #EDF3F8;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.yc-lightbox[open] { animation: yc-lightbox-in .2s ease-out; }
.yc-lightbox::backdrop { background: rgba(5,10,16,.8); }
.yc-lightbox-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 16px 16px 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.yc-lightbox-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.yc-lightbox-title { font: 700 14px / 1.3 "Instrument Sans"; color: #EDF3F8; }
.yc-lightbox-note { font: 500 12px / 1.5 Manrope; color: #93A7B6; }
.yc-lightbox-close {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.13); border-radius: 50%;
  background: transparent; color: #93A7B6; font: 500 16px / 1 Manrope;
}
.yc-lightbox > img {
  display: block; width: 100%; height: auto;
  max-height: calc(92vh - 80px); object-fit: contain;
  background: #0B1520;
}
/* The page behind a modal should not scroll with it. */
body:has(.yc-lightbox[open]) { overflow: hidden; }
@keyframes yc-lightbox-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
/* ---------- TikTok / Shopee badges ----------
   The live section names where the buying happens with the platforms' own
   marks, large enough to recognise at a glance. */
.yc-platforms { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.yc-platforms-live {
  display: inline-flex; align-items: center; gap: 8px; margin-right: 4px;
  font: 700 9.5px / 1 "Instrument Sans"; letter-spacing: .24em; color: #E3AC4B;
}
.yc-platform {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 17px 0 13px; border-radius: 999px;
  font: 700 13.5px / 1 "Instrument Sans"; letter-spacing: -.01em; color: #fff;
}
.yc-platform--tiktok { background: #000; border: 1px solid rgba(255,255,255,.18); }
.yc-platform--shopee { background: #EE4D2D; border: 1px solid #EE4D2D; }

/* ---------- hero carousel ----------
   Photographs cross-fade behind copy that stays put. Each slide says whether
   it is light or dark (data-tone), whether it wants a shade (data-shade) and
   where its empty space is (data-align); storefront.js copies these onto the
   section. The shade is drawn on the slide itself, so it fades with its
   photograph. The copy keeps its inline styles (the phone rules key off them),
   so the overrides need !important. */
.yc-hero-slides { position: absolute; inset: 0; overflow: hidden; }
.yc-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; }
.yc-hero-slide.is-active { opacity: 1; }
.yc-hero-slide img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  animation: ycZoom 22s ease-out infinite alternate;
}
.yc-hero-slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.yc-hero-slide[data-tone="dark"]::after {
  background: linear-gradient(rgba(11,21,32,.55) 0%, rgba(11,21,32,.72) 50%, rgb(11,21,32) 100%);
}
.yc-hero-slide[data-tone="dark"][data-align="left"]::after {
  background: linear-gradient(180deg, rgba(11,21,32,0) 55%, rgb(11,21,32) 100%),
              linear-gradient(90deg, rgba(11,21,32,.86) 0%, rgba(11,21,32,.66) 38%, rgba(11,21,32,.28) 70%, rgba(11,21,32,.12) 100%);
}
.yc-hero-slide[data-tone="light"]::after {
  background: radial-gradient(ellipse 64% 90% at 50% 52%, rgba(250,245,238,.86) 0%, rgba(250,245,238,.58) 60%, rgba(250,245,238,.2) 100%);
}
.yc-hero-slide[data-tone="light"][data-align="left"]::after {
  background: linear-gradient(90deg, rgba(250,245,238,.9) 0%, rgba(250,245,238,.78) 34%, rgba(250,245,238,.34) 62%, rgba(250,245,238,0) 86%);
}
.yc-hero-slide[data-shade="none"]::after { content: none; }

/* A slide whose empty space is on the left takes the copy there, on a wider
   grid than the page so it sits further out on large screens; phones crop
   the photograph to its middle, so there the copy stays centred. Between slides that disagree, the copy fades out,
   moves and fades back in rather than jumping. */
@media (min-width: 769px) {
  .yc-hero[data-align="left"] .yc-hero-copy { align-items: flex-start !important; text-align: left !important; max-width: 1600px !important; }
  .yc-hero[data-align="left"] .yc-hero-copy > div { justify-content: flex-start !important; }
}
.yc-hero-copy > * { transition: color .6s ease, opacity .35s ease; }
.yc-hero.is-realigning .yc-hero-copy > * { opacity: 0; }
.yc-hero-facts > span { transition: color .6s ease; }

/* Without a shade the copy sits straight on the photograph: a text shadow and
   brighter greys keep it legible without dimming the picture. */
.yc-hero-copy { transition: text-shadow .9s ease; }
.yc-hero[data-shade="none"] .yc-hero-copy { text-shadow: 0 2px 18px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.45); }
.yc-hero[data-shade="none"] .yc-hero-copy .scp5 { text-shadow: none; }
.yc-hero[data-shade="none"] .yc-hero-lede { color: #DCE5EC !important; }
.yc-hero[data-shade="none"] .yc-hero-facts { color: #B9C7D2 !important; }

.yc-hero[data-tone="light"] .yc-hero-eyebrow { color: #8C5F14 !important; }
.yc-hero[data-tone="light"] .yc-hero-title { color: #0B1520 !important; }
.yc-hero[data-tone="light"] .yc-hero-lede { color: #2E3B46 !important; }
.yc-hero[data-tone="light"] .yc-hero-facts { color: #45525D !important; }
.yc-hero[data-tone="light"] .yc-hero-facts > span[style] { color: #9AA3AA !important; }

/* Arrows and dots are one group, centred at the bottom, clear of the copy
   whichever side it is on. The bar itself lets clicks through. */
.yc-hero-controls {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  pointer-events: none;
}
.yc-hero-controls > * { pointer-events: auto; }
.yc-hero-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  background: rgba(11,21,32,.35); color: #EDF3F8;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.yc-hero-arrow:hover { border-color: #E3AC4B; color: #E3AC4B; }
/* Each dot is a 24px target; the pill it shows is drawn inside it. */
.yc-hero-dots { display: flex; align-items: center; gap: 2px; }
.yc-hero-dot {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; background: none;
}
.yc-hero-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: rgba(237,243,248,.38);
  transition: width .3s ease, background-color .3s ease;
}
.yc-hero-dot[aria-current="true"]::before { width: 22px; background: #E3AC4B; }
.yc-hero[data-tone="light"] .yc-hero-arrow { border-color: rgba(11,21,32,.14); background: rgba(255,255,255,.6); color: #0B1520; }
.yc-hero[data-tone="light"] .yc-hero-arrow:hover { border-color: #B07A22; color: #8C5F14; }
.yc-hero[data-tone="light"] .yc-hero-dot::before { background: rgba(11,21,32,.22); }
.yc-hero[data-tone="light"] .yc-hero-dot[aria-current="true"]::before { background: #B07A22; }
/* Phones: the copy spans the screen, so a shade covers it evenly instead of
   fading out to one side; swipe and the dots replace the arrows. */
@media (max-width: 768px) {
  /* Listing the left variant too: it is more specific than the plain light
     rule, and the media query adds none, so it would otherwise keep winning. */
  .yc-hero-slide[data-tone="light"]::after,
  .yc-hero-slide[data-tone="light"][data-align="left"]::after { background: linear-gradient(rgba(250,245,238,.84), rgba(250,245,238,.72)); }
  .yc-hero-slide[data-tone="dark"][data-align="left"]::after { background: linear-gradient(rgba(11,21,32,.6) 0%, rgba(11,21,32,.74) 55%, rgb(11,21,32) 100%); }
  .yc-hero-controls { bottom: 8px; }
  .yc-hero-arrow { display: none; }
}
/* ---------- live order (signed in) ----------
   The walk from code to payment in the live section's card (see
   partials/live-order-flow). Painted by class, so the step handler only has
   to toggle hidden. */
.yc-lo { margin-top: 4px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.yc-lo-step { display: flex; flex-direction: column; gap: 16px; outline: none; }
/* Confirmations take focus so screen readers read them; they are not controls. */
.yc-lo-added:focus, .yc-lo-done-title:focus { outline: none; }
.yc-lo-step[hidden] { display: none; }
.yc-lo-signed { margin: 0; font: 500 11.5px / 1.4 Manrope; color: #6E8494; }
.yc-lo-signed b { font-weight: 700; color: #EDF3F8; }
.yc-lo-field { display: flex; flex-direction: column; gap: 8px; }
.yc-lo-label { font: 500 10px / 1 Manrope; letter-spacing: .1em; text-transform: uppercase; color: #6E8494; }
.yc-lo-hint { font: 500 11px / 1.55 Manrope; color: #6E8494; }
.yc-lo-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.yc-lo-platform {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px;
  background: #16242F; color: #EDF3F8; font: 700 13px / 1 "Instrument Sans";
}
.yc-lo-platform:hover { border-color: rgba(227,172,75,.5); }
.yc-lo-platform.is-active { border-color: #E3AC4B; background: rgba(227,172,75,.1); box-shadow: inset 0 0 0 1px #E3AC4B; }
.yc-lo-platform svg[data-platform="shopee"] { color: #EE4D2D; }
.yc-lo-input {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,.13); border-radius: 12px;
  background: #16242F; color: #EDF3F8; font: 500 13px / 1 Manrope; outline: none;
}
.yc-lo-input:focus { border-color: #E3AC4B; }
.yc-lo-input::placeholder { color: #4E6273; }
.yc-lo-search { display: flex; gap: 8px; }
.yc-lo-search .yc-lo-input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: .08em; }
.yc-lo-search-btn {
  flex: 0 0 auto; height: 46px; padding: 0 20px; border-radius: 12px;
  border: 1px solid rgba(227,172,75,.45); background: rgba(227,172,75,.12);
  color: #E3AC4B; font: 800 10.5px / 1 "Instrument Sans"; letter-spacing: .12em;
}
.yc-lo-search-btn:hover { background: #E3AC4B; color: #0B1520; }
.yc-lo-item {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.02);
}
.yc-lo-item img { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 10px; object-fit: cover; }
.yc-lo-item-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.yc-lo-item-name { font: 700 13.5px / 1.3 "Instrument Sans"; color: #EDF3F8; }
.yc-lo-meta { font: 500 11px / 1.4 Manrope; color: #93A7B6; overflow-wrap: anywhere; }
/* A long TikTok/Shopee handle wraps inside the card rather than widening it. */
.yc-lo-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; min-width: 0; margin: 0; }
.yc-lo-facts > div { min-width: 0; }
.yc-lo-facts dt { font: 500 9px / 1 Manrope; letter-spacing: .12em; text-transform: uppercase; color: #6E8494; }
.yc-lo-facts dd { margin: 4px 0 0; font: 700 12px / 1.25 "Instrument Sans"; color: #EDF3F8; overflow-wrap: anywhere; }
.yc-lo-qty {
  display: inline-flex; align-items: center; align-self: flex-start;
  height: 42px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px;
}
.yc-lo-qty button { width: 42px; height: 100%; border: 0; background: none; color: #EDF3F8; font: 500 18px / 1 Manrope; }
.yc-lo-qty button:hover { color: #E3AC4B; }
.yc-lo-qty [data-qty-value] { min-width: 30px; text-align: center; font: 700 13px / 1 "Instrument Sans"; color: #EDF3F8; }
.yc-lo-primary {
  display: flex; align-items: center; justify-content: center;
  height: 50px; border: 0; border-radius: 999px; background: #E3AC4B;
  color: #0B1520; font: 800 11.5px / 1 "Instrument Sans"; letter-spacing: .12em; text-decoration: none;
}
.yc-lo-primary:hover { background: #F6DFA6; }
.yc-lo-back {
  align-self: center; padding: 2px 0; border: 0; background: none;
  font: 700 10.5px / 1.2 "Instrument Sans"; letter-spacing: .12em; color: #93A7B6;
}
.yc-lo-link {
  align-self: flex-start; padding: 0; border: 0; background: none;
  font: 600 11.5px / 1.3 Manrope; color: #E3AC4B; text-decoration: none;
}
.yc-lo-back:hover, .yc-lo-link:hover { color: #F6DFA6; }
.yc-lo-added {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  padding: 6px 11px; border: 1px solid rgba(227,172,75,.3); border-radius: 999px; background: rgba(227,172,75,.1);
  font: 700 8.5px / 1 "Instrument Sans"; letter-spacing: .14em; color: #E3AC4B;
}
.yc-lo-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; font: 500 12px / 1.55 Manrope; color: #93A7B6; }
.yc-lo-row b { font: 700 13.5px / 1.3 "Instrument Sans"; color: #EDF3F8; white-space: nowrap; }
.yc-lo-address { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
.yc-lo-address span b { display: block; margin: 4px 0 2px; font: 700 12.5px / 1.3 "Instrument Sans"; white-space: normal; }
.yc-lo-total { align-items: baseline; }
.yc-lo-total small { font-size: 11px; color: #6E8494; }
.yc-lo-total b { font-size: 20px; color: #E3AC4B; }
.yc-lo-fine { margin: 0; text-align: center; font: 500 10.5px / 1.5 Manrope; color: #6E8494; }
.yc-lo-fine a { color: #93A7B6; }
.yc-lo-done { align-items: center; text-align: center; padding: 8px 0 4px; }
.yc-lo-done-mark {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(227,172,75,.4); background: rgba(227,172,75,.14); color: #E3AC4B;
}
.yc-lo-done-title { font: 700 20px / 1.25 "Instrument Sans"; letter-spacing: -.02em; color: #EDF3F8; }
.yc-lo-done .yc-lo-primary { align-self: stretch; }
/* ---------- folds & option chips ----------
   The accordions are <details>, so they open and close with no script; these
   rules drop the UA marker and rotate the design's "+" into its open state.
   Option chips are painted by class for the same reason the tier cards are. */
.yc-fold > summary { list-style: none; }
.yc-fold > summary::-webkit-details-marker { display: none; }
.yc-fold > summary::marker { content: ""; }
.yc-fold[open] > summary .yc-fold-mark { transform: rotate(135deg); }

.yc-choice.is-active {
  border-color: rgb(227, 172, 75) !important;
  background: rgba(227, 172, 75, .12) !important;
  color: rgb(227, 172, 75) !important;
}

/* ---------- product tier table ----------
   The tier cards are painted by class rather than by rewriting their inline
   styles, so the quantity handler only has to toggle is-active.            */
.yc-tier.is-active {
  border-color: rgb(227, 172, 75) !important;
  background: rgba(227, 172, 75, .1) !important;
  color: rgb(227, 172, 75) !important;
}

/* ---------- account menu ----------
   The design opened the member menu from an avatar via its JS runtime. <details>
   gives the same affordance with no script; these rules just remove the native
   disclosure triangle and mark the open state the way the design did.          */
.yc-acct > summary { list-style: none; }
.yc-acct > summary::-webkit-details-marker { display: none; }
.yc-acct > summary::marker { content: ""; }
.yc-acct[open] > summary { border-color: #E3AC4B !important; }

/* ---------- header menu ----------
   One markup tree serves both layouts. The panel is display:contents on
   desktop, so nav / spacer / member controls stay direct children of the
   header row and lay out exactly as the design drew them. On a phone the
   panel becomes a real block that wraps onto its own row, toggled by a
   checkbox — a focusable one, so Tab + Space still work without script.    */
.yc-menu-panel { display: contents; }
.yc-burger { display: none; }
.yc-menu-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.yc-lang-mobile { display: none !important; }   /* phones keep language on the bar, not in the menu */
.yc-acct-name { display: none; }                /* desktop: the avatar itself is the whole control */

@keyframes yc-menu-in { from { opacity: 0; transform: translateY(-8px); } }

:root {
  --yc-cart-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='20' r='1.4'/%3E%3Ccircle cx='17.5' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3.5h2.6l2.2 11h10.4l1.9-7.6H6.2'/%3E%3C/svg%3E");
}

/* ---------- responsive ----------
   The design computed its layout in JS from window.innerWidth, so it shipped no
   media queries at all — the import froze the 1440px result into inline styles
   and the site had no small-screen behaviour. These rules restore it. The
   values are the designer's own mobile numbers, lifted from the isMobile
   branches of the source template, so this is the intended layout rather than
   an invented one.

   Targeting is by inline-style substring because the frozen markup has no
   classes to hook; !important is needed to beat the inline declarations.      */

@media (max-width: 768px) {

  /* Nothing may push the page wider than the screen. */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Page and section padding: 40px side gutters -> 20px. */
  [style*="padding: 40px 40px 80px"] { padding: 26px 20px 56px !important; }
  [style*="padding: 20px 40px 66px"] { padding: 12px 20px 44px !important; }
  [style*="padding: 88px 40px 72px"] { padding: 60px 24px 48px !important; }
  [style*="padding: 66px 40px"]      { padding: 44px 20px !important; }
  [style*="padding: 56px 40px"]      { padding: 40px 20px !important; }
  [style*="padding: 52px 40px"]      { padding: 34px 20px !important; }
  [style*="padding: 18px 40px"]      { padding: 16px 20px !important; }
  [style*="padding: 16px 40px"]      { padding: 14px 20px !important; }
  [style*="padding: 14px 40px"]      { padding: 12px 20px !important; }
  [style*="padding: 66px 0"]         { padding: 44px 0 !important; }
  [style*="padding: 30px 32px"]      { padding: 22px 20px 26px !important; }
  [style*="padding: 30px 28px"]      { padding: 22px 20px !important; }
  [style*="padding: 28px 26px"]      { padding: 22px 20px !important; }

  /* Multi-column grids collapse to one column. */
  [style*="grid-template-columns: 0.85fr 1.15fr"],
  [style*="grid-template-columns: 1.25fr 0.75fr"],
  [style*="grid-template-columns: 236px 1fr"],
  [style*="grid-template-columns: 224px 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }
  /* Wide tile rows stay multi-column, just fewer across. */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: 2fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* The footer brand column spans the full row rather than sitting in a cell. */
  [style*="max-width: 290px"] { max-width: 100% !important; grid-column: 1 / -1 !important; }

  /* Headings: the design's own mobile sizes. */
  [style*="font: 700 58px"] { font-size: 35px !important; }
  [style*="font: 700 34px"], [style*="font-size: 34px"] { font-size: 26px !important; }
  [style*="font: 700 32px"] { font-size: 26px !important; }
  [style*="font-size: 44px"] { font-size: 30px !important; }
  /* About and Visit sit beside a photo or the hours on desktop; stacked on a
     phone their headings stand alone, so they centre like the others. */
  .yc-center-mobile { text-align: center; }

  /* Fixed-width pieces that are wider than a phone. */
  [style*="width: 320px"] { width: 270px !important; max-width: 100% !important; }
  [style*="width: 388px"] { width: 100% !important; }
  [style*="min-height: 520px"] { min-height: 420px !important; }
  [style*="width: 480px"], [style*="width: 600px"] { width: calc(100% - 32px) !important; }

  /* Sidebars stop sticking so they do not fight the scroll. */
  [style*="position: sticky"] { position: static !important; }

  /* Filter chips are full-width in the desktop sidebar. Once that sidebar
     spans the screen they would stack into a very long column before the
     products, so let them flow in rows instead. */
  [style*="text-align: left"][style*="width: 100%"][style*="border-radius: 999px"] {
    width: auto !important;
  }
  [style*="flex-direction: column"] > [style*="text-align: left"][style*="border-radius: 999px"] {
    flex: 0 0 auto;
  }
  [style*="display: flex; flex-direction: column; gap: 6px"]:has(> [style*="border-radius: 999px"]) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  /* Phones: the bar carries the logo mark, the language pills and the burger.
     Language deliberately stays out of the menu — it is a one-tap switch, not
     navigation. Everything else (member controls, cart) is in the panel. */
  header > div { flex-wrap: wrap !important; row-gap: 0 !important; padding: 12px 16px !important; }
  header > div [style*="flex: 1 1 0%"] { display: none !important; }        /* spacer */
  .yc-logo-text { display: none !important; }
  .yc-lang-desktop { display: none !important; }
  .yc-lang-mobile { display: flex !important; margin-left: auto; }
  .yc-lang-mobile ~ .yc-burger { margin-left: 8px !important; }

  /* The burger is round and tinted so it reads as a control next to the
     language pill rather than an outlined box floating beside it. */
  .yc-burger {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-left: auto; flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
    background: rgba(255,255,255,.04); color: #EDF3F8; cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
  }
  .yc-burger-close { display: none; }
  .yc-menu-toggle:checked ~ .yc-burger {
    border-color: rgba(227,172,75,.55); background: rgba(227,172,75,.14); color: #E3AC4B;
  }
  .yc-menu-toggle:checked ~ .yc-burger .yc-burger-open { display: none; }
  .yc-menu-toggle:checked ~ .yc-burger .yc-burger-close { display: block; }
  .yc-menu-toggle:focus-visible ~ .yc-burger { outline: 2px solid #E3AC4B; outline-offset: 2px; }

  /* The panel is a sheet of its own: it spans the header's gutters instead of
     sitting inside them, so the menu reads as a surface that dropped out of
     the bar rather than a header row that wrapped. */
  .yc-menu-panel { display: none; }
  .yc-menu-toggle:checked ~ .yc-menu-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: calc(100% + 32px);
    margin: 12px -16px -12px;
    padding: 2px 16px 18px;
    background: rgba(11,21,32,.96);
    border-top: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 22px 44px rgba(0,0,0,.45);
    animation: yc-menu-in .2s ease-out;
  }

  /* Sign in and cart become full-width buttons, with sign in carrying the
     brand fill so the menu has one clear primary action. */
  .yc-menu-panel > [style*="gap: 9px"] {
    width: 100% !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
    padding-top: 16px;
  }
  .yc-menu-panel .yc-signin,
  .yc-menu-panel .yc-cart {
    width: 100%; height: 46px; padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px !important; letter-spacing: .14em !important;
  }
  .yc-menu-panel .yc-signin {
    background: #E3AC4B !important; border-color: #E3AC4B !important; color: #0B1520 !important;
  }
  .yc-menu-panel .yc-cart { border-color: rgba(255,255,255,.14) !important; }
  .yc-menu-panel .yc-cart > span {
    min-width: 20px; padding: 4px 7px; border-radius: 999px;
    background: rgba(227,172,75,.16); color: #E3AC4B !important;
    font-size: 10px !important;
  }

  /* Signed in: the avatar widens into a named row and its menu drops in place
     instead of hanging off the right edge of a full-width panel. */
  .yc-menu-panel .yc-acct { width: 100%; }
  .yc-menu-panel .yc-acct > summary {
    width: 100% !important; height: 46px !important;
    border-radius: 12px !important; justify-content: flex-start !important;
    gap: 10px; padding: 0 12px;
  }
  .yc-menu-panel .yc-avatar {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(227,172,75,.18);
  }
  .yc-menu-panel .yc-acct-name {
    display: block; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 600 13px / 1 Manrope; color: #EDF3F8;
  }
  .yc-menu-panel .yc-acct > div {
    position: static !important; width: 100% !important; margin-top: 8px;
  }

  /* Shop cards: two to a row leaves no space for a labelled ADD pill, so it
     becomes a cart icon and the stepper takes the width it frees. The label
     stays in the accessibility tree — font-size: 0 hides it visually only. */
  .scp9 {
    flex: 0 0 auto !important; width: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0 !important; letter-spacing: 0 !important;
  }
  .scp9::before {
    content: ""; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: var(--yc-cart-icon) center / contain no-repeat;
            mask: var(--yc-cart-icon) center / contain no-repeat;
  }
  div:has(> .scp9) > div { flex: 1 1 auto; justify-content: space-between; }

  /* Marquees scroll inside their own strip and must never widen the page. */
  [style*="ycMarquee"] { max-width: none !important; }
  [style*="ycMarquee"]:not(:hover) { will-change: transform; }
}

/* Between phone and desktop, only the widest grids need to give. */
@media (min-width: 769px) and (max-width: 1100px) {
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 236px 1fr"] { grid-template-columns: 200px 1fr !important; }
}

/* A menu that drops in is motion; people who asked for less should not get it. */
@media (prefers-reduced-motion: reduce) {
  .yc-menu-toggle:checked ~ .yc-menu-panel { animation: none !important; }
  .yc-lightbox[open] { animation: none !important; }
  .yc-hero-slide img { animation: none !important; }
  .yc-hero-slide { transition: none !important; }
  .yc-hero-copy > * { transition: none !important; }
}