/* ---------------------------------------------------------------------------
   Store catalogue (/store) and product detail (/store/{slug}).

   Only what theme.css does NOT already provide. The product cards themselves
   deliberately reuse the existing .rgrid / .rcard / .rimg / .rname / .rprice
   system so the real catalogue looks identical to the refurbished cards on the
   home page — one storefront, not two.

   Loaded from store/index.blade.php and store/show.blade.php via @push('head').
   --------------------------------------------------------------------------- */

/* ---------- filter bar ---------- */
.stfilters{display:flex;flex-direction:column;gap:10px;margin:20px 0;}
.stfrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.stfrow > b{font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--muted);margin-right:2px;}
.stfrow .chip{cursor:pointer;}
.stfrow .chip.on{background:var(--brand);border-color:var(--brand);color:#fff;}
.stfrow .chip.on:hover{background:var(--brand-d);border-color:var(--brand-d);}

/* ---------- catalogue card extras (on top of .rcard) ---------- */
.stcard{color:inherit;}
.stnophoto{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-size:38px;opacity:.35;}
.stsold{position:absolute;top:12px;right:12px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.3px;
  color:#B91C1C;background:#FEE7EC;border:1px solid #FBC9C9;padding:4px 9px;border-radius:999px;}
.ststock{font-size:11.5px;font-weight:700;color:#15803D;display:flex;align-items:center;gap:5px;}
.ststock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.ststock.out{color:var(--muted);}

/* ---------- product detail ---------- */
.stcrumb{font-size:12.5px;color:var(--muted);margin-bottom:14px;}
.stcrumb a{color:var(--brand-d);font-weight:600;}
.stcrumb a:hover{text-decoration:underline;}

.stwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);
  align-items:start;margin-bottom:14px;}
@media(max-width:860px){ .stwrap{grid-template-columns:1fr;} }

.stgal{position:sticky;top:96px;}
@media(max-width:860px){ .stgal{position:static;} }
.stmain{aspect-ratio:1/1;background:#F4F5F7;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;align-items:center;justify-content:center;}
.stmain img{width:100%;height:100%;object-fit:contain;}
.stthumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.stthumbs button{width:64px;height:64px;padding:0;border-radius:10px;overflow:hidden;cursor:pointer;
  background:#F4F5F7;border:1.5px solid var(--line);transition:border-color .18s,transform .18s;}
.stthumbs button:hover{transform:translateY(-2px);}
.stthumbs button.on{border-color:var(--brand);}
.stthumbs img{width:100%;height:100%;object-fit:cover;display:block;}

.stinfo h1{font-size:clamp(23px,3vw,34px);margin:8px 0 6px;}
.stmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.stprice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:16px 0 6px;}
.stprice b{font-size:32px;font-weight:800;letter-spacing:-1px;}
.stprice s{color:var(--muted);font-size:16px;}
.stprice em{font-style:normal;color:#15803D;font-weight:800;font-size:14px;}
.stsave{font-size:12.5px;color:#15803D;font-weight:700;}

.stcta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px;}
.stcta .btn{padding:13px 22px;}

/* Spec table — plain rows, no zebra, so it reads like a receipt. */
.stspecs{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px;}
.stspecs th,.stspecs td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);
  background:none;text-transform:none;letter-spacing:0;font-size:13.5px;white-space:normal;}
.stspecs th{color:var(--muted);font-weight:700;width:40%;}
.stspecs tr:last-child th,.stspecs tr:last-child td{border-bottom:none;}

.stdesc{white-space:pre-line;font-size:14.5px;color:var(--ink-soft);line-height:1.65;}