.product-detail{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.product-detail>div{min-width:0}
.media-stage{position:relative;aspect-ratio:4/5;background:#f1f3f2;display:grid;place-items:center;overflow:hidden;border-radius:6px}
.product-detail .media-stage img,.product-detail .media-stage video{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;max-height:none;object-fit:contain;object-position:center;border-radius:0}
.media-controls{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.media-count{font-size:13px;color:#53645c;font-variant-numeric:tabular-nums}
.media-thumbnails{display:flex;gap:7px;overflow-x:auto;padding:3px 2px 9px;max-width:100%}
.media-thumbnails button{flex:0 0 54px;height:64px;border:2px solid transparent;border-radius:4px;background:#eef1ef;display:grid;place-items:center;padding:2px}
.media-thumbnails button[aria-pressed=true]{border-color:#204a3e}
.media-thumbnails button:focus-visible{outline:2px solid #204a3e;outline-offset:2px}
.media-thumbnails img{width:100%;height:56px;object-fit:contain;border-radius:0}
.product-detail .specs dd{overflow-wrap:anywhere}
.product-brand{margin:0 0 6px;color:#52635c;font-size:14px}
@media(max-width:650px){.product-detail{grid-template-columns:minmax(0,1fr)}.media-stage{aspect-ratio:1/1}.media-stage img,.media-stage video{max-height:380px}.media-thumbnails button{flex-basis:48px;height:58px}.media-thumbnails img{height:50px}}

/* Spacious product view: the image gets the full height of the left pane. */
#product-dialog{width:96vw;max-width:96vw;height:94dvh;max-height:94dvh;padding:0;border:1px solid #ffffffc9;border-radius:22px;background:#f6f8f5;overflow:hidden;box-shadow:0 28px 100px #142c3840}
#product-dialog::backdrop{background:#182b2b99;backdrop-filter:blur(8px)}
#product-dialog>.close{top:16px;right:16px;width:44px;height:44px;border:1px solid #d9e2da;border-radius:50%;background:#ffffffed;z-index:5;box-shadow:0 3px 12px #28403910}
#product-content{height:100%;min-height:0}
#product-dialog .product-detail{height:100%;grid-template-columns:minmax(0,1.65fr) minmax(360px,1fr);gap:0;align-items:stretch}
#product-dialog .product-gallery{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 42px 88px;padding:24px 26px 12px;background:radial-gradient(ellipse at 30% 10%,#fffdf5,transparent 70%),#e9efec;border-right:1px solid #dce4dd}
#product-dialog .media-stage{aspect-ratio:auto;height:100%;min-height:0;border-radius:14px;background:#e8ede900}
#product-dialog .media-stage img,#product-dialog .media-stage video{width:100%;height:100%;max-height:none;object-fit:contain}
#product-dialog .media-controls{margin:0;padding:0 4px}
#product-dialog .media-controls .icon-button{border:1px solid #cbd6ce;background:#ffffff8a;border-radius:50%;width:36px;height:36px}
#product-dialog .media-thumbnails{gap:9px;padding:6px 2px 8px;align-items:start;scrollbar-width:thin;scrollbar-color:#99ada0 transparent}
#product-dialog .media-thumbnails button{flex:0 0 58px;height:70px;border-radius:7px;background:#ffffff99;transition:border-color .18s,background .18s}
#product-dialog .media-thumbnails img{height:60px}
#product-dialog .media-thumbnails button[aria-pressed=true]{border-color:#356b57;background:#fff}
#product-dialog .product-detail>div:last-child{overflow-y:auto;overscroll-behavior:contain;padding:52px clamp(22px,3vw,60px) 30px;scrollbar-width:thin;scrollbar-color:#b3c4b9 transparent}
#product-dialog .product-brand{font-size:13px;letter-spacing:.06em;color:#6a7e72;margin-bottom:12px}
#product-dialog .product-detail h2{font-size:clamp(24px,2vw,38px);line-height:1.18;letter-spacing:-.025em;margin-bottom:22px;overflow-wrap:anywhere}
#product-dialog .product-variants{margin:18px 0 26px}
#product-dialog .variant-colors{gap:9px;scrollbar-width:thin;scrollbar-color:#a8bbae transparent;padding-bottom:10px}
#product-dialog .variant-colors button{border-radius:9px;border-color:#d2dfd5;background:#ffffffb0}
#product-dialog .variant-colors button[aria-pressed=true]{border-color:#356b57;background:#e7efe8}
#product-dialog .variant-sizes button{border-radius:7px;padding:0 12px;min-height:42px}
#product-dialog .specs{margin:24px 0;font-size:14px}
#product-dialog .specs div{padding:10px 0;font-size:13px;gap:16px}
#product-dialog .specs dd{text-align:right;max-width:65%}
#product-dialog .price{display:block;font-size:28px;letter-spacing:-.03em}
#product-dialog .primary{min-height:50px;border-radius:10px;background:#f0d792;border:1px solid #c9b26966;color:#403b29;margin-top:16px}
#product-dialog .primary:hover:not(:disabled){background:#f5dfa5}
#product-dialog .primary:disabled{background:#e5e7de;color:#69776b;cursor:not-allowed;opacity:1}
@media(min-width:1800px){#product-dialog .product-detail{grid-template-columns:minmax(0,1fr) minmax(460px,32%)}}
@media(max-width:800px){#product-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;overflow-y:auto}#product-content{height:auto}#product-dialog .product-detail{height:auto;grid-template-columns:minmax(0,1fr)}#product-dialog .product-gallery{height:calc(76dvh + 72px);min-height:390px;max-height:850px;grid-template-rows:minmax(0,1fr) 42px 78px;padding:16px 12px 6px;border-right:0;border-bottom:1px solid #dce4dd}#product-dialog .product-detail>div:last-child{overflow:visible;padding:24px 20px 30px}#product-dialog>.close{position:fixed;top:12px;right:12px}#product-dialog .media-thumbnails button{height:62px;flex-basis:50px}#product-dialog .media-thumbnails img{height:52px}#product-dialog .product-detail h2{font-size:26px}#product-dialog .price{font-size:26px}}
@media(prefers-reduced-motion:reduce){#product-dialog .media-thumbnails button{transition:none}}
