/* ── catalogue filters ──────────────────────────────────── */
.filters{
  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
  margin:-10px 0 clamp(28px,4vw,46px); padding-bottom:26px;
  border-bottom:1px solid var(--rule);
}
.filters a{
  font-size:13.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  padding:8px 17px; border:1px solid var(--rule); border-radius:var(--r-pill);
  background:var(--white); transition:background .2s, color .2s, border-color .2s;
}
html[dir="rtl"] .filters a{ letter-spacing:0; text-transform:none; font-size:16.5px }
.filters a:hover{ color:var(--ink); border-color:var(--rule-2) }
.filters a[aria-current="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper) }

/* ── product detail ─────────────────────────────────────── */
.detail{ display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:1fr }
@media (min-width:900px){ .detail{ grid-template-columns:1.15fr 1fr; align-items:start } }

.shots{ display:grid; gap:12px }
@media (min-width:600px){ .shots{ grid-template-columns:1fr 1fr } }
.shot{
  aspect-ratio:3/4; background:var(--white); border:1px solid var(--rule); overflow:hidden;
  border-radius:var(--r-md);
}
.shot img{ width:100%; height:100%; object-fit:cover }
.shots .shot:first-child{ grid-column:1 / -1; aspect-ratio:4/5 }

.buy{ position:sticky; top:92px }
@media (max-width:899px){ .buy{ position:static } }

.price{ font-family:var(--display); font-size:30px; margin:16px 0 0 }
.price s{ color:var(--ink-2); margin-inline-end:10px; font-size:22px }

.buyform{ margin-top:30px }
.buyform fieldset{ border:0; padding:0; margin:0 0 22px }
.buyform legend{ padding:0; margin-bottom:10px }

.opts{ display:flex; flex-wrap:wrap; gap:9px }
.opt input{ position:absolute; opacity:0; width:0; height:0 }
.opt span{
  display:inline-block; min-width:48px; text-align:center;
  padding:11px 19px; border:1px solid var(--rule-2); border-radius:var(--r-pill); font-size:15.5px; font-weight:500;
  cursor:pointer; transition:border-color .18s, background .18s, color .18s;
}
.opt input:checked + span{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.opt input:focus-visible + span{ outline:1.5px solid var(--ink); outline-offset:2px }

.buyrow{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-top:6px }
.qty{ display:block }
.qty input{
  display:block; width:84px; margin-top:8px; padding:13px 12px;
  border:1px solid var(--rule-2); border-radius:var(--r-sm); background:var(--white); color:var(--ink);
  font-family:var(--body); font-size:16.5px;
}
.buyrow .btn{ flex:1; min-width:190px }

.note{ margin:14px 0 0; font-size:15.5px; color:var(--ink-2) }
.note--err{ color:var(--ink); background:var(--white); border:1px solid var(--rule-2);
  border-radius:var(--r-sm); padding:11px 14px }

.specs{ margin:34px 0 0; padding-top:22px; border-top:1px solid var(--rule);
  display:grid; grid-template-columns:auto 1fr; gap:11px 22px; font-size:15.5px }
.specs dt{ color:var(--ink-2); font-size:12.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase }
html[dir="rtl"] .specs dt{ letter-spacing:0; text-transform:none; font-size:15.5px }
.specs dd{ margin:0; color:var(--ink-2) }

/* ── bag ────────────────────────────────────────────────── */
.bag{ border-top:1px solid var(--rule) }
.bagline{
  display:grid; gap:18px; align-items:start; padding:22px 0;
  border-bottom:1px solid var(--rule);
  grid-template-columns:88px 1fr auto;
}
.bagimg{ display:block; aspect-ratio:3/4; background:var(--white);
  border:1px solid var(--rule); border-radius:var(--r-sm); overflow:hidden }
.bagimg img{ width:100%; height:100%; object-fit:cover }
.bagimg svg{ width:60%; opacity:.5 }
.baginfo .nm{ font-size:22px; display:block }
.baginfo .sub{ margin:6px 0 12px; font-size:15px; color:var(--ink-2) }
.bagctl{ display:inline-block; vertical-align:bottom }
.bagctl .qty input{ width:70px; padding:9px 10px }
.baglink{ display:inline-block; margin-inline-start:16px }
.baglink button{
  background:none; border:0; padding:0; cursor:pointer; color:var(--ink-2);
  font-family:var(--body); font-size:14.5px; text-decoration:underline; text-underline-offset:3px;
}
.baglink button:hover{ color:var(--ink) }
.bagsum{ font-family:var(--display); font-size:22px; white-space:nowrap }

.totals{ margin-top:30px; display:flex; flex-direction:column; align-items:flex-end; gap:6px }
.totals .row{ display:flex; align-items:baseline; gap:18px }
.totals .amt{ font-size:30px }
.totals .cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end }

@media (max-width:560px){
  .bagline{ grid-template-columns:72px 1fr; }
  .bagsum{ grid-column:2; justify-self:start }
  .totals{ align-items:stretch }
  .totals .row{ justify-content:space-between }
  .totals .cta .btn{ flex:1; text-align:center }
}

/* ── checkout ───────────────────────────────────────────── */
.cols2{ display:grid; gap:clamp(26px,4vw,52px); grid-template-columns:1fr; align-items:start }
@media (min-width:880px){ .cols2{ grid-template-columns:1.4fr 1fr } }

.cform fieldset{ border:0; padding:0; margin:0 0 30px }
.cform legend{ padding:0; margin-bottom:14px }
.cform label{ display:block; margin-bottom:16px; font-size:14.5px; color:var(--ink-2) }
.cform input, .cform textarea{
  display:block; width:100%; margin-top:7px; padding:13px 14px;
  border:1px solid var(--rule-2); border-radius:var(--r-sm); background:var(--white); color:var(--ink);
  font-family:var(--body); font-size:16.5px;
}
.cform textarea{ resize:vertical }
.cform .hint{ color:var(--ink-3); font-size:13px; margin-inline-start:6px }
.cform .two{ display:grid; gap:0 18px; grid-template-columns:1fr }
@media (min-width:560px){ .cform .two{ grid-template-columns:1fr 1fr } }
.btn.wide{ width:100%; padding-block:17px }

.pay{ display:flex; gap:12px; align-items:flex-start; margin-bottom:12px;
  border:1px solid var(--rule-2); border-radius:var(--r-md); padding:16px 18px;
  cursor:pointer; background:var(--white); transition:border-color .2s, box-shadow .2s }
.pay input{ margin:4px 0 0; width:auto }
.pay span{ display:block }
.pay strong{ display:block; font-weight:500; font-size:16px; color:var(--ink) }
.pay em{ display:block; font-style:normal; font-size:14.5px; color:var(--ink-2); margin-top:3px }
.pay:has(input:checked){ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }

.summary{ background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r-md); padding:26px }
.slines{ list-style:none; margin:16px 0 0; padding:0 }
.slines li{ display:flex; justify-content:space-between; gap:16px; padding:12px 0;
  border-bottom:1px solid var(--rule); font-size:15.5px }
.slines .n{ display:block }
.slines em{ display:block; font-style:normal; font-size:13.5px; color:var(--ink-2); margin-top:3px }
.slines .v{ white-space:nowrap }
.stotal{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-top:18px }
.stotal .display{ font-size:28px }

/* ── confirmation ───────────────────────────────────────── */
.done{ max-width:56ch }
.doneseal{ display:block; width:96px; height:96px; color:var(--ink); margin-bottom:26px }
.doneseal svg{ width:100%; height:100% }
.done h1{ font-size:clamp(30px,5vw,52px); margin:0 0 14px }
.reftag{ margin:26px 0; padding:16px 20px; background:var(--paper-2); border:1px solid var(--rule);
  border-radius:var(--r-md); display:inline-flex; gap:14px; align-items:baseline }
.reftag strong{ font-family:var(--display); font-size:24px; letter-spacing:.06em }
.paybox{ border-inline-start:2px solid var(--ink); padding:2px 0 2px 16px; margin:0 0 8px }
html[dir="rtl"] .paybox{ padding:2px 16px 2px 0 }
.paybox p{ margin:6px 0 }
.paybox .hint{ color:var(--ink-2); font-size:14.5px }