/*
 * Single product page. Depends on shop-components.css (.badge*, review
 * carousel, .product-card for the related-products row) being enqueued
 * first — this file only adds what's specific to this page itself.
 */

/* product hero: gallery + buy box */
.pd-hero{ max-width:1100px; margin:0 auto; padding:var(--sp-8) var(--sp-6) var(--sp-12); display:grid; grid-template-columns:minmax(0,440px) 1fr; gap:var(--sp-8); align-items:start; }
@media (max-width:820px){ .pd-hero{ grid-template-columns:1fr; gap:var(--sp-6); } }

.pd-gallery{ position:relative; }
.pd-main{ position:relative; aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden; background:var(--surface-variant); box-shadow:var(--elev1); }
.pd-main img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
@media (hover:hover) and (pointer:fine){ .pd-main:hover img{ transform:scale(1.05); } }
.pd-main .badge{ top:12px; font-size:12px; padding:5px 12px; }
.pd-thumbs{ display:flex; gap:10px; margin-top:10px; }
.pd-thumb{ width:64px; height:64px; border-radius:var(--r-sm); overflow:hidden; border:2px solid transparent; padding:0; cursor:pointer; background:var(--surface-variant); }
.pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumb.active{ border-color:var(--primary); }

.pd-buy{ display:flex; flex-direction:column; gap:var(--sp-3); }
.pd-cat{ align-self:flex-start; }
.pd-title{ font-size:clamp(22px,3vw,30px); line-height:1.35; margin-top:2px; }
.pd-sub{ font-size:13.5px; color:var(--on-surface-variant); }
.pd-rating{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--on-surface-variant); }
.pd-rating .stars{ color:var(--caramel); letter-spacing:2px; font-size:13px; }
.pd-price-row{ display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.pd-price{ font-size:26px; font-weight:800; color:var(--on-surface); }
.pd-price small{ font-size:13px; font-weight:600; color:var(--on-surface-variant); }
.pd-price del{ font-size:15px; font-weight:500; color:var(--on-surface-variant); text-decoration:line-through; }
.pd-price ins{ text-decoration:none; }
.pd-sale-chip{ background:var(--caramel-container); color:var(--on-caramel-container); font-size:12px; font-weight:700; padding:3px 10px; border-radius:var(--r-sm); }
.pd-stock{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.pd-stock.in{ color:var(--success); }
.pd-stock.out{ color:var(--error); }
.pd-stock .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }

.pd-variations{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.pd-var-label{ font-size:12.5px; font-weight:700; color:var(--on-surface-variant); }
.pd-var-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.var-opt{ border:1.5px solid var(--outline); background:var(--surface-high); color:var(--on-surface); border-radius:var(--r-sm); padding:9px 16px; font-size:13.5px; font-weight:600; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.var-opt:hover{ border-color:var(--primary); }
.var-opt.active{ border-color:var(--primary); background:var(--primary); color:var(--on-primary); }
.var-opt.oos{ color:var(--on-surface-variant); border-style:dashed; position:relative; }
.var-opt.oos.active{ background:var(--surface-variant); color:var(--on-surface-variant); border-color:var(--outline); }
.pd-var-note{ font-size:11.5px; color:var(--error); font-weight:600; min-height:15px; }

.pd-actions{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-3); }
.qty-stepper{ display:flex; align-items:center; border:1.5px solid var(--outline); border-radius:var(--r-sm); overflow:hidden; flex:0 0 auto; }
.qty-stepper button{ width:38px; height:44px; border:none; background:transparent; color:var(--primary); font-size:17px; cursor:pointer; }
.qty-stepper button:hover{ background:var(--surface-variant); }
.qty-stepper button:disabled{ opacity:.35; cursor:not-allowed; }
.qty-stepper span{ width:36px; text-align:center; font-weight:700; font-size:14.5px; }
.pd-addcart{ flex:1 1 auto; height:44px; font-size:14.5px; }
.pd-addcart.added{ background:var(--success); color:#fff; }

.pd-trust-mini{ display:flex; flex-direction:column; gap:8px; margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--outline-soft); }
.pd-trust-mini div{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--on-surface-variant); }
.pd-trust-mini svg{ width:17px; height:17px; color:var(--primary); flex:none; }

/* accordion */
.pd-accordion details{ border-bottom:1px solid var(--outline-soft); }
.pd-accordion summary{ list-style:none; cursor:pointer; padding:var(--sp-4) 0; display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:15px; }
.pd-accordion summary::-webkit-details-marker{ display:none; }
.pd-accordion summary svg{ width:18px; height:18px; color:var(--on-surface-variant); transition:transform .2s ease; flex:none; }
.pd-accordion details[open] summary svg{ transform:rotate(180deg); }
.pd-accordion .panel{ padding:0 0 var(--sp-4); font-size:13.5px; color:var(--on-surface-variant); }
.pd-accordion .panel ul{ margin:0; padding-inline-start:18px; }
.pd-accordion .panel li{ margin-bottom:4px; }

/* mobile sticky add-to-cart bar */
.pd-sticky{ display:none; }
@media (max-width:820px){
	.pd-sticky{ display:flex; align-items:center; gap:var(--sp-3); position:fixed; bottom:0; inset-inline:0; z-index:30; background:var(--surface-high); border-top:1px solid var(--outline-soft); padding:10px var(--sp-4); box-shadow:0 -4px 14px hsla(var(--shadow-color),.12); }
	.pd-sticky .pd-sticky-info{ display:flex; flex-direction:column; gap:2px; flex:0 0 auto; min-width:0; max-width:130px; }
	.pd-sticky .pd-sticky-pack{ font-size:11px; color:var(--on-surface-variant); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
	.pd-sticky .pd-sticky-price{ display:flex; align-items:baseline; gap:6px; }
	.pd-sticky .pd-sticky-price .now{ font-weight:800; font-size:15.5px; }
	.pd-sticky .pd-sticky-price .old{ font-size:11px; color:var(--on-surface-variant); text-decoration:line-through; }
	body.single-product{ padding-bottom:66px; }
}