/* [Codex] Full product photograph stays in view; the options scroll beside it. */
.detail-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: clamp(32px, 5vw, 72px);
  padding-top: 24px;
  align-items: start;
}
.detail-layout .detail-gallery { position: sticky; top: 94px; align-self: start; }
.detail-layout .detail-panel { position: static; padding: 0; min-width: 0; }
.detail-layout .detail-main-photo {
  height: calc(100svh - 130px);
  min-height: 0;
  max-height: 820px;
  background: var(--linen);
  overflow: hidden;
  border-radius: 20px;
}
.detail-layout .detail-gallery:has(.gallery-thumbs) .detail-main-photo { height: calc(100svh - 214px); }
.detail-layout .detail-main-photo .photo-zoom { display: block; width: 100%; height: 100%; }
.detail-layout .detail-main-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.detail-layout .gallery-thumbs { margin-top: 12px; gap: 10px; padding: 3px; }
.detail-layout .gallery-thumb { flex: 0 0 58px; height: 58px; border-radius: 9px; overflow: hidden; }
.detail-layout .gallery-thumb img { object-fit: contain; }
.detail-layout .detail-panel h1 { font-size: clamp(38px, 4vw, 58px); margin: 0 0 12px; line-height: 1.06; }
.detail-layout .detail-lede { font-size: 16px; line-height: 1.5; margin: 0; }
.detail-layout .detail-price { font-size: 28px; margin: 20px 0; }
.detail-layout .detail-price span { font: 400 12px/1.4 var(--sans); text-transform: none; letter-spacing: 0; margin-top: 4px; }
.detail-layout .detail-option { padding: 18px 0; }
.detail-layout .detail-label { font: 700 16px/1.4 var(--sans); margin: 0 0 12px; }
.detail-layout .detail-label strong { display: block; margin: 4px 0 0; font-size: 13px; }
.detail-layout .detail-option .swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; }
.detail-layout .detail-option .swatch {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: auto; min-height: 64px; padding: 12px;
  border-radius: 12px; border: 1px solid #a9b0a3;
  background: transparent; color: var(--green); text-align: left;
  font: 500 13px/1.35 var(--sans); cursor: pointer;
}
.detail-layout .detail-option .swatch.selected { border: 2px solid var(--green); padding: 11px; background: #f8f7f1; }
.detail-layout .detail-option .swatch::before,
.detail-layout .detail-option .swatch.selected::after { display: none; }
.detail-layout .variant-dot { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--swatch); border: 1px solid #7c8578; }
.detail-layout .option-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.detail-layout .option-button {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-height: 60px; width: 100%; padding: 12px; text-align: left;
  border: 1px solid #a9b0a3; border-radius: 12px; background: transparent;
  font: 500 14px/1.35 var(--sans); color: var(--green); cursor: pointer;
}
.detail-layout .option-button[aria-pressed=true] { border: 2px solid var(--green); padding: 11px; background: #f8f7f1; }
.detail-layout .option-button small { font-size: 13px; }
.detail-layout .option-button:focus-visible,
.detail-layout .swatch:focus-visible { outline: 3px solid #718568; outline-offset: 3px; }
.detail-layout .fabric-reference { margin: 0 0 14px; gap: 12px; }
.detail-layout .fabric-reference img { width: 100px; height: 50px; }
.detail-layout .detail-quote { max-width: none; min-height: 48px; justify-content: center; border-radius: 999px; }
@media (max-width: 900px) {
  .detail-layout { grid-template-columns: minmax(0,1fr) minmax(300px,1fr); gap: 28px; }
}
@media (max-width: 760px) {
  .detail-layout { display: block; padding: 16px 20px 48px; }
  .detail-layout .detail-gallery { position: static; margin-bottom: 24px; }
  .detail-layout .detail-main-photo,
  .detail-layout .detail-gallery:has(.gallery-thumbs) .detail-main-photo { height: min(52svh, 440px); min-height: 0; max-height: none; }
  .detail-layout .detail-panel h1 { font-size: 38px; }
  .detail-layout .detail-option { padding: 16px 0; }
  .detail-layout .detail-price { margin: 18px 0; }
}
/* Keep the image and product name below the header, without a blur over either. */
body:has(.detail-layout) .site-header { backdrop-filter: none; background: #fbfaf7; }
@media (min-width:761px) { .detail-layout { padding-top: 40px; } }
@media (max-width:760px) {
 .detail-layout .detail-main-photo,
 .detail-layout .detail-gallery:has(.gallery-thumbs) .detail-main-photo { height:auto; max-height:none; }
 .detail-layout .detail-main-photo .photo-zoom { height:auto; }
 .detail-layout .detail-main-photo img { height:auto; max-height:min(52svh,440px); }
}

/* [Codex] Giano has two complete faces, explicitly named in its gallery. */
.detail-layout[data-slug="cuscino-giano"] .gallery-thumb{flex-basis:96px;height:94px;background:#f8f6f0;border-radius:4px;display:flex;flex-direction:column;align-items:center;padding:4px;opacity:.8}
.detail-layout[data-slug="cuscino-giano"] .gallery-thumb img{height:62px;width:62px;flex:0 0 62px;object-fit:contain}
.detail-layout[data-slug="cuscino-giano"] .gallery-thumb span{font:500 10px/1.3 var(--sans);margin-top:5px;color:var(--green)}
.detail-layout[data-slug="cuscino-giano"] .gallery-thumb.selected{opacity:1}