:root { --detail-cream:#f7f5f0; --detail-paper:#fffdf8; --detail-green:#1a3b28; --detail-muted:#667064; --detail-line:#d8d2c5; --detail-roast:#a64b2a; }
body { margin:0; background:var(--detail-cream); color:var(--detail-green); font-family:Inter,Arial,sans-serif; }
.product-page { width:min(100% - 2.5rem,1280px); margin:0 auto; padding:6.5rem 0 5rem; }
.product-breadcrumb { display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:1.5rem; color:var(--detail-muted); font-size:.82rem; }
.product-breadcrumb a { color:var(--detail-green); text-decoration:none; }
.product-breadcrumb a:hover { color:var(--detail-roast); }
.product-page-status { min-height:2rem; color:var(--detail-muted); }
.product-page-status:empty { display:none; }
.product-overview { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr); align-items:start; gap:clamp(2rem,5vw,5rem); }
.product-gallery__main { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1/1; overflow:hidden; border:1px solid var(--detail-line); border-radius:1.25rem; background:var(--detail-paper); }
.product-gallery__main img { display:block; width:100%; height:100%; object-fit:contain; }
.product-gallery__controls { display:grid; grid-template-columns:2.8rem minmax(0,1fr) 2.8rem; align-items:center; gap:.75rem; margin-top:1rem; }
.product-gallery__controls>button { display:grid; place-items:center; width:2.8rem; height:2.8rem; border:0; border-radius:50%; background:var(--detail-green); color:var(--detail-cream); font-size:1.35rem; cursor:pointer; transition:background-color .2s ease; }
.product-gallery__controls>button:hover { background:var(--detail-roast); }
.product-gallery__thumbnails { display:flex; gap:.65rem; overflow-x:auto; padding:.25rem; scrollbar-width:none; }
.product-gallery__thumbnails::-webkit-scrollbar { display:none; }
.product-gallery__thumbnail { flex:0 0 82px; width:82px; height:82px; padding:0; overflow:hidden; border:2px solid transparent; border-radius:50%; background:var(--detail-paper); cursor:pointer; }
.product-gallery__thumbnail[aria-pressed="true"] { border-color:var(--detail-green); }
.product-gallery__thumbnail img { width:100%; height:100%; object-fit:cover; }
.product-summary { padding:.3rem 0; }
.product-kicker { margin:0 0 .8rem; color:var(--detail-roast); font-size:.75rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.product-summary h1,.product-not-found h1 { margin:0; font:600 clamp(2.3rem,4vw,3.8rem)/1.05 "Inter",Arial,sans-serif; letter-spacing:-.035em; }
.product-price { margin:1rem 0 .25rem; font-size:1.35rem; font-weight:700; }
.product-pack { margin:0; color:var(--detail-muted); font-size:.9rem; }
.product-purchase-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.6rem 0 1rem; }
.product-field-label { font-size:.83rem; font-weight:600; }
.quantity-control { display:inline-flex; align-items:center; gap:.9rem; padding:.3rem; border:1px solid var(--detail-line); border-radius:999px; }
.quantity-control button { display:grid; place-items:center; width:2rem; height:2rem; border:1px solid var(--detail-green); border-radius:50%; background:transparent; color:var(--detail-green); font-size:1.2rem; cursor:pointer; }
.quantity-control output { min-width:1ch; text-align:center; font-size:.9rem; font-weight:600; }
.product-buy-button { display:flex; min-height:3.25rem; align-items:center; justify-content:center; margin-top:.75rem; border:1px solid var(--detail-green); border-radius:999px; background:var(--detail-green); color:var(--detail-cream); font-size:.9rem; font-weight:700; letter-spacing:.04em; text-decoration:none; transition:background-color .2s ease,color .2s ease; }
.product-buy-button:hover { background:var(--detail-cream); color:var(--detail-green); }
.product-buy-note { margin:.5rem 0 1.5rem; color:var(--detail-muted); font-size:.75rem; text-align:center; }
.product-description { margin:1.6rem 0; color:#39483c; font-size:.96rem; line-height:1.8; }
.product-highlights { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; margin:1.5rem 0 2rem; }
.product-highlight { display:flex; min-height:78px; align-items:center; justify-content:center; padding:.65rem .45rem; border:1px solid var(--detail-line); border-radius:.75rem; color:var(--detail-green); font-size:.68rem; font-weight:700; text-align:center; text-transform:uppercase; }
.product-ingredients { padding-top:1rem; border-top:1px solid var(--detail-line); }
.product-ingredients h2,.nutrition-section h2 { margin:0; font:600 1.5rem/1.2 "Inter",Arial,sans-serif; }
.product-ingredients p { margin:.65rem 0 0; color:#39483c; font-size:.9rem; line-height:1.7; }
.nutrition-section { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr); gap:3rem; margin-top:5rem; padding:2.5rem 0 0; border-top:1px solid var(--detail-line); }
.nutrition-section .product-kicker { margin-bottom:.65rem; }
.nutrition-caption { color:var(--detail-muted); font-size:.85rem; }
.nutrition-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.nutrition-table th,.nutrition-table td { padding:.75rem .5rem; border-bottom:1px solid var(--detail-line); text-align:left; }
.nutrition-table th:last-child,.nutrition-table td:last-child { text-align:right; }
.nutrition-table thead { color:var(--detail-muted); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.product-not-found { max-width:650px; margin:5rem auto; padding:3rem; border:1px solid var(--detail-line); border-radius:1rem; background:var(--detail-paper); text-align:center; }
.product-not-found p { color:var(--detail-muted); line-height:1.7; }
.product-not-found a { display:inline-flex; margin-top:1rem; padding:.8rem 1.2rem; border-radius:999px; background:var(--detail-green); color:white; text-decoration:none; }
@media(max-width:850px) { .product-overview { grid-template-columns:1fr; gap:2.2rem; } .product-gallery__main { max-height:75vh; } .nutrition-section { grid-template-columns:1fr; gap:1rem; margin-top:3.5rem; } }
@media(max-width:520px) { .product-page { width:min(100% - 1.5rem,1280px); padding-top:6rem; } .product-gallery__controls { grid-template-columns:2.3rem minmax(0,1fr) 2.3rem; gap:.3rem; } .product-gallery__controls>button { width:2.3rem; height:2.3rem; } .product-gallery__thumbnail { flex-basis:64px; width:64px; height:64px; } .product-summary h1 { font-size:2.45rem; } .product-highlights { grid-template-columns:repeat(2,minmax(0,1fr)); } .product-not-found { padding:1.5rem; } }
@media(prefers-reduced-motion:reduce) { .product-gallery__controls>button,.product-buy-button { transition:none; } }