/* ========== SHARED PRODUCT COMPONENTS (build/shared.css) ==========
   Card v2 additions, variation pickers, quick view v2 — used by category + product pages. */

/* breadcrumbs (chip style, shared) */
.crumbs{padding:16px 0 4px;font-size:11.8px}
.crumbs .wrap{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:2px}
.crumbs .wrap::-webkit-scrollbar{display:none}
.crumbs a,.crumbs .cur{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:600;color:var(--txt2);white-space:nowrap;transition:border-color .2s,color .2s;flex-shrink:0}
.crumbs a:hover{border-color:var(--petrol);color:var(--petrol)}
.crumbs .cur{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700;max-width:34ch;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}
.crumbs .sep{color:#B9CBD5;font-weight:300;flex-shrink:0}

/* variation swatches / pills on cards */
.pc-vars{display:flex;align-items:center;gap:7px;padding:0 17px;margin-top:-4px}
.pc-vars.txt{flex-wrap:wrap}
.pc-vars .vch{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);background:#fff;padding:2px;overflow:hidden;transition:border-color .2s,transform .15s;flex-shrink:0}
.pc-vars .vch img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pc-vars .vch:hover{transform:scale(1.1)}
.pc-vars .vch.on{border-color:var(--pulse);box-shadow:0 0 0 2px rgba(255,59,78,.18)}
.pc-vars .vch.oos{opacity:.38;position:relative}
.pc-vars .vch.oos::after{content:'';position:absolute;inset:4px;border-top:1.5px solid var(--pulse-deep);transform:rotate(-45deg) translateY(11px)}
.pc-vars .vmore{font-size:11px;font-weight:800;color:var(--petrol);background:var(--petrol-soft);border-radius:999px;width:34px;height:34px;display:grid;place-items:center;flex-shrink:0}
.vpill{border:1.5px solid var(--line);border-radius:10px;padding:6px 12px;font-size:11.5px;font-weight:800;background:#fff;transition:border-color .2s,background .2s,color .2s}
.vpill:hover{border-color:var(--petrol)}
.vpill.on{border-color:var(--pulse);background:var(--pulse);color:#fff}
.vpill.oos{opacity:.38;text-decoration:line-through}
.vpill.big{padding:10px 16px;font-size:13px;border-radius:12px}
.pc-img{transition:opacity .18s ease}
.pc-img.sw{opacity:0}
.pc-badge.oos{background:#5D7684}
.pc-meta .stock.out{color:#A55}
.pc-meta .stock.out::before{background:#C88}
.pc-name a{transition:color .2s}
.pc-name a:hover{color:var(--petrol)}
.buy.pick{background:var(--petrol)}
.buy.pick:hover{background:var(--pulse)}
.buy.ghost{background:var(--petrol-soft);color:var(--petrol)}
.buy.ghost:hover{background:var(--ink);color:#fff;box-shadow:none}
.pcard.pout .pc-imgwrap img{filter:grayscale(.7);opacity:.8}

/* quick view v2 */
.qv2-vars{display:flex;flex-wrap:wrap;gap:9px}
.qv2-vars .vch{width:46px;height:46px;border-radius:14px;border:2px solid var(--line);background:#fff;padding:3px;transition:border-color .2s,transform .15s}
.qv2-vars .vch img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.qv2-vars .vch:hover{transform:scale(1.07)}
.qv2-vars .vch.on{border-color:var(--pulse);box-shadow:0 0 0 2.5px rgba(255,59,78,.16)}
.qv2-vars .vch.oos{opacity:.38}
.qv2-vlbl{font-size:12px;color:var(--txt2);font-weight:600}
.qv2-vlbl b{color:var(--txt)}
.qv2-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qv2-qty{display:flex;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:13px;padding:9px 14px;font-family:'JBMono';font-size:15px;direction:ltr}
.qv2-qty .sq{width:26px;height:26px;border-radius:8px;background:var(--petrol-soft);color:var(--petrol);display:grid;place-items:center;font-size:16px;cursor:pointer;user-select:none}
.qv2-qty b{min-width:20px;text-align:center}
.qv2-stock{font-size:12px;font-weight:700;color:var(--teal);display:flex;align-items:center;gap:6px}
.qv2-stock::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--teal)}
.qv2-stock.out{color:#A55}
.qv2-stock.out::before{background:#C88}

@media (max-width:640px){
  .pc-vars{padding:0 12px}
  .pc-vars .vch,.pc-vars .vmore{width:30px;height:30px}
  /* quick view = full-width bottom sheet on phones */
  #ovl-qv{align-items:flex-end}
  #ovl-qv .qv-card{width:100vw;max-width:100vw;max-height:88vh;border-radius:22px 22px 0 0;animation:sheetup .38s cubic-bezier(.2,.9,.25,1);padding-bottom:env(safe-area-inset-bottom)}
  #ovl-qv .qv-card::before{content:'';position:absolute;top:9px;inset-inline-start:50%;translate:50% 0;width:44px;height:5px;border-radius:3px;background:#C9D8E0;z-index:4}
  #ovl-qv .qv-img{padding:26px 20px 14px}
  #ovl-qv .qv-body{padding-top:14px}
}
@keyframes sheetup{from{transform:translateY(60px);opacity:.4}}