/* ── SHOP ── */
#view-index   { display: block; }
#view-producto { display: none; }

.page-head { padding: var(--spacing-lg) var(--page-pad) var(--spacing-md); }
.page-title { font-family: var(--font-display); font-size: clamp(32px,5vw,56px); font-weight: 300; font-style: italic; margin: 0 0 6px; }
.page-sub  { font-size: 14px; color: var(--color-ink-dim); letter-spacing: .15em; }
.page-desc { font-size: 14px; color: var(--color-ink-dim); line-height: 1.8; margin-top: 10px; max-width: 480px; }

/* GRILLA PRODUCTOS */
.merch-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: var(--spacing-md) var(--page-pad) var(--spacing-xl); }
.merch-card { cursor: pointer; }
.merch-img { aspect-ratio: 3/4; overflow: hidden; background: var(--color-ph); position: relative; }
.merch-img .ph { width: 100%; height: 100%; transition: transform .8s var(--ease-out); }
.merch-card:hover .merch-img .ph { transform: scale(1.04); }
.merch-tag { position: absolute; top: 10px; left: 10px; font-size: 14px; border: 0.5px solid var(--color-ink-faint); padding: 3px 8px; color: var(--color-ink-dim); letter-spacing: .08em; background: var(--color-surface); }
.merch-info { padding: 12px 0 0; }
.merch-nombre { font-family: var(--font-display); font-size: 18px; font-weight: 300; font-style: italic; margin-bottom: 3px; }
.merch-desc-short { font-size: 14px; color: var(--color-ink-dim); margin-bottom: 5px; line-height: 1.5; }
.merch-precio { font-size: 14px; color: var(--color-ink-dim); }
.merch-cta { display: inline-block; margin-top: 10px; font-size: 14px; border: 0.5px solid var(--color-ink-faint); padding: 6px 14px; color: var(--color-ink-dim); letter-spacing: .1em; transition: border-color .3s, color .3s; }
.merch-card:hover .merch-cta { border-color: var(--color-ink); color: var(--color-ink); }

/* PRODUCTO INDIVIDUAL */
.prod-layout { display: grid; grid-template-columns: 55fr 45fr; gap: var(--spacing-lg); padding: var(--spacing-md) var(--page-pad) var(--spacing-xl); align-items: start; }
.prod-img-main { aspect-ratio: 3/4; background: var(--color-ph); overflow: hidden; }
.prod-img-main .ph { width: 100%; height: 100%; }
.prod-img-thumbs { display: flex; gap: 6px; margin-top: 8px; }
.prod-thumb { width: 56px; aspect-ratio: 1/1; background: var(--color-ph); cursor: pointer; border: 0.5px solid transparent; transition: border-color .3s; flex-shrink: 0; }
.prod-thumb.active { border-color: var(--color-ink); }
.prod-thumb .ph { width: 100%; height: 100%; }
.prod-info { position: sticky; top: calc(var(--header-h) + 20px); }
.prod-back { font-size: 14px; color: var(--color-ink-dim); cursor: pointer; letter-spacing: .1em; margin-bottom: var(--spacing-sm); display: block; transition: color .3s; }
.prod-back:hover { color: var(--color-ink); }
.prod-nombre { font-family: var(--font-display); font-size: clamp(24px,3.5vw,44px); font-weight: 300; font-style: italic; line-height: 1.2; margin: 0 0 6px; }
.prod-subtitulo { font-size: 14px; color: var(--color-ink-dim); letter-spacing: .12em; margin-bottom: var(--spacing-sm); }
.prod-line { height: var(--line-weight); background: var(--color-ink-faint); margin: var(--spacing-sm) 0; }
.wizard-label { font-size: 14px; letter-spacing: .15em; color: var(--color-ink-dim); margin-bottom: 8px; }
.variantes-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--spacing-sm); }
.variante-btn { font-size: 14px; border: 0.5px solid var(--color-ink-faint); padding: 6px 14px; color: var(--color-ink-dim); cursor: pointer; transition: border-color .3s, color .3s; letter-spacing: .06em; }
.variante-btn:hover, .variante-btn.active { border-color: var(--color-ink); color: var(--color-ink); }
.obra-selector { border: 0.5px solid var(--color-ink-faint); padding: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.obra-selector-label { font-size: 14px; color: var(--color-ink-dim); letter-spacing: .12em; margin-bottom: 10px; }
.obra-mini-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.obra-mini { aspect-ratio: 1/1; background: var(--color-ph); cursor: pointer; border: 0.5px solid transparent; transition: border-color .3s; position: relative; display: flex; align-items: center; justify-content: center; }
.obra-mini:hover, .obra-mini.active { border-color: var(--color-ink); }
.obra-mini-check { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; background: var(--color-ink); display: none; align-items: center; justify-content: center; }
.obra-mini.active .obra-mini-check { display: flex; }
.obra-mini-check::after { content: '✓'; font-size: 14px; color: var(--color-bg); line-height: 1; }
.obra-mini .ph { width: 100%; height: 100%; }
.obra-selector-more { font-size: 14px; color: var(--color-ink-dim); letter-spacing: .08em; margin-top: 10px; cursor: pointer; transition: color .3s; display: block; }
.obra-selector-more:hover { color: var(--color-ink); }
.prod-precio-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--spacing-sm); }
.prod-precio { font-family: var(--font-display); font-size: 32px; font-weight: 300; font-style: italic; }
.prod-precio-desde { font-size: 14px; color: var(--color-ink-dim); }
.btn-agregar { display: block; width: 100%; text-align: center; border: 0.5px solid var(--color-ink-faint); padding: 16px; font-family: var(--font-mono); font-size: 14px; letter-spacing: .2em; color: var(--color-ink); text-transform: uppercase; cursor: pointer; background: transparent; transition: border-color .3s, background .3s; margin-bottom: var(--spacing-sm); }
.btn-agregar:hover { border-color: var(--color-ink); background: var(--color-ink-faint); }
.prod-envio { font-size: 14px; color: var(--color-ink-dim); line-height: 1.8; }
.prod-link-galeria { display: block; font-size: 14px; color: var(--color-ink-dim); margin-top: 10px; letter-spacing: .08em; transition: color .3s; }
.prod-link-galeria:hover { color: var(--color-ink); }

@media (max-width: 767px) {
  .merch-grid { grid-template-columns: repeat(2,1fr); }
  .prod-layout { grid-template-columns: 1fr; gap: var(--spacing-md); }
  .prod-info { position: static; }
}
@media (min-width: 768px) and (max-width: 1024px) { .merch-grid { grid-template-columns: repeat(2,1fr); } }