/* VEER·MAR product page — verbatim from prototype veermar-product.html.
   Shares header/nav/footer/card/pgrid with storefront.css. */

.crumb{padding:18px 0;font-size:12px;color:var(--grey)}
.crumb a:hover{color:var(--nude)}.crumb span{color:var(--ink)}

.product{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,3.5vw,60px);padding-bottom:50px;align-items:start}

/* gallery */
.gallery{display:grid;grid-template-columns:74px 1fr;gap:14px;position:sticky;top:92px}
.thumbs{display:flex;flex-direction:column;gap:10px}
.thumb{aspect-ratio:3/4;background-size:cover;background-position:center;cursor:pointer;border:2px solid transparent;background-color:var(--soft)}
.thumb.on{border-color:var(--ink)}
.main-img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--soft)}
.main-img .big{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;background-size:cover;background-position:center;transition:opacity .3s}
.main-img .tagrow{position:absolute;top:14px;left:14px;display:flex;gap:8px;z-index:2}
.main-img .lbl{font-size:11px;font-weight:700;padding:5px 10px;color:#fff}
.lbl.new{background:var(--ink)}.lbl.disc{background:var(--sale)}
.main-img .favbig{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);border:none;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center}
.main-img .favbig svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.7;fill:none}
.main-img .favbig.on svg{fill:var(--nude);stroke:var(--nude)}

/* info column */
.pbrand{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--nude);margin-bottom:8px}
.ptitle{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.01em;line-height:1.1;margin-bottom:12px}
.rating{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:13px;color:var(--grey);flex-wrap:wrap}
.stars{color:var(--nude);letter-spacing:2px}
.rating a{border-bottom:1px solid var(--grey)}
.pricebox{display:flex;align-items:center;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.pricebox .now{font-size:1.9rem;font-weight:800}
.pricebox .old{font-size:1.1rem;color:var(--grey);text-decoration:line-through}
.pricebox .save{background:var(--sale);color:#fff;font-size:12px;font-weight:700;padding:4px 10px}
.pbonus{font-size:12px;color:var(--grey);margin-bottom:24px}
.pbonus b{color:var(--nude-dk)}
.divider{height:1px;background:var(--line);margin:22px 0}

/* color picker */
.picker{margin-bottom:22px}
.picker .lab{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:12px}
.picker .lab span{color:var(--grey);font-weight:600}
.cols{display:flex;gap:10px;flex-wrap:wrap}
.col-sw{width:42px;height:42px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);position:relative}
.col-sw.on{box-shadow:0 0 0 2px var(--ink)}
.col-sw.on::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;mix-blend-mode:difference}

/* size picker */
.sizes-row{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:8px}
.size-b{min-width:52px;text-align:center;padding:12px 0;border:1px solid var(--line);font-size:14px;font-weight:600;cursor:pointer;transition:.15s;position:relative}
.size-b:hover{border-color:var(--ink)}
.size-b.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.size-b.out{color:var(--line);cursor:not-allowed;border-style:dashed}
.size-b.out:hover{border-color:var(--line)}
.sizehint{font-size:12px;color:var(--grey);margin-bottom:22px;display:flex;justify-content:space-between;gap:12px}
.sizehint a{border-bottom:1px solid var(--grey);cursor:pointer}
.sizehint a:hover{color:var(--nude-dk)}

