/* shop.css — catalog, category & product page styling (builds on styles+components) */

/* ── breadcrumbs ────────────────────────────────────────────────────────── */
.crumbs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top: 26px; font-size:13.5px; }
.crumbs a{ color: var(--ink-faint); }
.crumbs a:hover{ color: var(--accent); }
.crumbs span[aria-current]{ color: var(--ink); font-weight:600; }
.crumb-sep{ color: var(--ink-faint); display:inline-flex; opacity:.6; }

/* ── catalog header ─────────────────────────────────────────────────────── */
.cat-head{ padding: 22px 0 8px; }
.cat-head .kicker{ margin-bottom:14px; }
.cat-head h1{ font-size: clamp(34px,5vw,60px); text-transform:uppercase; }
.cat-head p{ max-width: 54ch; margin: 16px 0 0; color: var(--ink-soft); font-size:16px; line-height:1.55; }

/* category quick chips */
.cat-chips{ display:flex; flex-wrap:wrap; gap:10px; margin: 26px 0 0; }
.cat-chip{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:999px; border:1px solid var(--line-2); background: var(--surface); color: var(--ink-soft); font-weight:600; font-size:14px; transition: all .18s; }
.cat-chip:hover{ border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.cat-chip.active{ background: var(--ink); border-color: var(--ink); color: var(--bg); }
.cat-chip small{ font-family: var(--font-mono); opacity:.6; font-size:11px; }

/* ── catalog layout ─────────────────────────────────────────────────────── */
.shop-layout{ display:grid; grid-template-columns: 264px 1fr; gap: clamp(20px,3vw,44px); align-items:start; padding-block: 34px clamp(56px,7vw,96px); }

.sidebar{ position: sticky; top: 92px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 8px 20px 20px; }
.filter-group{ padding: 18px 0; border-bottom:1px solid var(--line); }
.filter-group:last-child{ border-bottom:none; }
.filter-group h4{ font-family: var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:.04em; margin: 0 0 14px; }
.checkrow{ display:flex; align-items:center; gap:10px; padding:7px 0; cursor:pointer; font-size:14.5px; color: var(--ink-soft); }
.checkrow:hover{ color: var(--ink); }
.checkrow input{ width:18px; height:18px; accent-color: var(--accent); cursor:pointer; }
.checkrow .ct{ margin-left:auto; font-family: var(--font-mono); font-size:11.5px; color: var(--ink-faint); }
.checkrow input:checked ~ .cl{ color: var(--ink); font-weight:600; }
.price-row{ display:flex; align-items:center; gap:10px; }
.price-row input{ width:100%; height:42px; border:1.5px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg); padding:0 10px; font-family:inherit; font-size:14px; color:var(--ink); }
.price-row input:focus{ outline:none; border-color: var(--accent); }
.price-row span{ color: var(--ink-faint); }
.sidebar-reset{ width:100%; margin-top:18px; }

/* sort bar */
.sort-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.sort-count{ font-size:14px; color: var(--ink-soft); }
.sort-count b{ color: var(--ink); }
.sort-right{ display:flex; align-items:center; gap:10px; }
.sort-right label{ font-size:13.5px; color: var(--ink-faint); }
.sort-sel{ height:44px; border:1.5px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); padding: 0 36px 0 14px; font-family:inherit; font-weight:600; font-size:14px; cursor:pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='gray' d='M0 0h12L6 8z'/></svg>"); background-repeat:no-repeat; background-position: right 12px center; }
.sort-sel:focus{ outline:none; border-color: var(--accent); }

.shop-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.6vw,22px); }
.shop-grid.cols2{ grid-template-columns: repeat(2,1fr); }
.prod-oos{ position:absolute; top:12px; left:12px; background: var(--surface); color: var(--ink-soft); border:1px solid var(--line-2); font-family:var(--font-mono); font-size:11px; padding:5px 9px; border-radius:7px; }
.prod-name a:hover{ color: var(--accent); }
.shop-empty{ grid-column:1/-1; text-align:center; padding: 60px 0; color: var(--ink-soft); }

.load-more{ display:flex; justify-content:center; margin-top: 34px; }

/* filters toggle (mobile) */
.filters-toggle{ display:none; }
@media (max-width: 900px){
  .shop-layout{ grid-template-columns: 1fr; }
  .filters-toggle{ display:inline-flex; }
  .sidebar{ position:fixed; top:0; left:0; bottom:0; width: min(86vw,330px); z-index:120; border-radius:0; overflow-y:auto; transform: translateX(-102%); transition: transform .3s; box-shadow: var(--shadow-lg); }
  .sidebar.open{ transform:none; }
  .sidebar-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 0 4px; position:sticky; top:0; background:var(--surface); }
  .shop-grid{ grid-template-columns: repeat(2,1fr); }
}
.sidebar-head{ display:none; }
@media (max-width: 540px){ .shop-grid, .shop-grid.cols2{ grid-template-columns: 1fr; } .sort-bar{ flex-direction:column; align-items:flex-start; } }

