/* ---------- Product detail: 360° viewer + anatomy ---------- */
.studio { background: radial-gradient(120% 90% at 50% 38%, #fbfbfa 0%, #f1f0ed 55%, #dedcd6 100%) !important; }
.pimg.studio img { object-fit: contain; padding: 6%; }
.pimg { position: relative; }
.pimg img.cover { object-position: center 18%; }
/* model photo on the card; hover reveals the clean product shot */
.pimg.has-alt .alt { position: absolute; inset: 0; z-index: 1; clip-path: inset(0 0 0 100%); transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.2, 1); }
.pimg.has-alt .alt img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.pcard:hover .pimg.has-alt .alt { clip-path: inset(0 0 0 0); }
.badge360 { z-index: 2; }
.badge360 { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font: 700 0.66rem/1 var(--font-ui); letter-spacing: 0.1em; color: var(--text); }
.badge360 svg { width: 14px; height: 14px; color: var(--gold-light); }
.pcard[data-href] { cursor: pointer; }

.item-section { padding: calc(var(--header-h) + 50px) 0 0; }
.item-section .crumbs { margin-bottom: 22px; }
.item-layout { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.viewer-col { position: sticky; top: calc(var(--header-h) + 34px); }
.item-layout > * { min-width: 0; } /* let grid columns shrink below their content (thumb strip) on phones */

.v360 { padding: 10px; border-radius: var(--r-xl); }
.v-stage { position: relative; aspect-ratio: 5 / 4.6; border-radius: calc(var(--r-xl) - 8px); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; outline: none;
  background: radial-gradient(120% 90% at 50% 38%, #fbfbfa 0%, #f1f0ed 55%, #d9d7d0 100%); }
.v-stage:focus-visible { box-shadow: 0 0 0 2px var(--gold) inset; }
.v-stage.grabbing { cursor: grabbing; }
.v-stage.zoomed { cursor: move; touch-action: none; }
.v-stage.focused { cursor: zoom-out; }
.pimg.studio img, .v-thumbs button img { mix-blend-mode: multiply; }

/* 3D scene: .v-scene zooms/pans, .v-turn rotates in perspective */
.v-scene { position: absolute; inset: 0; transform-origin: 50% 50%; perspective: 1300px; perspective-origin: 50% 40%; will-change: transform; }
.v-frame { position: absolute; top: 4%; height: 88%; left: 50%; aspect-ratio: 640 / 700; transform: translateX(-50%); z-index: 1; }
.v-turn { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.v-img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; filter: drop-shadow(0 18px 22px rgba(20, 24, 30, 0.22)) drop-shadow(0 2px 4px rgba(20, 24, 30, 0.18)); }
.v-shadow { position: absolute; left: 50%; bottom: 5.5%; width: 46%; height: 5%; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 0, 0, 0.26), transparent); pointer-events: none; }

/* part close-up: revealed with an iris wipe from the zoom point (no fade) */
.v-detail { position: absolute; inset: 0; z-index: 6; clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%)); transition: clip-path 0.75s cubic-bezier(0.7, 0, 0.2, 1); pointer-events: none; background: #111; }
.v-detail.open { clip-path: circle(80% at var(--ox, 50%) var(--oy, 50%)); pointer-events: auto; cursor: zoom-out; }
.v-detail img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.v-detail.open img { transform: scale(1); }
.v-cap { position: absolute; z-index: 7; left: 14px; bottom: 14px; width: min(330px, calc(100% - 28px)); padding: 16px 18px; border-radius: 18px; transform: translateY(calc(100% + 30px)); transition: transform 0.6s var(--ease); pointer-events: none; }
.v-cap.open { transform: none; pointer-events: auto; }
.v-cap small { font: 700 0.64rem/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.v-cap h4 { font: 500 1.45rem/1.12 var(--font-display); margin: 6px 0 6px; }
.v-cap p { font-size: 0.84rem; margin: 0 0 8px; }
.v-cap ul { margin: 0 0 8px; padding-left: 16px; font-size: 0.8rem; color: var(--text-2); display: grid; gap: 3px; }
.v-cap-hint { display: inline-flex; align-items: center; gap: 6px; font: 700 0.64rem/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); }
.v-cap-hint svg { width: 12px; height: 12px; }
.v-zoomchip { position: absolute; z-index: 4; right: 14px; top: 56px; padding: 7px 11px; font: 700 0.66rem/1 var(--font-ui); letter-spacing: 0.1em; color: var(--text); opacity: 0; transform: translateY(-4px); transition: all 0.3s; }
.v-zoomchip.show { opacity: 1; transform: none; }
.v-stage.focused .v-badge, .v-stage.focused .v-label, .v-stage.focused .v-zoomchip { opacity: 0; }
.v-stage.single { cursor: default; }
.v-stage.single > img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-stage.single::after { display: none; }
.v-note { display: flex; gap: 10px; align-items: center; margin: 12px 8px 4px; font-size: 0.86rem; }
.v-note svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); }
.v-badge, .v-label { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; font: 700 0.68rem/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
.v-badge { left: 14px; top: 14px; }
.v-badge svg { width: 16px; height: 16px; color: var(--gold-light); }
.v-label { right: 14px; top: 14px; color: var(--gold-light); }
.v-hint { position: absolute; z-index: 4; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(14, 20, 29, 0.72); color: #fff; font: 600 0.74rem/1 var(--font-ui); letter-spacing: 0.06em; pointer-events: none; transition: opacity 0.5s; animation: nudge 2.4s var(--ease) infinite; }
.v-hint svg { width: 18px; height: 18px; color: var(--gold-light); }
.v-hint.gone { opacity: 0; }
@keyframes nudge { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(calc(-50% + 8px)); } }

/* hotspots */
/* hotspots ride inside .v-turn, so they turn and zoom with the garment; counter-scaled to stay dot-sized */
.v-hot { position: absolute; inset: 0; z-index: 3; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; transform: translateZ(1px); }
.v-hot .hs { scale: calc(1 / var(--z, 1)); }
.v-hot.show { opacity: 1; visibility: visible; }
.hs { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 0; border-radius: 50%; cursor: pointer; color: #1a1408; font: 800 0.72rem/1 var(--font-ui);
  background: radial-gradient(circle at 35% 30%, #f6e6c1, #c9a96e 65%, #9a7a44); box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.3), 0 6px 16px rgba(0, 0, 0, 0.35); transition: transform 0.3s var(--ease); }
.hs::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(201, 169, 110, 0.7); animation: ping 2s ease-out infinite; }
@keyframes ping { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.hs:hover, .hs.active { transform: scale(1.18); }
.hs.active { box-shadow: 0 0 0 4px rgba(26, 35, 50, 0.9), 0 0 0 6px var(--gold); }
.hs-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); padding: 5px 9px; border-radius: 8px; white-space: nowrap; background: rgba(14, 20, 29, 0.88); color: #fff; font: 700 0.66rem/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; transition: all 0.25s; pointer-events: none; }
.hs:hover .hs-tip { opacity: 1; transform: translateX(-50%); }
/* controls */
.v-bar { display: flex; align-items: center; gap: 10px; padding: 14px 8px 6px; }
.v-btn { width: 38px; height: 38px; flex-shrink: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font: 600 1.15rem/1 var(--font-ui); color: var(--text); background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset; transition: all 0.25s; }
.v-btn:hover { color: #1a1408; background: linear-gradient(180deg, #e7d3a8, #c9a96e); box-shadow: 0 8px 20px -8px rgba(201, 169, 110, 0.8); }
.v-btn svg { width: 14px; height: 14px; }
.v-sep { width: 1px; height: 24px; background: var(--line); margin: 0 2px; }
.v-range { flex: 1; accent-color: var(--gold); height: 4px; cursor: pointer; }
.v-deg { min-width: 44px; text-align: right; font: 700 0.8rem/1 var(--font-ui); color: var(--gold-light); font-variant-numeric: tabular-nums; }
.v-thumbs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 6px 4px 4px; }
.v-thumbs button { border: 0; padding: 4px 4px 6px; border-radius: 12px; cursor: pointer; background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset; color: var(--text-3); transition: all 0.3s; }
.v-thumbs button img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: #f3f2ef; }
.v-thumbs button span { display: block; margin-top: 5px; font: 700 0.56rem/1.1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.v-thumbs button:hover { color: var(--text); }
.v-thumbs button.on { color: var(--gold-light); box-shadow: 0 0 0 1.5px var(--gold) inset; background: rgba(201, 169, 110, 0.1); }

/* info panel */
.item-info { padding: clamp(24px, 3vw, 38px); }
.item-info h1 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
.fabric-line { color: var(--gold-light); font-weight: 600; margin: 0; }
.swatch { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 1px var(--line) inset; font: 600 0.82rem/1 var(--font-ui); }
.swatch i { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
.part-index { margin-top: 24px; }
.part-index h4 { font: 700 0.7rem/1 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; }
.part-index ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.part-index button { width: 100%; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.03); color: var(--text-2); font: 600 0.88rem/1.2 var(--font-ui); text-align: left; cursor: pointer; transition: all 0.25s; }
.part-index button b { color: var(--gold); font-weight: 800; font-size: 0.74rem; }
.part-index button span { opacity: 0; transform: translateX(-4px); transition: all 0.25s; color: var(--gold); }
.part-index button:hover, .part-index button.on { background: rgba(201, 169, 110, 0.12); color: var(--text); }
.part-index button:hover span, .part-index button.on span { opacity: 1; transform: none; }
.spec-table { margin: 22px 0 0; display: grid; border-top: 1px solid var(--line); }
.spec-table div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.spec-table dt { font: 700 0.68rem/1.6 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.spec-table dd { margin: 0; font-size: 0.9rem; color: var(--text); }
.item-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* anatomy cards */
.anatomy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.part-card { border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-rows: auto 1fr; scroll-margin-top: 120px; }
.part-img { margin: 8px 8px 0; border-radius: calc(var(--r-lg) - 6px); overflow: hidden; aspect-ratio: 16 / 11; }
.part-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.part-card:hover .part-img img { transform: scale(1.08); }
.part-body { padding: 20px 22px 24px; display: grid; gap: 8px; align-content: start; }
.part-num { display: flex; align-items: baseline; gap: 10px; }
.part-num b { font: 500 2.2rem/1 var(--font-display); }
.part-num small { font: 700 0.66rem/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.part-card h3 { font-size: 1.5rem; }
.part-card p { margin: 0; font-size: 0.92rem; }
.part-card .ticks { margin-top: 6px; gap: 6px; }
.part-card .ticks li { font-size: 0.85rem; }
.show-on { border: 0; background: none; padding: 0; margin-top: 6px; justify-self: start; cursor: pointer; }

/* lifestyle */
.lifestyle { display: grid; grid-template-columns: 0.9fr 1.1fr; overflow: hidden; border-radius: var(--r-xl); }
.ls-img { min-height: 520px; position: relative; }
.ls-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ls-body { padding: clamp(28px, 5vw, 70px); align-self: center; }

@media (max-width: 1100px) { .anatomy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .item-layout, .lifestyle { grid-template-columns: 1fr; }
  .viewer-col { position: relative; top: auto; }
  .ls-img { min-height: 420px; }
}
@media (max-width: 640px) {
  .anatomy { grid-template-columns: 1fr; }
  .v-thumbs { grid-template-columns: repeat(7, 64px); overflow-x: auto; scrollbar-width: none; }
  .v-cap { width: auto; right: 14px; padding: 12px 14px; }
  .v-cap ul { display: none; }
  .v-bar { gap: 6px; flex-wrap: nowrap; padding: 12px 4px 4px; }
  .v-btn { width: 34px; height: 34px; font-size: 1rem; }
  .v-range { min-width: 40px; }
  .v-deg, .v-sep { display: none; }
  .v-hint { font-size: 0.68rem; padding: 7px 12px; white-space: nowrap; bottom: 12px; }
  .v-badge, .v-label { padding: 6px 10px; font-size: 0.6rem; top: 10px; }
  .v-badge { left: 10px; } .v-label { right: 10px; }
  .item-section { padding-top: calc(var(--header-h) + 34px); }
  .item-info h1 { font-size: 2.1rem; }
  .spec-table div { grid-template-columns: 96px 1fr; }
}