/* ==========================================================================
   Single Product — template-specific styles (mockup 09).
   Global components (net-badge, award, stars, price-checked, comp table,
   nutri-card, pros/cons, faq, disclosure, card-grid, list-sprig) live in
   main.css — only product-page CSS here.
   ========================================================================== */

.product-single{padding-bottom:96px;} /* reserves space under the sticky buy bar */
.product-single .breadcrumb{padding:16px 0;}
.product-single h2{font-size:24px; margin:42px 0 16px;}
.product-single p{font-size:15px; margin-bottom:12px;}

/* ----- Hero: gallery ----- */
.product-hero{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:6px;}
.gallery-main{aspect-ratio:1/1; border-radius:var(--r-lg); background:linear-gradient(135deg,var(--olive-light),var(--forest-light)); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-soft); position:relative; overflow:hidden;}
.gallery-main img{width:100%; height:100%; object-fit:cover;}
.gallery-main .ph-sprig{width:64px; height:64px; stroke:var(--forest); stroke-width:1.2;}
.gallery-main .ph-label{position:absolute; bottom:12px; left:12px; background:rgba(255,255,255,.85); font-size:11px; padding:5px 11px; border-radius:8px; color:var(--forest-deep); font-weight:600;}
.gallery-thumbs{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;}
.gthumb{width:64px; height:64px; border-radius:10px; border:2px solid transparent; padding:0; cursor:pointer; overflow:hidden; background:linear-gradient(135deg,var(--forest-light),var(--olive-light));}
.gthumb:hover{border-color:var(--gold); background:linear-gradient(135deg,var(--forest-light),var(--olive-light));}
.gthumb img{width:100%; height:100%; object-fit:cover;}
.gthumb.active{border-color:var(--gold);}

/* ----- Hero: info / price / CTA column ----- */
.hero-info .net-badge{margin-bottom:10px; display:inline-block; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:5px;}
.hero-info h1{font-size:29px; margin-bottom:8px; line-height:1.25;}
.brand-line{font-size:13.5px; color:var(--bark-soft); margin-bottom:10px;}
.brand-line strong{color:var(--forest);}
.stars-row{display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.stars-row .stars{font-size:16px;}
.stars-row .rc{font-size:13px; color:var(--bark-soft);}
.hero-award{margin-bottom:16px;}
.price-box{background:var(--paper); border:1px solid var(--border); border-radius:var(--r-md); padding:18px 20px; margin-bottom:14px;}
.price-row{display:flex; align-items:baseline; gap:12px; margin-bottom:6px; flex-wrap:wrap;}
.price-row .price{font-family:var(--font-display); font-size:32px; color:var(--forest-deep); font-weight:600; line-height:1;}
.price-row .was{font-size:14px; color:var(--bark-soft); text-decoration:line-through;}
.price-updated{font-size:11.5px; color:var(--bark-soft);}
.hero-desc{font-size:14.5px; margin-bottom:16px;}
.hero-info .hero-cta{width:100%; justify-content:center; font-size:15.5px; padding:15px;}

/* ----- Disclosure placement (component itself is global) ----- */
.product-disclosure-top{margin:20px 0 6px;}
.product-disclosure-top .disclosure-banner,
.product-disclosure-bottom .disclosure-banner{max-width:none;}
.product-disclosure-bottom{margin-top:36px;}

/* ----- Sticky buy bar (main.js adds .visible after the hero scrolls out) ----- */
.mr-sticky-bar{position:fixed; left:0; right:0; bottom:0; z-index:150; background:var(--forest-deep); padding:10px 0; transform:translateY(110%); transition:transform .25s ease; box-shadow:0 -6px 18px rgba(0,0,0,.18);}
.mr-sticky-bar.visible{transform:translateY(0);}
.sticky-bar-inner{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.sticky-bar-info{display:flex; align-items:center; gap:12px; min-width:0;}
.sticky-bar-thumb{width:36px; height:36px; border-radius:8px; background:linear-gradient(135deg,var(--olive-light),var(--forest-light)); overflow:hidden; flex-shrink:0; display:block;}
.sticky-bar-thumb img{width:100%; height:100%; object-fit:cover;}
.sticky-bar-text{min-width:0; display:block;}
.sticky-bar-text .name{display:block; color:var(--white); font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sticky-bar-text .price{display:block; font-size:12px; color:#A9B584; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mr-sticky-bar .btn{flex-shrink:0;}

/* ----- Key features ----- */
.feature-list{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.feature-item{display:flex; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; font-size:13.5px; font-weight:600; color:var(--forest-deep);}
.feature-item svg{width:18px; height:18px; stroke:var(--forest); flex-shrink:0;}

/* ----- Benefits ----- */
.benefit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.benefit-card{background:var(--paper); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; text-align:center;}
.benefit-card .ic{width:38px; height:38px; border-radius:50%; background:var(--forest-light); display:flex; align-items:center; justify-content:center; margin:0 auto 10px;}
.benefit-card .ic svg{width:18px; height:18px; stroke:var(--forest);}
.benefit-card h4{font-size:13.5px; font-family:var(--font-body); margin-bottom:5px;}
.benefit-card p{font-size:12px; color:var(--bark-soft); margin-bottom:0;}

/* ----- CTA band (mid-page repeat) ----- */
.cta-band{text-align:center; background:var(--forest-light); border-radius:var(--r-lg); padding:22px; margin:32px 0;}
.cta-band p{font-size:13.5px; color:var(--bark-soft); margin-bottom:12px;}

/* ----- Comparison table: highlight the current product's row ----- */
table.comp tr.this-product{background:var(--forest-light);}
table.comp tr.this-product td{font-weight:700;}

/* ----- Reader reviews (native comments, framed as reader feedback) ----- */
.review-note{font-size:13px; color:var(--bark-soft); margin-top:-8px;}
.reader-reviews .comments-area,
.reader-reviews #comments{max-width:760px;}
.reader-reviews ol.comment-list, .reader-reviews ol.commentlist{list-style:none; margin:0; padding:0;}
.reader-reviews li.comment{border-bottom:1px solid var(--border); padding:16px 0;}

/* ----- Recently viewed strip (client-side) ----- */
.rv-row{display:flex; gap:14px; overflow-x:auto; padding-bottom:6px;}
.rv-card{min-width:160px; max-width:190px; background:var(--paper); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; flex-shrink:0; display:block;}
.rv-card:hover{box-shadow:var(--shadow-soft);}
.rv-thumb{aspect-ratio:4/3; background:linear-gradient(135deg,var(--olive-light),var(--forest-light)); overflow:hidden;}
.rv-thumb img{width:100%; height:100%; object-fit:cover;}
.rv-body{padding:9px 11px;}
.rv-body h5{font-size:11.5px; font-weight:700; color:var(--forest-deep); font-family:var(--font-body); line-height:1.3; margin-bottom:3px;}
.rv-body .price{font-size:11.5px; color:var(--bark-soft);}
.rv-body .rv-checked{font-size:10px; color:var(--bark-soft); opacity:.8;}

/* ----- Responsive ----- */
@media(max-width:860px){
	.product-hero{grid-template-columns:1fr;}
	.benefit-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:620px){
	.feature-list{grid-template-columns:1fr;}
	.hero-info h1{font-size:25px;}
	.sticky-bar-text .name{max-width:150px;}
	.sticky-bar-text .price{max-width:150px;}
}
@media(max-width:480px){
	.benefit-grid{grid-template-columns:1fr;}
	.sticky-bar-thumb{display:none;}
}