/* ── category hero ──────────────────────────────────────────────────────── */
.cathero{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px,4vw,56px); align-items:center; padding-block: 14px clamp(30px,4vw,52px); }
.cathero h1{ font-size: clamp(34px,5.4vw,64px); text-transform:uppercase; margin: 14px 0 16px; }
.cathero p{ font-size:17px; line-height:1.6; color: var(--ink-soft); max-width: 42ch; }
.cathero-stats{ display:flex; gap:26px; margin-top:26px; }
.cathero-stat b{ display:block; font-family:var(--font-display); font-size:30px; color: var(--accent); white-space:nowrap; }
.cathero-stat b small{ font-size:16px; }
.cathero-stat span{ font-size:13px; color: var(--ink-soft); }
.cathero-media{ position:relative; }
.cathero-media .ph{ box-shadow: var(--shadow-md); }
@media (max-width: 820px){ .cathero{ grid-template-columns:1fr; } }

/* ── product page ───────────────────────────────────────────────────────── */
.pd{ padding-block: 20px clamp(40px,5vw,72px); }
.pd-layout{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,64px); align-items:start; }
.pd-gallery{ position:sticky; top: 92px; }
.pd-main{ width:100%; box-shadow: var(--shadow-sm); }
.pd-thumbs{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; margin-top:12px; }
.pd-thumb{ border:2px solid transparent; border-radius: var(--radius-sm); overflow:hidden; cursor:pointer; padding:0; background:none; transition: border-color .15s; }
.pd-thumb.active{ border-color: var(--accent); }

.pd-tag{ font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-faint); }
.pd-title{ font-size: clamp(30px,4vw,46px); text-transform:uppercase; margin: 12px 0 16px; }
.pd-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.pd-rate{ display:inline-flex; align-items:center; gap:7px; color: var(--ink-soft); font-size:14px; }
.pd-rate .stars{ color: var(--accent); }
.pd-stock{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; }
.pd-stock.in{ color:#1f9d55; } .pd-stock.in svg{ color:#1f9d55; }
.pd-stock.out{ color: var(--ink-faint); }

.pd-pricebox{ display:flex; align-items:baseline; gap:14px; padding: 22px 0; border-block:1px solid var(--line); margin-bottom:24px; }
.pd-price-now{ font-family:var(--font-display); font-weight:800; font-size: 44px; line-height:1; }
.pd-price-now small{ font-size:18px; color: var(--ink-soft); }
.pd-price-old{ font-size:20px; color: var(--ink-faint); text-decoration:line-through; }
.pd-save{ font-family:var(--font-mono); font-size:12px; background: var(--accent-soft); color: var(--accent); padding:5px 10px; border-radius:999px; font-weight:700; }

.pd-buy{ display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; margin-bottom:14px; }
.qty{ display:inline-flex; align-items:center; border:1.5px solid var(--line-2); border-radius: var(--radius-sm); overflow:hidden; }
.qty button{ width:48px; height:54px; border:none; background: var(--surface); color: var(--ink); font-size:20px; display:grid; place-items:center; }
.qty button:hover{ background: var(--surface-2); }
.qty input{ width:46px; height:54px; border:none; text-align:center; font-family:var(--font-display); font-weight:700; font-size:18px; background: var(--bg); color: var(--ink); -moz-appearance:textfield; }
.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pd-buy .btn-accent{ flex:1; min-width: 200px; }
.pd-buynow{ width:100%; }
.pd-fine{ font-size:13px; color: var(--ink-faint); margin: 12px 0 26px; display:flex; align-items:center; gap:8px; }

.pd-features{ list-style:none; padding:0; margin: 0 0 26px; display:grid; gap:12px; }
.pd-features li{ display:flex; gap:11px; font-size:15px; line-height:1.5; color: var(--ink-soft); }
.pd-features svg{ color: var(--accent); flex-shrink:0; margin-top:2px; }

.pd-trust{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
.pd-trust div{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-sm); padding:14px; }
.pd-trust b{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:14px; }
.pd-trust b svg{ color: var(--accent); }
.pd-trust span{ display:block; font-size:12.5px; color: var(--ink-faint); margin-top:6px; }
@media (max-width: 860px){ .pd-layout{ grid-template-columns:1fr; } .pd-gallery{ position:static; } }
@media (max-width: 480px){ .pd-trust{ grid-template-columns:1fr; } }

/* ── product tabs ───────────────────────────────────────────────────────── */
.pd-tabs{ margin-top: clamp(40px,5vw,72px); }
.tab-bar{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:28px; flex-wrap:wrap; }
.tab{ background:none; border:none; padding: 14px 6px; margin-right:18px; font-family:var(--font-display); font-weight:700; font-size:17px; text-transform:uppercase; color: var(--ink-faint); position:relative; }
.tab.active{ color: var(--ink); }
.tab.active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background: var(--accent); }
.tab-panel{ max-width: 760px; }
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table td{ padding:13px 0; border-bottom:1px solid var(--line); font-size:15px; }
.spec-table td:first-child{ color: var(--ink-faint); width: 42%; }
.spec-table td:last-child{ font-weight:600; }
.tab-panel p{ font-size:16px; line-height:1.65; color: var(--ink-soft); }
.tab-rev{ display:grid; gap:16px; }

.pd-related{ padding-block: clamp(40px,5vw,72px); }

/* section heading reuse for related */
.rel-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; }