/* actions */
.actions{display:flex;gap:12px;margin-bottom:14px}
.qty{display:flex;align-items:center;border:1px solid var(--ink)}
.qty button{width:46px;height:54px;background:#fff;border:none;font-size:18px;cursor:pointer}
.qty button:hover{background:var(--soft)}
.qty span{width:44px;text-align:center;font-weight:700;font-size:15px}
.addcart{flex:1;background:var(--ink);color:#fff;border:none;height:54px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:.2s}
.addcart:hover{background:var(--nude-dk)}
.favbtn{width:54px;height:54px;border:1px solid var(--ink);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.favbtn svg{width:20px;height:20px;stroke:var(--ink);stroke-width:1.7;fill:none}
.favbtn.on svg{fill:var(--nude);stroke:var(--nude)}
.buynow{width:100%;border:1px solid var(--ink);background:#fff;height:52px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;margin-bottom:22px;transition:.2s}
.buynow:hover{background:var(--ink);color:#fff}
.instock{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ok);font-weight:600;margin-bottom:20px}
.instock.no{color:var(--sale)}
.instock .dot{width:8px;height:8px;border-radius:50%;background:currentColor}

/* delivery mini */
.delivery{border:1px solid var(--line);padding:4px 18px;margin-bottom:22px}
.drow{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.drow:last-child{border-bottom:none}
.drow .ic{width:22px;height:22px;stroke:var(--nude);stroke-width:1.6;fill:none;flex-shrink:0;margin-top:1px}
.drow b{font-size:13px;display:block;margin-bottom:2px}
.drow span{font-size:12px;color:var(--grey)}

/* accordion */
.acc{border-top:1px solid var(--line)}
.acc .item{border-bottom:1px solid var(--line)}
.acc .q{display:flex;justify-content:space-between;align-items:center;padding:18px 0;cursor:pointer;font-weight:700;font-size:14px}
.acc .q .pm{font-size:18px;color:var(--grey);transition:transform .2s}
.acc .item.open .q .pm{transform:rotate(45deg)}
.acc .a{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s}
.acc .item.open .a{max-height:600px;padding-bottom:18px}
.acc .a p,.acc .a li{font-size:13px;color:var(--grey);line-height:1.7}
.acc .a ul{padding-left:18px;margin-top:6px}
.spectable{width:100%;font-size:13px}
.spectable td{padding:7px 0;border-bottom:1px solid var(--soft);color:var(--grey)}
.spectable td:first-child{width:45%;color:var(--ink);font-weight:600}

/* similar sections */
.sec{padding:clamp(34px,4.5vw,56px) 0;border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:18px;flex-wrap:wrap}
.sec-head h3{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;letter-spacing:-.01em}
.sec-head .more{font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--ink);padding-bottom:3px}
.sec-head .more:hover{color:var(--nude);border-color:var(--nude)}

/* sticky mobile bar */
.stickybar{display:none;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 16px;gap:12px;align-items:center;z-index:50;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.stickybar .sp{font-weight:800;font-size:16px}
.stickybar button{flex:1;background:var(--ink);color:#fff;border:none;height:48px;font-weight:700;text-transform:uppercase;font-size:13px;cursor:pointer}

@media(max-width:980px){
  .product{grid-template-columns:1fr}
  .gallery{position:static}
}
@media(max-width:560px){
  .gallery{grid-template-columns:1fr}
  .thumbs{flex-direction:row;order:2;overflow-x:auto}
  .thumb{width:64px;flex-shrink:0}
  .stickybar{display:flex}
  body{padding-bottom:74px}
}

/* ── back-in-stock notify box ── */
.notify-box{border:1px solid var(--line);background:var(--soft);padding:16px 18px;margin-top:4px}
.notify-box .nb-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:13px;color:var(--nude)}
.notify-box .nb-title{font-weight:700;font-size:15px;color:var(--ink)}
.notify-box .nb-sub{font-size:13px;color:var(--grey);margin-top:2px}
.notify-box .nb-row{display:flex;gap:8px}
.notify-box .nb-row input{flex:1;min-width:0;height:46px;border:1px solid var(--line);background:#fff;padding:0 14px;font-family:inherit;font-size:14px}
.notify-box .nb-row input:focus{outline:none;border-color:var(--nude)}
.notify-box .nb-row button{height:46px;padding:0 20px;background:var(--ink);color:#fff;border:none;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.notify-box .nb-row button:hover{opacity:.9}
.notify-box .nb-row button:disabled{opacity:.5;cursor:default}
.notify-box .nb-ok{color:#1E7A46;font-weight:600;font-size:14px;padding:6px 0}
.size-b.out{cursor:pointer}