/* Shop styles. The client's brand colours come from config/shop.json (brand.colors) and are set as CSS variables in
   each page's head; the values below are only defaults. One bold element: the home page hero is
   drawn as a laptop screen. Everything else stays white and calm so the products carry the colour. */
:root {
  --bg: #F6F9FD; --surface: #FFFFFF; --tint: #EEF5FD; --tint-2: #E1ECFA; --line: #D9E4F2;
  --ink: #0F1B2D; --muted: #55657A; --soft: #8FA3BC;
  --navy: #0B2545; --navy-2: #12355F; --blue: #1E63D6; --blue-deep: #164CA8; --cyan: #1F86BC; --sky: #CFE7FB;
  --magenta: #C2185B; --magenta-soft: #FCE7F0;
  --good: #137A4B; --good-soft: #E1F4EA; --warn: #9A5B00; --warn-soft: #FDF1DA; --bad: #B3261E; --bad-soft: #FBE5E3;
  --wa: #128C4A;
  --screen-a: #1F86BC; --screen-b: #0B2545; --chassis: #C9D6E6;
  --brand-1: #164678; --brand-2: #1F86BC; --brand-accent: #C2185B;
  --shadow-1: 0 1px 2px rgba(11, 37, 69, .06), 0 4px 14px rgba(11, 37, 69, .06);
  --shadow-2: 0 18px 50px -18px rgba(11, 37, 69, .45);
  --f-head: "Sora", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #08131F; --surface: #0E1C2C; --tint: #12253A; --tint-2: #183049; --line: #223A55;
  --ink: #E7EEF7; --muted: #A2B3C7; --soft: #6F86A1;
  --navy: #071A30; --navy-2: #0D2847; --blue: #4C8DF0; --blue-deep: #6FA4F5; --cyan: #5FB3E2; --sky: #173A57;
  --magenta: #EF5B97; --magenta-soft: #3A1426;
  --good: #5FD09A; --good-soft: #12332A; --warn: #F2B45A; --warn-soft: #3A2A10; --bad: #FF8A80; --bad-soft: #3D1715;
  --wa: #2FC56C; --chassis: #3E5470;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .25); --shadow-2: 0 18px 50px -18px rgba(0, 0, 0, .8);
  color-scheme: dark; } }

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--f-body); }
h1, h2, h3 { font-family: var(--f-head); line-height: 1.15; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0; }
a { color: var(--blue); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
.muted { color: var(--muted); }
.soft { color: var(--soft); }
.data, .num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--surface); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
main { min-height: 50vh; }
.staging { background: var(--magenta); color: #fff; text-align: center; font-size: 13px; font-weight: 700; padding: 6px; }

/* ---------- header ---------- */
header.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.brand b { display: block; font: 700 17px/1.1 var(--f-head); letter-spacing: -.01em; }
.brand small { display: block; font-size: 12px; color: var(--muted); }
.brand.light { color: #fff; }
.brand.light small { color: #A9BCD6; }
.search { flex: 1; min-width: 0; position: relative; }
.search input { width: 100%; border: 1px solid var(--line); background: var(--tint); border-radius: 12px; padding: 11px 14px 11px 40px; }
.search input:focus { background: var(--surface); border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
.search svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; stroke: var(--muted); }
.cartbtn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: var(--navy); color: #fff; text-decoration: none; font-weight: 700; }
.cartbtn:hover { background: var(--navy-2); }
.cartbtn svg { width: 19px; height: 19px; }
.badge { position: absolute; top: -7px; right: -7px; background: var(--magenta); color: #fff; font-size: 11px; font-weight: 700; min-width: 21px; height: 21px; border-radius: 11px; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--surface); }
@media (max-width: 720px) { .brand small, .brand b { display: none; } .hide-sm { display: none; } .bar { gap: 10px; } .cartbtn { padding: 10px 12px; } }

/* ---------- buttons, tags ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 12px 20px; font-weight: 700; cursor: pointer; text-decoration: none; min-height: 46px; transition: background .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); }
.btn-accent { background: var(--magenta); color: #fff; }
.btn-accent:hover { filter: brightness(.94); }
.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-deep); }
.btn-wa { background: var(--wa); color: #fff; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-sm { padding: 8px 14px; min-height: 38px; font-size: 14px; border-radius: 10px; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--tint-2); color: var(--blue-deep); }
.pill.mag { background: var(--magenta-soft); color: var(--magenta); }
.tags { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.tags li { font-size: 12.5px; font-weight: 600; color: var(--navy-2); background: var(--tint); border-radius: 6px; padding: 3px 8px; }
.maker { font-size: 13.5px; font-weight: 700; color: var(--blue-deep); }
.maker .cond { font-weight: 600; color: var(--muted); margin-left: 4px; }

/* ---------- hero: the laptop ---------- */
.hero { background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 100%); padding-block: 34px 10px; }
.laptop { max-width: 1060px; margin-inline: auto; }
.screen { background: #0A1A2E; border-radius: 26px 26px 10px 10px; padding: 14px; box-shadow: var(--shadow-2); }
.screen-in { position: relative; overflow: hidden; border-radius: 16px 16px 4px 4px; padding: clamp(28px, 5vw, 58px) clamp(20px, 5vw, 64px);
  color: #fff; background: radial-gradient(120% 140% at 85% 0%, var(--brand-2) 0%, var(--blue-deep) 32%, var(--navy) 72%); }
.screen-in::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .09) 0 28%, transparent 28% 100%); }
.screen-in > * { position: relative; z-index: 1; max-width: 680px; }
.where { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #CFE7FB; font-weight: 600; }
.where svg { width: 16px; height: 16px; }
.hero h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 800; margin-top: 14px; letter-spacing: -.035em; }
.hero .lead { margin-top: 14px; font-size: clamp(16px, 1.6vw, 18.5px); color: #DCEBFA; max-width: 56ch; }
.herosearch { display: flex; gap: 8px; margin-top: 26px; background: #fff; border-radius: 14px; padding: 6px; max-width: 600px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.herosearch input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 12px; color: #0F1B2D; font-size: 16px; }
.herosearch input:focus { outline: none; }
.herosearch:focus-within { box-shadow: 0 0 0 3px rgba(207, 231, 251, .8); }
.live { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: #CFE7FB; }
.live .dot { width: 9px; height: 9px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .2); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } }
.base { height: 16px; margin-inline: -4%; background: linear-gradient(180deg, #DCE5F0, #AEBDCF); border-radius: 0 0 18px 18px; position: relative; box-shadow: 0 12px 24px -14px rgba(11, 37, 69, .6); }
.base::before { content: ""; position: absolute; left: 50%; top: 0; translate: -50% 0; width: 16%; height: 6px; background: #93A5BB; border-radius: 0 0 8px 8px; }
.trust { list-style: none; margin: 26px auto 0; padding: 0; max-width: 1060px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 22px; }
.trust li { padding-left: 14px; border-left: 3px solid var(--blue); }
.trust b { display: block; font-size: 15px; }
.trust span { font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .trust { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (max-width: 560px) { .screen { padding: 8px; border-radius: 18px 18px 8px 8px; } .screen-in { border-radius: 12px 12px 4px 4px; } .base { height: 11px; margin-inline: -3%; }
  .herosearch .btn { padding-inline: 14px; } .trust { grid-template-columns: 1fr; } }

/* ---------- sections, catalogue ---------- */
.section { padding-block: 26px 8px; }
.sechead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 28px 0 14px; }
.sechead a { font-weight: 700; text-decoration: none; }
.sechead a:hover { text-decoration: underline; }
.cats { display: flex; gap: 8px; overflow-x: auto; padding-block: 20px 8px; scrollbar-width: none; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 16px; font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--ink); }
.chip:hover { border-color: var(--blue); color: var(--blue-deep); }
.chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.shop { display: grid; grid-template-columns: 250px 1fr; gap: 26px; padding-block: 12px 44px; }
.filters { align-self: start; position: sticky; top: 88px; display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.filters h3 { font-size: 14px; margin-bottom: 6px; }
.filters select { width: 100%; border: 1px solid var(--line); background: var(--tint); border-radius: 10px; padding: 9px 10px; }
.resultbar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; align-content: start; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); box-shadow: var(--shadow-1); }
.card .pic { background: linear-gradient(160deg, var(--tint) 0%, var(--tint-2) 100%); aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative; }
.card .pic img { width: 100%; height: 100%; object-fit: cover; }
.card .pic svg { width: 66%; height: auto; }
.card .tag { position: absolute; top: 12px; left: 12px; background: var(--magenta); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.card .body { padding: 16px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.card h3 { font-size: 17px; margin-top: 2px; }
.card .foot { display: flex; justify-content: space-between; align-items: end; margin-top: auto; padding-top: 14px; gap: 8px; }
.price { font: 800 22px/1.1 var(--f-head); letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.from { font-size: 12.5px; color: var(--muted); display: block; }
.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: 18px; padding: 34px; text-align: center; }
@media (max-width: 860px) { .shop { grid-template-columns: 1fr; } .filters { position: static; grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .filters { grid-template-columns: 1fr; } .grid { grid-template-columns: 1fr 1fr; gap: 10px; } .card .body { padding: 11px; } .card h3 { font-size: 15px; } .price { font-size: 18px; } .tags li { font-size: 11.5px; } }

/* ---------- why us + questions ---------- */
section.band { padding-block: 44px 24px; }
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 20px; }
.why div { padding-top: 14px; border-top: 3px solid var(--blue); }
.why b { display: block; margin-bottom: 4px; font-size: 16px; }
@media (max-width: 860px) { .why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .why { grid-template-columns: 1fr; } }
details.faq { border-bottom: 1px solid var(--line); padding-block: 16px; }
details.faq:first-child { margin-top: 24px; }
details.faq summary { font-weight: 700; cursor: pointer; }
details.faq p { margin-top: 8px; color: var(--muted); max-width: 70ch; }

/* ---------- product page ---------- */
.crumbs { font-size: 14px; color: var(--muted); padding-block: 18px; }
.crumbs a { color: var(--muted); }
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; padding-bottom: 44px; }
.pdp .stage { background: linear-gradient(160deg, var(--tint), var(--tint-2)); border-radius: 22px; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.pdp .stage img { width: 100%; height: 100%; object-fit: cover; }
.pdp .stage svg { width: 68%; }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.thumbs a { display: block; border: 2px solid transparent; border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: var(--tint); }
.thumbs a[aria-current="true"] { border-color: var(--blue); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin-top: 6px; }
.units { display: grid; gap: 10px; margin-top: 14px; }
.unit { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.unit:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); }
.unit .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.unit .right { text-align: right; display: grid; gap: 8px; justify-items: end; }
.batt { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.batt i { width: 34px; height: 13px; border: 1.5px solid var(--muted); border-radius: 3px; position: relative; display: inline-block; }
.batt i::after { content: ""; position: absolute; right: -4px; top: 3.5px; width: 2px; height: 4px; background: var(--muted); border-radius: 1px; }
.batt i span { position: absolute; inset: 1.5px; border-radius: 1px; background: var(--good); }
table.specs { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 10px; }
table.specs th, table.specs td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.specs th { width: 40%; color: var(--muted); font-weight: 600; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
@media (max-width: 860px) { .pdp { grid-template-columns: 1fr; gap: 22px; } .unit { grid-template-columns: 1fr; } .unit .right { justify-items: start; text-align: left; } }

/* ---------- cart, checkout ---------- */
.row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cartpage { display: grid; grid-template-columns: 1fr 350px; gap: 24px; padding-block: 8px 44px; align-items: start; }
.cartpage .items { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 4px 18px; }
@media (max-width: 860px) { .cartpage { grid-template-columns: 1fr; } }
.line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding-block: 14px; border-bottom: 1px solid var(--line); align-items: center; }
.line:last-child { border-bottom: 0; }
.line .thumb { width: 64px; height: 50px; background: var(--tint); border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
.line .thumb img { width: 100%; height: 100%; object-fit: cover; }
.line .thumb svg { width: 48px; }
.linkbtn { background: none; border: 0; color: var(--bad); cursor: pointer; font-size: 13.5px; padding: 0; margin-top: 6px; }
.qtyform input { width: 68px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; background: var(--tint); }
.rowf { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline { display: inline; }
.steps { display: flex; gap: 8px; align-items: center; padding-block: 22px 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 700; }
.steps span { padding: 6px 14px; border-radius: 999px; background: var(--tint); color: var(--muted); }
.steps span.on { background: var(--navy); color: #fff; }
.checkout { display: grid; grid-template-columns: 1fr 370px; gap: 26px; padding-bottom: 44px; align-items: start; }
.checkout form { display: grid; gap: 18px; min-width: 0; }
fieldset { border: 1px solid var(--line); border-radius: 18px; padding: 20px; margin: 0; background: var(--surface); display: grid; gap: 12px; min-width: 0; }
legend { font: 700 17px/1.2 var(--f-head); padding-inline: 6px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fields .full { grid-column: 1 / -1; }
.f label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.f input, .f select, .f textarea { width: 100%; border: 1px solid var(--line); background: var(--tint); border-radius: 10px; padding: 11px 12px; }
.f input:focus, .f select:focus, .f textarea:focus { background: var(--surface); border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
.f input[aria-invalid="true"], .f select[aria-invalid="true"] { border-color: var(--bad); }
.f .err, p.err { color: var(--bad); font-size: 13px; margin-top: 4px; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; display: flex; gap: 10px; cursor: pointer; background: var(--surface); }
.opt:has(input:checked) { border-color: var(--blue); background: var(--tint); }
.opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.opt input { margin-top: 4px; accent-color: var(--blue); }
.opt b { display: block; }
.opt small { color: var(--muted); }
.summary { position: sticky; top: 88px; display: grid; gap: 10px; }
@media (max-width: 920px) { .checkout { grid-template-columns: 1fr; } .summary { position: static; } }
@media (max-width: 520px) { .fields, .choice { grid-template-columns: 1fr; } }

/* ---------- order page ---------- */
.track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 18px; }
.track div { font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: center; }
.track div::before { content: ""; display: block; height: 6px; border-radius: 3px; background: var(--line); margin-bottom: 6px; }
.track div.done { color: var(--ink); }
.track div.done::before { background: var(--blue); }
.track div.now { color: var(--navy); }
.track div.now::before { background: var(--magenta); }
.paybox { display: grid; gap: 8px; margin: 12px 0 0; }
.payrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--tint); border-radius: 12px; padding: 11px 14px; }
.payrow dt { font-size: 13px; color: var(--muted); }
.payrow dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; text-align: right; }
.payrow.big { background: var(--navy); color: #fff; }
.payrow.big dt { color: #A9BCD6; }
.payrow.big dd { font: 800 26px/1.1 var(--f-head); }
.drop { border: 2px dashed var(--line); border-radius: 16px; padding: 24px; text-align: center; cursor: pointer; display: grid; gap: 4px; place-items: center; }
.drop:hover { border-color: var(--blue); background: var(--tint); }
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- messages, simple pages, admin ---------- */
.notice { border-radius: 12px; padding: 12px 16px; font-weight: 600; margin-block: 14px 0; }
.notice.good { background: var(--good-soft); color: var(--good); }
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice.bad { background: var(--bad-soft); color: var(--bad); }
.notice.info { background: var(--tint-2); color: var(--blue-deep); }
.prose { max-width: 72ch; padding-block: 28px 48px; display: grid; gap: 14px; }
.prose h1 { font-size: clamp(28px, 3.4vw, 36px); font-weight: 800; }
.prose h2 { font-size: 20px; margin-top: 10px; }
.prose ul { margin: 0; padding-left: 20px; }
.adminbox { max-width: 660px; margin: 30px auto; display: grid; gap: 16px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- footer, WhatsApp button ---------- */
footer.site { position: relative; background: linear-gradient(180deg, var(--navy) 0%, #081B33 100%); color: #D6E2F1; margin-top: 48px; font-size: 15px; }
footer.site::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--brand-2), var(--blue), var(--brand-accent)); }
footer.site .foot-grid { display: grid; grid-template-columns: 1.3fr 1.5fr .9fr .9fr; gap: 36px; padding-block: 52px 40px; }
footer.site h4 { margin: 4px 0 16px; font: 700 13px/1.2 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: #8FC4EE; }
footer.site a { color: #E6EEF8; text-decoration: none; }
footer.site a:hover { color: #fff; }
footer.site svg { width: 18px; height: 18px; stroke: currentColor; flex: none; }
.foot-info { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; color: #B9CAE0; line-height: 1.55; }
.foot-info li { display: flex; gap: 10px; align-items: flex-start; }
.foot-info svg { margin-top: 3px; color: #8FC4EE; }
.foot-info a { color: #8FC4EE; font-weight: 600; }
.foot-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-contact a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); transition: background .15s, border-color .15s; }
.foot-contact a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(143, 196, 238, .45); }
.foot-contact .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(31, 134, 188, .25); color: #CFE7FB; flex: none; }
.foot-contact .wa .ic { background: rgba(18, 140, 74, .3); color: #A7F0C6; }
.foot-contact small { display: block; font-size: 12px; color: #9FB4CE; }
.foot-contact b { display: block; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.foot-list { display: grid; gap: 10px; }
.foot-list a { color: #D6E2F1; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .2s, color .15s; }
.foot-list a:hover { color: #fff; background-size: 100% 1px; }
.foot-bar { border-top: 1px solid rgba(255, 255, 255, .1); }
.foot-bar .wrap { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 24px; padding-block: 18px 22px; color: #8FA6C3; font-size: 14px; }
.foot-bar nav { display: flex; gap: 20px; }
.foot-bar a { color: #B9CAE0; }
@media (max-width: 980px) { footer.site .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { footer.site .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-block: 40px 28px; } footer.site .foot-about, footer.site .foot-grid > div:nth-child(2) { grid-column: 1 / -1; } .foot-bar .wrap { padding-bottom: 96px; } }

.fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; }
.fab .open { width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(18, 140, 74, .7); }
.fab .open svg { width: 27px; height: 27px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* the featured laptop, shown on the hero's screen (desktop) */
.screen-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); column-gap: 40px; align-items: center; }
.screen-in > *:not(.screenpick) { grid-column: 1; }
.screenpick { grid-column: 2; grid-row: 1 / span 6; align-self: center; display: block; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 18px; overflow: hidden; backdrop-filter: blur(6px); transition: background .15s; }
.screenpick:hover { background: rgba(255, 255, 255, .14); }
.sp-pic { aspect-ratio: 4 / 3; background: rgba(255, 255, 255, .92); display: grid; place-items: center; }
.sp-pic img { width: 100%; height: 100%; object-fit: cover; }
.sp-pic svg { width: 70%; }
.sp-body { padding: 14px 16px 16px; display: grid; gap: 2px; }
.sp-label { font-size: 12.5px; font-weight: 700; color: #CFE7FB; }
.sp-body b { font: 700 18px/1.2 var(--f-head); }
.sp-body span:not(.sp-label):not(.sp-price) { font-size: 13.5px; color: #C7DBF0; }
.sp-price { font: 800 24px/1.1 var(--f-head); margin-top: 6px; }
@media (max-width: 900px) { .screen-in { grid-template-columns: minmax(0, 1fr); }
  /* phones and the app: the featured laptop's summary as a compact card under the search */
  .screenpick { grid-column: 1; grid-row: auto; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; margin-top: 4px; }
  .screenpick .sp-pic { width: 104px; height: 104px; aspect-ratio: auto; overflow: hidden; border-radius: 0; } .screenpick .sp-pic svg { width: 84%; } .screenpick .sp-body { min-width: 0; }
  .screenpick .sp-body { padding: 10px 12px; } .screenpick .sp-body b { font-size: 15px; } .screenpick .sp-body span:not(.sp-label):not(.sp-price) { font-size: 12.5px; }
  .screenpick .sp-price { font-size: 19px; margin-top: 2px; } }
.price { white-space: nowrap; }
.card .foot { flex-wrap: wrap; }
@media (max-width: 720px) { .brand.light b, .brand.light small { display: block; } }

/* header in the logo's colours: navy ring -> blue mark, magenta ribbon as the bottom line */
header.top { background: linear-gradient(100deg, var(--brand-1) 0%, color-mix(in srgb, var(--brand-1) 50%, var(--brand-2)) 55%, var(--brand-2) 100%); backdrop-filter: none; border-bottom: 0; box-shadow: inset 0 -3px 0 var(--brand-accent), 0 6px 18px -10px rgba(11, 37, 69, .55); }
header.top .brand { color: #fff; }
header.top .brand img { background: #fff; padding: 2px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
header.top .brand small { color: #CEE9F8; }
header.top .search input { background: #fff; border-color: transparent; color: #0F1B2D; }
header.top .search input::placeholder { color: #6B7C92; }
header.top .search input:focus { box-shadow: 0 0 0 3px rgba(206, 233, 248, .7); }
header.top .cartbtn { background: #fff; color: var(--brand-1); }
header.top .cartbtn:hover { background: #CEE9F8; }
header.top .badge { border-color: #fff; }
.filterbox { align-self: start; position: sticky; top: 88px; }
.filterbox > summary { display: none; }
.filterbox .filters { position: static; }
@media (max-width: 860px) {
  .filterbox { position: static; }
  .filterbox > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-weight: 700; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
  .filterbox > summary::-webkit-details-marker { display: none; }
  .filterbox > summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--blue); }
  .filterbox[open] > summary { border-radius: 14px 14px 0 0; border-bottom: 0; }
  .filterbox[open] > summary::after { content: "–"; }
  .filterbox[open] .filters { border-radius: 0 0 16px 16px; }
}

/* ---------- website "Call us" (settings from REDLOTUS) ---------- */
.wcall { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; justify-items: end; gap: 12px; }
.wcall.with-chat { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
.call-fab { display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer; color: #fff; font: 700 15px/1 var(--f-body); border-radius: 999px; padding: 14px 20px 14px 16px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand-1)); box-shadow: 0 10px 26px -10px rgba(11, 37, 69, .7); transition: transform .15s; }
.call-fab svg { width: 20px; height: 20px; }
.call-fab:hover { transform: translateY(-2px); }
.wcall.in-call .call-fab { background: linear-gradient(135deg, #1F8A4C, #12663A); }
.call-panel { width: min(340px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-2); }
.call-panel header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px; color: #fff; background: linear-gradient(120deg, var(--brand-1), var(--brand-2)); }
.call-panel header b { display: block; font: 700 16px/1.3 var(--f-head); }
.call-panel header small { display: block; margin-top: 3px; font-size: 13px; opacity: .85; }
.call-x { border: 0; background: rgba(255, 255, 255, .16); color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }
.call-body { display: grid; gap: 12px; padding: 16px 18px 18px; }
.call-body label { display: grid; gap: 5px; font-weight: 600; font-size: 14px; }
.call-body input { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-weight: 400; background: var(--surface); color: var(--ink); }
.call-body input[aria-invalid="true"] { border-color: var(--bad); }
.call-body .err { color: var(--bad); font-size: 13px; font-weight: 500; }
.call-body .err:empty { display: none; }
.call-body .btn svg { width: 18px; height: 18px; }
.call-steps { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--muted); display: grid; gap: 3px; }
.call-note { font-size: 12px; color: var(--muted); }
#callLive { justify-items: center; text-align: center; padding-block: 24px; }
.call-ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--blue); }
.call-ring svg { width: 28px; height: 28px; }
#callLive[data-state="ring"] .call-ring, #callLive[data-state="wait"] .call-ring { animation: pulse 1.6s ease-in-out infinite; }
#callLive[data-state="live"] .call-ring { background: var(--good); }
#callLive[data-state="error"] .call-ring { background: var(--bad); }
.call-state { font-weight: 600; }
.call-timer { font-size: 22px; font-weight: 700; }
.call-ctrls { display: flex; gap: 10px; }
.call-end { background: var(--bad); color: #fff; }
@media (max-width: 560px) { .call-fab span { display: none; } .call-fab { padding: 15px; } .wcall { right: 14px; } }

/* many identical laptops: one row, units on request */
.unitgroup { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.unitgroup > .unit { border: 0; }
.unitgroup .pick { border-top: 1px dashed var(--line); padding: 8px 14px 12px; }
.unitgroup .pick summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--blue); padding: 4px 0; }
.unitgroup .pick[open] summary { margin-bottom: 6px; }
.unit.sub { padding: 8px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.qtysel { border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px; font: inherit; background: var(--surface); color: var(--ink); }
.unit.sub .meta { margin-top: 0; }
.addrow { display: inline-flex; gap: 8px; align-items: center; }
/* photos of one exact laptop */
.unitpics { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.unitpics a { display: block; width: 64px; height: 48px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.unitpics img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unitpics a:hover { border-color: var(--blue); }
.unitpics .more { display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--blue); text-decoration: none; background: var(--tint); }
.stagecap { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--navy); background: var(--tint); border-radius: 10px; padding: 8px 12px; }
/* check my warranty */
.wcheck { margin: 18px 0 26px; }
.wform { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
@media (max-width: 700px) { .wform { grid-template-columns: 1fr; } }
.wres { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 14px; background: var(--surface); }
.wres.active { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.wres p { margin: 8px 0 0; }
.wclaims { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
/* extended warranty in the cart */
.extw { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 14px; }
.extw label { font-weight: 600; }
.extw select { border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; font: inherit; background: var(--surface); color: var(--ink); }

/* ---------- brand menu: in the top bar on computers, a sideways-scrolling row on phones ---------- */
header.top .search { flex: 1 1 200px; min-width: 160px; }

/* ---------- photos: square like marketplace listings, whole laptop visible on white ---------- */
.card .pic { aspect-ratio: 1 / 1; background: #fff; }
.card .pic img { object-fit: contain; padding: 6%; }
.pdp .stage { aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--line); }
.pdp .stage img { object-fit: contain; }
.pdp .stage .zoom { display: block; width: 100%; height: 100%; position: relative; cursor: zoom-in; }
.zoomhint { position: absolute; right: 12px; bottom: 12px; background: rgba(11, 37, 69, .72); color: #fff; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; pointer-events: none; }
.thumbs a, .unitpics a { background: #fff; }
.thumbs img, .unitpics img, .line .thumb img { object-fit: contain; }
.unitpics a { width: 56px; height: 56px; }
.line .thumb { width: 60px; height: 60px; background: #fff; border: 1px solid var(--line); }
.screenpick .sp-pic img { object-fit: contain; background: #fff; }
/* zoom view */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(6, 14, 26, .92); display: grid; grid-template-rows: auto 1fr auto; }
.lb[hidden] { display: none; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; color: #fff; font-weight: 600; }
.lb-x, .lb-nav { border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; cursor: pointer; }
.lb-x:hover, .lb-nav:hover { background: rgba(255, 255, 255, .26); }
.lb-stage { position: relative; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; }
.lb-stage img { max-width: min(96vw, 1200px); max-height: 100%; object-fit: contain; background: #fff; border-radius: 8px; cursor: zoom-in; transition: transform .2s; }
.lb-stage img.big { cursor: zoom-out; transform: scale(2); }
.lb-prev, .lb-next { position: absolute; top: 50%; translate: 0 -50%; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
.lb-strip { display: flex; gap: 8px; justify-content: center; padding: 12px; overflow-x: auto; }
.lb-strip button { flex: none; width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; }
.lb-strip button[aria-current="true"] { border-color: #fff; }
.lb-strip img { width: 100%; height: 100%; object-fit: contain; }
/* promotion: normal price struck through in red */
.pricebox { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.was { color: var(--bad); font-size: 14px; font-weight: 600; text-decoration: line-through; text-decoration-color: var(--bad); text-decoration-thickness: 2px; }
/* ---------- reviews ---------- */
.stars { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; line-height: 1; }
.stars.sm { font-size: 13px; }
.st-bg { position: relative; color: var(--line); letter-spacing: 1px; }
.st-fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: #E8A317; }
.st-n { font-size: 13px; color: var(--muted); }
.card .stars { margin: 4px 0 2px; }
.starlink { text-decoration: none; }
.reviews { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 22px; display: grid; gap: 12px; max-width: 820px; }
.revsum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rev { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.rev-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.rev p { margin-top: 6px; white-space: pre-line; }
.rev-reply { background: var(--tint); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.revform { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.revform textarea { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; background: var(--surface); color: var(--ink); }
.rate { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate label { font-size: 30px; color: var(--line); cursor: pointer; line-height: 1; }
.rate input:checked ~ label, .rate label:hover, .rate label:hover ~ label { color: #E8A317; }
.rate input:focus-visible + label { outline: 2px solid var(--blue); border-radius: 4px; }

/* ---- menu under the header: brands, Desktop, Others (all screen sizes) ---- */
.menubar { background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%); border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.menu-in { display: flex; justify-content: center; align-items: center; gap: 8px; padding-block: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.menu-in::-webkit-scrollbar { display: none; }
.menu-in a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px; letter-spacing: .005em; white-space: nowrap; scroll-snap-align: start; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.menu-in a:hover { background: var(--tint); border-color: var(--tint-2); color: var(--blue-deep); }
.menu-in a[aria-current="page"] { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 6px 16px -8px rgba(30, 99, 214, .7); }
.menu-in a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.menu-in a.mrev { color: #8A5A00; background: #FFF6DD; border-color: #F7E3A8; }
.menu-in a.mrev:hover { background: #FDEDC0; color: #6E4700; }
.menu-in a.mrev[aria-current="page"] { background: #E8A317; border-color: #E8A317; color: #1F1300; }
@media (max-width: 860px) { .menu-in { justify-content: flex-start; gap: 6px; padding: 8px 16px; } .menu-in a { padding: 7px 13px; font-size: 14px; } }

/* ---- hero text: standard, modern size ---- */
.hero h1 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -.02em; line-height: 1.18; max-width: 18ch; }
.hero .lead { font-size: clamp(15px, 1.3vw, 17px); margin-top: 10px; }

/* ---- product photos: Lazada-style size (square, about 400 px on computers; zoom up to 800 px) ---- */
.pdp { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; }
.pdp .stage { border-radius: 14px; }
.pdp .thumbs { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pdp .thumbs a { border-radius: 8px; border: 1px solid var(--line); }
.pdp .thumbs a[aria-current="true"] { border: 2px solid var(--blue); }
.lb-stage img { width: min(800px, 92vw); height: min(800px, 92vw); max-height: calc(100vh - 170px); max-width: calc(100vh - 170px); object-fit: contain; }
@media (max-width: 860px) { .pdp { grid-template-columns: 1fr; } .pdp #photo { max-width: 480px; width: 100%; margin-inline: auto; } }
.pdp h1 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }

/* header and menu stay on top together while scrolling */
.topwrap { position: sticky; top: 0; z-index: 30; }
.topwrap header.top { position: relative; top: auto; }

/* photo magnifier: point at a photo, it grows and follows the mouse (computers only) */
@media (hover: hover) and (pointer: fine) {
  .pdp .stage, .card .pic, .sp-pic, .unitpics a, .thumbs a { overflow: hidden; }
  .pdp .stage img, .card .pic img, .sp-pic img, .unitpics img { transition: transform .18s ease-out; will-change: transform; }
  .pdp .stage .zoom { cursor: crosshair; }
  .hz-on { transition: transform .05s linear !important; }
  .pdp .stage .zoom:hover .zoomhint { opacity: 0; }
}
.zoomhint { transition: opacity .15s; }
.lb-stage img.big { transition: transform .15s; }

/* language switch (EN | BM) in the header */
.langsw { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .14); flex: none; }
.langsw a { color: #fff; text-decoration: none; font-weight: 700; font-size: 12.5px; letter-spacing: .03em; padding: 6px 10px; border-radius: 999px; line-height: 1; }
.langsw a:hover { background: rgba(255, 255, 255, .18); }
.langsw a[aria-current="true"] { background: #fff; color: var(--brand-1, #164678); }
@media (max-width: 720px) { .langsw a { padding: 6px 8px; font-size: 12px; } }
/* product options (RAM, storage ...) */
.opts { border: 0; padding: 0; margin: 0; }
.opts legend { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.optrow { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; }
.opt span { display: inline-block; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 14px; background: #fff; }
.opt small { font-weight: 500; color: var(--muted, #667); }
.opt input:checked + span { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--tint); }
.opt input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
/* RAM buttons on product cards */
.ramsel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rchip { border: 1.5px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: 700; cursor: pointer; background: #fff; }
.rchip:hover { border-color: var(--navy); }
.rchip[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.rchip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* menu: small brand logos, section group; header: Promotional offer and Corporate package buttons */
.menu-in a .mlogo { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; background: #fff; }
.menu-in .msep { flex: none; align-self: center; width: 1px; height: 22px; background: var(--line); margin: 0 6px; }
.menu-in .mhead { flex: none; align-self: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #64748b); padding: 0 4px 0 6px; }
.xbtn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 12px; text-decoration: none; font-weight: 700; white-space: nowrap; color: #fff; }
.xbtn svg { width: 18px; height: 18px; }
.xbtn.promo { background: linear-gradient(135deg, #f97316, #e11d48); }
.xbtn.corp { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.xbtn:hover, .xbtn[aria-current="page"] { filter: brightness(1.08); box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
@media (max-width: 720px) { .xbtn span { display: none; } .xbtn { padding: 10px; } }
.xhead { padding-top: 22px; } .xhead h1 { font-size: 26px; } .xhead p { color: var(--muted, #64748b); margin-top: 6px; max-width: 70ch; }
.rentbox { border-left: 4px solid #6366f1; }
.corp-form { grid-template-columns: 1fr 1fr; align-items: start; }
.corp-form .wide { grid-column: 1 / -1; }
.corp-form .f { display: grid; gap: 6px; }
.corp-form button { justify-self: start; }
@media (max-width: 700px) { .corp-form { grid-template-columns: 1fr; } }

/* ---- product cards: picture edge to edge, every card's lines on the same rows, price and stock on one line ---- */
.card .pic { aspect-ratio: 1 / 1; background: #fff; }
.card .pic img { object-fit: cover; padding: 0; }
.card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: 2.6em; }   /* the full name, up to 2 lines, same height in every card */
.card .tags { flex-wrap: wrap; max-height: 25px; overflow: hidden; }   /* one row; a tag that does not fit is left out whole, never cut */
.card .tags li { white-space: nowrap; }
.card .foot { flex-wrap: nowrap; align-items: center; }
.card .pricebox { flex-wrap: nowrap; min-width: 0; }
.card .pricebox .was { font-size: 13px; white-space: nowrap; }
.card .foot .pill { flex: none; }
/* narrow cards (phones, 2 per row): the stock goes on its own line under the price, the same in every card */
@media (max-width: 600px) { .card .foot { flex-direction: column; align-items: flex-start; gap: 6px; } .card .tags { min-height: 54px; align-content: flex-start; } }

/* ---- catalogue pages: Show more, Previous / page numbers / Next, products per page ---- */
.pagerbar { display: grid; gap: 14px; justify-items: center; margin-top: 22px; }
.morebtn { min-width: 220px; }
.pagerrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; width: 100%; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pager a, .pager .cur, .pager .gap, .pager .pstep { min-width: 38px; height: 38px; padding: 0 12px; border-radius: 999px; display: inline-grid; place-items: center; font-weight: 600; font-size: 14px; text-decoration: none; }
.pager a { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.pager a:hover { border-color: var(--blue); color: var(--blue-deep); }
.pager .cur { background: var(--blue); color: #fff; }
.pager .gap { color: var(--muted); padding: 0 2px; min-width: 0; }
.pager .pstep { gap: 6px; padding: 0 16px 0 18px; height: 42px; border: 0; color: #fff; font-size: 15px; background: linear-gradient(100deg, var(--brand-2), var(--brand-1)); box-shadow: 0 8px 18px -10px var(--brand-1); transition: transform .15s, box-shadow .15s; display: inline-flex; align-items: center; }
.pager .pnext { background: linear-gradient(100deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 55%, var(--brand-2))); box-shadow: 0 8px 18px -10px var(--brand-accent); }
.pager .pprev { padding: 0 18px 0 12px; }
.pager a.pstep:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 22px -10px var(--brand-1); }
.pager .pstep svg { flex: none; }
.pager .pstep.off { opacity: .4; cursor: not-allowed; box-shadow: none; }
.perpage { font-size: 13.5px; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
.perpage a, .perpage b { padding: 4px 10px; border-radius: 999px; }
.perpage a { border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.perpage b { background: var(--navy); color: #fff; }
@media (max-width: 600px) { .pagerrow { justify-content: center; } }

/* the shop as an app: install bar (bottom) and the footer link */
.linkbtn { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
.linkbtn svg { width: 15px; height: 15px; }
.appbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; color: #fff;
  background: linear-gradient(110deg, var(--brand-1), var(--brand-2)); box-shadow: 0 16px 40px -14px rgba(11, 37, 69, .6); max-width: 560px; margin: 0 auto; }
.appbar > div { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 13.5px; } .appbar b { font-size: 15px; }
.appbar .btn { background: #fff; color: var(--brand-1); border: 0; flex: none; }
.appbar-x { background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; flex: none; }
@media (max-width: 600px) { .appbar { bottom: 84px; } }

/* header "App" link and the install page */
header.top .appbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); }
@media (max-width: 520px) { header.top .appbtn { display: none; } }
header.top .appbtn:hover { background: rgba(255,255,255,.24); } header.top .appbtn svg { width: 16px; height: 16px; } header.top .appbtn[hidden] { display: none; }
.appbar a.btn { background: #fff; color: var(--brand-1); border: 0; flex: none; text-decoration: none; }
.apppage .app-hero { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
.apppage .app-pts { margin: 14px 0; padding-left: 20px; display: grid; gap: 6px; } .apppage .app-how { margin-top: 18px; display: grid; gap: 8px; } .apppage .app-how h2 { font-size: 18px; }
.apppage .app-qr { margin: 0; padding: 16px; border-radius: 18px; background: #fff; border: 2px solid var(--brand-2); text-align: center; } .apppage .app-qr svg { width: 100%; height: auto; display: block; }
.apppage .app-qr figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); } .apppage .app-qr .data { color: var(--brand-1); font-weight: 700; }
@media (max-width: 760px) { .apppage .app-hero { grid-template-columns: 1fr; } .apppage .app-qr { max-width: 260px; } }

/* in the installed app only (phones and tablets): chat, call, WhatsApp and cart as tiles under the header, icon above the label */
.appquick { display: none; }
.apphot { display: none; }
@media (display-mode: standalone) {
  .apphot { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; text-decoration: none; color: #fff; font-size: 14px; font-weight: 600; background: linear-gradient(90deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 55%, var(--brand-1))); }
  .apphot svg { width: 16px; height: 16px; } .apphot b { font-size: 15px; letter-spacing: .02em; }
}
@media (display-mode: standalone) {
  .appquick { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 8px 10px; background: color-mix(in srgb, var(--brand-2) 8%, #fff); border-bottom: 1px solid var(--line); }
  .appquick > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; height: 56px; padding: 4px 2px; border-radius: 14px; border: 0; font: inherit; cursor: pointer; text-decoration: none; color: #fff !important; box-shadow: 0 4px 12px -6px rgba(11,37,69,.45); }
  .appquick > * span { color: #fff !important; font-size: 12.5px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .appquick svg { width: 22px; height: 22px; flex: none; }
  .appquick .q-chat { background: linear-gradient(135deg, var(--brand-2), var(--brand-1)); }
  .appquick .q-call { background: linear-gradient(135deg, var(--app-1), color-mix(in srgb, var(--app-1) 55%, var(--brand-1))); }
  .appquick .q-wa { background: linear-gradient(135deg, #25D366, #128C7E); }
  .appquick .q-cart { background: linear-gradient(135deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 60%, var(--brand-1))); }
  .appquick .me { background: linear-gradient(135deg, var(--app-2), color-mix(in srgb, var(--app-2) 60%, var(--brand-1))); }
  .appquick .me .ic { font-size: 20px; line-height: 1; }
  .appquick > [hidden] { display: none !important; }
  .appquick > *:active { transform: scale(.96); }
  #installApp, header.top .appbtn { display: none !important; }
}

/* the app: "Your details" (asked once) */
.appme { border: 0; border-radius: 18px; padding: 0; width: min(420px, 92vw); box-shadow: 0 30px 80px -20px rgba(11,37,69,.5); }
.appme::backdrop { background: rgba(11,37,69,.45); }
.appme form { display: grid; gap: 12px; padding: 22px; } .appme h2 { font-size: 20px; margin: 0; }
.appme label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; } .appme input { height: 44px; border-radius: 12px; border: 1px solid var(--line); padding: 0 12px; font: inherit; }
.appme .err { color: var(--bad, #c62828); min-height: 1em; margin: 0; font-size: 13px; }

/* the App button and the install bar: their own lively gradient (brand.colors.app1 / app2), a soft glow and shine */
:root { --app-1: var(--brand-accent); --app-2: var(--brand-2); }
header.top .appbtn { position: relative; overflow: hidden; border: 0; background: linear-gradient(115deg, var(--app-1), var(--app-2)); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--app-2) 70%, transparent), inset 0 0 0 1px rgba(255,255,255,.25); }
header.top .appbtn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); animation: appshine 3.6s ease-in-out 1.2s infinite; }
header.top .appbtn:hover { background: linear-gradient(115deg, var(--app-2), var(--app-1)); }
@keyframes appshine { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { header.top .appbtn::after { animation: none; } }
.appbar { background: linear-gradient(115deg, var(--app-1), var(--app-2)); }
.appbar .btn, .appbar a.btn { color: color-mix(in srgb, var(--app-2) 85%, #000); }
#installApp { color: color-mix(in srgb, var(--app-1) 70%, #fff); font-weight: 700; }

/* the profile page (Me) */
.mepage h1 { font-size: 26px; margin: 0 0 14px; }
.me-box { display: grid; gap: 10px; margin-bottom: 14px; } .me-box h2 { font-size: 18px; margin: 0; }
.me-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; } .me-dl dt { color: var(--muted); } .me-dl dd { margin: 0; font-weight: 700; }
.me-orders, .me-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.me-orders a, .me-links a { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--brand-1);
  background: color-mix(in srgb, var(--brand-2) 7%, #fff); border: 1px solid color-mix(in srgb, var(--brand-2) 25%, #fff); font-weight: 600; }
.me-orders a span { color: var(--brand-accent); font-weight: 600; font-size: 14px; }

/* the call keypad (the voice menu: press 1, 2, ... 0) */
.call-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px auto 4px; max-width: 240px; }
.call-keys[hidden] { display: none; }
.call-keys button { height: 46px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--brand-2) 40%, #fff); background: color-mix(in srgb, var(--brand-2) 8%, #fff);
  color: var(--brand-1); font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; }
.call-keys button:active, .call-keys button.hit { background: var(--brand-2); color: #fff; }

/* the app page: a download button that always shows, this device's steps highlighted */
.apppage .app-dl { color: #fff; font-weight: 800; padding: 12px 20px; border: 0; background: linear-gradient(135deg, var(--app-1), var(--app-2)); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--app-2) 70%, transparent); }
.apppage .app-dl:hover { filter: brightness(1.07); }
.apppage .app-have { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: #E7F8EF; color: #0F7B3F; font-weight: 600; }
.apppage .app-how [data-os].on { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--app-1) 12%, #fff); border-left: 4px solid var(--app-1); }
.apppage .app-how.flash { animation: howflash 1.4s ease; }
@keyframes howflash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-1) 45%, transparent); } }

/* dark mode (phone set to dark): text that was navy on a dark card */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tags li, :root:not([data-theme="light"]) .price, :root:not([data-theme="light"]) .track div.now,
  :root:not([data-theme="light"]) .stagecap { color: var(--ink); }
  :root:not([data-theme="light"]) .tags li { background: var(--tint-2); }
  :root:not([data-theme="light"]) .rchip { background: var(--surface); color: var(--ink); border-color: var(--line); }
  :root:not([data-theme="light"]) .rchip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
}

/* admin: automatic notifications */
.autof { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; display: grid; gap: 8px; }
.autof legend { padding: 0 6px; font-size: 14px; } .autof legend label { display: inline; } .autof legend input { margin-right: 6px; vertical-align: -2px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }
.autolist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .autolist li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.metopics { display: flex; gap: 16px; flex-wrap: wrap; font-weight: 600; } .metopics label { display: inline-flex; gap: 6px; align-items: center; }