:root {
  --ink: #1a1a1a;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-d: #d1d5db;
  --bg: #ffffff;
  --well: #f3f4f6;
  --well-d: #e8eaed;
  --accent: #e85d2a;
  --accent-d: #c94a1c;
  --accent-l: #fff1eb;
  --ok: #1f7a4c;
  --ok-l: #e8f6ee;
  --warn: #b7791f;
  --warn-l: #fff4de;
  --danger: #b2412f;
  --danger-l: #fdf0ed;
  --focus: #2563eb;
  --radius: 10px;
  --max: 1280px;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); }
a:hover { color: var(--accent-d); }
.hidden { display: none !important; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.full { width: 100%; }
.center { text-align: center; margin: 1.25rem 0; }

/* ---- Header (search-first, light) ---- */
header.site {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.bar {
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--max); margin: 0 auto;
  padding: .75rem 1.25rem;
}
.logo {
  color: var(--ink); text-decoration: none;
  font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em;
  white-space: nowrap; flex: 0 0 auto;
}
.logo span { font-weight: 500; color: var(--muted); }
.searchwrap {
  flex: 1 1 auto; display: flex; align-items: center;
  background: var(--well); border-radius: 999px;
  border: 1px solid transparent; padding: .15rem .15rem .15rem 1rem;
  max-width: 640px; margin: 0 auto;
}
.searchwrap:focus-within {
  border-color: var(--line-d);
  box-shadow: 0 0 0 3px var(--accent-l);
  background: #fff;
}
.searchwrap input {
  flex: 1; border: 0; background: transparent; font: inherit; font-size: 1rem;
  padding: .55rem .4rem; outline: none; min-width: 0; color: var(--ink);
}
.searchwrap input::placeholder { color: #9ca3af; }
.searchbtn {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 0; background: var(--accent); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.searchbtn:hover { background: var(--accent-d); }
.searchbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.listlink {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--ink); text-decoration: none; font-weight: 700;
  padding: .4rem .55rem; border-radius: 8px; flex: 0 0 auto;
}
.listlink:hover { background: var(--well); }
.count {
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: 0 .45rem; font-size: .8rem; min-width: 1.35rem; text-align: center;
}
.mainnav {
  display: flex; gap: 1.4rem; align-items: center;
  max-width: var(--max); margin: 0 auto;
  padding: 0 1.25rem .65rem;
  border-top: 1px solid transparent;
}
.mainnav a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.mainnav a:hover, .mainnav a:focus-visible { border-bottom-color: var(--ink); }
.mainnav .ownnav { margin-left: auto; color: var(--muted); font-weight: 500; font-size: .88rem; }
.mainnav .ownnav:hover { color: var(--accent-d); border-bottom-color: var(--accent); }

/* ---- Buttons ---- */
.btn {
  font: inherit; font-weight: 700; border: 0; border-radius: 8px;
  padding: .65rem 1.1rem; background: var(--ink); color: #fff;
  cursor: pointer; text-decoration: none; display: inline-block; text-align: center;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-d); }
.btn.secondary { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line-d); }
.btn.ghost:hover { background: var(--well); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid #e6c3bd; padding: .45rem .75rem; font-size: .9rem; }
.btn:focus-visible, .linkbtn:focus-visible, .iconbtn:focus-visible, .tile:focus-visible,
.btile:focus-visible, .card-p:focus-visible, .sw:focus-visible, .sz:focus-visible,
.cchip:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.linkbtn {
  background: none; border: 0; color: var(--ink); font: inherit; font-weight: 600;
  cursor: pointer; padding: 0; margin-bottom: .75rem; text-decoration: underline;
  text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--accent-d); }
.iconbtn {
  background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: var(--ink); padding: .25rem .5rem; border-radius: 6px;
}

