/* Arena y Hilo (#115): moda editorial sobre lienzo hueso. Todo va con el prefijo .theme-arena-y-hilo.
   Consume --brand, --brand-hover, --on-brand, --accent y --on-accent de la tienda; solo redefine los tokens neutros. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jost-latin-500-normal.woff2") format("woff2"); }

.theme-arena-y-hilo {
  --bg: #f7f4ef;
  --soft: #efeae2;
  --ink: #1c1c1c;
  --ink-2: #5a544c;
  --ink-3: #6e665b;
  --line: #e2dcd2;
  --line-strong: #c9c0b2;
  --radius: 0;
  --font: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ah-gutter: 20px;
  font-weight: 400;
  font-synthesis-weight: none; /* Jost solo trae 400 y 500: sin negrita simulada donde la plataforma pide 600 o 700 */
}
@media (max-width: 640px) { .theme-arena-y-hilo { --ah-gutter: 16px; } }

.theme-arena-y-hilo h1,
.theme-arena-y-hilo h2,
.theme-arena-y-hilo h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0; line-height: 1.08; font-variant-numeric: lining-nums; }
.theme-arena-y-hilo h1 { font-size: clamp(34px, 5vw, 52px); }
.theme-arena-y-hilo h2 { font-size: clamp(28px, 3.6vw, 40px); }
.theme-arena-y-hilo .ah-overline { margin: 0 0 10px; font: 500 11.5px/1.3 var(--font); letter-spacing: .2em; text-transform: uppercase; }
.theme-arena-y-hilo .ah-quiet-link { font: 500 12.5px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; padding-block: 14px; margin-block: -14px; }
.theme-arena-y-hilo .ah-quiet-link:hover { text-decoration-thickness: 2px; }

/* Botones y campos: rectos, en mayúsculas espaciadas */
.theme-arena-y-hilo .btn { border-radius: 0; font: 500 13px var(--font); letter-spacing: .14em; text-transform: uppercase; min-height: 48px; }
.theme-arena-y-hilo .qty input { border-radius: 0; }
.theme-arena-y-hilo select,
.theme-arena-y-hilo input[type=number] { border-radius: 0; }

/* Encabezado: cajón a la izquierda, logo al centro, búsqueda, cuenta y carrito a la derecha */
.theme-arena-y-hilo .ah-head { background: var(--bg); border-bottom: 1px solid var(--line); }
.theme-arena-y-hilo .ah-head-row { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "nav logo tools"; align-items: center; gap: 16px; min-height: 76px; }
.theme-arena-y-hilo .ah-nav { grid-area: nav; justify-self: start; }
.theme-arena-y-hilo .ah-logo { grid-area: logo; justify-self: center; font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: .08em; }
.theme-arena-y-hilo .ah-logo .logo-img { height: 56px; max-width: 200px; }
.theme-arena-y-hilo .ah-tools { grid-area: tools; justify-self: end; display: flex; align-items: center; gap: 4px; }
.theme-arena-y-hilo .ah-search { flex: 0 1 200px; max-width: 200px; margin: 0 8px 0 0; }
.theme-arena-y-hilo .ah-search .icon { left: 0; }
.theme-arena-y-hilo .ah-search input { height: 44px; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; padding: 0 0 0 28px; }
.theme-arena-y-hilo .ah-search input:focus { background: transparent; border-color: var(--ink); }
.theme-arena-y-hilo .ah-search input::placeholder { color: var(--ink-2); opacity: 1; }
.theme-arena-y-hilo .head-link:hover { background: var(--soft); }

