/* PS TACTICAL storefront — base theme, layout, cart drawer and product pop-up */

/* PS palette: black + gold. Header/nav stay dark in both themes (like the reference). */
:root {
  --gold: #FF5C00; --gold-hi: #FF7A2E; --gold-ink: #0B0B0C; --neon: #EEFF00;
  --red: #C2452D; --green: #5E8F3A;
  --bar: #0B0B0C; --bar-2: #141518; --bar-line: #23252A; --bar-text: #F2F2F0; --ink: #0B0B0C;
  --bg: #F4F4F2; --surf: #FFFFFF; --surf-2: #ECECE8; --line: #DEDED9;
  --text: #141518; --muted: #6E7076;
  --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 6px 18px rgb(0 0 0 / .06);
  --head: Kanit, "Noto Sans Thai", system-ui, sans-serif;
  --body: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bar: #0B0B0C; --bar-line: #23252A; --bar-text: #F2F2F0; --bg: #0B0B0C; --surf: #141518; --surf-2: #1B1D21; --line: #2A2C31;
    --text: #F2F2F0; --muted: #8E9098; --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bar: #0B0B0C; --bar-line: #23252A; --bar-text: #F2F2F0; --bg: #0B0B0C; --surf: #141518; --surf-2: #1B1D21; --line: #2A2C31;
  --text: #F2F2F0; --muted: #8E9098; --shadow: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); transition: background .2s, color .2s; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3 { font-family: var(--head); margin: 0; }


/* announcement */
.announce { background: var(--bar-2); color: #F2F2F0; font-size: 13px; }
.announce .wrap { display: flex; justify-content: center; gap: 24px; padding-block: 8px; flex-wrap: wrap; }
.announce b { color: var(--gold); }

/* header */
.hdr { background: var(--bar); color: var(--bar-text); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--bar-line); }
.hdr__row { display: flex; align-items: center; gap: 20px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo { height: 54px; width: auto; display: block; }
.logo--dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo--light { display: none; } :root:not([data-theme="light"]) .logo--dark { display: block; } }
:root[data-theme="dark"] .logo--light { display: none; }
:root[data-theme="dark"] .logo--dark { display: block; }
.ftr .logo { height: 72px; margin-bottom: 12px; }
.brand__mark { width: 42px; height: 42px; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); font: 700 18px var(--head); clip-path: polygon(0 0,100% 0,100% 75%,50% 100%,0 75%); }
.brand__name { font: 700 19px/1 var(--head); letter-spacing: .06em; }
.brand__sub { font-size: 10px; letter-spacing: .2em; color: var(--gold); }
.search { flex: 1; display: flex; max-width: 640px; }
.search input { flex: 1; min-width: 0; border: 1px solid var(--bar-line); border-right: 0; padding: 11px 14px; font: inherit; border-radius: 4px 0 0 4px; background: #fff; color: #141518; }
.search button { border: 0; background: var(--gold); color: var(--gold-ink); padding: 0 18px; border-radius: 0 4px 4px 0; }
.hdr__acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icon-btn { background: none; border: 1px solid transparent; color: var(--bar-text); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.icon-btn:hover { border-color: var(--bar-line); color: var(--gold); }
.icon-btn .count { position: absolute; top: 2px; right: 0; background: var(--gold); color: var(--gold-ink); font: 700 10px var(--head); border-radius: 9px; padding: 1px 5px; }
.lang { font: 600 13px var(--head); color: var(--bar-text); background: none; border: 1px solid var(--bar-line); border-radius: 4px; padding: 6px 10px; }
.theme-ico-dark { display: none; }
:root[data-theme="dark"] .theme-ico-dark { display: block; }
:root[data-theme="dark"] .theme-ico-light { display: none; }

/* category nav */
.nav { background: var(--bar); border-top: 1px solid var(--bar-line); }
.nav a.hot { color: var(--gold); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scrollbar-width: none; }
.nav a { display: block; white-space: nowrap; padding: 12px 14px; color: var(--bar-text); font: 500 14px var(--head); border-bottom: 2px solid transparent; }
.nav a:hover, .nav a.on { color: var(--gold); border-bottom-color: var(--gold); }
.nav a.hot { color: var(--gold); }

/* hero */
.hero { padding-top: 20px; display: grid; grid-template-columns: 2.2fr 1fr; gap: 16px; }
.slide { position: relative; border-radius: 8px; overflow: hidden; min-height: 380px; background: radial-gradient(circle at 75% 40%, #4a1d05 0, #111 55%), #0B0B0C; color: #F2F2F0; display: flex; align-items: center; padding: 48px; }
.slide::after { content: "PS"; position: absolute; right: 6%; bottom: -8%; font: 700 min(38vw, 340px)/1 var(--head); color: rgb(255 92 0 / .09); pointer-events: none; }
.slide__tag { display: inline-block; background: var(--neon); color: #0B0B0C; font: 600 12px var(--head); padding: 4px 10px; border-radius: 3px; letter-spacing: .08em; }
.slide h1 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.1; margin: 14px 0 10px; }
.slide h1 span { color: var(--gold); }
.slide p { color: #C9CBD0; max-width: 460px; margin: 0 0 24px; }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--gold-ink); font: 600 15px var(--head); padding: 12px 24px; border-radius: 4px; border: 0; }
.btn:hover { background: var(--gold-hi); }
.btn--ghost { background: transparent; color: #F2F2F0; border: 1px solid #4A4C52; margin-left: 8px; }
.dots { position: absolute; bottom: 18px; left: 48px; display: flex; gap: 6px; z-index: 1; }
.dots i { width: 24px; height: 3px; background: #4A4C52; }
.dots i.on { background: var(--gold); }
.side { display: grid; gap: 16px; }
.promo { border-radius: 8px; padding: 24px; color: #F2F2F0; display: flex; flex-direction: column; justify-content: flex-end; min-height: 182px; position: relative; overflow: hidden; }
.promo--a { background: linear-gradient(135deg, #5A6B3B, #1f2614); }
.promo--b { background: linear-gradient(135deg, #8a3322, #2a0f0a); }
.promo small { font: 600 12px var(--head); letter-spacing: .1em; opacity: .8; }
.promo h3 { font-size: 24px; margin: 4px 0; }
.promo .more { color: var(--neon); font: 600 14px var(--head); }

.slide__img { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: 42%; max-height: 86%; object-fit: contain; z-index: 1; filter: drop-shadow(0 20px 30px rgb(0 0 0 / .6)); background: #fff; border-radius: 8px; padding: 12px; }
.slide > div:first-child { max-width: 52%; }
.promo__img { position: absolute; right: 12px; top: 12px; width: 44%; height: calc(100% - 24px); object-fit: contain; background: #fff; border-radius: 6px; padding: 6px; }
.promo small, .promo h3, .promo .more { position: relative; z-index: 1; max-width: 52%; }
@media (max-width: 640px) { .slide > div:first-child { max-width: none; } .slide__img { position: relative; transform: none; right: auto; top: auto; width: 100%; max-height: 220px; margin-top: 20px; } .slide { flex-direction: column; align-items: stretch; } }
/* usp strip */
.usp { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surf); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.usp div { display: flex; gap: 12px; align-items: center; padding: 16px 20px; border-right: 1px solid var(--line); }
.usp div:last-child { border-right: 0; }
.usp svg { color: var(--gold); flex-shrink: 0; }
.usp b { display: block; font: 600 14px var(--head); }
.usp span { font-size: 12px; color: var(--muted); }

/* sections */
.sect { padding-top: 48px; }
.sect__hd { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sect__hd h2 { font-size: 26px; position: relative; padding-left: 14px; }
.sect__hd h2::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 4px; background: var(--gold); }
.sect__hd a { color: var(--muted); font: 500 14px var(--head); }
.sect__hd a:hover { color: var(--gold); }

/* category tiles */
.cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cat { background: var(--surf); border: 1px solid var(--line); border-radius: 8px; padding: 20px 12px; text-align: center; transition: border-color .15s, transform .15s; box-shadow: var(--shadow); }
.cat:hover { border-color: var(--gold); transform: translateY(-2px); }
.cat__ico { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; background: var(--surf-2); display: grid; place-items: center; color: var(--gold); font: 700 16px var(--head); }
.cat b { display: block; font: 500 14px var(--head); }
.cat span { font-size: 12px; color: var(--muted); }

/* tabs + products */
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.tabs button { background: var(--surf); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 6px 16px; font: 500 14px var(--head); white-space: nowrap; }
.tabs button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.card { background: var(--surf); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: border-color .15s; }
.card:hover { border-color: var(--gold); }
.card__img { aspect-ratio: 1; background: var(--surf-2); position: relative; display: grid; place-items: center; }
.card__img svg { width: 45%; opacity: .35; color: var(--text); }
.swatches { position: absolute; bottom: 10px; left: 10px; display: flex; gap: 4px; }
.swatches i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--surf); box-shadow: 0 0 0 1px var(--line); }
.badge { position: absolute; top: 10px; left: 10px; font: 600 11px var(--head); padding: 3px 8px; border-radius: 3px; letter-spacing: .04em; }
.badge--sale { background: var(--red); color: #fff; }
.badge--best { background: var(--gold); color: var(--gold-ink); }
.card__body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card__brand { font: 600 11px var(--head); letter-spacing: .1em; color: var(--muted); }
.card__name { font: 500 15px/1.35 var(--head); min-height: 2.7em; }
.card__rate { font-size: 12px; color: var(--muted); }
.card__rate b { color: var(--gold); }
.card__price { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; gap: 8px; }
.card__price b { font: 600 19px var(--head); }
.card__price s { color: var(--muted); font-size: 13px; }
.card__price em { font-style: normal; color: var(--red); font: 600 12px var(--head); }
.card__add { margin-top: 10px; width: 100%; background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 9px; font: 500 14px var(--head); }
.card__add:hover { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }

.card__img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; background: #fff; }
.stock { position: absolute; top: 10px; right: 10px; background: var(--green); color: #fff; font: 600 11px var(--head); padding: 3px 8px; border-radius: 3px; z-index: 1; }
.badge { z-index: 1; }
.card__price .ask { color: var(--gold); font-size: 16px; }
.card__add { text-align: center; }
.card:hover .card__add { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.cat__ico { overflow: hidden; background: #fff; border: 1px solid var(--line); }
.cat__ico img { width: 100%; height: 100%; object-fit: contain; }
.brands div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; }
.brands img { max-width: 80%; max-height: 44px; object-fit: contain; border-radius: 4px; }
.brands small { font: 400 11px var(--body); letter-spacing: 0; }
.tabs { max-width: 100%; }
/* wide banner */
.band { margin-top: 48px; border-radius: 8px; background: var(--ink); color: #F2F2F0; padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-left: 6px solid var(--gold); }
.band h2 { font-size: clamp(22px, 3vw, 32px); }
.band p { color: #B4B6BC; margin: 6px 0 0; }

/* brands */
.brands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.brands div { background: var(--surf); border: 1px solid var(--line); border-radius: 8px; padding: 22px 8px; text-align: center; font: 700 14px var(--head); letter-spacing: .08em; color: var(--muted); }
.brands div:hover { color: var(--text); border-color: var(--gold); }

/* footer */
.ftr { margin-top: 64px; background: var(--ink); color: #B4B6BC; padding: 48px 0 24px; font-size: 14px; }
.ftr__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.ftr h3 { color: #F2F2F0; font: 600 15px var(--head); margin: 0 0 12px; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ftr a:hover { color: var(--gold); }
.ftr__bottom { border-top: 1px solid #23252A; margin-top: 32px; padding-top: 18px; font-size: 12px; color: #6E7076; }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.ftr__share a { color: #B4B6BC; margin-left: 10px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .side { grid-template-columns: 1fr 1fr; }
  .usp { grid-template-columns: 1fr 1fr; }
  .usp div:nth-child(2) { border-right: 0; }
  .usp div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .brands { grid-template-columns: repeat(3, 1fr); }
  .ftr__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hdr__row { flex-wrap: wrap; gap: 12px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .brand__sub, .lang { display: none; }
  .slide { padding: 28px 20px 48px; min-height: 320px; }
  .dots { left: 20px; }
  .btn--ghost { margin: 10px 0 0; }
  .side { grid-template-columns: 1fr; }
  .promo { min-height: 140px; }
  .usp { grid-template-columns: 1fr; }
  .usp div { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .cats { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card__name { font-size: 14px; }
  .band { padding: 28px 20px; }
  .brands { grid-template-columns: repeat(2, 1fr); }
  .ftr__cols { grid-template-columns: 1fr; }
}

/* Generated tactical campaign banner */
.slide::after { display: none; }
.slide .slide__img { inset: 0; width: 100%; height: 100%; max-height: none; transform: none; object-fit: cover; object-position: center; padding: 0; margin: 0; border-radius: 0; background: #0B0B0C; filter: none; z-index: 0; pointer-events: none; }
.slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.48) 48%, rgba(0,0,0,.04) 80%); z-index: 1; pointer-events: none; }
.slide > div:first-child { max-width: 60%; }
@media (max-width: 640px) {
  .slide { min-height: 540px; justify-content: flex-start; }
  .slide .slide__img { position: absolute; object-position: 68% bottom; }
  .slide::before { background: linear-gradient(180deg, rgba(0,0,0,.93), rgba(0,0,0,.75) 40%, rgba(0,0,0,.04) 75%); }
  .slide > div:first-child { max-width: 100%; }
}


/* ---- layout and catalogue ---- */
/* Preview-only customer experience. */
:root { --muted: #62656c; }
:root[data-theme="dark"] { --muted: #abb0ba; }
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--muted:#abb0ba;}}
html { scroll-behavior: smooth; scroll-padding-top: 160px; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.skip-link { position:fixed;top:-80px;left:20px;z-index:100;background:var(--gold);color:#111;padding:14px; }
.skip-link:focus { top:10px; }
.wrap { max-width:1360px;padding-inline:28px; }
.announce .wrap { justify-content:space-between;font-size:12px;letter-spacing:.04em; }
.hdr__row { gap:28px; }
.logo { height:60px; }
.search { max-width:720px; }
.search input { border-radius:10px 0 0 10px;min-height:48px; }
.search button { border-radius:0 10px 10px 0; }
.icon-btn { width:44px;height:44px; }
.header-help { font-size:13px;white-space:nowrap;padding:12px; }
.contact-btn { border:1px solid #45464c;border-radius:8px;padding:12px 15px;font-size:14px;white-space:nowrap; }
.nav a { padding:12px 20px;min-height:44px; }
.hero { grid-template-columns:1fr;padding-top:28px; }
.slide { min-height:460px;padding:56px;border-radius:18px; }
.slide h1 { font-size:clamp(36px,4.6vw,64px);line-height:1.2; }
.slide p { font-size:16px;line-height:1.8;max-width:400px; }
.slide > div:first-child { max-width:55%; }
.slide__tag { background:transparent;color:#ded2c8;padding:0;font-size:11px;letter-spacing:.12em; }
.btn { border-radius:8px;min-height:46px;justify-content:center; }
.usp { grid-template-columns:repeat(3,1fr);box-shadow:none;border-radius:14px;margin-top:20px; }
.usp div { padding:18px 24px; }
.usp p { margin:0; }
.usp .step { display:block;color:var(--muted);font:600 14px var(--head); }
.filter-title .lbl,.filter-help .lbl { font-weight:700; }
.sect { padding-top:48px; }
.sect__hd h2 { font-size:28px;padding-left:0; }
.sect__hd h2::before { display:none; }
.cats { grid-template-columns:repeat(6,minmax(0,1fr));gap:10px; }
.cat { box-shadow:none;border-radius:12px;padding:16px 8px; }
.cat__ico { width:72px;height:72px;border-radius:12px; }
.cat b { line-height:1.5; }
.eyebrow { color:var(--muted);font-size:11px;letter-spacing:.15em; }
.section-note { color:var(--muted);font-size:14px;margin:8px 0 0; }
.catalog-layout { display:grid;grid-template-columns:235px minmax(0,1fr);gap:28px;align-items:start; }
.filters { background:var(--surf);border:1px solid var(--line);padding:20px;border-radius:14px;display:grid;gap:12px; }
.filter-title { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px; }
.text-btn { background:none;border:0;color:var(--text);text-decoration:underline;font-size:12px;min-height:44px; }
select { width:100%;padding:12px 10px;min-height:46px;background:var(--surf);color:var(--text);border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px; }
.filters label { font-size:14px; }
.check-label { display:flex;align-items:center;gap:8px;min-height:44px; }
input[type=checkbox] { width:18px;height:18px;accent-color:var(--gold); }
.filter-help { border-top:1px solid var(--line);padding-top:20px;margin-top:8px;font-size:13px;line-height:1.7; }
.filter-help p { color:var(--muted); }
.filter-help a { text-decoration:underline;text-underline-offset:4px; }
.results-toolbar { display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px;font-size:14px; }
.results-toolbar p { margin:0; }
.results-toolbar label { display:flex;align-items:center;gap:10px;white-space:nowrap; }
.results-toolbar select { width:auto;max-width:220px; }
#activeQuery:not(:empty) { margin-bottom:18px;padding:12px 16px;border:1px solid var(--line);border-radius:8px;overflow-wrap:anywhere; }
.grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.card { border-radius:12px;box-shadow:none;transition:transform .2s,border-color .2s;min-width:0; }
.card:hover { transform:translateY(-3px); }
.card__img { overflow:hidden; }
.card__img img { position:absolute;inset:0;padding:20px; }
.card__body { padding:16px;gap:7px; }
.card__name { line-height:1.6;overflow-wrap:anywhere; }
.card__rate { overflow-wrap:anywhere; }
.card__price .ask { color:var(--text);font-size:14px; }
.card__add { border-radius:7px;min-height:44px; }
.stock { background:#235d3c;font-size:10px; }
.load-more { text-align:center;margin-top:28px; }
.empty-state { padding:48px 24px;text-align:center;border:1px dashed var(--line);border-radius:12px; }
.empty-state p { color:var(--muted);line-height:1.8; }
.band { border-radius:16px; }
.brands { grid-template-columns:repeat(6,minmax(0,1fr)); }
.brand-tile { min-width:0;background:var(--surf);border:1px solid var(--line);border-radius:10px;min-height:100px;padding:16px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font:500 13px var(--head);text-align:center; }
.brand-tile:hover { border-color:var(--gold); }
.brand-tile img { max-width:90%;height:36px;object-fit:contain; }
.brand-tile small { color:var(--muted); }
.about { padding-top:48px; }
.about p { color:var(--muted);line-height:1.8;max-width:800px;margin:0 0 14px; }
.faq { padding-top:48px; }
.faq details { border-bottom:1px solid var(--line);padding:18px 0; }
.faq summary { cursor:pointer;font-weight:500;min-height:28px; }
.faq p { color:var(--muted);line-height:1.8;max-width:800px; }
.ftr__cols a { display:inline-block;padding-block:5px; }
.mobile-nav { display:none; }
@media(max-width:1000px){.header-help{display:none}.cats{grid-template-columns:repeat(4,minmax(0,1fr))}.catalog-layout{grid-template-columns:200px minmax(0,1fr);gap:18px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.usp div:nth-child(2){border-right:1px solid var(--line)}.usp div:nth-child(-n+2){border-bottom:0}.brands{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:640px){
  html{scroll-padding-top:190px}.wrap{padding-inline:16px}.announce{display:none}.hdr__row{gap:10px;padding-block:10px}.logo{height:44px}.hdr__acts{gap:4px}.contact-btn{padding:10px;font-size:12px}.search input{font-size:14px}.nav a{padding:10px 16px;font-size:13px}.hero{padding-top:16px}.slide{min-height:470px;padding:28px 24px}.slide > div:first-child{max-width:100%}.slide h1{font-size:36px}.slide p{font-size:14px;max-width:280px}.slide__tag{font-size:9px}.slide .btn--ghost{margin:8px 0 0 8px}.slide .btn{padding:11px 16px}.usp{grid-template-columns:1fr;margin-top:16px}.usp div{padding:12px 16px;border-right:0!important;border-bottom:1px solid var(--line)!important}.usp div:last-child{border-bottom:0!important}.usp span{font-size:12px}.step{font-size:20px}.sect{padding-top:32px}.sect__hd h2{font-size:24px}.sect__hd{gap:8px}.cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cat{padding:12px 6px}.cat b{font-size:12px}.cat__ico{width:58px;height:58px}.catalog-layout{grid-template-columns:1fr;gap:18px}.filters{grid-template-columns:1fr 1fr;padding:16px;gap:8px 12px}.filter-title,.check-label{grid-column:1/-1}.filters label[for=categoryFilter]{grid-column:1;grid-row:2}.filters label[for=brandFilter]{grid-column:2;grid-row:2}#categoryFilter{grid-column:1;grid-row:3}#brandFilter{grid-column:2;grid-row:3}.filter-help{display:none}.results-toolbar{align-items:flex-start;flex-direction:column;gap:10px}.results-toolbar label{width:100%;justify-content:space-between}.grid{gap:10px}.card__body{padding:12px;gap:6px}.card__name{font-size:13px}.card__brand{font-size:10px}.card__rate{font-size:11px}.card__img img{padding:12px}.stock{top:8px;right:6px;padding:3px 6px}.card__add{font-size:12px}.brands{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.brand-tile{font-size:11px}.ftr{padding-bottom:90px}.ftr__cols{grid-template-columns:1fr 1fr;gap:24px}.ftr__cols>div:first-child{grid-column:1/-1}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--surf);border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom));justify-content:space-around;box-shadow:0 -3px 20px #0001}.mobile-nav a{padding:12px 14px;font-size:13px;border-radius:8px}.mobile-nav a:last-child{background:var(--gold);color:#111}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
/* Contact chooser shared by desktop and mobile. */
.contact-btn { background:transparent;color:var(--bar-text);font-family:inherit; }
.mobile-nav button { border:0;padding:12px 14px;font:inherit;font-size:13px;border-radius:8px;background:var(--gold);color:#111; }
body.contact-open { overflow:hidden; }
.contact-dialog { width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;padding:26px;border:1px solid var(--line);border-radius:20px;background:var(--surf);color:var(--text);box-shadow:0 24px 80px #0006; }
.contact-dialog::backdrop { background:rgb(0 0 0 / .68);backdrop-filter:blur(4px); }
.contact-dialog__head { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.contact-dialog h2 { font-size:23px; }
.contact-dialog__head button { flex-shrink:0;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--surf-2);color:var(--text); }
.contact-dialog p { color:var(--muted);font-size:14px;line-height:1.8;margin:12px 0 22px; }
.contact-options { display:grid;gap:12px; }
.contact-options a { display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:15px;text-decoration:none; }
.contact-options a:hover { border-color:var(--gold);background:var(--surf-2); }
.contact-options a>span:last-child { margin-left:auto; }
.contact-options strong,.contact-options small { display:block; }
.contact-options strong { font:500 16px var(--head); }
.contact-options small { font-size:12px;color:var(--muted);margin-top:3px; }
.channel-icon { width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;color:#fff;font-weight:700; }
.channel-icon--facebook { background:#0866ff;font:700 32px Arial; }
.channel-icon--line { background:#087d37;font:700 11px Arial; }
.channel-icon--phone { background:var(--surf-2);color:var(--text);font-size:26px; }
@media(max-width:640px){.contact-dialog{padding:20px}.contact-dialog h2{font-size:21px}}

/* search: typo banner + suggestions when nothing matches */
.search-fix { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; background: var(--surf-2); border-left: 4px solid var(--gold); font-size: 14px; }
.search-fix span { color: var(--muted); }
.sug-line { margin: 14px 0 4px; }
.chip-btn { background: var(--gold); color: var(--gold-ink); border: 0; border-radius: 999px; padding: 6px 14px; font: 600 14px var(--head); margin-left: 6px; }
.sug-h { font: 600 15px var(--head); margin: 18px 0 10px; text-align: left; }
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; text-align: left; margin-bottom: 12px; }
.mini { display: flex; gap: 10px; align-items: center; background: var(--surf); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.mini:hover { border-color: var(--gold); }
.mini img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 6px; flex-shrink: 0; }
.mini span { font: 500 13px/1.35 var(--head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
#emptySuggest + .btn { margin-top: 16px; }

/* ---- enquiry cart ---- */
/* Enquiry cart drawer */
.cart-btn .count[hidden] { display: none; }
.cart-btn.bump { animation: qbump .4s; }
@keyframes qbump { 40% { transform: scale(1.25); } }

.qcart { position: fixed; inset: 0; z-index: 60; }
.qcart[hidden] { display: none; }
.qcart__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .55); }
.qcart__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--bg); color: var(--text); display: flex; flex-direction: column; box-shadow: -8px 0 30px rgb(0 0 0 / .3); }
.qcart__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--bar); color: var(--bar-text); }
.qcart__head h2 { font-size: 18px; }
.qcart__x { background: none; border: 0; color: inherit; font-size: 18px; width: 36px; height: 36px; }
.qcart__lines { flex: 1; overflow-y: auto; padding: 8px 18px; }
.qcart__empty { text-align: center; color: var(--muted); padding: 48px 0; }
.qcart__empty small { font-size: 13px; }
.qline { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.qline__img { background: #fff; border: 1px solid var(--line); border-radius: 6px; aspect-ratio: 1; overflow: hidden; }
.qline__img img { width: 100%; height: 100%; object-fit: contain; }
.qline__name { font: 500 14px/1.35 var(--head); display: block; }
.qline__name:hover { color: var(--gold); }
.qline__meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.qline__row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.qline__qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 4px; }
.qline__qty button { width: 30px; height: 30px; border: 0; background: none; color: var(--text); font-size: 16px; }
.qline__qty span { min-width: 28px; text-align: center; font-size: 14px; }
.qline__rm { background: none; border: 0; color: var(--muted); font-size: 13px; text-decoration: underline; }
.qline__rm:hover { color: var(--red); }
.qcart__foot { padding: 14px 18px 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; background: var(--surf); }
.qcart__foot[hidden] { display: none; }
.qcart__foot .btn { justify-content: center; width: 100%; margin: 0; }
.qcart__note { font-size: 13px; color: var(--muted); margin: 0; }
.qcart__clear { background: none; border: 0; color: var(--muted); font-size: 13px; }
.qcart__copy p { font-size: 13px; margin: 0 0 6px; }
.qcart__copy textarea { width: 100%; font: 13px var(--body); background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 8px; margin-bottom: 8px; }
.btn--line { background: #06C755; color: #fff; }
.btn--line:hover { background: #05b04b; color: #fff; }
.btn--outline { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn--outline:hover { background: transparent; border-color: var(--gold); color: var(--gold); }

.qtoast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); background: #141518; color: #F2F2F0; border-left: 4px solid var(--gold); padding: 10px 18px; border-radius: 6px; font-size: 14px; opacity: 0; pointer-events: none; transition: .25s; z-index: 70; box-shadow: 0 6px 20px rgb(0 0 0 / .3); }
.qtoast.on { opacity: 1; transform: translate(-50%, 0); }

/* quick-add on product cards */
.card-wrap { position: relative; display: flex; }
.card-wrap > .card { flex: 1; }
.card__quick { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--gold); color: var(--gold-ink); border: 0; border-radius: 4px; font: 600 12px var(--head); padding: 5px 10px; box-shadow: 0 2px 6px rgb(0 0 0 / .25); }
.card__quick:hover { background: var(--gold-hi); }

/* ---- product pop-up ---- */
/* Product pop-up — old dialog layout, new theme */
.qv { width: min(980px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surf); color: var(--text); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 24px 60px rgb(0 0 0 / .45); }
.qv::backdrop { background: rgb(0 0 0 / .6); backdrop-filter: blur(3px); }
.qv[open] { animation: qvIn .22s ease-out; }
@keyframes qvIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }

.qv__top { position: sticky; top: 0; z-index: 3; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 12px 0; height: 0; overflow: visible; }
.qv__ic { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgb(11 11 12 / .72); color: #fff; display: grid; place-items: center; font-size: 15px; backdrop-filter: blur(4px); }
.qv__ic:hover { background: var(--gold); color: var(--gold-ink); }

.qv__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; padding: 24px; }
.qv__main { position: relative; aspect-ratio: 1; background: #fff; border-radius: 12px; overflow: hidden; }
.qv__main img { width: 100%; height: 100%; object-fit: contain; padding: 18px; display: block; }
.qv__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 8px; border: 0; background: rgb(11 11 12 / .65); color: #fff; font-size: 22px; line-height: 1; }
.qv__nav:hover { background: var(--gold); color: var(--gold-ink); }
.qv__nav--l { left: 10px; }
.qv__nav--r { right: 10px; }
.qv__count { position: absolute; right: 10px; bottom: 10px; background: rgb(11 11 12 / .7); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 6px; }
.qv__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; margin-top: 10px; }
.qv__th { padding: 0; aspect-ratio: 1; border: 2px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.qv__th.on, .qv__th:hover { border-color: var(--gold); }
.qv__th img { width: 100%; height: 100%; object-fit: contain; }

.qv__info { display: flex; flex-direction: column; }
.qv__row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.qv__brand { font: 600 13px var(--head); letter-spacing: .12em; color: var(--gold); }
.qv__sku { color: var(--muted); letter-spacing: .04em; }
.qv h2 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; margin: 8px 0 6px; }
.qv__price { font: 600 20px var(--head); color: var(--gold); margin-bottom: 6px; }
.qv__muted { color: var(--muted); font-size: 13px; margin: 8px 0; }
.qv__opt { margin-top: 14px; }
.qv__label { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.qv__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qv__chip { background: var(--surf-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; font: 500 14px var(--body); transition: .15s; }
.qv__chip:hover { border-color: var(--gold); }
.qv__chip.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 600; }
.qv__chip.off { opacity: .45; text-decoration: line-through; }
.qv__stock { margin-top: 14px; font-size: 13px; color: var(--green); font-weight: 600; }
.qv__stock.is-out { color: var(--red); }
.qv__qty { display: flex; align-items: center; gap: 14px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.qv__qbox { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; }
.qv__qbox button { width: 38px; height: 38px; border: 0; background: none; color: var(--text); font-size: 18px; }
.qv__qbox span { min-width: 32px; text-align: center; color: var(--text); font-weight: 600; }
.qv__add { margin-top: 18px; width: 100%; padding: 15px; border: 0; border-radius: 10px; background: #06C755; color: #fff; font: 600 17px var(--head); box-shadow: 0 6px 18px rgb(6 199 85 / .25); }
.qv__add:hover { background: #05b04b; }
.qv__sec { margin-top: 10px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text); font: 500 15px var(--head); display: flex; align-items: center; justify-content: center; gap: 8px; }
.qv__sec:hover { border-color: var(--gold); color: var(--gold); }
.qv__specs { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.qv__specs h3 { font-size: 16px; color: var(--gold); margin-bottom: 10px; }
.qv__specs table { width: 100%; border-collapse: collapse; font-size: 14px; }
.qv__specs th, .qv__specs td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.qv__specs th { width: 38%; color: var(--muted); font-weight: 500; }
.qv__desc { margin-top: 14px; font-size: 14px; line-height: 1.7; max-height: 180px; overflow: hidden; position: relative; overflow-wrap: anywhere; }
.qv__desc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, var(--surf)); }
.qv__desc.is-open { max-height: none; }
.qv__desc.is-open::after { display: none; }
.qv__desc img { max-width: 100%; height: auto; }
.qv__desc table { display: block; max-width: 100%; overflow-x: auto; }
.qv__more { margin-top: 8px; background: none; border: 0; color: var(--gold); font: 500 14px var(--head); padding: 0; }

@media (max-width: 760px) {
  .qv { width: 100%; max-width: 100%; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .qv__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px 16px 28px; }
}
.rec__price { display:block; font: 600 16px var(--head); color: var(--gold); margin: 4px 0; }

/* ---------- sets: the headline category ---------- */
.cats .cat--sets { grid-column: span 2; position: relative; border: 2px solid var(--gold); background: linear-gradient(135deg, var(--surf) 55%, color-mix(in srgb, var(--gold) 14%, var(--surf))); }
.cat--sets .cat__ico { width: 96px; height: 96px; }
.cat--sets b { font-size: 17px; }
.cat__tag { position: absolute; top: 10px; left: 10px; background: var(--gold); color: #111; font: 700 11px var(--head); font-style: normal; padding: 3px 8px; border-radius: 999px; letter-spacing: .05em; }
.nav-sets { color: var(--gold) !important; font-weight: 700; }
.grp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.grp-chip { border: 1px solid var(--line); background: var(--surf); border-radius: 999px; padding: 6px 14px; font: 500 13px var(--head); cursor: pointer; color: inherit; }
.grp-chip small { color: var(--muted); margin-left: 4px; }
.grp-chip.on { border-color: var(--gold); background: var(--gold); color: #111; }
.grp-chip.on small { color: #111; }
.qv__set { margin: 14px 0; }
.qv__set ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.qv__set a { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; font-size: 13px; }
.qv__set a:hover { border-color: var(--gold); }
.qv__set img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 6px; flex: none; }
.qv__set span { flex: 1; }
.qv__set b { color: var(--gold); }
.qv__sw { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 4px 0; }
.qv__sw i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); flex: none; }
.qv__setopt { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

/* ---- merged from shop-extras.css (one request instead of two) ---- */
/* ================================================================
   Carried over from the old storefront: account, wishlist, product
   finder, language switch. Old behaviour, new theme tokens.
   ================================================================ */

/* page scroll lock while the account dialog (account.js) is open */
body.is-locked { overflow: hidden; }

/* language switch + header icons */
.langsw { display: flex; border: 1px solid var(--bar-line); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.langsw button { background: none; border: 0; color: var(--bar-text); font: 600 12px var(--head); padding: 8px 10px; min-height: 40px; opacity: .65; }
.langsw button[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); opacity: 1; }
.icon-btn { color: var(--bar-text); }
.icon-btn.is-on { color: var(--gold); }
.icon-btn .count[hidden] { display: none; }

/* wishlist heart on cards and in the product pop-up */
.card__wish { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .92); color: #6E7076; display: grid; place-items: center; box-shadow: 0 1px 4px rgb(0 0 0 / .18); }
.card__wish:hover { color: #E0413A; }
.card__wish.is-on { color: #E0413A; }
.card__wish.is-on svg, .qv__wish.is-on svg { fill: currentColor; }
.card-wrap .stock { top: auto; bottom: 10px; right: 10px; }
.qv__wish.is-on { color: #E0413A; border-color: #E0413A; }

/* account dialog (account.js renders into #acctBody) */
.acct { position: fixed; inset: 0; z-index: 90; }
.acct__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .6); backdrop-filter: blur(3px); }
.acct__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--surf); color: var(--text); overflow-y: auto; padding: 28px 24px 32px; box-shadow: -8px 0 30px rgb(0 0 0 / .3); }
.acct__x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surf-2); color: var(--text); font-size: 20px; }
.acct__x:hover { background: var(--gold); color: var(--gold-ink); }
.acct__h { margin: 0 0 6px; font-size: 22px; }
.acct__lede { margin: 0 0 20px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.acct__sub { margin: 24px 0 12px; font: 600 15px var(--head); color: var(--gold); }
.acct__swap { margin: 18px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.acct__staff { margin: 16px 0 0; font-size: 12px; text-align: center; }
.acct__staff a { color: var(--muted); }
.acct__staff a:hover { color: var(--gold); text-decoration: underline; }
.acct__pdpa { margin: 8px 0 14px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.acct__empty { margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; font-size: 14px; color: var(--muted); }
.acct__empty span { display: block; margin-top: 5px; font-size: 12px; }
.acct__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.afield { margin-bottom: 15px; }
.afield__l { display: block; font-size: 13px; margin-bottom: 6px; }
.afield__i { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 15px; }
.afield__i:focus { border-color: var(--gold); outline: none; }
.afield__h { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.acheck { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.acheck input { flex: none; margin-top: 2px; }
.abtn { padding: 11px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--surf-2); color: var(--text); font: 500 14px var(--head); min-height: 44px; }
.abtn:hover:not(:disabled) { border-color: var(--gold); }
.abtn:disabled { opacity: .55; cursor: not-allowed; }
.abtn--gold { width: 100%; background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 600; margin-top: 4px; }
.abtn--gold:hover:not(:disabled) { background: var(--gold-hi); }
.abtn--danger { color: var(--red); background: transparent; }
.abtn--danger.is-armed { background: var(--red); color: #fff; border-color: var(--red); }
.alink { background: 0; border: 0; padding: 0; color: var(--gold); font: inherit; text-decoration: underline; }
.aalert { padding: 10px 13px; border-radius: 8px; font-size: 13px; margin: 0 0 16px; line-height: 1.5; }
.aalert--err { background: rgb(194 69 45 / .12); border: 1px solid rgb(194 69 45 / .4); color: var(--red); }
.aalert--ok { background: rgb(94 143 58 / .12); border: 1px solid rgb(94 143 58 / .4); color: var(--green); }
.awish { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.awish__row { display: flex; align-items: center; gap: 8px; }
.awish__go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); text-align: left; }
.awish__go:hover { border-color: var(--gold); }
.awish__go img, .awish__noimg { width: 48px; height: 48px; flex: none; object-fit: contain; background: #fff; border-radius: 6px; }
.awish__txt { min-width: 0; }
.awish__n { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.awish__b { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.awish__x { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); font-size: 18px; }
.awish__x:hover { color: var(--red); border-color: var(--red); }

/* product finder: 2 questions, then picks */
.finder { margin-top: 48px; background: var(--surf); border: 1px solid var(--line); border-radius: 18px; padding: 32px; }
.finder__hd { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: end; margin-bottom: 18px; }
.finder__hd h2 { font-size: 26px; }
.finder__hd p { color: var(--muted); margin: 6px 0 0; font-size: 14px; }
.finder__steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: 13px; }
.finder__steps li { padding: 6px 12px; border-radius: 999px; background: var(--surf-2); color: var(--muted); }
.finder__steps li.on { background: var(--gold); color: var(--gold-ink); font-weight: 600; }
.finder__steps li.done { color: var(--text); }
.finder__q { font-size: 19px; margin: 6px 0 4px; }
.finder__hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.finder__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.fopt { text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); min-height: 64px; }
.fopt:hover { border-color: var(--gold); }
.fopt b { display: block; font: 500 15px var(--head); }
.fopt small { color: var(--muted); font-size: 12px; }
.finder__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.finder__sum { color: var(--muted); font-size: 14px; margin: 0; }
.finder__recs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.rec { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.rec__img { aspect-ratio: 4/3; background: #fff; display: block; }
.rec__img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.rec__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.rec__lab { align-self: flex-start; font: 600 11px var(--head); padding: 3px 8px; border-radius: 4px; background: var(--gold); color: var(--gold-ink); letter-spacing: .04em; }
.rec__name { font: 500 15px/1.35 var(--head); }
.rec__why { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.rec__acts { margin-top: auto; display: flex; gap: 8px; padding-top: 6px; }
.rec__acts .btn { flex: 1; min-height: 40px; padding: 8px 10px; font-size: 14px; margin: 0; }
.finder__foot { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .finder { padding: 22px 16px; } .finder__recs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  /* phone header: logo + icons on one row; "talk to us" lives in the bottom bar */
  .header-help, .hdr__acts .contact-btn { display: none; }
  .hdr__row { flex-wrap: wrap; column-gap: 8px; row-gap: 10px; }
  .hdr__acts { gap: 0; margin-left: auto; }
  .hdr .logo { height: 46px; }
  .hdr .icon-btn { width: 38px; height: 38px; }
  .langsw { margin-right: 4px; }
  .langsw button { padding: 6px 8px; min-height: 34px; }
}

/* articles strip (latest from /blog) */
.arts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.art { display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: border-color .2s, transform .2s; }
.art:hover { border-color: var(--gold); transform: translateY(-3px); }
.art__img { aspect-ratio: 16/10; background: #fff; }
.art__img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.art__body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.art__tag { align-self: flex-start; font: 600 11px var(--head); letter-spacing: .06em; color: var(--gold); }
.art__t { font: 500 15px/1.4 var(--head); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.art__go { margin-top: auto; font-size: 13px; color: var(--muted); }
.art:hover .art__go { color: var(--gold); }
@media (max-width: 900px) { .arts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .arts { grid-template-columns: minmax(0, 1fr); } .art { flex-direction: row; } .art__img { width: 110px; flex: none; aspect-ratio: 1; } }

/* ---------- loading placeholders (index.html; replaced by shop.js on first render) ---------- */
.sk { pointer-events: none; }
.sk .cat__ico, .sk b, .sk span, .sk .card__img, .sk__txt i { background: var(--surf-2); animation: skPulse 1.2s ease-in-out infinite alternate; }
.sk b { height: 14px; width: 70%; margin: 0 auto 6px; border-radius: 4px; }
.sk span { display: block; height: 10px; width: 40%; margin: 0 auto; border-radius: 4px; }
.sk .cat__ico { border-color: transparent; }
.sk__txt { padding: 14px; display: grid; gap: 8px; }
.sk__txt i { display: block; height: 12px; border-radius: 4px; }
.sk__txt i:nth-child(1) { width: 35%; }
.sk__txt i:nth-child(3) { width: 55%; }
@keyframes skPulse { to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .sk * { animation: none !important; } }