/* ---- Layout ---- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 1.25rem 1.25rem 3.5rem; }
.intro { max-width: 42rem; margin: .25rem 0 1.5rem; }
.intro h1 { margin: 0 0 .4rem; font-size: 1.75rem; letter-spacing: -.02em; }
.intro p { margin: 0; color: var(--muted); font-size: 1.02rem; }
.sect {
  font-size: 1.05rem; margin: 1.75rem 0 .85rem; font-weight: 800;
  letter-spacing: -.01em; color: var(--ink);
}
.sectrow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sectrow .sect { margin-bottom: .85rem; }
.pagetitle { margin: .15rem 0 .2rem; font-size: 1.85rem; letter-spacing: -.02em; }
.resultcount { margin: 0 0 1rem; color: var(--muted); font-size: .95rem; }
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: .75rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-d); text-decoration: underline; }

/* ---- Home tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .7rem; }
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; cursor: pointer; text-align: left; font: inherit;
}
.tile:hover { border-color: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.tile strong { display: block; font-size: .98rem; }
.tile span { color: var(--muted); font-size: .8rem; }
.brandrow {
  display: flex; gap: .65rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: .15rem .1rem .8rem; -webkit-overflow-scrolling: touch;
}
.brandrow .btile { flex: 0 0 148px; scroll-snap-align: start; }
.brandrow::-webkit-scrollbar { height: 6px; }
.brandrow::-webkit-scrollbar-thumb { background: var(--line-d); border-radius: 8px; }
.brandgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .65rem; }
.btile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: .7rem; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; min-height: 92px;
}
.btile:hover { border-color: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.btile img { max-width: 108px; max-height: 38px; object-fit: contain; }
.btile b { font-size: .82rem; text-align: center; font-weight: 600; }

/* ---- Results layout ---- */
.browse-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.filters-rail {
  position: sticky; top: 7.5rem; max-height: calc(100vh - 8rem); overflow: auto;
  padding-right: .25rem;
}
.filters-title { font-size: .95rem; margin: 0 0 .85rem; text-transform: uppercase; letter-spacing: .04em; }
.filter-block { margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.filter-block h3 { margin: 0 0 .5rem; font-size: .88rem; font-weight: 700; }
.filter-block select, .sortwrap select, .drawer-body select {
  width: 100%; font: inherit; font-size: .95rem; padding: .5rem .55rem;
  border: 1px solid var(--line-d); border-radius: 8px; background: #fff; color: var(--ink);
}
.colorlist { display: flex; flex-wrap: wrap; gap: .35rem; }
.cchip {
  border: 1px solid var(--line-d); background: #fff; border-radius: 999px;
  padding: .22rem .65rem .22rem .3rem; font-size: .8rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem; color: var(--ink);
}
.cchip i {
  width: 14px; height: 14px; border-radius: 50%; display: inline-block;
  border: 1px solid rgba(0,0,0,.18);
}
.cchip.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--well-d); font-weight: 700; }

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .65rem;
  margin-bottom: .85rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line);
}
.filters-open { display: none; align-items: center; gap: .4rem; }
.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 auto; min-width: 0; }
.achip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--well); border: 1px solid var(--line); border-radius: 6px;
  padding: .25rem .55rem; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.achip:hover { border-color: var(--ink); }
