.product-dialog #detail-title, .product-dialog #detail-price { font-family: var(--sans); letter-spacing: normal; }
/* The desktop detail keeps its original two-column composition. */
.product-sheet-header, #product-sheet-footer { display: none; }
.thumbs[hidden], .photo-counter[hidden] { display: none; }

/* Gallery: full-width original-ratio photo and a compact vertical thumbnail rail. */

.product-dialog .detail-gallery{display:block;position:relative;height:auto;padding:10px 10px 10px 60px;background:var(--paper)}
.product-dialog .main-photo{height:auto;min-height:0;background:transparent;overflow:hidden;border-radius:5px}
.product-dialog .detail-main{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}
.product-dialog .thumbs{position:absolute;inset:10px auto 10px 10px;width:42px;display:flex;flex-direction:column;gap:7px;padding:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;background:transparent}
.product-dialog .thumbs::-webkit-scrollbar{display:none}
.product-dialog .thumbs button{width:100%;flex:0 0 auto;aspect-ratio:3/4;border-radius:3px;overflow:hidden;border-width:1.5px;opacity:.65}
.product-dialog .thumbs button.active{opacity:1;border-color:#30221c}
.product-dialog .thumbs img{width:100%;height:100%;object-fit:cover}
.product-dialog .gallery-arrow{width:44px;height:44px;font-size:23px;border:0;background:radial-gradient(circle at center,#fff8f0e8 0 15px,transparent 16px);box-shadow:none;top:50%;transform:translateY(-50%)}
.product-dialog .gallery-arrow.previous{left:2px}.product-dialog .gallery-arrow.next{right:2px}
.product-dialog .photo-counter{left:10px;bottom:10px;font-size:10px;padding:4px 8px;background:#fff8f0e8}
.product-dialog .thumbs[hidden]{display:none}.product-dialog .detail-gallery:has(.thumbs[hidden]){padding-left:10px}
@media(min-width:901px){.product-dialog .detail-gallery{padding-left:68px}.product-dialog .thumbs{width:48px}}

@media (max-width: 900px) {
  body:has(#product-dialog[open]) .header,
  body:has(#product-dialog[open]) .catalog-tools { position: static; }
  .product-dialog {
    inset: auto 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 88vh;
    height: 88dvh;
    max-height: 88dvh;
    padding: 0;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    overscroll-behavior: contain;
    box-shadow: 0 -12px 48px #281e1a26;
    transform: translateY(var(--sheet-drag, 0px));
    transition: transform 200ms ease;
  }
  .product-dialog[open] { display: flex; flex-direction: column; }
  .product-dialog::backdrop { background: #281e1a66; backdrop-filter: blur(2px); }
  .product-dialog.sheet-entering { animation: product-sheet-in 200ms ease-out; }
  .product-dialog.sheet-dragging { transition: none; }
  .product-dialog.sheet-closing { transform: translateY(100%); pointer-events: none; }
  .product-dialog .desktop-product-close { display: none; }
  .product-sheet-header {
    display: block;
    flex: 0 0 auto;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
  }
  .sheet-handle { display: grid; place-items: center; height: 22px; }
  .sheet-handle span { width: 36px; height: 4px; border-radius: 4px; background: #b7aaa1; }
  .sheet-navigation { display: flex; align-items: center; justify-content: space-between; padding: 0 max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)); }
  #product-back { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; font-size: 13px; font-weight: 600; }
  #product-back svg { width: 20px; height: 20px; stroke-width: 1.5; }
  .sheet-close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
  .sheet-close svg { width: 20px; height: 20px; stroke-width: 1.5; }
  #product-detail { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  .product-dialog .detail-layout { display: block; padding-top: 0; }
  .product-dialog .main-photo { touch-action: pan-y pinch-zoom; }
  .product-dialog .detail-copy { padding: 20px max(18px, env(safe-area-inset-right, 0px)) 24px max(18px, env(safe-area-inset-left, 0px)); }
  .product-dialog .detail-copy h2 { overflow-wrap: anywhere; }
  #product-sheet-footer { display: block; flex: 0 0 auto; background: var(--paper); }
  .product-dialog .detail-actions {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    gap: 8px;
    margin: 0;
    padding: 12px max(14px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px #281e1a06;
    background: var(--paper);
  }
  .product-dialog .detail-actions .button { min-width: 0; min-height: 50px; padding: 10px 9px; gap: 6px; font-size: 12px; line-height: 1.3; white-space: nowrap; }
  .product-dialog .detail-actions .action-arrow { flex: 0 0 16px; width: 16px; height: 16px; }
  @keyframes product-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
}

@media (max-width: 900px) and (max-height: 500px) {
  .sheet-handle { height: 14px; }
  .sheet-navigation { padding-bottom: 2px; }
  .product-dialog .detail-actions { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .product-dialog .detail-actions .button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .product-dialog, .product-dialog.sheet-entering { animation: none; transition: none; }
}

/* Compact mobile gallery: keep title visible on opening. */

@media(max-width:900px){
.product-dialog .detail-gallery{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;height:clamp(210px,calc(88dvh - 355px),390px);padding:9px 10px;background:var(--paper)}
.product-dialog .main-photo{grid-column:2;grid-row:1;min-height:0;height:100%;background:transparent}
.product-dialog .detail-main{display:block;width:100%;height:100%;max-height:none;object-fit:contain;aspect-ratio:auto}
.product-dialog .thumbs{position:static;grid-column:1;grid-row:1;inset:auto;min-height:0;width:40px;height:100%;gap:6px;overflow-y:auto}
.product-dialog .thumbs button{width:100%;aspect-ratio:3/4}
.product-dialog .detail-copy{padding-top:14px}
.product-dialog .detail-gallery:has(.thumbs[hidden]){grid-template-columns:minmax(0,1fr);padding-left:10px}
.product-dialog .detail-gallery:has(.thumbs[hidden]) .main-photo{grid-column:1}
}
/* Mobile product detail: storefront navigation, title and price, then gallery. */
.detail-rating { display: none; }
@media (max-width: 900px) {
  .product-dialog { height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; background: #fff; color: #2b201c; }
  .product-sheet-header { background: #fff; border-color: #eee8e1; padding-top: env(safe-area-inset-top, 0px); cursor: auto; }
  .detail-navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 59px; padding: 0 max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); }
  .detail-nav-actions { display: flex; align-items: center; }
  .detail-nav-actions:last-child { justify-content: flex-end; }
  .detail-navigation button, .detail-navigation #product-back { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; }
  .detail-navigation svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
  .detail-wordmark { width: 86px; height: auto; display: block; }
  .product-dialog #detail-heading { padding: 15px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
  .product-dialog #detail-title { margin: 0 0 10px; color: #2b201c; font-size: 20px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
  .product-dialog .detail-copy > .eyebrow { display: none; }
  .detail-price-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
  .product-dialog #detail-price { margin: 0; color: #a03b2a; font-size: 20px; font-weight: 700; line-height: 1.25; }
  .detail-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #62544e; white-space: nowrap; }
  .detail-stars { font-size: 15px; letter-spacing: 1px; background: linear-gradient(to right, #9b6d3d var(--rating-fill), #ded7d0 var(--rating-fill)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .product-dialog .detail-gallery, .product-dialog .detail-gallery:has(.thumbs[hidden]) { display: block; height: auto; padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)); background: #fff; }
  #product-dialog .main-photo { display: block; height: auto; padding: 0; border-radius: 0; }
  #product-dialog .detail-main { width: 100%; height: auto; max-height: none; aspect-ratio: auto 2 / 3; object-fit: contain; background: #faf9f7; }
  #product-detail { scrollbar-width: none; }
  #product-detail::-webkit-scrollbar { display: none; }
  .product-dialog .photo-counter { display: none; }
  .product-dialog .gallery-arrow { opacity: 0; }
  .product-dialog .gallery-arrow:focus-visible { opacity: 1; }
  .product-dialog .thumbs { display: flex; flex-direction: row; justify-content: safe center; align-items: center; width: 100%; height: 36px; gap: 0; overflow: auto hidden; }
  .product-dialog .thumbs[hidden] { display: none; }
  .product-dialog .thumbs button { display: grid; place-items: center; flex: 0 0 16px; min-width: 16px; min-height: 30px; height: 30px; aspect-ratio: auto; opacity: 1; border: 0; background: none; }
  .product-dialog .thumbs button img { display: none; }
  .product-dialog .thumbs button::after { content: ''; width: 6px; height: 6px; background: #d5cec9; border-radius: 50%; }
  .product-dialog .thumbs button.active::after { background: #2b201c; }
  .product-dialog .detail-copy { padding: 9px max(16px, env(safe-area-inset-right, 0px)) 22px max(16px, env(safe-area-inset-left, 0px)); color: #2b201c; background: #fff; }
  .product-dialog #option-groups { display: flex; flex-direction: column; }
  .product-dialog .option-group { margin: 0; padding: 12px 0; }
  .product-dialog .option-group + .option-group { border-top: 1px solid #eee8e1; }
  .product-dialog .option-group legend { margin-bottom: 8px; font-size: 14px; }
  .product-dialog .option-group legend span { margin-left: 5px; color: #62544e; }
  .product-dialog .option-values button { border-radius: 6px; min-width: 49px; min-height: 44px; }
  .product-dialog .option-values:not(.detail-swatches) button.selected { background: #2b201c; color: #fff; border-color: #2b201c; }
  .product-dialog .detail-swatches button { display: grid; place-items: center; width: 44px; min-width: 44px; padding: 0; border: 0; background: transparent; }
  .product-dialog .detail-swatches button span { width: 25px; height: 25px; background: var(--detail-swatch); border-radius: 50%; border: 1px solid #2b201c18; }
  .product-dialog .detail-swatches button.selected span { outline: 1.5px solid #2b201c; outline-offset: 3px; }
  .product-dialog .detail-note { color: #62544e; }
  #product-sheet-footer .detail-actions { padding-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px)); background: #fff; border-color: #eee8e1; }
  #product-sheet-footer .detail-actions .button { border-radius: 7px; font-size: clamp(12px, 3.5vw, 14px); }
}


.gallery-swipe-track{display:contents}
.gallery-swipe-neighbor{display:none}
@media (max-width: 900px){
  #product-dialog .main-photo{touch-action:pan-y pinch-zoom}
  #product-dialog .gallery-swipe-track{display:block;position:relative;aspect-ratio:3/4;background:#faf9f7}
  #product-dialog .gallery-swipe-track .detail-main{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
  #product-dialog .main-photo.is-gallery-dragging .gallery-swipe-track{will-change:transform}
  #product-dialog .gallery-swipe-neighbor{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;background:#faf9f7;pointer-events:none}
  #product-dialog .gallery-swipe-neighbor.is-previous{transform:translateX(-100%)}
  #product-dialog .gallery-swipe-neighbor.is-next{transform:translateX(100%)}
  #product-dialog .main-photo.is-gallery-settling .gallery-swipe-track{transition:transform var(--gallery-duration,190ms) cubic-bezier(.22,.8,.28,1)}
  #product-dialog .main-photo.is-gallery-dragging .product-image-zoom-hint{visibility:hidden!important}
}