/* FRANKLERS HOMBRE — ajustes sobre style.css (el diseño de clean-boots).
   Va dentro de las mismas capas para que la lectura móvil de @layer utilities siga mandando. */

@layer tokens{
  :root{ --red:#E22334 }   /* el acento rojo de la marca */
}

/* ── el recorrido: las fotos nuevas (cuadradas o altas) ── */
@layer layout{
  .shot--hero{ height:72vh; left:62% }
  .shot--press{ height:80vh; right:8vw; bottom:6vh; transform-origin:50% 90% }
  .shot--open{ width:auto; height:84vh; left:10vw; top:50% }
}

@layer after{
  /* índice de la línea: 11 productos en filas de 6 */
  .line-index{ grid-template-columns:repeat(6, 1fr) }
  .line-index img{ filter:none; mix-blend-mode:multiply }

  /* fotos de producto con fondo blanco: se funden con el estudio claro */
  .prod-cut--sq{ height:auto; width:min(80%, 640px); max-width:80%; filter:none !important; mix-blend-mode:multiply }
  .prod-media--photo{ background:#0b0b0c }

  /* compra */
  .buybox{ display:flex; flex-direction:column; gap:14px; width:100%; margin-top:6px;
           opacity:clamp(0, calc(var(--v,1) * 1.7 - .6), 1) }
  .price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; color:var(--ink) }
  .price output{ font-size:var(--fs-60); line-height:1; font-weight:400 }
  .price span{ font-size:var(--fs-14); color:var(--ink-fade) }
  .var-opts{ display:flex; flex-wrap:wrap; gap:6px }
  .var-opts button{ min-height:42px; padding:0 14px; border:1px solid var(--hairline); border-radius:var(--r);
                    background:transparent; color:var(--ink); font:inherit; font-size:var(--fs-14); cursor:pointer;
                    transition:background 200ms var(--ease-strong), color 200ms var(--ease-strong) }
  .var-opts [aria-checked="true"]{ background:var(--ink); color:var(--plate); border-color:var(--ink) }
  .var-opts button:disabled{ opacity:.35; text-decoration:line-through; cursor:not-allowed }
  .var-opts button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
  .buy{ background:var(--red); color:#fff }
  .buy.is-off{ background:var(--ink); color:var(--plate); opacity:.4; pointer-events:none }
  @media (hover:hover) and (pointer:fine){ .buy:hover{ filter:brightness(1.08) } }

  /* arma tu kit */
  .kit-media{ display:flex; align-items:center; justify-content:center }
  .kit-grid{ position:absolute; inset:6%; display:grid; gap:4%; place-items:center;
             grid-template-columns:repeat(2, 1fr) }
  .kit-grid[data-n="1"]{ grid-template-columns:1fr }
  .kit-grid[data-n="5"], .kit-grid[data-n="6"]{ grid-template-columns:repeat(3, 1fr) }
  .kit-grid img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;
                 animation:kitIn 600ms var(--ease-expo) both }
  @keyframes kitIn{ from{ opacity:0; transform:translateY(16px) scale(.94) } }
  .kit-pick{ list-style:none; display:flex; flex-direction:column; border-top:1px solid var(--hairline) }
  .kit-pick li{ display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--hairline);
                font-size:var(--fs-14); color:var(--ink) }
  .kit-pick label{ flex:1; display:flex; align-items:center; gap:12px; cursor:pointer; min-height:44px }
  .kit-pick input{ width:18px; height:18px; accent-color:var(--red); flex:none }
  .kit-pick img{ flex:none; width:44px; height:44px; object-fit:contain; border-radius:6px; background:#f2f2f0; mix-blend-mode:multiply }
  .kit-pick select{ font:inherit; font-size:12px; padding:6px 8px; border:1px solid var(--hairline); border-radius:6px;
                    background:transparent; color:var(--ink); max-width:120px }
  .kp-p{ min-width:72px; text-align:right; font-variant-numeric:tabular-nums }
  .kit-buy{ align-items:center }
  .kit-total{ display:flex; flex-direction:column; gap:2px; min-width:120px; color:var(--ink) }
  .kit-total span{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; opacity:.55 }
  .kit-total output{ font-size:var(--fs-24) }

  .foot-legal a{ text-decoration:underline; text-underline-offset:3px }
}

@layer utilities{
  @media (max-width:767px){
    .line-index{ grid-template-columns:repeat(3, 1fr) }
    .price output{ font-size:36px }
    .kit-pick select{ max-width:96px }
    .kp-p{ min-width:60px }
  }
}