.sortwrap { display: flex; align-items: center; gap: .4rem; margin-left: auto; font-size: .88rem; color: var(--muted); }
.sortwrap select { width: auto; min-width: 9rem; }
.subchips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.subchip {
  font: inherit; font-weight: 600; font-size: .88rem;
  background: var(--well); border: 1px solid var(--line-d); border-radius: 8px;
  padding: .55rem .9rem; cursor: pointer; color: var(--ink);
}
.subchip:hover, .subchip.active { border-color: var(--ink); background: #fff; }

/* ---- Product grid & cards ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.1rem .85rem;
}
.card-p {
  background: #fff; border: 0; border-radius: 0; overflow: visible;
  cursor: pointer; text-align: left; font: inherit; padding: 0;
  display: flex; flex-direction: column; color: inherit;
}
.card-p:hover .ph { background: var(--well-d); }
.card-p .ph {
  aspect-ratio: 1 / 1; background: var(--well); display: flex;
  align-items: center; justify-content: center; position: relative; overflow: hidden;
  border-radius: 4px;
}
.card-p .ph img {
  position: absolute; inset: 0; margin: auto; max-width: 90%; max-height: 90%;
  object-fit: contain;
}
.card-p .b { padding: .65rem .1rem .3rem; flex: 1; }
.card-p .st { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.15; }
.card-p .pr { font-weight: 600; font-size: .95rem; margin-top: .15rem; }
.card-p .br { font-size: .78rem; color: var(--muted); margin-top: .2rem; font-weight: 500; }
.card-p .nm { font-size: .9rem; font-weight: 600; margin-top: .1rem; color: #2d333a; line-height: 1.3; }
.card-p .swrow {
  display: flex; flex-wrap: wrap; gap: 3px; margin-top: .45rem; align-items: center;
}
.card-p .csw {
  width: 14px; height: 14px; border-radius: 2px; border: 1px solid rgba(0,0,0,.15);
  background: #ddd center/cover no-repeat; flex: 0 0 auto;
}
.card-p .more { font-size: .75rem; color: var(--muted); font-weight: 600; margin-left: 2px; }
.card-p .szr { font-size: .78rem; color: var(--muted); margin-top: .35rem; }

/* ---- Detail / PDP ---- */
.detail {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2rem; margin-bottom: 1.5rem;
}
.gallery .photo {
  background: var(--well); border-radius: 6px; min-height: 360px;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.gallery .photo img { max-width: 100%; max-height: 520px; object-fit: contain; }
.thumbs { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }
.thumb {
  width: 64px; height: 64px; border-radius: 4px; border: 2px solid transparent;
  background: var(--well) center/contain no-repeat; cursor: pointer; padding: 0;
}
.thumb.active { border-color: var(--ink); }
.dbrand {
  display: inline-block; font-size: .85rem; font-weight: 600; color: var(--muted);
  text-decoration: none; text-transform: none; letter-spacing: 0; margin-bottom: .25rem;
}
.dbrand:hover { color: var(--accent-d); text-decoration: underline; }
.info h1 { margin: 0 0 .4rem; font-size: 1.55rem; letter-spacing: -.02em; line-height: 1.2; }
.dmeta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; margin-bottom: .9rem; }
.dstyle { font-weight: 800; font-size: 1.05rem; }
.dprice { font-weight: 700; font-size: 1.1rem; }
.label { font-size: .88rem; font-weight: 700; margin: .85rem 0 .4rem; }
.swatches {
  display: flex; flex-wrap: wrap; gap: .4rem;
  max-height: 220px; overflow: auto; padding: 2px;
}
.sw {
  width: 36px; height: 36px; border-radius: 4px; border: 2px solid #fff;
  outline: 1px solid var(--line-d); cursor: pointer;
  background: #eee center/cover no-repeat; padding: 0;
}
.sw.active { outline: 2px solid var(--ink); outline-offset: 1px; }
.sizes { display: flex; flex-wrap: wrap; gap: .4rem; }
.sz {
  font: inherit; border: 1px solid var(--line-d); background: #fff; border-radius: 8px;
  padding: .45rem .7rem; cursor: pointer; min-width: 3.4rem; text-align: center; line-height: 1.2;
}
.sz .szn { display: block; }
.sz > * { pointer-events: none; }  /* taps always target the button itself */
.sz small { display: block; font-size: .68rem; color: var(--muted); font-weight: 500; white-space: nowrap; }
.sz small.szq { color: var(--ok); font-weight: 700; }
.sz small.szq.low { color: var(--warn); }
.sz small.szq.out { color: var(--danger); }
.sz small.szq.muted { color: var(--muted); font-weight: 500; }
/* Placeholder while a size's count loads: same height as the filled text, soft pulse, no spinner. */
.sz small.ph { position: relative; color: transparent; }
.sz small.szq.ph::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 2.4em; height: .5em; margin: -.25em 0 0 -1.2em;
  border-radius: 4px; background: var(--well-d); opacity: .9;
}
.sz small.szq.ph.busy::after { animation: szpulse 1.1s ease-in-out infinite; }
@keyframes szpulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sz small.szq.ph.busy::after { animation: none; } }
.sz.active { border-color: var(--ink); background: var(--well); font-weight: 700; }
.sz:disabled { opacity: .4; cursor: not-allowed; }
.sz.szout { opacity: .55; background: var(--well); }
.sz.szout .szn { text-decoration: line-through; }
.stockwarn { display: block; margin-top: .3rem; font-size: .85rem; color: var(--warn); font-weight: 600; }
@media (max-width: 520px) {
  .sizes { gap: .35rem; }
  .sz { min-width: 0; flex: 0 1 calc(25% - .27rem); padding: .45rem .3rem; }
  .sz small { font-size: .7rem; }
}
.qtyrow { display: flex; align-items: center; gap: .65rem; margin: 1rem 0 .5rem; }
.stepper {
  display: inline-flex; align-items: stretch; border: 1px solid var(--line-d);
  border-radius: 10px; overflow: hidden;
}
.stepper button {
  font: inherit; font-size: 1.25rem; font-weight: 700; width: 2.75rem;
  border: 0; background: var(--well); color: var(--ink); cursor: pointer;
}
.stepper input[type=number] {
  width: 4.5rem !important; border: 0 !important; border-radius: 0 !important;
  text-align: center; font-size: 1.05rem; padding: .55rem .3rem !important;
  -moz-appearance: textfield; font: inherit; background: #fff;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.status { min-height: 1.5rem; margin: .5rem 0 .85rem; }
.pill {
  display: inline-block; border-radius: 999px; padding: .05rem .55rem;
  font-size: .78rem; font-weight: 700; background: var(--ok-l); color: var(--ok);
}
.pill.low { background: var(--warn-l); color: var(--warn); }
.pill.out { background: var(--danger-l); color: var(--danger); }
.toast {
  display: inline-block; margin-top: .75rem; background: var(--accent-l);
  color: var(--accent-d); border: 1px solid #f0c4b0; border-radius: 8px;
  padding: .5rem .75rem; font-weight: 600; font-size: .9rem;
}
.toast a { color: var(--accent-d); font-weight: 800; }
.descblock { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.desc { margin: 0; color: var(--muted); font-size: .95rem; }
.related { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ---- Filter drawer (mobile) ---- */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50;
}
.filter-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(100%, 400px); max-width: 100%;
  background: #fff; z-index: 60; display: flex; flex-direction: column;
  box-shadow: -8px 0 28px rgba(0,0,0,.12);
}
.filter-drawer[hidden] { display: none !important; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--line);
}
.drawer-head h2 { margin: 0; font-size: 1.15rem; }
.drawer-body { flex: 1; overflow: auto; padding: 1rem 1.1rem; }
.drawer-foot {
  display: flex; gap: .6rem; padding: .85rem 1.1rem;
  border-top: 1px solid var(--line); background: #fff;
}
.drawer-foot .btn { flex: 1; }

