/* ============================================================
   Wolvex — Product detail page
   ============================================================ */
/* padding-top/-bottom only — this element also carries .wrap (0 20px
   side padding + max-width); a shorthand `padding` here would zero
   those out and pin the whole page flush against the viewport edge. */
.product-page{padding-top:24px;padding-bottom:56px;}
.product-top{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;margin-top:18px;}

/* Gallery */
.gallery-main{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.gallery-main img{width:100%;height:100%;object-fit:contain;padding:24px;}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--line);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 12px 24px -14px rgba(37,52,85,.4);}
.gallery-arrow:hover{background:var(--cloud);}
.gallery-arrow.prev{left:14px;}
.gallery-arrow.next{right:14px;}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.gallery-thumbs button{width:72px;height:72px;border-radius:var(--radius-s);border:2px solid var(--line);background:var(--paper);padding:4px;cursor:pointer;overflow:hidden;}
.gallery-thumbs button img{width:100%;height:100%;object-fit:contain;}
.gallery-thumbs button[aria-current="true"]{border-color:var(--red);}

/* Info panel — a single flex column with one consistent gap, rather than
   ad-hoc margins on each child, so vertical rhythm stays even regardless
   of which optional bits (rating, discount, marketplace links) render. */
.product-info{display:flex;flex-direction:column;gap:16px;}
.product-info h1{font-size:1.6em;line-height:1.3;margin:0;}
.product-info .rating{margin:0;}
.price-block{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:0;}
.price-block .now{font-family:var(--font-display);font-weight:700;font-size:2.1em;color:var(--ink);}
.price-block .was{color:var(--slate);text-decoration:line-through;font-weight:600;font-size:1.1em;}
.price-block .save{background:var(--blush);color:var(--red-deep);font-weight:800;font-size:.85em;padding:4px 10px;border-radius:999px;}
.vat-note{color:var(--slate);font-size:.88em;margin:-10px 0 0;}

.stock-note{display:inline-flex;align-items:center;gap:8px;font-weight:800;margin:0;}
.stock-note.in{color:#2F7D5B;}
.stock-note.out{color:var(--red-deep);}

.product-short{color:var(--ink-deep);margin:0;}

.buy-box{display:flex;flex-direction:column;gap:14px;max-width:420px;padding-top:4px;border-top:1px solid var(--line);}
.buy-box .btn{width:100%;}
.add-to-basket-form{display:flex;gap:10px;}
.add-to-basket-form .qty-input{width:80px;flex-shrink:0;border:2px solid var(--line);border-radius:var(--radius-s);padding:0 14px;font-size:1em;font-family:inherit;min-height:56px;background:var(--paper);text-align:center;}
.add-to-basket-form .btn{flex:1;}

/* Marketplace buttons — each keeps its own brand colours so it reads as
   "the Amazon button" etc. rather than a generic outline link. */
.marketplace-row{margin-top:2px;display:flex;flex-direction:column;gap:10px;}
.marketplace-note{color:var(--slate);font-size:.88em;font-weight:600;margin:0;}
.btn-marketplace{background:var(--paper);border:2px solid var(--line);color:var(--ink-deep);justify-content:center;font-weight:800;gap:10px;}
.btn-marketplace:hover{border-color:var(--ink);}

.btn-marketplace-amazon{background:#FF9900;border-color:#FF9900;color:#131A22;}
.btn-marketplace-amazon:hover{background:#e88a00;border-color:#e88a00;}

.btn-marketplace-ebay{background:#fff;border-color:#E1E6EE;color:#111;}
.btn-marketplace-ebay:hover{border-color:#0064D2;}

.btn-marketplace-tiktok{background:#010101;border-color:#010101;color:#fff;}
.btn-marketplace-tiktok:hover{background:#000;box-shadow:0 0 0 2px #25F4EE, 0 0 0 4px #FE2C55;}

/* Description */
.product-desc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);padding:28px;margin-top:44px;}
.product-desc h2{font-size:1.35em;}
.product-desc img{border-radius:var(--radius-s);margin:12px 0;}
.product-desc ul{list-style:disc;padding-left:22px;margin:0 0 1em 0;}

/* Reviews */
.product-reviews{margin-top:44px;}
.product-reviews h2{font-size:1.35em;}
.review-list{display:flex;flex-direction:column;gap:16px;}
.review-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);padding:20px;}
.review-item .review-stars{margin-bottom:6px;}
.review-item .meta{color:var(--slate);font-size:.88em;font-weight:600;}

/* Related products */
.related-products{margin-top:44px;}
.related-products h2{font-size:1.35em;}

@media (max-width:980px){
  .product-top{grid-template-columns:1fr;gap:28px;}
}

@media (max-width:720px){
  .product-page{padding-top:16px;padding-bottom:40px;}
  .product-info h1{font-size:1.3em;}
  .price-block .now{font-size:1.7em;}
  .gallery-thumbs button{width:60px;height:60px;}
  .product-desc,
  .review-item{padding:18px;}
  .product-desc{margin-top:32px;}
  .product-reviews,
  .related-products{margin-top:32px;}
  .gallery-arrow{width:38px;height:38px;}
}