/* Product gallery borrows the shared modal, input and choice-button controls.
   Layout follows the supplied shop reference; brand tokens stay in ux-system.css. */
.klbg-ux .product-view { display:block; width:100%; padding:0; border:0; color:var(--ux-text); background:var(--ux-bg); cursor:pointer; border-radius:0; }
.klbg-ux .product-detail { width:min(1040px,calc(100vw - 32px)); max-height:90dvh; padding:0; border-radius:16px; overflow:auto; overscroll-behavior:contain; background:var(--ux-surface); border-color:var(--ux-border); }
.product-detail[open] { animation:detail-enter 150ms ease-out; }
.product-detail.is-closing { animation:detail-exit 100ms ease-in forwards; }
.product-detail::backdrop { backdrop-filter:none; background:rgb(0 0 0 / .7); }
.product-detail[open]::backdrop { animation:detail-fade-in 150ms ease-out; }
.product-detail.is-closing::backdrop { animation:detail-fade-out 100ms ease-in forwards; }
.klbg-ux .product-detail .variant-close { position:sticky; top:12px; float:right; margin:12px 12px 0 0; z-index:5; width:44px; height:44px; padding:12px; border-radius:12px; background:var(--ux-raised); color:var(--ux-text); }
.product-detail .variant-close svg { width:20px; height:20px; }
.product-detail #variantPickerBody { clear:both; }
.product-detail .detail-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:32px; padding:0 28px 24px; }
.product-detail .detail-layout > * { min-width:0; }
.product-detail .detail-gallery { align-self:start; position:sticky; top:68px; }
.product-detail .detail-main-image { display:flex; align-items:center; justify-content:center; aspect-ratio:1; width:100%; overflow:hidden; border:1px solid var(--ux-border); border-radius:12px; background:var(--ux-bg); }
.product-detail .detail-main-image img { width:100%; height:100%; object-fit:contain; }
.product-detail .detail-image-fallback { color:var(--ux-muted); font-size:12px; padding:8px; text-align:center; line-height:1.5; }
.product-detail .detail-image-fallback[hidden],.product-detail img[hidden],.product-detail [hidden] { display:none !important; }
.product-detail .detail-gallery-bar { display:flex; align-items:start; justify-content:space-between; gap:12px; padding:12px 0; color:var(--ux-muted); font-size:12px; }
.product-detail #detailImageCaption { min-width:0; overflow-wrap:anywhere; }
.product-detail #detailImageCount { white-space:nowrap; font-variant-numeric:tabular-nums; }
.product-detail .detail-thumbnails { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.product-detail .detail-thumbnail { min-width:0; width:100%; aspect-ratio:1; min-height:44px; border:1px solid var(--ux-border); border-radius:8px; padding:3px; background:var(--ux-bg); cursor:pointer; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.product-detail .detail-thumbnail img { width:100%; height:100%; object-fit:cover; border-radius:4px; }
.product-detail .detail-thumbnail[aria-pressed=true] { border-color:var(--ux-brand); box-shadow:inset 0 0 0 1px var(--ux-brand); }
.product-detail .detail-gallery-controls { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; color:var(--ux-muted); font-size:12px; }
.product-detail .detail-gallery-controls button { min-width:44px; min-height:44px; border:1px solid var(--ux-border); background:var(--ux-bg); color:var(--ux-text); font-size:24px; border-radius:12px; cursor:pointer; }
.product-detail .detail-gallery-controls button:not(:disabled):hover { background:var(--ux-raised); }
.product-detail .detail-information { display:flex; flex-direction:column; gap:12px; }
.product-detail .detail-heading small { color:var(--ux-muted); font-size:12px; }
.klbg-ux .product-detail h2 { margin:4px 0 0; font-size:18px; font-weight:600; line-height:1.6; overflow-wrap:anywhere; text-wrap:pretty; }
.product-detail .detail-price { padding:12px 16px; background:var(--ux-bg); border-radius:12px; font-size:24px; font-weight:600; color:var(--ux-brand); font-variant-numeric:tabular-nums; }
.product-detail .detail-variant-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:4px; }
.product-detail .detail-variant-heading h3 { margin:0; font-size:16px; font-weight:600; }
.product-detail .detail-variant-heading > span { color:var(--ux-muted); font-size:12px; white-space:nowrap; }
.klbg-ux .product-detail :is(.detail-media-note,.detail-description) { font-size:13px; line-height:1.6; color:var(--ux-muted); margin:0; text-wrap:pretty; overflow-wrap:anywhere; }
.klbg-ux .product-detail label { width:fit-content; font-size:13px; color:var(--ux-text); }
.product-detail .detail-search { position:relative; }
.klbg-ux .product-detail #variantSearch { min-height:44px; margin:0; padding-right:52px; }
.product-detail #variantSearch::-webkit-search-cancel-button,.product-detail #variantSearch::-webkit-search-decoration { appearance:none; }
.product-detail #variantSearchClear { position:absolute; inset-block:0; right:4px; margin-block:auto; width:40px; height:36px; min-height:36px; border:0; border-radius:8px; background:transparent; color:var(--ux-muted); font-size:24px; cursor:pointer; }
.product-detail #variantSearchClear:hover { background:var(--ux-raised); color:var(--ux-text); }
.klbg-ux .product-detail .variant-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:8px; max-height:340px; padding:4px; margin:0; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; }
.klbg-ux .product-detail .variant-options .detail-variant { display:flex; align-items:center; gap:8px; min-height:84px; min-width:0; border:1px solid var(--ux-border); padding:8px; border-radius:12px; background:var(--ux-bg); color:var(--ux-text); box-shadow:none; }
.klbg-ux .product-detail .variant-options .detail-variant:hover { background:var(--ux-raised); }
.klbg-ux .product-detail .variant-options .detail-variant[aria-pressed=true] { border-color:var(--ux-brand); box-shadow:inset 0 0 0 1px var(--ux-brand); background:var(--ux-raised); }
.product-detail .detail-variant-thumbnail { display:flex !important; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; overflow:hidden; border:1px solid var(--ux-border); border-radius:6px; background:var(--ux-surface); color:var(--ux-muted); }
.product-detail .detail-variant-thumbnail img { width:100%; height:100%; object-fit:cover; }
.product-detail .detail-variant-thumbnail svg { width:24px; height:24px; }
.product-detail .detail-variant-thumbnail .detail-image-fallback { font-size:10px; padding:2px; }
.product-detail .detail-variant-copy { display:flex !important; flex-direction:column; gap:4px; min-width:0; }
.klbg-ux .product-detail .detail-variant-copy strong { font-size:13px; line-height:1.5; overflow-wrap:anywhere; font-weight:500; }
.klbg-ux .product-detail .detail-variant-copy > span { font-size:13px; color:var(--ux-brand); line-height:1.5; font-variant-numeric:tabular-nums; }
.klbg-ux .product-detail .detail-variant-copy small { font-size:12px; color:var(--ux-muted); line-height:1.5; text-wrap:pretty; }
.product-detail .detail-sold-out .detail-variant-thumbnail { filter:grayscale(1); }
.klbg-ux .product-detail .detail-sold-out .detail-variant-copy > span { color:var(--ux-muted); }
.klbg-ux .product-detail .detail-option-count { font-size:12px; color:var(--ux-muted); margin:0; }
.product-detail .detail-purchase { position:sticky; bottom:0; background:var(--ux-surface); padding:12px 0 0; display:flex; flex-direction:column; gap:12px; z-index:2; }
.product-detail #variantSelection { min-height:24px; margin:0; color:var(--ux-text); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.product-detail #variantAdd { width:100%; min-height:48px; border:0; border-radius:12px; background:var(--ux-brand); color:var(--ux-on-brand); font-size:14px; font-weight:600; cursor:pointer; }
.product-detail #variantAdd:not(:disabled):hover { background:var(--accent-cyan); }
.klbg-ux .product-detail #variantAdd:disabled { opacity:1; background:var(--ux-raised); color:var(--ux-muted); cursor:not-allowed; }
.klbg-ux .product-detail #variantSearch:focus { border-color:var(--ux-brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--ux-brand) 12%,transparent); outline:none; }
.product-detail .detail-empty { grid-column:1/-1; padding:16px; text-align:center; }
.klbg-ux .product-detail .detail-empty p { font-size:14px; margin:0 0 12px; }
.product-detail :is(#variantEmptyClear,#detailRetry) { min-height:44px; padding:8px 16px; background:var(--ux-bg); border:1px solid var(--ux-border); border-radius:12px; color:var(--ux-text); cursor:pointer; }
.product-detail .detail-loading { padding:0 28px 28px; min-height:260px; }
@keyframes detail-enter { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
@keyframes detail-exit { to { opacity:0; transform:scale(.95); } }
@keyframes detail-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes detail-fade-out { to { opacity:0; } }
@media (max-width:800px) {
  .klbg-ux .product-detail { width:calc(100vw - 24px); max-height:94dvh; padding:0; }
  .product-detail .detail-layout { grid-template-columns:minmax(0,1fr); gap:20px; padding:0 16px 16px; }
  .product-detail .detail-gallery { position:static; }
  .product-detail .detail-main-image { max-height:280px; width:100%; aspect-ratio:auto; height:280px; }
  .product-detail .detail-thumbnails { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .product-detail .detail-gallery-bar { padding-block:8px; }
  .product-detail .detail-gallery-controls { margin-top:8px; }
  .klbg-ux .product-detail h2 { font-size:16px; }
  .klbg-ux .product-detail #variantSearch { font-size:16px; }
  .klbg-ux .product-detail .variant-options { grid-template-columns:minmax(0,1fr); max-height:300px; }
  .product-detail .detail-variant-thumbnail { width:48px; height:48px; flex-basis:48px; }
  .product-detail .detail-purchase { padding-bottom:env(safe-area-inset-bottom,0px); }
}
@media (prefers-reduced-motion:reduce) {
  .product-detail[open],.product-detail.is-closing,.product-detail[open]::backdrop,.product-detail.is-closing::backdrop { animation:none; }
}