/* Suplenu: lenguaje visual de referencia (ángulos rectos, filetes finos, tipografía condensada
   en mayúsculas con tracking amplio, sin sombras). Acento tomado del brillo cian del logo. Se carga al final. */
:root{--accent:#2fd6dc;--accent-deep:#087d83;--accent-soft:#e6fafa;--ink:#303840;--rule:#d5dde0;--panel:#f2f5f6}

/* Barra superior y cabecera: planas, con un filete de acento */
.trust-bar{background:var(--ink);color:#fff}.trust-bar span:before{background:var(--accent)}
header,.storefront-home header{backdrop-filter:none;box-shadow:none;border-bottom:1px solid var(--rule)}
.storefront-home header:after{content:'';grid-column:1/-1;grid-row:3;height:2px;margin:0 -5%;background:var(--accent)}

.cart-trigger,header .cart-trigger{border-radius:0;background:#fff;border:1px solid var(--rule)}
.cart-trigger span{border-radius:0;background:var(--ink);color:var(--accent)}

/* Navegación: mayúsculas condensadas, tracking amplio, sin pastillas */
.storefront-home header nav{font-size:15px;letter-spacing:3px;gap:40px}
header nav>a,.products-menu summary{position:relative}
header nav>a:after,.products-menu summary:before{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s}
header nav>a:hover:after,.products-menu summary:hover:before,.products-menu[open] summary:before{transform:scaleX(1)}
header nav a:hover{color:var(--ink)}
.products-dropdown{border-radius:0;box-shadow:none;border:1px solid var(--rule);border-top:2px solid var(--accent)}

/* Botones: principal en acento con tinta oscura; secundario oscuro con texto de acento */
.primary,.about-cta{border-radius:0;text-transform:uppercase;letter-spacing:2px;font-size:13px;font-weight:700}
.primary{background:var(--accent);color:var(--ink)}.primary:hover{background:#5fe4e8}
.storefront-home .hero .primary{background:var(--ink);color:var(--accent)}.storefront-home .hero .primary:hover{background:#242b31}
.storefront-home .product-actions .add{background:var(--ink);color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;font-weight:600}
.storefront-home .product-actions .add:hover{background:var(--accent);color:var(--ink)}
.storefront-home .product-card.is-out-of-stock .add{color:#61676c}
.details,.row-tools button,.quantity-control{border-radius:0}

/* Hero y carrusel */
.storefront-home .hero .eyebrow,.storefront-home .hero-copy .eyebrow{display:inline-block;background:var(--accent);color:var(--ink);padding:5px 10px;letter-spacing:2px}
.storefront-home .hero-slide{background:linear-gradient(120deg,#fff 0%,var(--accent-soft) 55%,#b8eef0 100%)}
.storefront-home .hero-visual:before{background:#ffffff80;box-shadow:none}
.storefront-home .carousel-controls{background:#fff;border-top:1px solid var(--rule)}
.storefront-home .carousel-dots button span{background:#c3cdd1;height:3px}.storefront-home .carousel-dots button[aria-pressed=true] span{background:var(--ink)}
.storefront-home .carousel-arrows button{color:var(--ink)}

/* Títulos de sección y categorías */
.collection-intro h2,.storefront-home .section-head h2{letter-spacing:.5px}
.collection-intro h2:after{content:'';display:block;width:56px;height:3px;margin:16px auto 0;background:var(--accent)}
.eyebrow{letter-spacing:2.5px}
.category-tile{background:var(--panel);transition:background .2s}.category-tile:nth-child(2n){background:var(--panel)}
.category-tile:after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.category-tile:hover:after,.category-tile:focus-visible:after{transform:scaleX(1)}
.category-tile>span>span{color:var(--ink)}
.category-tile:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px}

/* Productos y bloques */
.storefront-home .product-face{background:var(--panel)}
.storefront-home .offers-section{background:var(--panel)}
.storefront-home .filters button.active{background:var(--ink);color:var(--accent);border-color:var(--ink)}
.storefront-home .about{background:var(--ink)}.storefront-home .about>.eyebrow{background:none;color:var(--accent);padding:0}
.storefront-home footer{border-top:1px solid var(--rule)}

/* Diálogos: planos, con filete de acento */
dialog{border-radius:0;box-shadow:none;border-top:3px solid var(--accent)}
dialog::backdrop{backdrop-filter:none;background:#303840b3}
.icon{border-radius:0;background:var(--panel)}
.basket-picture,#checkout-form input,#checkout-form select,.variant-label select,.shipping-note{border-radius:0}
.cart-dialog .total strong,.cart-dialog #dialog-count{color:var(--accent-deep)}

@media(max-width:760px){
 .storefront-home header nav{letter-spacing:1.2px;gap:14px;font-size:13px}
 .storefront-home header:after{grid-row:4}
}
@media(prefers-reduced-motion:reduce){header nav>a:after,.products-menu summary:before,.category-tile:after{transition:none}}

/* P1 auditoría: texto legible, objetivos táctiles de 44px y puntos del carrusel visibles */
.trust-bar,.storefront-home .demo-bar{font-size:12px}
.storefront-home .face-top,.storefront-home .face-bottom,.face-top,.basket-brand,.hero-foot,.image-caption,.storefront-home .product-info .unit-price,.storefront-home .product-card.is-out-of-stock .availability-note{font-size:12px}
.storefront-home .hero .eyebrow,.collection-intro .eyebrow{font-size:12px;letter-spacing:1.5px}
.storefront-home .hero .slide-description{font-size:14px}
.product-info h3 a{display:block;padding:12px 0;margin:-12px 0}
.logo{min-height:44px}
.carousel-dots span{background:#7d8b91}
@media(max-width:760px){
 .trust-bar{font-size:11px}
 .storefront-home .face-top,.storefront-home .face-bottom{font-size:11px;letter-spacing:.3px}
 .storefront-home .face-top{gap:6px;flex-wrap:wrap}
 .storefront-home .hero .eyebrow{font-size:11px;letter-spacing:1px;padding:4px 8px}
 .collection-intro .eyebrow{font-size:11px}
 .storefront-home .hero .slide-description{font-size:12px;line-height:1.5}
 .storefront-home .hero .primary{font-size:12px;min-height:44px;padding:0 14px}
}

/* P2 auditoría: el botón flotante no tapa el cierre de la página; hover coherente y solo con puntero */
footer{padding-bottom:calc(32px + 64px)}
@media(min-width:761px){footer{padding-bottom:32px}}
@media(hover:hover){
 .storefront-home .product-photo,.product-photo{transition:transform .25s}
 .storefront-home .product-card:hover .product-photo{transform:scale(1.04)}
 .storefront-home .product-card:hover .product-info h3{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
 .storefront-home .product-card.is-out-of-stock:hover .product-photo{transform:none}
 .storefront-home .filters button:not(.active):hover{border-color:var(--ink)}
 .carousel-arrows button:hover{background:var(--panel)}
}
@media(hover:none){
 .category-tile:hover img{transform:none}
 .carousel-arrows button:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){.product-photo{transition:none}.storefront-home .product-card:hover .product-photo{transform:none}}

/* Objetivos táctiles en catálogo y ficha de producto */
.storefront-home .filters button,.filters button{min-height:44px}
.quantity-control button{min-width:44px}.quantity-control input{min-height:44px;width:48px}
.purchase-controls select{min-height:44px}

/* Consistencia entre páginas: la ficha de producto usa el mismo header y las mismas formas rectas */
body:not(.storefront-home) header{border-bottom:2px solid var(--accent)}
body:not(.storefront-home) header nav{font-family:'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;font-size:15px;letter-spacing:3px;gap:36px}
body:not(.storefront-home) header.is-scrolled{border-bottom-color:transparent}
.product-card,.storefront-home .offers-section .product-card,.about,.product-main-photo,.nutrition-images figure,.information-grid details,.availability-note,.stock-badge,.quantity-control,.review-message,.admin-product{border-radius:0}
.storefront-home .offers-section .product-card{border-color:var(--rule)}
@media(max-width:760px){
 body:not(.storefront-home) header nav,body:not(.storefront-home) header nav:has(.products-menu){font-size:13px;letter-spacing:1.2px;gap:14px}
}
.storefront-home .product-card.is-out-of-stock .availability-note,#toast,button[data-flavor]{border-radius:0}
button[data-flavor]{min-height:44px}
button[data-flavor][aria-pressed=true]{background:var(--ink);color:var(--accent);border-color:var(--ink)}

/* Header al desplazarse: se oculta el logo y la lupa; el menú queda en una barra fija junto al carrito. min-height conserva la altura para que el contenido no salte. */
header>.logo,header>.search-trigger,header>.header-search{transition:opacity .5s cubic-bezier(.22,.68,.15,1),transform .5s cubic-bezier(.22,.68,.15,1),visibility .5s}
header.is-scrolled>.logo,header.is-scrolled>.header-search{opacity:0;visibility:hidden;transform:translateY(-18px);pointer-events:none}
header.is-scrolled>button.search-trigger{position:fixed;top:16px;left:5%;z-index:2;opacity:1;visibility:visible;transform:none;pointer-events:auto}
header{transition:border-color .5s,background-color .5s}
header:after{transition:opacity .5s}
header.is-scrolled:after{opacity:0}
header.is-scrolled>nav{position:fixed;top:0;left:0;right:0;z-index:1;display:flex;justify-content:center;align-items:center;height:76px;margin:0;padding:0 96px 0 5%;background:#fff;border-bottom:2px solid var(--accent);opacity:1;visibility:visible;transform:none;pointer-events:auto}
header.is-scrolled .cart-trigger{position:fixed;top:14px;right:5%;z-index:2}
header.is-scrolled>nav .products-menu summary{min-height:44px}
body:not(.storefront-home) header.is-scrolled{border-bottom-color:transparent}
header:not(.is-scrolled)>nav{animation:suplenu-nav-in .5s cubic-bezier(.22,.68,.15,1)}
@keyframes suplenu-nav-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.storefront-home header{min-height:195px}
body:not(.storefront-home) header{min-height:80px}
@media(min-width:764px) and (max-width:811px){body:not(.storefront-home) header{min-height:142px}}
@media(min-width:628px) and (max-width:763px){body:not(.storefront-home) header{min-height:64px}}
@media(min-width:388px) and (max-width:627px){body:not(.storefront-home) header{min-height:116px}}
@media(max-width:387px){body:not(.storefront-home) header{min-height:168px}}
@media(max-width:760px){
 .storefront-home header{min-height:139px}
 header.is-scrolled>nav{height:64px;justify-content:flex-start;gap:12px;padding-left:calc(5% + 52px);padding-right:112px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 130px),transparent calc(100% - 112px));mask-image:linear-gradient(90deg,#000 calc(100% - 130px),transparent calc(100% - 112px))}
 header.is-scrolled>nav::-webkit-scrollbar{display:none}
 header.is-scrolled .cart-trigger{top:9px}
 header.is-scrolled>button.search-trigger{top:10px}
}
@media(prefers-reduced-motion:reduce){header,header:after,header>.logo,header>.search-trigger,header>.header-search,header>nav{transition:none;animation:none}}

/* Mensaje de cantidad inválida junto al campo; los avisos no quedan debajo de los diálogos */
.field-error{margin:8px 0 0;font-size:14px;line-height:1.5;color:#a32121}
.field-error[hidden]{display:none}
.quantity-control[data-invalid=true]{border-color:#a32121}
body:has(dialog[open]) #toast{display:none}

/* Paso de datos del pedido: separación clara entre el botón de volver y el formulario */
#edit-order,#checkout-dialog .review-back{margin:16px 0 28px}
#checkout-form label:first-child,#checkout-fields>label:first-child{margin-top:4px}

/* Franjas de color de borde a borde (ofertas y "Armá tu pedido"); el contenido se alinea con las categorías (1248px) */
.storefront-home .offers-section,.storefront-home .about{max-width:none;width:100%;margin-left:0;margin-right:0;border-radius:0;padding-left:max(5%,calc((100% - 1248px)/2));padding-right:max(5%,calc((100% - 1248px)/2))}