/* MemesTube Store: tokens match the main site (teal brand, light/dark). */
/* Same tokens (and values) as the MemesTube theme, so light/dark match the main site exactly. */
:root{--primary:#008080;--primary-container:#f0f8ff;--bg:#ffffff;--surface:#ffffff;--surface-variant:#f0f8ff;--on-surface:#0f172a;--on-surface-variant:#475569;--border-color:#e2e8f0;
--p:var(--primary);--p2:#006666;--s:var(--surface-variant);--t:var(--on-surface);--m:var(--on-surface-variant);--b:var(--border-color);--ok:#15803d;--bad:#b91c1c;--r:12px;--w:1200px}
html[data-theme=dark]{--primary-container:#1e293b;--bg:#090d16;--surface:#090d16;--surface-variant:#1e293b;--on-surface:#f8fafc;--on-surface-variant:#94a3b8;--border-color:#334155;--ok:#4ade80;--bad:#fca5a5}
@media(prefers-color-scheme:dark){html:not([data-theme=light]){--primary-container:#1e293b;--bg:#090d16;--surface:#090d16;--surface-variant:#1e293b;--on-surface:#f8fafc;--on-surface-variant:#94a3b8;--border-color:#334155;--ok:#4ade80;--bad:#fca5a5}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--t);font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img,picture{display:block;max-width:100%;height:auto}
a{color:var(--p);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;margin:0}
.wrap{max-width:var(--w);margin:0 auto;padding:0 16px}
main.wrap{padding-top:16px;padding-bottom:40px;min-height:60vh}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:8px;left:8px;background:var(--p);color:#fff;padding:8px 12px;border-radius:8px;z-index:99}
.muted{color:var(--m)}.small{font-size:13px}.center{text-align:center}.green{color:var(--ok)}.warn{color:var(--bad)}
.h1{font-size:26px;font-weight:800;margin:6px 0 12px}
.crumbs{font-size:13px;color:var(--m);margin-bottom:4px}.crumbs a{color:var(--m)}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--b)}
.hdr-in{display:flex;align-items:center;gap:12px;height:60px}
.brand{font-size:21px;font-weight:800;letter-spacing:-.3px;color:var(--t)}.brand:hover{text-decoration:none}.b2{color:var(--p)}
.nav{display:none;gap:18px;margin-left:12px;font-size:14.5px;font-weight:600}.nav a{color:var(--t)}
.nav.open{display:flex;flex-direction:column;position:absolute;top:60px;left:0;right:0;background:var(--bg);padding:12px 16px 16px;border-bottom:1px solid var(--b);gap:14px;margin:0}
.search{flex:1;max-width:340px;margin-left:auto}
.search input{width:100%;padding:9px 14px;border-radius:99px;border:1px solid var(--b);background:var(--s);color:var(--t);font:inherit;font-size:14px}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:0;color:var(--t);cursor:pointer;border-radius:99px;padding:0}
.cart-n{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--p);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
@media(min-width:900px){.nav{display:flex}.menu-btn{display:none}}
@media(max-width:899px){.hdr-in{flex-wrap:nowrap}.search{max-width:none}.brand{order:0}}

/* buttons / chips / forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--p);color:#fff;border:2px solid var(--p);border-radius:99px;padding:12px 24px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--p2);border-color:var(--p2);text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-alt{background:transparent;color:var(--p)}.btn-alt:hover{background:var(--s);color:var(--p2)}
.btn-sm{padding:7px 16px;font-size:14px}.block{display:flex;width:100%}
.link{background:none;border:0;color:var(--m);text-decoration:underline;cursor:pointer;font:inherit;font-size:13px;padding:6px 0}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-block;padding:8px 16px;border-radius:99px;border:1px solid var(--b);background:var(--s);color:var(--t);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.chip.on{background:var(--p);border-color:var(--p);color:#fff}.chip.off{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sort select,.qty select{padding:8px 10px;border-radius:8px;border:1px solid var(--b);background:var(--s);color:var(--t);font:inherit;font-size:14px}
.count{margin:0 0 10px;font-size:14px}
.pager{display:flex;gap:6px;justify-content:center;margin:24px 0}.pager a{min-width:38px;text-align:center;padding:7px 10px;border:1px solid var(--b);border-radius:8px;color:var(--t)}.pager a.on{background:var(--p);color:#fff;border-color:var(--p)}

/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px}}
.card{display:block;color:inherit;min-width:0}.card:hover{text-decoration:none}.card:hover .card-t{color:var(--p)}
.card-img{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:var(--s);border:1px solid var(--b)}
.card-img img,.img-ph{width:100%;height:100%;object-fit:cover}.img-ph{background:var(--s)}
.badge{position:absolute;top:8px;left:8px;z-index:1;background:var(--p);color:#fff;font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px}.badge-off{background:#475569}
.card-t{margin-top:8px;font-size:14px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-p{margin-top:2px;font-size:14px}.price{font-weight:800}.mrp{color:var(--m);font-size:13px;margin-left:4px}.off{color:var(--ok);font-weight:700;font-size:14px;margin-left:8px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin:30px 0 12px}.sec-h h2{font-size:21px}

/* home */
.hero{margin:6px 0 10px;padding:34px 22px;border-radius:20px;background:linear-gradient(135deg,var(--p),#0b5e63);color:#fff}
.hero h1{font-size:38px;font-weight:900;letter-spacing:-1px;margin:6px 0}.hero p{max-width:520px;margin:0 0 18px;opacity:.95}
.hero .btn{background:#fff;color:var(--p2);border-color:#fff}.eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;opacity:.85}
.trio{display:grid;gap:14px;margin:36px 0}@media(min-width:800px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio>div{padding:18px;border:1px solid var(--b);border-radius:var(--r);background:var(--s)}.trio p{margin:6px 0 0;font-size:14px}
.about-strip{padding:8px 0}.empty{text-align:center;padding:48px 16px}.empty .btn{margin-top:14px}

/* product page */
.pdp{display:grid;gap:22px}@media(min-width:900px){.pdp{grid-template-columns:1.05fr 1fr;gap:40px;align-items:start}}
.g-main{border-radius:var(--r);overflow:hidden;border:1px solid var(--b);background:var(--s);aspect-ratio:1/1}.g-main img{width:100%;height:100%;object-fit:cover}
.g-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto}.g-th{flex:none;width:72px;height:72px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:none;cursor:pointer}.g-th.on{border-color:var(--p)}.g-th img{width:100%;height:100%;object-fit:cover}
.pr{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:6px}.price.big{font-size:28px}
.opt{margin-top:16px}.opt-l{font-size:13px;color:var(--m);margin-bottom:8px}.opt-l b{color:var(--t)}
.swatches,.sizes{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:36px;height:36px;border-radius:50%;background:var(--sw);border:2px solid var(--b);box-shadow:inset 0 0 0 2px var(--bg);cursor:pointer;padding:0}.sw.on{border-color:var(--p)}
.avail{font-size:13px;font-weight:700;margin:14px 0 0}.avail.ok{color:var(--ok)}.avail.no{color:var(--bad)}
.cta{display:flex;gap:10px;margin-top:12px}.cta .btn{flex:1}
.msg{min-height:22px;font-size:14px;margin:8px 0 0}.msg.err{color:var(--bad)}.msg.ok{color:var(--ok)}
.points{list-style:none;margin:18px 0;padding:14px;border:1px solid var(--b);border-radius:var(--r);font-size:14px;color:var(--m);display:grid;gap:6px}.points li::before{content:"✓";color:var(--p);font-weight:800;margin-right:8px}
.prose h1{font-size:28px;margin:6px 0 12px}.prose h2{font-size:18px;margin:22px 0 6px}.prose p,.prose li{color:var(--m)}.prose ul{padding-left:20px}
.page{max-width:760px;margin:0 auto}
.tbl{width:100%;border-collapse:collapse;margin:12px 0}.tbl th,.tbl td{padding:9px 12px;border-bottom:1px solid var(--b);text-align:left}.tbl th{font-size:12px;text-transform:uppercase;color:var(--m)}
.faq{border-bottom:1px solid var(--b);padding:12px 0}.faq summary{cursor:pointer;font-weight:700}.faq p{margin:8px 0 0}

/* cart / checkout */
.cart-l{display:grid;gap:22px}@media(min-width:900px){.cart-l{grid-template-columns:1.4fr 1fr;align-items:start}}
.line{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--b)}.line.bad{background:rgba(185,28,28,.06)}
.line-img{flex:none;width:88px;height:88px;border-radius:10px;overflow:hidden;background:var(--s)}.line-img img{width:100%;height:100%;object-fit:cover}
.line-b{flex:1;min-width:0}.line-t{display:block;font-weight:700;color:var(--t)}.line-r{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.summary{border:1px solid var(--b);border-radius:var(--r);background:var(--s);padding:14px 16px;margin:14px 0}.summary h2{font-size:17px;margin-bottom:6px}
.row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:15px}.row[hidden]{display:none}.total{font-weight:800;font-size:17px;border-top:1px solid var(--b);margin-top:6px;padding-top:10px}
.hint{font-size:12.5px;color:var(--m);margin:8px 0 0}
.summary .btn.block{margin-top:16px}.summary .link.center{display:block;text-align:center;margin-top:6px}
.form{max-width:640px}.form.narrow{max-width:420px;margin:0 auto}.form h2{font-size:18px;margin:20px 0 4px}
.form label{display:block;margin-top:12px;font-size:13px;font-weight:700}
.form input:not([type=radio]):not([type=checkbox]),.form select{display:block;width:100%;margin-top:6px;padding:12px;font:inherit;font-size:16px;border-radius:var(--r);border:1px solid var(--b);background:var(--s);color:var(--t)}
.form input:focus,.form select:focus{outline:2px solid var(--p);outline-offset:0}
.two{display:grid;gap:0 12px;grid-template-columns:1fr}.three{display:grid;gap:0 12px;grid-template-columns:1fr}
@media(min-width:600px){.two{grid-template-columns:1fr 1fr}.three{grid-template-columns:1fr 1.2fr 1.4fr}}
.err{display:block;color:var(--bad);font-size:12.5px;margin-top:4px;font-weight:500}.err:empty{display:none}
.pay{display:flex!important;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--b);border-radius:var(--r);font-weight:500!important;cursor:pointer}.pay input{margin-top:4px;accent-color:var(--p)}.pay em{display:block;font-style:normal;color:var(--m);font-size:13px;margin-top:2px}.pay:has(input:checked){border-color:var(--p);background:var(--s)}
.chk{display:flex!important;gap:10px;font-weight:500!important}.chk input{margin-top:4px;accent-color:var(--p)}
.form .btn{margin-top:16px}
.alert{margin:12px 0;padding:12px 14px;border-radius:var(--r);background:rgba(185,28,28,.08);color:var(--bad);border:1px solid rgba(185,28,28,.3);font-size:14px}.alert.info{background:var(--s);color:var(--t);border-color:var(--b)}
.pill{display:inline-block;background:var(--s);border:1px solid var(--b);border-radius:99px;padding:2px 12px;font-size:13px;font-weight:700}
.steps{list-style:none;display:flex;margin:18px 0;padding:0;counter-reset:s}.steps li{flex:1;text-align:center;font-size:12px;color:var(--m);position:relative;padding-top:32px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:26px;line-height:24px;border-radius:50%;background:var(--s);border:1px solid var(--b);font-weight:800;font-size:12px}
.steps li::after{content:"";position:absolute;top:13px;left:calc(50% + 18px);width:calc(100% - 36px);height:2px;background:var(--b)}.steps li:last-child::after{display:none}
.steps li.done{color:var(--t);font-weight:700}.steps li.done::before{background:var(--p);border-color:var(--p);color:#fff}
.conf{max-width:720px;margin:0 auto}

/* footer */
.ftr{border-top:1px solid var(--b);background:var(--s);margin-top:20px;padding:30px 0 12px}
.ftr-in{display:grid;gap:22px;grid-template-columns:1fr 1fr}@media(min-width:800px){.ftr-in{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.ftr h3{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--m);margin-bottom:8px}.ftr a:not(.brand){display:block;color:var(--t);font-size:14px;padding:3px 0}
.ftr p{font-size:13.5px;margin:6px 0}.copy{margin-top:20px;font-size:12.5px;color:var(--m)}

/* theme toggle (shares the main site's app_theme setting) */
.i-sun{display:none}
html[data-theme=dark] .i-sun{display:block}html[data-theme=dark] .i-moon{display:none}
@media(prefers-color-scheme:dark){html:not([data-theme=light]) .i-sun{display:block}html:not([data-theme=light]) .i-moon{display:none}}

/* desktop: mobile layout is unchanged below 900px */
@media(min-width:900px){
  main.wrap{padding-top:28px;padding-bottom:64px}
  .hdr-in{height:68px;gap:18px}.search{max-width:380px}.search input{padding:11px 18px;font-size:15px}
  .hero{padding:64px 56px;border-radius:24px;margin-top:10px}.hero h1{font-size:56px}.hero p{font-size:18px;max-width:560px}
  .h1{font-size:32px}.sec-h h2{font-size:26px}.sec-h{margin:44px 0 18px}
  .chips{flex-wrap:wrap;overflow:visible}
  .grid{gap:32px 22px}.card-t{font-size:15px}.card-p{font-size:15px}
  .pdp{gap:56px}.info{position:sticky;top:90px}.price.big{font-size:34px}.info .h1{font-size:30px}
  .cart-l{gap:40px}.summary{position:sticky;top:90px}
  .trio{gap:22px}.trio>div{padding:26px}
  .ftr{padding:48px 0 18px}
}
@media(min-width:1400px){:root{--w:1320px}.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* search: inside the menu on phones, in the header bar on desktop */
.hdr-search{display:none}.nav-search{display:block;max-width:none;margin:0}.nav-search input{width:100%}
.hdr-in .brand{margin-right:auto}
@media(min-width:900px){.hdr-search{display:block;margin-left:auto}.nav-search{display:none}.hdr-in .brand{margin-right:0}}