/* Cajón con <details>: el resumen abre y cierra; el fondo oscuro también es parte del resumen, así que tocarlo cierra. */
.theme-arena-y-hilo .ah-nav summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 4px; cursor: pointer; font: 500 12.5px var(--font); letter-spacing: .16em; text-transform: uppercase; }
.theme-arena-y-hilo .ah-nav summary::-webkit-details-marker { display: none; }
.theme-arena-y-hilo .ah-nav-icon { display: inline-flex; }
.theme-arena-y-hilo .ah-nav-close { display: none; }
.theme-arena-y-hilo .ah-nav[open] .ah-nav-open { display: none; }
.theme-arena-y-hilo .ah-nav[open] .ah-nav-close { display: inline-flex; position: fixed; top: 20px; left: 21px; z-index: 3; padding: 11px; }
.theme-arena-y-hilo .ah-nav[open] .ah-nav-label { visibility: hidden; }
.theme-arena-y-hilo .ah-nav[open] summary::before { content: ""; position: fixed; inset: 0; z-index: 1; background: rgba(28, 28, 28, .38); }
.theme-arena-y-hilo .ah-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 2; width: min(360px, 86vw); overflow-y: auto; display: flex; flex-direction: column; padding: 120px 32px 32px; background: var(--bg); box-shadow: 12px 0 40px rgba(28, 28, 28, .16); }
.theme-arena-y-hilo .ah-drawer a { padding: 6px 0; text-decoration: none; font: 500 28px/1.2 var(--font-display); }
.theme-arena-y-hilo .ah-drawer a:hover,
.theme-arena-y-hilo .ah-drawer a[aria-current] { color: var(--accent); }
.theme-arena-y-hilo .ah-drawer .ah-drawer-small { font: 400 15px/1.5 var(--font); padding: 11px 0; }
.theme-arena-y-hilo .ah-drawer-title { margin: 28px 0 8px; font: 500 11.5px/1.3 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.theme-arena-y-hilo .ah-drawer-title:first-child { margin-top: 0; }

@media (max-width: 760px) {
  .theme-arena-y-hilo .ah-head-row { grid-template-columns: 88px 1fr 44px 44px; grid-template-areas: "nav logo acc cart" "search search search search"; gap: 4px 0; min-height: 0; padding-top: 8px; padding-bottom: 10px; }
  .theme-arena-y-hilo .ah-tools { display: contents; }
  .theme-arena-y-hilo .ah-tools .head-link { grid-area: acc; justify-self: center; }
  .theme-arena-y-hilo .ah-tools .cart-link { grid-area: cart; }
  .theme-arena-y-hilo .ah-search { grid-area: search; flex: none; max-width: none; width: 100%; margin: 0; }
  .theme-arena-y-hilo .ah-logo .logo-img { height: 46px; max-width: 150px; }
  .theme-arena-y-hilo .ah-nav-label { display: none; }
}

/* Página */
.theme-arena-y-hilo .site-main { padding-top: 36px; padding-bottom: 80px; }
.theme-arena-y-hilo .flash li { border-radius: 0; }
.theme-arena-y-hilo .flash li.success { background: var(--soft); color: var(--ink); border-left: 2px solid var(--accent); }

/* Portada */
.theme-arena-y-hilo .ah-home { padding-top: 0; }
.theme-arena-y-hilo .ah-home > .flash { max-width: 1200px; margin: 20px auto; padding: 0 var(--ah-gutter); }
.theme-arena-y-hilo .ah-section { margin-top: clamp(64px, 9vw, 120px); }
.theme-arena-y-hilo .ah-section[id] { scroll-margin-top: 120px; }
@media (min-width: 761px) { .theme-arena-y-hilo .ah-section[id] { scroll-margin-top: 96px; } }

.theme-arena-y-hilo .ah-hero { position: relative; min-height: clamp(460px, 80vh, 780px); display: flex; align-items: flex-end; overflow: hidden; background: var(--soft); color: #ffffff; }
.theme-arena-y-hilo .ah-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.theme-arena-y-hilo .ah-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(24, 20, 16, .78), rgba(24, 20, 16, .56) 45%, rgba(24, 20, 16, .2) 75%, transparent); }
.theme-arena-y-hilo .ah-hero-text { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--ah-gutter) clamp(40px, 7vw, 88px); }
.theme-arena-y-hilo .ah-hero h1 { color: #ffffff; font-size: clamp(64px, 12vw, 148px); line-height: .9; margin: 0 0 16px; }
.theme-arena-y-hilo .ah-hero p:not(.ah-overline) { color: #ffffff; max-width: 34ch; font-size: 17px; }
.theme-arena-y-hilo .ah-hero .ah-quiet-link { color: #ffffff; display: inline-block; margin-top: -6px; }

.theme-arena-y-hilo .ah-mosaic { display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: auto 1fr; gap: 24px; align-items: start; }
.theme-arena-y-hilo .ah-tile { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--soft); text-decoration: none; color: #ffffff; }
.theme-arena-y-hilo .ah-tile-tall { grid-row: span 2; aspect-ratio: 3 / 4; }
.theme-arena-y-hilo .ah-tile img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .theme-arena-y-hilo .ah-tile img { transition: transform .6s ease; }
  .theme-arena-y-hilo .ah-tile:hover img { transform: scale(1.025); }
}
.theme-arena-y-hilo .ah-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(24, 20, 16, .6), transparent 45%); }
.theme-arena-y-hilo .ah-tile-text { position: absolute; left: 24px; bottom: 22px; z-index: 1; display: flex; flex-direction: column; }
.theme-arena-y-hilo .ah-tile-name { font: 500 clamp(34px, 4vw, 52px)/1 var(--font-display); }
.theme-arena-y-hilo .ah-tile-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); }
.theme-arena-y-hilo .ah-tile-list a { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-strong); text-decoration: none; font: 500 26px/1.1 var(--font-display); }
.theme-arena-y-hilo .ah-tile-list a:hover { color: var(--accent); }

