/* =========================================================
   SHOP + PRODUCT PAGES (shop.html, product.html)
   Loads after assets/site.css and assets/service.css.
   ========================================================= */

/* Grey placeholder used instead of product photos for now */
.ph{position:relative;background:linear-gradient(135deg,#e4e8f0,#d6dce8);border-radius:var(--r-md);overflow:hidden;display:grid;place-items:center;color:#9ba6c8}
.ph::after{content:"Image coming soon";font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.ph.sq{aspect-ratio:1/1}
.ph.thumb{aspect-ratio:1/1;border-radius:12px;border:2px solid transparent;cursor:pointer}
.ph.thumb::after{content:""}
.ph.thumb.active{border-color:var(--navy)}

/* Shop layout */
.shop{padding:clamp(56px,6vw,88px) 0}
.shop-intro{margin-bottom:40px}
.shop-intro .crumbs{margin-bottom:18px}
.shop-intro h1{font-size:clamp(34px,4vw,52px);line-height:1.05;margin-bottom:12px}
.shop-intro .lead{max-width:600px}
.shop-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.shop-side{position:sticky;top:104px}
.shop-side h4{font-size:15px;color:var(--navy);margin-bottom:12px;letter-spacing:-.01em}
.shop-side .cats{display:flex;flex-direction:column;gap:4px;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.shop-side .cats a{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:10px;color:var(--text);font-size:15px}
.shop-side .cats a:hover{background:#fff;color:var(--navy)}
.shop-side .cats a.active{background:var(--navy);color:#fff}
.shop-side .cats a span{font-family:var(--mono);font-size:11px;opacity:.7}
.shop-side .filter{margin-bottom:24px}
.shop-side label{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:15px;color:var(--text);cursor:pointer}
.shop-side input[type=checkbox]{width:18px;height:18px;accent-color:var(--navy)}
.shop-side .range{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin-top:6px}
.shop-side .range input{width:100%;accent-color:var(--navy)}
.shop-main .bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.shop-main .bar .count{color:var(--muted);font-size:15px}
.shop-main .bar select{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 36px 10px 14px;font:inherit;font-size:14px;color:var(--navy);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231b2978' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(14,25,84,.08)}
.pcard .ph{margin-bottom:16px}
.pcard .cat{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin-bottom:8px}
.pcard h3{font-size:19px;margin-bottom:6px}
.pcard p{font-size:14.5px;line-height:1.5;color:var(--text);margin-bottom:14px;flex:1}
.pcard .foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pcard .price{font-weight:600;color:var(--navy);font-size:18px}
.pcard .view{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:500;font-size:15px;padding:10px 14px;border-radius:999px;background:var(--bg-2);transition:background .25s}
.pcard .view:hover{background:var(--sky)}
.pcard .view svg{width:14px;height:14px}
.empty{padding:48px;text-align:center;color:var(--muted);background:#fff;border-radius:var(--r-lg);border:1px dashed var(--line)}

/* Product page */
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:500;font-size:15px;margin-bottom:14px}
.back-link svg{width:16px;height:16px}
.back-link:hover{color:var(--pink)}
.crumbs{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:28px;flex-wrap:wrap}
.crumbs a{color:var(--navy)}
.crumbs span{opacity:.5}
.product-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:start}
.gallery,.gallery .ph{padding:0;margin:0}
.gallery img{display:block;width:100%;height:100%;object-fit:cover}
.gallery .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.pinfo .cat{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin-bottom:12px;display:inline-block}
.pinfo h1{font-size:clamp(30px,3.4vw,44px);line-height:1.05;margin-bottom:10px}
.pinfo .tag{color:var(--muted);font-size:17px;margin-bottom:18px}
.pinfo .price{font-size:32px;font-weight:600;color:var(--navy);letter-spacing:-.02em;margin-bottom:6px}
.pinfo .vat{font-size:13px;color:var(--muted);margin-bottom:22px}
.pinfo .short{font-size:17px;line-height:1.6;margin-bottom:24px}
.pinfo .rating{display:flex;align-items:center;gap:10px;margin-bottom:22px;font-size:14px;color:var(--muted)}
.pinfo .rating .stars5 svg{width:16px;height:16px}
.buy-row{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin-bottom:16px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.qty button{width:44px;height:52px;font-size:20px;color:var(--navy);background:transparent}
.qty button:hover{background:var(--bg)}
.qty input{width:48px;text-align:center;border:0;font:inherit;font-size:16px;color:var(--navy);background:transparent;outline:0}
.buy-row .btn-solid{display:inline-flex;align-items:center;justify-content:center;flex:1;min-width:180px}
.buy-row .btn-soft-lg{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 24px;border-radius:14px;background:var(--bg-2);color:var(--navy);font-weight:500}
.buy-note{font-size:13px;color:var(--muted);margin-bottom:26px}
.assure{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.assure div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;font-size:13.5px;line-height:1.4;color:var(--text)}
.assure b{display:block;color:var(--navy);font-weight:500;margin-bottom:2px}
.pinfo .benefits{list-style:none;padding:0;margin:0 0 8px}
.pinfo .benefits li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.5;margin-bottom:8px}
.pinfo .benefits li svg{width:18px;height:18px;color:var(--pink);flex:none;margin-top:3px}

.ptabs{margin-top:clamp(48px,6vw,80px);display:block}
.pdetail{max-width:none}
.pdetail h2{font-size:clamp(22px,2vw,28px);margin:0 0 14px}
.pdetail h2+p,.pdetail p{font-size:16.5px;line-height:1.65;margin-bottom:16px}
.pdetail section{padding:28px 0;border-top:1px solid var(--line)}
.pdetail section:first-child{border-top:0;padding-top:0}
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:38%;color:var(--navy);font-weight:500}
.pside .side-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin-bottom:16px}
.pside h4{font-size:16px;color:var(--navy);margin-bottom:10px}
.pside p{font-size:14.5px;line-height:1.55;color:var(--text);margin-bottom:12px}
.pside a.link{color:var(--navy);font-weight:500;font-size:14.5px;display:inline-flex;align-items:center;gap:6px}
.pside a.link svg{width:14px;height:14px}
.related{margin-top:clamp(56px,7vw,96px)}
.related h2{margin-bottom:24px}

@media (max-width:1100px){.pgrid{grid-template-columns:repeat(2,1fr)}.ptabs{grid-template-columns:1fr}}
@media (max-width:900px){
  .shop-grid{grid-template-columns:1fr}
  .shop-side{position:static;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
  .product-top{grid-template-columns:1fr}
  .assure{grid-template-columns:1fr}
}
@media (max-width:600px){.pgrid{grid-template-columns:1fr}}

/* Clean shop layout: category chips, no sidebar, 4-up image-led grid */
.chip-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:32px}
.chips-cat{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;padding:12px 22px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy);font-weight:500;font-size:15px;transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--navy)}
.chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip-row .count{margin-left:auto;color:var(--muted);font-size:15px}
.pgrid.four{grid-template-columns:repeat(3,1fr);gap:28px}
.pcard{background:transparent;border:0;padding:0;border-radius:0}
.pcard:hover{transform:none;box-shadow:none}
.pcard .ph{border-radius:16px;margin-bottom:16px;transition:transform .5s var(--ease)}
.pcard:hover .ph{transform:translateY(-3px)}
.pcard h3{font-size:18px}
.pcard .foot{margin-top:6px}
.pcard .view{background:transparent;padding:0;color:var(--pink)}
.pcard .view:hover{background:transparent}
@media (max-width:1100px){.pgrid.four{gap:20px}}
@media (max-width:800px){.pgrid.four{grid-template-columns:repeat(2,1fr);gap:16px}.chip{padding:10px 16px;font-size:14px}.chip-row .count{width:100%;margin-left:0}}
@media (max-width:480px){.pgrid.four{grid-template-columns:1fr}}

/* Real product images + centred shop header */
.pimg{aspect-ratio:5/4;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);padding:9%;box-sizing:border-box}
.pimg img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .8s var(--ease)}
.pcard:hover .pimg img{transform:scale(1.03)}
.pcard .pimg{margin-bottom:16px}
.gallery .pimg{border-radius:var(--r-md)}
.gallery .thumbs .pimg{border-radius:12px;border:2px solid transparent;cursor:pointer}
.gallery .thumbs .pimg.active{border-color:var(--navy)}
.shop-intro{text-align:center;max-width:720px;margin:0 auto 36px}
.shop-intro .lead{margin:0 auto}
.chip-row{flex-direction:column;align-items:center;gap:14px}
.chips-cat{justify-content:center}
.chip-row .count{margin-left:0}
@media (max-width:800px){.chip-row .count{width:auto}}

/* Mobile: shop header and filters align left */
@media (max-width:800px){
  .shop-intro{text-align:left;margin-left:0}
  .shop-intro .lead{margin:0}
  .chip-row{align-items:flex-start}
  .chips-cat{justify-content:flex-start}
  .chip-row .count{text-align:left}
}