/* ============================================================
   RRK Labs — Shop / catalogue page
   Extends homepage.css (tokens + shared components: header, marquee,
   buttons, .wrap, .foot). Load AFTER homepage.css.
   Requirements: 4 products per row, single page (no pagination),
   no sorting, distinct dark footer, mobile-first.
   ============================================================ */

/* Breadcrumb */
.crumb{font-family:var(--fm);font-size:.78rem;color:var(--ink-3);display:flex;gap:.4rem;align-items:center;padding-top:1.5rem}
.crumb a{transition:color .2s}
.crumb a:hover{color:var(--ink)}
.crumb i{font-size:.9rem;color:var(--ink-4)}
.crumb span[aria-current]{color:var(--ink-1)}

/* Catalogue header */
.shop-head{padding-block:1.3rem clamp(1.4rem,3vw,2rem)}
.shop-head .eyebrow{display:block;margin-bottom:.85rem}
.shop-head h1{font-size:clamp(2.6rem,7vw,4.6rem);font-weight:700;letter-spacing:-.035em;line-height:.98;color:var(--ink)}
.shop-head .lead{margin-top:1rem;max-width:60ch}

/* Trust chips */
.shop-trust{display:flex;flex-wrap:wrap;gap:.55rem}
.shop-trust .chip{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--fm);font-size:.76rem;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--pill);padding:.42rem .8rem}
.shop-trust .chip i{font-size:1rem;color:var(--accent-ink)}

/* WooCommerce add-to-cart notices (shown after ?add-to-cart) */
.shop-notices{margin:1rem 0 0}
.shop-notices .woocommerce-message,.shop-notices .woocommerce-info,.shop-notices .woocommerce-error{
  font-family:var(--fs);border-radius:var(--r-sm)}

/* Toolbar — result count only, NO sorting control */
.shop-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(1.5rem,3vw,2rem);padding-bottom:1.1rem;border-bottom:1px solid var(--border);margin-bottom:1.8rem}
.shop-bar .count{font-family:var(--fm);font-size:.8rem;color:var(--ink-3)}
.shop-bar .count b{color:var(--ink-1);font-weight:500}
.shop-bar .note{font-family:var(--fm);font-size:.76rem;color:var(--ink-4);display:inline-flex;align-items:center;gap:.4rem}
.shop-bar .note i{color:var(--accent-ink);font-size:1rem}

/* Product grid — 4 across on desktop */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.pcard{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.pcard:hover{transform:translateY(-5px);border-color:var(--border-2);box-shadow:0 30px 52px -34px rgba(27,26,22,.42)}
.pcard .media{position:relative;aspect-ratio:600/804;overflow:hidden;background:var(--surface-2);display:block}
.pcard .media a{position:absolute;inset:0;display:block;z-index:1}
.pcard .media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.pcard:hover .media img{transform:scale(1.045)}
.pcard .flag{position:absolute;top:11px;left:11px;z-index:2;font-family:var(--fm);font-size:.7rem;font-weight:500;
  background:var(--accent);color:#1B1206;padding:.28rem .52rem;border-radius:var(--r-sm);letter-spacing:.02em}
/* Out-of-stock button: looks disabled, not clickable */
.pcard .add .btn-oos{background:var(--surface-2);color:var(--ink-2);border-color:var(--border);cursor:not-allowed}
.pcard .add .btn-oos:hover{transform:none;background:var(--surface-2);color:var(--ink-2)}
.pcard .info{padding:1rem 1.05rem 1.15rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.pcard .cat{font-family:var(--fm);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.pcard h3{font-family:var(--fs);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.pcard h3 a{transition:color .2s}
.pcard h3 a:hover{color:var(--accent-ink)}
.pcard .price{font-family:var(--fm);display:flex;align-items:baseline;flex-wrap:wrap;gap:.15rem .45rem;margin-top:.1rem}
.pcard .from{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.pcard .now{font-size:1.02rem;font-weight:500;color:var(--ink)}
.pcard .was{font-size:.82rem;color:var(--ink-4);text-decoration:line-through}
.pcard .add{margin-top:auto;padding-top:.95rem}
.pcard .add .btn{width:100%;min-height:46px}

/* Research-use-only note */
.ruo-note{margin-top:2rem;text-align:center;font-family:var(--fm);font-size:.78rem;color:var(--ink-4);letter-spacing:.01em}
main#main{padding-bottom:clamp(2.6rem,6vw,4rem)}

/* Active nav state */
.nav-links a.active{color:var(--ink)}

/* Add-to-cart toast (top-right, auto-dismiss ~3s) */
.toast-host{position:fixed;top:16px;right:16px;z-index:2000;display:flex;flex-direction:column;gap:.6rem;pointer-events:none;max-width:min(90vw,360px)}
.toast{display:flex;align-items:center;gap:.6rem;background:var(--ink);color:#F3EDE3;font-family:var(--fs);font-size:.93rem;font-weight:500;
  padding:.82rem 1.05rem;border-radius:var(--r-sm);box-shadow:0 20px 44px -20px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08);
  transform:translateX(120%);opacity:0;transition:transform .4s var(--ease),opacity .4s var(--ease)}
.toast.in{transform:none;opacity:1}
.toast i{color:#7ED9A0;font-size:1.25rem;flex:none}
@media (max-width:560px){.toast-host{top:12px;right:12px;left:12px;max-width:none}}

/* Shop cards: add-to-cart is a button now (adds in place, no navigation) */
.pcard .add .btn[type="button"],.pcard .add button.btn{width:100%}

/* ============================================================
   Dark footer — a hard color change from the cream catalogue
   makes the footer read as a separate, closing zone.
   ============================================================ */
.foot{background:var(--dark);border-top:0;color:#C9C1B2;position:relative}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,74,28,.55),transparent)}
.foot .foot-brand img{filter:brightness(0) invert(1);opacity:.85}
.foot .foot-brand p{color:#A79E8C}
.foot .foot-col h4{color:#8F8778}
.foot .foot-col a{color:#D6CFC2}
.foot .foot-col a:hover{color:#fff}
.foot .disclaimer{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09);color:#A79E8C}
.foot .disclaimer i{color:#FF6A3D}
.foot .foot-bot{border-top-color:rgba(255,255,255,.11);color:#8F8778}
.foot .pay{color:#8F8778}

/* ============================================================
   Responsive — mobile-first grid reflow
   4 (desktop) -> 3 (tablet) -> 2 (phone)
   ============================================================ */
@media (max-width:1080px){
  .pgrid{grid-template-columns:repeat(3,1fr);gap:1.15rem}
}
@media (max-width:760px){
  .pgrid{grid-template-columns:repeat(2,1fr);gap:.85rem}
  .pcard .info{padding:.85rem .8rem 1rem;gap:.26rem}
  .pcard h3{font-size:.95rem}
  .pcard .now{font-size:.96rem}
  .pcard .add{padding-top:.8rem}
  .shop-head{padding-block:.8rem 1.2rem}
  .shop-bar{margin-bottom:1.4rem}
}
@media (max-width:380px){
  .pcard .add .btn{font-size:.82rem;padding-inline:.7rem;gap:.35rem}
}