.theme-arena-y-hilo .ah-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.theme-arena-y-hilo .ah-section-head h2 { margin: 0; }
.theme-arena-y-hilo .ah-rail {
  --ah-edge: max(var(--ah-gutter), calc((100% - 1160px) / 2));
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 23%); gap: 28px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 0 var(--ah-edge) 16px; scroll-padding-inline: var(--ah-edge);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.theme-arena-y-hilo .ah-rail-item { scroll-snap-align: start; min-width: 0; }

.theme-arena-y-hilo .ah-story { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(28px, 7vw, 104px); align-items: center; }
.theme-arena-y-hilo .ah-story-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--soft); }
.theme-arena-y-hilo .ah-story-img img { width: 100%; height: 100%; object-fit: cover; }
.theme-arena-y-hilo .ah-story-text { max-width: 44ch; }
.theme-arena-y-hilo .ah-story-text p:not(.ah-overline) { color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.theme-arena-y-hilo .ah-story-text .ah-overline { color: var(--accent); }

.theme-arena-y-hilo .ah-visit h2 { margin-bottom: 24px; }
.theme-arena-y-hilo .ah-visit-card { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; padding: 32px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.theme-arena-y-hilo .ah-visit-card h3 { font-size: 30px; margin-bottom: 8px; }
.theme-arena-y-hilo .ah-visit-address { color: var(--ink-2); max-width: 32ch; }
.theme-arena-y-hilo .ah-hours { margin: 0; display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.theme-arena-y-hilo .ah-hours div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 6px; border-bottom: 1px dotted var(--line-strong); }
.theme-arena-y-hilo .ah-hours dt { color: var(--ink-2); }
.theme-arena-y-hilo .ah-hours dd { margin: 0; }

@media (max-width: 760px) {
  .theme-arena-y-hilo .ah-hero { min-height: 64vh; }
  .theme-arena-y-hilo .ah-hero-img { object-position: 62% 50%; }
  .theme-arena-y-hilo .ah-mosaic { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
  .theme-arena-y-hilo .ah-tile-tall { grid-row: auto; aspect-ratio: 4 / 5; }
  .theme-arena-y-hilo .ah-tile-list { margin-top: 8px; }
  .theme-arena-y-hilo .ah-rail { grid-auto-columns: 64%; gap: 16px; }
  .theme-arena-y-hilo .ah-story { grid-template-columns: 1fr; }
  .theme-arena-y-hilo .ah-visit-card { grid-template-columns: 1fr; }
}

/* Tarjeta: foto vertical 3:4 sin borde, nombre en versalitas y precio debajo */
.theme-arena-y-hilo .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 56px 28px; }
@media (max-width: 640px) { .theme-arena-y-hilo .grid { grid-template-columns: 1fr 1fr; gap: 36px 14px; } }
.theme-arena-y-hilo .card { gap: 8px; }
.theme-arena-y-hilo .card-link { gap: 14px; }
.theme-arena-y-hilo .card-img { aspect-ratio: 3 / 4; border-radius: 0; }
.theme-arena-y-hilo .card-img img,
.theme-arena-y-hilo .gallery-main img { mix-blend-mode: multiply; } /* el blanco de las fotos de catálogo toma el --soft del contenedor */
.theme-arena-y-hilo .card-img .tag { border-radius: 0; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.theme-arena-y-hilo .card-body { gap: 4px; }
.theme-arena-y-hilo .card-name { font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.45; }
.theme-arena-y-hilo .card:hover .card-name { text-decoration: none; }
.theme-arena-y-hilo .card-price { font-size: 14px; color: var(--ink-2); }
.theme-arena-y-hilo .swatches { margin: -8px -12px -4px; }
.theme-arena-y-hilo .swatch { min-width: 44px; min-height: 44px; }
.theme-arena-y-hilo .swatch-dot { width: 18px; height: 18px; border-width: 1px; }
.theme-arena-y-hilo .swatch[aria-pressed=true] .swatch-dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink); }

/* Listado */
.theme-arena-y-hilo .page-title { margin: 16px 0 28px; text-align: center; }
.theme-arena-y-hilo .page-title h1 { font-size: clamp(42px, 6vw, 68px); }
.theme-arena-y-hilo .page-title .lead { margin: 0 auto; }
.theme-arena-y-hilo .crumbs { letter-spacing: .08em; }
.theme-arena-y-hilo .list-bar { margin-bottom: 36px; border-color: var(--line-strong); }
.theme-arena-y-hilo .chip { border-radius: 0; }

/* Ficha: galería grande a la izquierda; a la derecha tallas en píldoras, colores en muestras y la descripción angosta */
.theme-arena-y-hilo .ah-product { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); }
.theme-arena-y-hilo .ah-product.product-nogallery { grid-template-columns: minmax(0, 680px); }
.theme-arena-y-hilo .ah-product .gallery { top: 110px; }
@media (max-width: 860px) {
  .theme-arena-y-hilo .ah-product { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .theme-arena-y-hilo .ah-buy { max-width: none; }
}
.theme-arena-y-hilo .gallery-main { border-radius: 0; background: var(--soft); }
.theme-arena-y-hilo .gallery-main img { max-height: calc(100vh - 140px); object-fit: contain; }
.theme-arena-y-hilo .gallery-main .no-img,
.theme-arena-y-hilo .gallery-main.img-failed { aspect-ratio: 3 / 4; }
.theme-arena-y-hilo .thumbs button { border-radius: 0; flex-basis: 66px; height: 88px; }
.theme-arena-y-hilo .ah-buy { max-width: 440px; padding-top: 8px; }
.theme-arena-y-hilo .ah-buy h1 { font-size: clamp(36px, 4vw, 50px); margin-bottom: 12px; }
.theme-arena-y-hilo .ah-buy .price { font: 400 20px var(--font); }
.theme-arena-y-hilo .opt legend { font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; }
.theme-arena-y-hilo .opt legend span { text-transform: none; letter-spacing: 0; font-size: 14px; }
.theme-arena-y-hilo .pill span { min-width: 52px; font-weight: 500; border-color: var(--line-strong); border-radius: 0; }
.theme-arena-y-hilo .ah-swatch-pills { gap: 10px; }
.theme-arena-y-hilo .ah-swatch-pill > span { min-width: 0; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid transparent; background: transparent; }
.theme-arena-y-hilo .ah-swatch-pill .pill-color { width: 32px; height: 32px; margin: 0; border: 1px solid rgba(28, 28, 28, .55); }
.theme-arena-y-hilo .ah-swatch-pill input:checked + span { background: transparent; border: 1px solid var(--ink); color: inherit; box-shadow: inset 0 0 0 1px var(--ink); }
.theme-arena-y-hilo .ah-swatch-pill:hover > span { border-color: var(--line-strong); }
.theme-arena-y-hilo .ah-swatch-pill > span { position: relative; }
.theme-arena-y-hilo .ah-swatch-pill.unavailable .pill-color { opacity: .45; }
.theme-arena-y-hilo .ah-swatch-pill.unavailable > span::after { content: ""; position: absolute; inset: 6px; background: linear-gradient(to top right, transparent calc(50% - .75px), var(--ink-2) calc(50% - .75px), var(--ink-2) calc(50% + .75px), transparent calc(50% + .75px)); }
.theme-arena-y-hilo .ah-buy .desc { max-width: 36ch; border-color: var(--line-strong); color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.theme-arena-y-hilo .ah-buy .desc h2 { font: 500 12px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.theme-arena-y-hilo .brand-link { letter-spacing: .16em; }

/* Pie */
.theme-arena-y-hilo .ah-foot { background: var(--soft); border-top: 1px solid var(--line); padding: 56px 0 28px; margin-top: 40px; }
.theme-arena-y-hilo .ah-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.theme-arena-y-hilo .ah-foot-name { font: 500 32px/1.1 var(--font-display); text-decoration: none; }
.theme-arena-y-hilo .ah-foot-brand p { color: var(--ink-2); margin-top: 8px; }
.theme-arena-y-hilo .ah-foot-links { display: flex; flex-direction: column; }
.theme-arena-y-hilo .ah-foot-links a { color: var(--ink-2); text-decoration: none; padding-block: 11px; }
.theme-arena-y-hilo .ah-foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.theme-arena-y-hilo .foot-note { color: var(--ink-2); }
@media (max-width: 640px) { .theme-arena-y-hilo .ah-foot-grid { grid-template-columns: 1fr 1fr; } .theme-arena-y-hilo .ah-foot-brand { grid-column: 1 / -1; } }

/* Mini carrito: mismo lienzo */
.theme-arena-y-hilo .drawer-panel { background: var(--bg); }
.theme-arena-y-hilo .drawer-head h2 { font-size: 28px; }

/* «Comprar ahora» como enlace discreto: la acción principal es «Agregar al carrito» (decisión de Jams, 21 oct). */
.theme-arena-y-hilo .ah-buy .ah-buy-now { background: none; border: 0; box-shadow: none; min-height: 44px; color: var(--ink); font: 500 12px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.theme-arena-y-hilo .ah-buy .ah-buy-now:hover:not(:disabled) { background: none; color: var(--ink-2); }
.theme-arena-y-hilo .ah-buy .ah-buy-now:disabled { opacity: .5; text-decoration: none; }