/* ---- Bag page ---- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 1.1rem 1.25rem; margin-top: 1rem;
}
.card h2 { margin: 0 0 .7rem; font-size: 1.15rem; }
.bagtitle { margin: 0 0 .8rem; font-size: 1.5rem; }
.empty { color: var(--muted); }
.line { border: 1px solid var(--line); border-radius: 10px; padding: .75rem .85rem; margin-bottom: .55rem; }
.line .top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.line .meta { color: var(--muted); font-size: .88rem; }
.line .price { font-weight: 800; white-space: nowrap; text-align: right; }
.line .row { display: flex; gap: .6rem; align-items: center; margin-top: .45rem; flex-wrap: wrap; }
.line input[type=number] { width: 5.5rem; padding: .35rem .5rem; font: inherit; border: 1px solid var(--line-d); border-radius: 8px; }
.check { display: flex; gap: .55rem; align-items: flex-start; margin: .7rem 0; font-size: .9rem; }
.check input { margin-top: .2rem; }
.line .check { background: var(--warn-l); border-radius: 8px; padding: .45rem .55rem; margin: .5rem 0 0; }
.totals { border-top: 1px solid var(--line); padding-top: .6rem; }
.locked { color: var(--muted); font-style: italic; }
.tline { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.05rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.packet {
  white-space: pre-wrap; background: var(--well); border: 1px solid var(--line);
  border-radius: 8px; padding: .75rem; font-size: .82rem; max-height: 320px; overflow: auto;
}
.ownbox { margin-top: .9rem; background: var(--well); border-radius: 10px; padding: .6rem .75rem; }
.line .reorder {
  font-size: .8rem; color: #6b4e16; background: #fff8e8; border: 1px dashed #e5c98f;
  border-radius: 6px; padding: .35rem .5rem; margin-top: .45rem;
}
.foot { text-align: center; color: var(--muted); font-size: .82rem; padding: 1.25rem; }
.foot a { color: var(--muted); }

/* send form */
.sendform .frow { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.sendform .ffield { margin-bottom: .75rem; }
.sendform label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.sendform input[type=text],
.sendform input[type=email],
.sendform input[type=tel],
.sendform textarea {
  width: 100%; resize: vertical; box-sizing: border-box; font: inherit; padding: .6rem .7rem;
  border: 1px solid var(--line-d); border-radius: 8px; background: #fff;
}
.sendform input:focus, .sendform textarea:focus { outline: 2px solid var(--accent-l); border-color: var(--accent); }
.sendform input[aria-invalid="true"] { border-color: var(--danger); }
.send-msg { font-size: .95rem; margin: .7rem 0 0; }
.send-msg:empty { display: none; }
.send-msg.ok { color: var(--ok); background: var(--ok-l); border: 1px solid #bcdccb; border-radius: 8px; padding: .7rem .8rem; font-weight: 600; }
.send-msg.err { color: var(--danger); background: var(--danger-l); border: 1px solid #e6c3bd; border-radius: 8px; padding: .7rem .8rem; }
.send-msg.busy { color: var(--muted); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .browse-layout { grid-template-columns: 1fr; }
  .filters-rail { display: none; }
  .filters-open { display: inline-flex; }
  .sortwrap { display: none; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail { grid-template-columns: 1fr; gap: 1.25rem; }
}
@media (max-width: 720px) {
  .bar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo bag"
      "search search";
    gap: .45rem .55rem;
    padding: .55rem .75rem;
    align-items: center;
  }
  .logo { grid-area: logo; font-size: 1.05rem; }
  .listlink { grid-area: bag; justify-self: end; }
  .listlabel { display: none; }
  .searchwrap {
    grid-area: search;
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: .75rem;
  }
  .searchwrap input { font-size: 16px; padding: .5rem .3rem; }
  .searchbtn { width: 2.4rem; height: 2.4rem; }
  .mainnav { padding: 0 .75rem .5rem; gap: 1rem; overflow-x: auto; }
  .mainnav .ownnav { display: none; }
  .wrap { padding: .85rem .75rem 2.75rem; }
  .intro h1 { font-size: 1.35rem; }
  .pagetitle { font-size: 1.4rem; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem .55rem; }
  .card-p .st { font-size: 1.05rem; }
  .card-p .nm { font-size: .82rem; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brandrow .btile { flex-basis: 128px; }
  .gallery .photo { min-height: 260px; }
  #addBtn { width: 100%; }
  .toast { display: block; }
  .actions .btn, .actions a.btn { flex: 1 1 100%; text-align: center; padding: .85rem 1rem; }
  .sendform .frow { grid-template-columns: 1fr; gap: 0; }
  .sendform input[type=text],
  .sendform input[type=email],
  .sendform input[type=tel] { font-size: 16px; }
  .line .top { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .logo span { display: none; }
}

/* Small cross-link to the other quote sections (same bag) */
.xsell { font-size: .82rem; color: var(--muted); margin: .4rem 0 .6rem; }
.xsell a { color: var(--accent-d); font-weight: 700; }

/* 2026-10-13: sale tag, add hint, swatch placeholder */
.saletag { display: inline-block; background: #b42318; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; border-radius: 3px; padding: .05rem .35rem; vertical-align: middle; }
.regprice { color: var(--muted); font-weight: 400; }
.salenote { font-size: .8rem; color: var(--muted); margin: .3rem 0 0; line-height: 1.35; }
.addhint { font-size: .85rem; color: #b42318; margin: .35rem 0 0; min-height: 1.1em; text-align: center; font-weight: 600; }
.addhint:empty { display: none; }
#addBtn.notready { opacity: .6; }
.nudge { animation: epsnudge .45s ease; }
@keyframes epsnudge { 0%,100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.sw.swph, .card-p .csw.swph { background-image: linear-gradient(110deg, #ececec 30%, #f7f7f7 50%, #ececec 70%); background-size: 200% 100%; animation: epsshim 1.2s linear infinite; }
@keyframes epsshim { to { background-position: -200% 0; } }
.card-p { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.searchbtn { touch-action: manipulation; }
.itemsline { font-weight: 700; margin: .6rem 0; font-size: .95rem; }

.line.grp .grpmath { font-weight: 600; margin-top: .25rem; font-size: .9rem; }
.szgridA { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin: .6rem 0; }
.szcellA { border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: .4rem .5rem; }
.szheadA { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: .3rem; gap: .3rem; }
@media (max-width: 420px) { .szgridA { grid-template-columns: repeat(2, 1fr); } }

/* Camo category: ring the camo colorways on mixed-color styles */
.sw.sw-camo, .card-p .csw.sw-camo { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5b6b2f; }

/* Category menu (header "Categories") */
.catmenu { position: fixed; z-index: 70; width: 300px; max-height: min(70vh, 560px); overflow: auto; background: #fff;
  border: 1px solid var(--line-d); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: .4rem; }
.catmenu[hidden], .catmenu-bk[hidden] { display: none; }
.catmenu-h { display: flex; align-items: center; justify-content: space-between; padding: .35rem .55rem .45rem; border-bottom: 1px solid var(--line); margin-bottom: .25rem; }
.catmenu-h strong { font-size: .95rem; }
.catmenu-x { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); padding: .1rem .4rem; border-radius: 8px; }
.catmenu-x:hover, .catmenu-x:focus-visible { background: var(--well, #f3f4f6); color: var(--ink); }
.catmenu-list { list-style: none; margin: 0; padding: 0; }
.catmenu-i { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: .75rem; border: 0; background: none;
  font: inherit; font-weight: 600; font-size: .93rem; color: var(--ink); text-align: left; padding: .55rem .6rem; border-radius: 8px; cursor: pointer; }
.catmenu-i small { color: var(--muted); font-weight: 500; font-size: .8rem; white-space: nowrap; }
.catmenu-i:hover, .catmenu-i:focus-visible { background: var(--well, #f3f4f6); outline: none; }
.catmenu-i:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.catmenu-i.active { color: var(--accent-d, #c2410c); }
.catmenu-empty { padding: .6rem; color: var(--muted); font-size: .9rem; }
.catmenu-bk { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 69; }
.catmenu.sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 75vh; border-radius: 16px 16px 0 0;
  padding: .5rem .6rem calc(.8rem + env(safe-area-inset-bottom)); }
.catmenu.sheet .catmenu-i { padding: .8rem .6rem; font-size: 1rem; }
body.catmenu-lock { overflow: hidden; }
.mainnav a[aria-expanded="true"] { border-bottom-color: var(--ink); }