/* ==========================================================================
   APP LAYER — marketplace-app look (home, cart, account, settings, messages)
   Loaded last. Mobile-first details, desktop stays roomy.
   ========================================================================== */
:root { --price-red:#E5372F; --app-line:#efeff2; --font:'Roboto','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; }
body, button, input, select, textarea { font-family:var(--font); }
body { letter-spacing:.005em; }
h1, h2, h3, .sec-head h2, .brand-name, .flash-title { font-family:var(--font); letter-spacing:-.01em; }
.only-m { display:none !important; }
.rot180 { transform:rotate(180deg); }

/* ── Mobile category tabs (home) ── */
.mtabs { display:none; }

/* ── Shortcuts ── */
.shortcuts { display:grid; grid-template-columns:repeat(8,1fr); gap:6px; background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:14px 10px; margin-bottom:16px; }
.shortcuts a { display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; font-size:12.5px; color:#1f2937; line-height:1.25; padding:4px 2px; border-radius:12px; transition:background .2s; }
.shortcuts a:hover { background:var(--bg); }
.sc-ic { width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 8px 16px -10px rgba(0,0,0,.5); transition:transform .3s var(--ease-spring); }
.shortcuts a:hover .sc-ic { transform:translateY(-3px) rotate(-6deg); }

/* ── Unbeatable deals ── */
.deals { background:linear-gradient(180deg,var(--brand),var(--brand-dark)); border-radius:var(--r-lg); padding:0 12px 12px; margin-bottom:16px; box-shadow:var(--sh-2); overflow:hidden; }
.deals-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:14px 6px 12px; color:#fff; }
.deals-head b { font-size:clamp(20px,2.6vw,28px); font-weight:900; font-style:italic; letter-spacing:-.02em; text-shadow:0 2px 0 rgba(0,0,0,.12); }
.deals-head span { font-weight:700; font-size:13px; background:#fde047; color:#111; padding:4px 12px; border-radius:20px; transform:skewX(-8deg); white-space:nowrap; }
.deals-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.deal { background:#fff; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; position:relative; transition:transform .25s var(--ease-out), box-shadow .25s; }
.deal:hover { transform:translateY(-3px); box-shadow:0 14px 26px -14px rgba(0,0,0,.55); }
.deal-img { aspect-ratio:1/1; display:block; background:#fff; overflow:hidden; }
.deal-img img { width:100%; height:100%; object-fit:contain; padding:8px; transition:transform .5s var(--ease-out); }
.deal:hover .deal-img img { transform:scale(1.06); }
.deal-lbl { position:relative; z-index:1; margin:-14px 8px 0; align-self:center; max-width:calc(100% - 16px); background:#fde047; color:#111; font-weight:700; font-size:12.5px; padding:3px 10px; border-radius:6px 6px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.deal-price { background:#111; color:#fff; font-weight:900; font-size:clamp(14px,1.6vw,18px); padding:7px 8px; display:flex; align-items:center; justify-content:center; gap:4px; letter-spacing:-.01em; }
.deal-price .ic { color:#fb923c; }

/* ── Compact flash card (mobile) ── */
.mflash { display:block; background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:12px 12px 14px; margin-bottom:12px; }
.mflash-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.mflash-title { font-size:21px; font-weight:900; color:#111; display:flex; align-items:center; letter-spacing:-.02em; }
.mflash-title .ic { color:var(--accent); margin:0 -2px; transform:skewX(-10deg); }
.mflash-head .cd { margin-left:auto; }
.mflash-head .cd-label { color:var(--muted); font-weight:500; margin-right:4px; }
.cd.red .cd-box { background:var(--accent); color:#fff; min-width:26px; height:24px; font-size:13px; border-radius:5px; }
.cd.red .cd-sep { color:var(--accent); }
.mflash-ar { color:var(--muted-2); }
.mflash-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.mflash-item { display:flex; flex-direction:column; gap:6px; text-align:center; }
.mflash-img { position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:#f4f4f6; display:flex; align-items:center; justify-content:center; color:#cbd0d8; }
.mflash-img img { width:100%; height:100%; object-fit:cover; }
.mflash-img em { position:absolute; left:0; top:0; background:var(--accent); color:#fff; font-style:normal; font-size:10px; font-weight:800; padding:2px 5px; border-radius:0 0 6px 0; }
.mflash-item b { color:var(--price-red); font-weight:500; font-size:14px; }

/* ── Product card refinements ── */
.pc-name { color:#222; font-weight:400; }
.pc-price { font-weight:700; color:#111; }
.pc-flash .pc-price, .pc .pc-badge-flash ~ * .pc-price { color:var(--price-red); }
.pc-tag { min-height:18px; display:flex; align-items:center; gap:4px; font-size:11.5px; color:#15803d; margin-top:4px; }
.pc-tag .ic { color:#16a34a; background:#dcfce7; border-radius:50%; padding:2px; width:16px; height:16px; }
.feedgrid { grid-template-columns:repeat(6,1fr); }
.feed-foot { text-align:center; color:var(--muted); font-size:13px; padding:4px 0 22px; display:flex; align-items:center; justify-content:center; gap:8px; }
.feed-head h2 .ic { color:var(--accent); }

/* ── Back to top ── */
.totop { position:fixed; right:18px; bottom:90px; z-index:450; width:50px; height:50px; border-radius:50%; border:0; background:rgba(17,24,39,.78); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; font-size:9px; font-weight:700; letter-spacing:.06em; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(12px); transition:all .3s var(--ease-out); backdrop-filter:blur(6px); }
.totop.show { opacity:1; visibility:visible; transform:none; }
.totop:hover { background:#111; }

/* ── App pages (account, orders, settings…) ── */
.apppage { max-width:780px; }
.apppage.wide { max-width:1240px; }
.apphead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.apphead h1 { font-size:22px; font-weight:700; color:#111; }
.apphead h1 span { font-weight:400; color:var(--muted); margin-left:2px; }
.apphead-c h1 { flex:1; text-align:center; font-size:19px; font-weight:500; }
.apphead-back { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#111; margin-left:-8px; }
.apphead-back:hover { background:var(--bg); }
.apphead-act { min-width:40px; text-align:right; background:none; border:0; font-size:15px; color:#111; cursor:pointer; font-family:inherit; }
.apphead-btn { background:none; border:0; color:var(--brand-dark); font-weight:600; cursor:pointer; font-size:14px; font-family:inherit; }
.cart-page .apphead { display:none; }

.lgroup { background:#fff; border-radius:14px; box-shadow:var(--sh-1); overflow:hidden; margin-bottom:12px; }
.lgroup-title { padding:16px 16px 6px; font-size:16px; font-weight:700; color:#111; }
.lgroup-empty { padding:10px 16px 18px; color:var(--muted); font-size:13.5px; }
.lgroup-empty a { color:var(--brand-dark); font-weight:700; }
.lrow { display:flex; align-items:center; gap:12px; min-height:58px; padding:10px 16px; border-bottom:1px solid var(--app-line); color:#1f2937; font-size:15.5px; cursor:pointer; background:#fff; transition:background .15s; }
.lrow:last-child { border-bottom:0; }
a.lrow:hover { background:#fafafb; }
.lrow-ic { color:var(--muted); display:flex; }
.lrow-l { flex:1; display:flex; flex-direction:column; min-width:0; }
.lrow-l small { font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.lrow-v { color:#7c75c9; font-size:14.5px; text-align:right; }
.lrow-ar { color:#b5b7bf; flex-shrink:0; }
.logout-btn { display:block; text-align:center; background:#fff; border-radius:12px; box-shadow:var(--sh-1); padding:17px; font-size:16px; font-weight:500; letter-spacing:.06em; color:#111; margin:16px 6% 0; transition:background .15s; }
.logout-btn:hover { background:#fafafa; color:var(--err); }
.mc .lrow { min-height:68px; }
.mc-ic { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mbadge { min-width:20px; height:20px; border-radius:10px; background:#e53935; color:#fff; font-style:normal; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; }
.chatrow { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--app-line); color:#111; }
.chatrow:last-child { border-bottom:0; }
.chat-av { width:48px; height:48px; border-radius:50%; background:var(--brand-pale); color:var(--brand-dark); display:flex; align-items:center; justify-content:center; font-weight:800; overflow:hidden; flex-shrink:0; }
.chat-av img { width:100%; height:100%; object-fit:cover; }
.chat-mid { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.chat-mid b { font-weight:500; font-size:15.5px; }
.chat-mid small { color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-end { display:flex; flex-direction:column; align-items:flex-end; gap:6px; color:var(--muted-2); font-size:12px; }

/* bottom sheet */
.sheet { position:fixed; inset:0; z-index:2000; }
.sheet-scrim { position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .25s; }
.sheet-panel { position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:18px 18px 0 0; padding:8px 16px calc(18px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .3s var(--ease-out); max-width:560px; margin:0 auto; }
.sheet.open .sheet-scrim { opacity:1; } .sheet.open .sheet-panel { transform:none; }
.sheet-head { display:flex; align-items:center; justify-content:space-between; padding:10px 0 8px; font-size:16px; }
.sheet-head button { background:none; border:0; cursor:pointer; color:#111; }
.sheet-opt { display:flex; align-items:center; gap:12px; padding:14px 4px; border-top:1px solid var(--app-line); cursor:pointer; }
.sheet-opt input { display:none; }
.sheet-opt span { flex:1; display:flex; flex-direction:column; } .sheet-opt small { color:var(--muted); }
.sheet-opt i { width:22px; height:22px; border-radius:50%; border:2px solid #cfd2d8; position:relative; }
.sheet-opt input:checked ~ i { border-color:var(--brand); } .sheet-opt input:checked ~ i::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--brand); }

/* ── Account dashboard ── */
.acct-hero { position:relative; overflow:hidden; border-radius:16px; color:#fff; padding:18px 18px 8px; margin-bottom:12px;
  background:radial-gradient(120% 90% at 100% 0%,rgba(var(--brand-rgb),.35),transparent 55%),
             repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 22px,transparent 22px 44px), #0d0d10; }
.acct-top { display:flex; align-items:center; gap:14px; }
.acct-av { width:72px; height:72px; border-radius:50%; border:3px solid rgba(255,255,255,.9); background:linear-gradient(135deg,var(--brand),var(--brand-darker)); display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; color:#fff; overflow:hidden; flex-shrink:0; }
.acct-av img { width:100%; height:100%; object-fit:cover; }
.acct-av.lg { width:64px; height:64px; font-size:24px; border-color:#fff; box-shadow:var(--sh-2); }
.acct-who { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.acct-who b { font-size:21px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct-who small { color:rgba(255,255,255,.65); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct-signin { display:inline-flex; align-items:center; gap:4px; align-self:flex-start; background:#fff; color:#111; font-weight:700; font-size:13.5px; padding:6px 14px; border-radius:20px; margin-top:4px; }
.acct-gear { color:#fff; align-self:flex-start; padding:4px; transition:transform .4s var(--ease-out); }
.acct-gear:hover { transform:rotate(60deg); }
.acct-quick { display:grid; grid-template-columns:repeat(3,1fr); margin-top:18px; }
.acct-quick a { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; color:#fff; font-size:14.5px; padding:10px 4px 12px; border-radius:12px; transition:background .2s; }
.acct-quick a:hover { background:rgba(255,255,255,.06); }
.acct-quick i { position:absolute; top:4px; left:calc(50% + 10px); font-style:normal; min-width:18px; height:18px; border-radius:9px; background:var(--accent); font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.acard { background:#fff; border-radius:14px; box-shadow:var(--sh-1); padding:16px 16px 18px; margin-bottom:12px; }
.acard-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.acard-head h2 { font-size:19px; font-weight:500; color:#111; }
.acard-head a { color:var(--muted-2); font-size:14px; display:flex; align-items:center; gap:2px; }
.obuckets { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.obuckets a { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font-size:13.5px; color:#333; line-height:1.25; }
.ob-ico { position:relative; width:46px; height:40px; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(160deg,#ff6b4a,#e5372f); border-radius:8px; box-shadow:0 6px 12px -8px rgba(229,55,47,.9); transition:transform .25s var(--ease-spring); }
.obuckets a:hover .ob-ico { transform:translateY(-3px); }
.ob-ico i { position:absolute; top:-8px; right:-9px; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:#fff; color:#e5372f; border:1.5px solid #e5372f; font-style:normal; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.acct-promo { display:block; border-radius:14px; overflow:hidden; margin-bottom:12px; aspect-ratio:16/6; box-shadow:var(--sh-1); }
.acct-promo img { width:100%; height:100%; object-fit:cover; }
.assets { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; }
.assets a { display:flex; flex-direction:column; gap:8px; color:#333; font-size:14.5px; }
.assets b { color:#e5372f; font-size:22px; font-weight:400; }
.services { display:grid; grid-template-columns:repeat(4,1fr); row-gap:22px; }
.services a { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; color:#333; font-size:13.5px; line-height:1.3; padding:0 4px; }
.services .ic { color:#111; transition:transform .25s var(--ease-spring); }
.services a:hover .ic { transform:scale(1.12); color:var(--brand-dark); }
.pf-top { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.pf-top b { display:block; font-size:18px; } .pf-top small { color:var(--muted); }

/* orders */
.otabs { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; background:#fff; border-radius:12px; box-shadow:var(--sh-1); padding:4px; margin-bottom:12px; position:sticky; top:96px; z-index:20; }
.otabs::-webkit-scrollbar { display:none; }
.otabs a { flex-shrink:0; padding:9px 14px; border-radius:9px; font-size:14px; color:#4b5563; white-space:nowrap; }
.otabs a.on { background:var(--ink); color:#fff; font-weight:600; }
.otabs i { font-style:normal; font-size:11px; background:var(--accent); color:#fff; border-radius:10px; padding:1px 6px; margin-left:2px; }
.ocard { background:#fff; border-radius:14px; box-shadow:var(--sh-1); padding:14px 14px 12px; margin-bottom:12px; }
.ocard-head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; margin-bottom:10px; }
.ocard-head > span:first-child { display:flex; align-items:center; gap:6px; font-weight:500; }
.ocard-head small { color:var(--muted); font-weight:400; }
.ostat { font-size:13px; font-weight:600; }
.ostat.red { color:#e5372f; } .ostat.amber { color:#d97706; } .ostat.blue { color:#2563eb; } .ostat.purple { color:#7c3aed; } .ostat.green { color:#16a34a; } .ostat.gray { color:#6b7280; }
.oitem { display:flex; gap:12px; align-items:center; padding:6px 0; color:#111; }
.oitem-img { width:68px; height:68px; border-radius:10px; overflow:hidden; background:#f4f4f6; display:flex; align-items:center; justify-content:center; color:#cbd0d8; flex-shrink:0; }
.oitem-img img { width:100%; height:100%; object-fit:cover; }
.oitem-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.oitem-txt b { font-weight:400; font-size:14.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.oitem-txt small { color:var(--muted); font-size:12.5px; }
.oitem-p { text-align:right; font-size:14px; display:flex; flex-direction:column; } .oitem-p small { color:var(--muted); }
.omore { font-size:12.5px; color:var(--muted); padding:2px 0 4px 80px; }
.ocard-total { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--app-line); margin-top:6px; font-size:13px; color:var(--muted); }
.ocard-total b { color:#111; font-size:16px; }
.ocard-acts { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.obtn { display:inline-flex; align-items:center; gap:4px; border:1px solid #d1d5db; background:#fff; color:#333; border-radius:20px; padding:7px 16px; font-size:13.5px; cursor:pointer; font-family:inherit; transition:all .15s; }
.obtn:hover { border-color:#9ca3af; }
.obtn.primary { border-color:var(--price-red); color:var(--price-red); }
.obtn.primary:hover { background:var(--price-red); color:#fff; }

/* vouchers */
.voucher { display:flex; align-items:stretch; background:#fff; border-radius:12px; box-shadow:var(--sh-1); margin-bottom:12px; overflow:hidden; position:relative; }
.voucher::before, .voucher::after { content:''; position:absolute; left:92px; width:16px; height:16px; border-radius:50%; background:var(--bg); }
.voucher::before { top:-8px; } .voucher::after { bottom:-8px; }
.vo-left { width:100px; flex-shrink:0; background:linear-gradient(160deg,#ff6b4a,#e5372f); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px 6px; border-right:2px dashed rgba(255,255,255,.6); }
.vo-left b { font-size:22px; font-weight:900; line-height:1; } .vo-left small { font-weight:700; letter-spacing:.1em; margin-top:2px; }
.vo-mid { flex:1; padding:12px 14px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.vo-mid b { font-weight:500; } .vo-mid small { color:var(--muted); font-size:12.5px; }
.vo-mid code { align-self:flex-start; font-size:12px; background:var(--bg); padding:2px 8px; border-radius:6px; margin-top:4px; letter-spacing:.08em; }
.vo-right { display:flex; align-items:center; padding:0 14px; }
.vo-btn { background:var(--price-red); color:#fff; border:0; border-radius:20px; padding:8px 18px; font-weight:700; cursor:pointer; font-family:inherit; }
.vo-used { color:var(--ok); font-weight:700; font-size:13px; display:flex; align-items:center; gap:4px; }
.voucher.on { outline:2px solid var(--ok); }

/* address book */
.addr { background:#fff; border-radius:14px; box-shadow:var(--sh-1); padding:14px 16px; margin-bottom:12px; border:1.5px solid transparent; }
.addr.def { border-color:rgba(var(--brand-rgb),.5); }
.addr-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.addr-top b { font-weight:600; } .addr-top span { color:var(--muted); }
.addr-top em { font-style:normal; font-size:11px; font-weight:700; color:#fff; background:var(--brand); padding:2px 8px; border-radius:10px; }
.addr-top i { font-style:normal; font-size:11px; color:var(--muted); border:1px solid var(--line); padding:1px 8px; border-radius:10px; margin-left:auto; }
.addr p { color:#4b5563; margin:8px 0 10px; display:flex; gap:6px; align-items:flex-start; }
.addr-acts { display:flex; gap:8px; justify-content:flex-end; }
.addr-picks { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px; scrollbar-width:none; }
.addr-pick { flex-shrink:0; border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff; cursor:pointer; text-align:left; font-family:inherit; max-width:230px; transition:border-color .15s; }
.addr-pick b { display:block; font-size:13.5px; } .addr-pick small { color:var(--muted); font-size:12px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.addr-pick.on, .addr-pick:hover { border-color:var(--brand); background:var(--brand-pale); }

/* reviews */
.rv-card { display:block; margin-bottom:12px; color:inherit; }
.starpick { display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; margin:10px 0; }
.starpick input { display:none; }
.starpick label { font-size:32px; color:#d1d5db; cursor:pointer; transition:transform .15s, color .15s; line-height:1; }
.starpick label:hover, .starpick label:hover ~ label, .starpick input:checked ~ label { color:#f59e0b; }
.starpick label:active { transform:scale(1.2); }

/* faq */
.faq details { border-bottom:1px solid var(--app-line); }
.faq details:last-child { border:0; }
.faq summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px; cursor:pointer; font-size:15px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .ic { color:var(--muted-2); transition:transform .25s; flex-shrink:0; }
.faq details[open] summary .ic { transform:rotate(180deg); }
.faq details p { padding:0 16px 16px; color:#4b5563; line-height:1.65; }
.about { text-align:center; }
.about-logo img { max-height:64px; margin:0 auto 10px; }
.about h2 { font-size:22px; margin-top:8px; }

/* ── Cart (store groups + checkboxes) ── */
.ck { display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.ck input { position:absolute; opacity:0; pointer-events:none; }
.ck i { width:22px; height:22px; border-radius:50%; border:1.5px solid #c8cbd2; background:#fff; display:inline-flex; align-items:center; justify-content:center; transition:all .18s var(--ease-out); flex-shrink:0; }
.ck input:checked + i { background:var(--price-red); border-color:var(--price-red); box-shadow:0 4px 10px -4px rgba(229,55,47,.8); }
.ck input:checked + i::after { content:''; width:6px; height:11px; border:solid #fff; border-width:0 2.2px 2.2px 0; transform:rotate(45deg) translate(-1px,-1px); }
.ck input:focus-visible + i { outline:2px solid var(--brand); outline-offset:2px; }
.cgroup { background:#fff; border-radius:14px; box-shadow:var(--sh-1); margin-bottom:12px; padding:4px 14px; }
.cg-head { display:flex; align-items:center; gap:12px; padding:12px 0 8px; }
.cg-store { display:flex; align-items:center; gap:8px; font-size:15.5px; color:#111; }
.cg-store .ic:first-child { color:var(--price-red); }
.cg-store a { display:flex; align-items:center; gap:4px; color:#111; }
.cg-store b { font-weight:500; }
.cline { display:grid; grid-template-columns:22px 96px 1fr 28px; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--app-line); transition:opacity .2s, background .2s; }
.cline.busy { opacity:.7; }
.cline.removing { opacity:.3; }
.cline.has-problem .cl-img { opacity:.55; }
.cl-img { width:96px; height:96px; border-radius:10px; overflow:hidden; background:#f4f4f6; display:flex; align-items:center; justify-content:center; color:#cbd0d8; }
.cl-img img { width:100%; height:100%; object-fit:cover; }
.cl-info { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.cl-title { color:#111; font-size:15px; font-weight:500; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-chip { background:#f3f4f6; color:#6b7280; font-size:12.5px; padding:3px 9px; border-radius:4px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-row { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin-top:2px; }
.cl-prices { display:flex; flex-direction:column; }
.cl-price { color:var(--price-red); font-size:19px; font-weight:500; letter-spacing:-.01em; }
.cl-old { color:var(--muted-2); font-size:12px; }
.stepper { display:inline-flex; align-items:stretch; height:34px; border:1px solid #1f2937; border-radius:6px; overflow:hidden; flex-shrink:0; }
.stepper button { width:34px; border:0; background:#fff; font-size:20px; line-height:1; cursor:pointer; color:#111; transition:background .15s; }
.stepper button:hover { background:#f3f4f6; }
.stepper input { width:42px; border:0; border-left:1px solid #1f2937; border-right:1px solid #1f2937; text-align:center; font-size:15px; font-family:inherit; -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance:none; }
.cl-del { width:28px; height:28px; border-radius:50%; border:0; background:none; color:#9ca3af; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.cl-del:hover { background:#fef2f2; color:var(--err); }
.js-checkout.is-off { opacity:.5; filter:grayscale(.4); }
.cbar { display:none; }

/* ── Bottom nav (app style) ── */
.mnav a { color:#4b5563; font-weight:400; font-size:11.5px; }
.mnav a.on { color:var(--price-red); }
.mnav a.on .ic { stroke-width:2.2; }
.mnav-home { width:30px; height:30px; border-radius:8px; background:linear-gradient(160deg,var(--accent),#b91c1c); color:#fff; font-weight:900; font-size:16px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px -4px rgba(185,28,28,.8); }
.mnav .mnav-badge { background:#e53935; }

/* ── Responsive ── */
@media (max-width:1024px) {
  .shortcuts { grid-template-columns:repeat(8,minmax(76px,1fr)); overflow-x:auto; scrollbar-width:none; }
  .deals-grid { grid-template-columns:repeat(3,1fr); }
  .feedgrid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:768px) {
  .only-m { display:block !important; }
  .only-d { display:none !important; }
  /* home: dark app header with tabs */
  body.page-index .topstrip { display:none; }
  body.page-index .site-header { background:#0b0b0d; box-shadow:none; }
  body.page-index .hdr { padding-top:10px; padding-bottom:8px; }
  body.page-index .brand, body.page-index .brand-name, body.page-index .hdr-burger, body.page-index .hact-btn { color:#fff; }
  body.page-index .hact-btn:hover { background:rgba(255,255,255,.08); color:#fff; }
  body.page-index .hsearch { border:0; border-radius:10px; height:44px; }
  body.page-index .hsearch button { background:transparent; color:#6b7280; order:-1; padding:0 4px 0 14px; }
  body.page-index .hsearch input { padding-left:8px; font-size:15px; }
  .mtabs { display:flex; align-items:center; gap:22px; overflow-x:auto; scrollbar-width:none; padding:2px 14px 0; background:#0b0b0d; position:relative; }
  .mtabs::-webkit-scrollbar { display:none; }
  .mtabs a { color:#b8bac2; font-size:16px; white-space:nowrap; padding:8px 0 10px; position:relative; flex-shrink:0; }
  .mtabs a.on { color:#fff; font-weight:500; }
  .mtabs a.on::after { content:''; position:absolute; left:-2px; right:-2px; bottom:2px; height:3px; border-radius:2px; background:#fff; }
  .mtabs .mtabs-all { position:sticky; right:-14px; margin-left:auto; padding:8px 12px 10px 18px; background:linear-gradient(90deg,transparent,#0b0b0d 35%); color:#fff; }
  body.page-index .home { background:linear-gradient(180deg,#0b0b0d 0,#0b0b0d 120px,var(--bg) 120px); margin-top:0; padding-top:10px; max-width:none; }

  .shortcuts { display:flex; gap:2px; padding:12px 6px; border-radius:12px; margin-bottom:12px; overflow-x:auto; scroll-snap-type:x mandatory; }
  .shortcuts a { flex:0 0 20%; scroll-snap-align:start; font-size:12px; }
  .sc-ic { width:46px; height:46px; }
  .deals { padding:0 8px 8px; border-radius:12px; margin-bottom:12px; }
  .deals-head { padding:12px 4px 10px; } .deals-head span { font-size:11.5px; padding:3px 9px; }
  .deals-grid { gap:7px; }
  .deal { border-radius:8px; }
  .deal-lbl { font-size:11.5px; padding:2px 6px; margin:-12px 4px 0; max-width:calc(100% - 8px); }
  .deal-price { font-size:14.5px; padding:5px 4px; }
  .promo-row { margin-bottom:12px; }
  .feedgrid, .pgrid.feedgrid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .sec.feed { background:transparent; box-shadow:none; }
  .sec.feed .sec-head, .sec.feed .sec-body { padding-left:0; padding-right:0; }
  .feed-head h2 { justify-content:center; width:100%; }

  /* product card: Kilimall-style with round cart button */
  .pc { border-radius:10px; border:0; box-shadow:0 1px 2px rgba(16,24,40,.06); }
  .pc .pc-body { padding:8px 10px 10px; }
  .pc-name { font-size:14px; height:2.75em; margin-bottom:6px; }
  .pc-price { font-size:16.5px; }
  .pc-old { min-height:16px; font-size:12px; }
  .pc .pc-add, .pc:hover .pc-add { position:absolute; right:8px; bottom:9px; width:34px !important; height:34px; padding:0; margin:0; border-radius:50%; max-width:none; background:var(--brand); color:#fff; border:0; box-shadow:0 6px 14px -6px rgba(var(--brand-rgb),.9); }
  .pc .pc-add .pa-long, .pc .pc-add .pa-short { display:none !important; }
  .pc .pc-add.pc-add-off { background:#e5e7eb; color:#6b7280; box-shadow:none; }
  .pc .pc-add.is-added { background:var(--ok-bg) !important; }
  .pc-tag { padding-right:38px; }
  .pc-rating { font-size:11.5px; }
  .pc-flashtxt, .pc-flashbar { margin-right:40px; }
  .rail .pc .pc-body { padding-bottom:12px; }

  /* app pages full-bleed on phones */
  .apppage { padding-top:0; }
  .apphead { position:sticky; top:0; z-index:250; background:#fff; margin:0 -10px 12px; padding:6px 10px; min-height:56px; border-bottom:1px solid var(--app-line); }
  body:has(.apphead) .site-header { position:relative; }
  body:has(.apphead) .hsearch { display:none; }
  .cart-page .apphead { display:flex; }
  .cart-page .apphead h1 { font-size:20px; font-weight:500; }
  .lgroup, .acard, .ocard, .cgroup, .voucher, .addr, .card { border-radius:12px; }
  .acct-hero { border-radius:14px; padding:16px 14px 6px; }
  .acct-av { width:64px; height:64px; font-size:24px; }
  .acct-who b { font-size:19px; }
  .acct-quick a { font-size:13.5px; }
  .obuckets a { font-size:12.5px; }
  .ob-ico { width:40px; height:36px; }
  .services a { font-size:12.5px; }
  .otabs { top:56px; border-radius:0; margin:0 -10px 10px; box-shadow:none; border-bottom:1px solid var(--app-line); }
  .otabs a.on { background:none; color:var(--price-red); box-shadow:inset 0 -2px 0 var(--price-red); border-radius:0; }

  /* cart: sticky checkout bar above the nav */
  .cart-side { display:none; }
  .cline { grid-template-columns:22px 84px 1fr; gap:10px; }
  .cl-img { width:84px; height:84px; }
  .cl-del { display:none; }
  .cart-page.editing .cl-del { display:flex; position:absolute; right:0; top:10px; }
  .cline { position:relative; }
  .cl-price { font-size:18px; }
  .cbar { display:flex; position:fixed; left:0; right:0; bottom:calc(58px + env(safe-area-inset-bottom)); z-index:480; align-items:center; gap:10px; background:#fff; padding:10px 12px; border-top:1px solid var(--app-line); box-shadow:0 -6px 18px rgba(16,24,40,.06); }
  .ck-all span { font-size:15px; color:#333; }
  .cbar-total { margin-left:auto; display:flex; align-items:baseline; gap:6px; }
  .cbar-total small { color:var(--muted); font-size:12.5px; }
  .cbar-total b { color:var(--price-red); font-size:21px; font-weight:500; }
  .cbar-btn { border:0; border-radius:26px; padding:12px 22px; font-size:16px; font-weight:500; color:#fff; background:linear-gradient(90deg,#ff7a1a,#f0441e); box-shadow:0 8px 18px -8px rgba(240,68,30,.9); white-space:nowrap; font-family:inherit; cursor:pointer; }
  .cbar-del { display:none; background:#fff; color:var(--price-red); border:1.5px solid var(--price-red); box-shadow:none; }
  .cart-page.editing .cbar-del { display:inline-flex; }
  .cart-page.editing .cbar a.cbar-btn, .cart-page.editing .cbar-total { display:none; }
  .cart-page.editing .cbar-del { margin-left:auto; }
  body.page-cart { padding-bottom:calc(130px + env(safe-area-inset-bottom)); }
  body.page-cart .wa-float, body.page-cart .totop { display:none; }
  .totop { right:14px; bottom:calc(76px + env(safe-area-inset-bottom)); width:46px; height:46px; }
  .mnav { padding-top:2px; }
  .mnav a { gap:3px; }
}
@media (max-width:380px) {
  .obuckets a, .services a { font-size:11.5px; }
  .cbar-btn { padding:11px 16px; font-size:15px; }
  .cbar-total b { font-size:18px; }
}

/* ── Dark mode ── */
html.dark { color-scheme:dark; --bg:#0f1115; --card:#181b21; --line:#2a2e37; --app-line:#252932; --muted:#9aa1ad; --muted-2:#6f7684; --brand-pale:rgba(var(--brand-rgb),.14); }
html.dark body { background:var(--bg); color:#e5e7eb; }
html.dark .site-header, html.dark .catnav, html.dark .sec, html.dark .flash, html.dark .pc, html.dark .card, html.dark .lgroup, html.dark .lrow, html.dark .acard,
html.dark .ocard, html.dark .cgroup, html.dark .voucher, html.dark .addr, html.dark .shortcuts, html.dark .mflash, html.dark .hero-cats, html.dark .hero-user,
html.dark .hero-perks, html.dark .ls-box, html.dark .ls-top, html.dark .paycard, html.dark .mnav, html.dark .cbar, html.dark .apphead, html.dark .otabs,
html.dark .logout-btn, html.dark .sheet-panel, html.dark .tcard, html.dark .assure, html.dark .store-card, html.dark .hact-menu, html.dark .allcats-menu,
html.dark .drawer, html.dark .deal, html.dark .pm, html.dark .qstep, html.dark .qstep button, html.dark .stepper button, html.dark .stepper input,
html.dark .obtn, html.dark .pc-wish, html.dark .pd-wish, html.dark .form-card, html.dark .chip, html.dark .pager a, html.dark .fs-tab, html.dark .addr-pick { background:var(--card); color:#e5e7eb; border-color:var(--line); }
html.dark .pc-name, html.dark .pc-price, html.dark .sec-head h2, html.dark .apphead h1, html.dark .apphead-back, html.dark .apphead-act, html.dark .acard-head h2,
html.dark .cl-title, html.dark .cg-store, html.dark .cg-store a, html.dark .lrow, html.dark .chatrow, html.dark .oitem, html.dark .mflash-title, html.dark .brand,
html.dark .brand-name, html.dark .hact-btn, html.dark .hdr-burger, html.dark .catnav-links a, html.dark .hero-cats a, html.dark .shortcuts a, html.dark .services a,
html.dark .services .ic, html.dark .obuckets a, html.dark .assets a, html.dark .logout-btn, html.dark .ocard-total b, html.dark .faq summary, html.dark .stepper button,
html.dark .cb span, html.dark .card-title, html.dark .sum-total b, html.dark .ls-top h1, html.dark .mi-name, html.dark .drawer-link, html.dark .fld label { color:#e5e7eb; }
html.dark .inp, html.dark .form-input, html.dark .form-control, html.dark .hsearch, html.dark .hsearch input, html.dark select { background:#11141a; color:#e5e7eb; border-color:var(--line); }
html.dark .pc-img, html.dark .cl-img, html.dark .oitem-img, html.dark .mflash-img, html.dark .deal-img, html.dark .pc-noimg { background:#22262e; }
html.dark .stepper, html.dark .stepper input { border-color:#4b5563; }
html.dark .cl-chip, html.dark .vo-mid code { background:#22262e; color:#cbd0d8; }
html.dark .ck i { background:#11141a; border-color:#4b5563; }
html.dark .mnav a { color:#9aa1ad; }
html.dark .lrow-v { color:#a5a0f0; }
html.dark a.lrow:hover, html.dark .hact-menu a:hover { background:#20242b; }
html.dark .alert.info { background:#14233f; color:#bfdbfe; border-color:#1e3a8a; }
html.dark .rail-btn { background:var(--card); color:#e5e7eb; border-color:var(--line); }
html.dark .pd-actions { background:rgba(24,27,33,.96) !important; }
html.dark .detail-info, html.dark .detail-grid, html.dark .product-tabs, html.dark .tab-content, html.dark .detail-gallery { background:var(--card) !important; color:#e5e7eb; }
/* refinements */
.cl-price, .cbar-total b, .pc-price, .deal-price { white-space:nowrap; }
.pc-tag span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:768px) {
  body:has(.apphead) .topstrip, body:has(.apphead) .site-header, body.page-account .topstrip, body.page-account .site-header { display:none; }
  body.page-account .acct { padding-top:12px; }
  .stepper { height:32px; } .stepper button { width:30px; font-size:18px; } .stepper input { width:36px; font-size:14px; }
  .cl-price { font-size:17px; }
  .cbar-total b { font-size:19px; }
  .cbar { gap:8px; }
}
@media (max-width:768px) {
  body:has(.apphead) .assure, body:has(.apphead) .site-footer, body:has(.apphead) .sell-cta, body:has(.apphead) .tsec,
  body.page-account .assure, body.page-account .site-footer, body.page-account .sell-cta { display:none; }
  body:has(.apphead) main, body.page-account main { min-height:calc(100vh - 60px); }
}
@media (max-width:768px){ html.dark body.page-index .site-header { background:#0b0b0d; } html.dark body.page-index .hsearch, html.dark body.page-index .hsearch input { background:#fff; color:#111; } }