:root { --ink:#101010; --muted:#656560; --paper:#f7f6f3; --line:#deded9; --red:#dc140e; --display:"Barlow Condensed", Impact, sans-serif; --body:Manrope,Arial,sans-serif; --pad:clamp(1.1rem,3.5vw,4rem); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; color:var(--ink); background:#fff; font:500 14px/1.5 var(--body); }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
img { display:block; max-width:100%; }
.ui-icon { display:block; width:20px; height:20px; flex:none; }
:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.skip-link { position:fixed; z-index:200; top:0; left:1rem; padding:.7rem 1rem; transform:translateY(-150%); color:#fff; background:var(--ink); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:sticky; z-index:80; top:0; background:rgb(255 255 255 / .96); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.header-inner { display:grid; grid-template-columns:155px 1fr auto; align-items:center; gap:clamp(1rem,3vw,3rem); padding:0 var(--pad); min-height:100px; max-width:1800px; margin:auto; }
.brand { width:150px; height:98px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
/* Only the square source's blank margin is clipped; the full mark has breathing room. */
.brand img { width:130px; height:auto; max-width:none; flex:none; }
.desktop-nav { display:flex; align-items:center; justify-content:center; gap:clamp(.8rem,2vw,2rem); height:100%; }
.nav-group { position:relative; height:100%; display:flex; align-items:center; }
.nav-group>a,.header-actions a { display:inline-flex; align-items:center; min-height:44px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.045em; white-space:nowrap; }
.nav-group>a:hover,.header-actions a:hover { color:var(--red); }
.nav-submenu { display:none; position:absolute; top:calc(100% - 1px); left:-1.1rem; min-width:190px; padding:.65rem; background:#fff; border:1px solid var(--line); box-shadow:0 16px 28px rgb(0 0 0 / .08); }
.nav-group:hover .nav-submenu,.nav-group:focus-within .nav-submenu { display:grid; }
.nav-submenu a { display:flex; align-items:center; min-height:44px; padding:.58rem .55rem; font-size:12px; white-space:nowrap; }
.nav-submenu a:hover { background:var(--paper); }
.header-actions { display:flex; gap:1.3rem; align-items:center; }
.cart-count { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:.2rem; padding:0 3px; border-radius:50%; background:var(--ink); color:#fff; font-size:10px; }
.page-main { max-width:1800px; min-height:65vh; margin:auto; padding:clamp(2rem,5vw,5rem) var(--pad) 5rem; }
.page-main.is-home { padding-top:1.7rem; padding-bottom:1.25rem; }
.eyebrow { display:block; color:var(--red); font:800 11px/1.3 var(--body); letter-spacing:.13em; text-transform:uppercase; }
.home-intro { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin:0 0 1.5rem; }
.home-intro h1 { font:800 clamp(2.7rem,6vw,6rem)/.92 var(--display); letter-spacing:-.014em; text-transform:uppercase; margin:.35rem 0 0; }
.home-intro h1 em { font-style:normal; color:var(--red); }
.home-intro p { max-width:240px; margin:0 0 .2rem; color:var(--muted); font-size:12px; }
.section-title { display:flex; align-items:end; gap:1rem; margin:0 0 1.2rem; }
.section-title .eyebrow { align-self:start; margin-top:.3rem; }
.section-title h1,.section-title h2 { margin:0; font:800 clamp(2rem,3.6vw,3.6rem)/.9 var(--display); letter-spacing:.005em; }
.section-title p { margin-left:auto; max-width:320px; color:var(--muted); font-size:12px; }
.category-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.category-card { position:relative; display:block; min-width:0; aspect-ratio:2/3; overflow:hidden; background:#eceae6; isolation:isolate; }
.category-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.category-card:hover img { transform:scale(1.035); }
.category-card-shade { position:absolute; inset:35% 0 0; background:linear-gradient(transparent, rgb(0 0 0 / .52)); }
.category-card-title { position:absolute; left:1rem; right:1rem; bottom:.9rem; display:flex; align-items:end; justify-content:space-between; gap:.25rem; color:#fff; font:800 clamp(1.4rem,2.2vw,2.5rem)/.95 var(--display); text-transform:uppercase; }
.category-card-label { min-width:0; overflow-wrap:anywhere; }
.category-card-arrow { display:grid; place-items:center; width:40px; height:40px; flex:none; border:1px solid rgb(255 255 255 / .75); border-radius:50%; background:rgb(0 0 0 / .16); }
.category-card-arrow .ui-icon { width:20px; height:20px; }
.editorial-section { padding-top:clamp(4rem,7vw,7rem); }
.v2-product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.75rem,1.5vw,1.5rem); }
.v2-product-card { display:flex; flex-direction:column; min-width:0; }
.v2-product-image { display:block; width:100%; aspect-ratio:4/5; overflow:hidden; background:#f1f0ed; }
.v2-product-image img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.v2-product-card:hover img { transform:scale(1.025); }
.product-visual-placeholder { position:relative; display:flex; width:100%; height:100%; min-height:100px; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(135deg,#ecebe7,#f8f7f4 64%,#e3e2de); color:#c5c3bd; }
.product-visual-placeholder::before { content:""; position:absolute; width:46%; aspect-ratio:1; border:1px solid #d2d0ca; transform:rotate(-12deg); }
.product-visual-placeholder>span { position:relative; font:800 clamp(1.4rem,2.4vw,3rem)/.85 var(--display); letter-spacing:-.02em; text-align:center; }
.product-visual-placeholder small { position:absolute; left:1rem; bottom:1rem; color:#77756f; font-size:9px; font-weight:700; letter-spacing:.09em; }
.v2-product-name { display:flex; align-items:center; min-height:44px; margin-top:.5rem; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.v2-product-price { margin-top:.25rem; color:var(--muted); font-size:13px; }
.whatsapp-button { display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:.65rem .8rem; background:#12804a; color:#fff; border:1px solid #12804a; font-size:12px; font-weight:800; letter-spacing:.035em; text-align:center; transition:background .2s ease,border-color .2s ease; }
.whatsapp-button:hover { background:#0a6238; border-color:#0a6238; }
.whatsapp-icon { width:18px; height:18px; flex:none; }
.card-whatsapp { margin-top:auto; margin-bottom:.35rem; }
.product-availability { display:block; margin:.15rem 0 .65rem; color:#565656; font-size:.8rem; }
.whatsapp-button.is-unavailable { cursor:default; opacity:.6; }
.v2-product-price { margin-bottom:.9rem; }
.card-add-cart { min-height:44px; padding:.2rem .3rem; background:transparent; border:0; color:var(--muted); font-size:11px; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.card-add-cart:hover { color:var(--ink); }
.trust-line { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.35rem 1.5rem; margin-top:clamp(4rem,7vw,7rem); padding:1rem 0; text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:12px; font-weight:700; }
.trust-line span { display:inline-flex; align-items:center; }
.trust-line .ui-icon { display:inline-block; width:15px; height:15px; margin-right:.35rem; color:var(--red); vertical-align:-2px; }
.marquee { overflow:hidden; color:#fff; background:var(--red); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.marquee-track { display:flex; width:max-content; animation:marquee 30s linear infinite; }
.marquee-set { display:flex; flex:none; align-items:center; gap:1.5rem; padding:.45rem 1.5rem; font:800 clamp(1.35rem,2.3vw,2rem)/1 var(--display); letter-spacing:.035em; white-space:nowrap; }
.marquee-set > * { flex:none; }
.marquee-set b,.marquee-static b { color:var(--ink); font-weight:900; }
.marquee-static { display:none; }
@keyframes marquee { to { transform:translateX(-50%); } }
.site-footer { display:flex; align-items:end; justify-content:space-between; gap:2rem; min-height:150px; padding:2rem var(--pad); background:var(--ink); color:#fff; }
.site-footer strong { display:block; font:800 2rem/.85 var(--display); }
.site-footer span { display:block; margin-top:.5rem; color:#f4534e; font:800 1.2rem var(--display); }
.site-footer p { margin:0; color:#aaa; font-size:11px; }
.bottom-nav { display:none; }
.page-heading { margin-bottom:2.3rem; }
.page-heading h1 { margin:.4rem 0 .6rem; font:800 clamp(3.4rem,9vw,8rem)/.87 var(--display); text-transform:uppercase; }
.page-heading p { max-width:480px; margin:0; color:var(--muted); }
.back-link { display:flex; align-items:center; gap:.35rem; width:fit-content; min-height:44px; margin-bottom:2rem; font-size:12px; font-weight:700; }
.back-link .ui-icon { width:16px; height:16px; }
.back-link:hover { color:var(--red); }
.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem 1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.catalog-filters { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.catalog-filter { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.55rem 1rem; border:1px solid var(--line); font-size:12px; font-weight:700; }
.catalog-filter:hover { border-color:var(--ink); }
.catalog-filter[aria-current="page"] { color:#fff; background:var(--ink); border-color:var(--ink); }
.catalog-sort { display:flex; align-items:center; gap:.6rem; }
.catalog-sort label { color:var(--muted); font-size:12px; font-weight:700; white-space:nowrap; }
.catalog-sort select { min-height:44px; max-width:100%; padding:.55rem 2rem .55rem .7rem; border:1px solid var(--line); border-radius:0; background:#fff; color:var(--ink); font:700 12px var(--body); }
.listing-results { margin-top:2rem; }
.empty-state { min-height:190px; display:flex; flex-direction:column; align-items:start; justify-content:center; padding:2rem; background:var(--paper); }
.empty-state p { font-size:18px; margin:0 0 1rem; }
.empty-state a { display:inline-flex; align-items:center; gap:.35rem; min-height:44px; border-bottom:1px solid var(--ink); font-weight:700; }
.empty-state .ui-icon { width:16px; height:16px; }
.product-detail { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.75fr); gap:clamp(2rem,6vw,8rem); }
.product-detail-image { aspect-ratio:4/4.4; max-height:690px; background:var(--paper); }
.product-detail-image img,.cart-thumb img { width:100%; height:100%; object-fit:cover; }
.product-gallery>p { color:var(--muted); font-size:11px; }
.product-info { padding-top:.5rem; }
.product-info h1 { margin:1rem 0 .4rem; font:800 clamp(3.5rem,6vw,6rem)/.86 var(--display); text-transform:uppercase; }
.detail-price { font-size:clamp(1.5rem,3vw,2.2rem); font-weight:700; margin:1.5rem 0; }
.product-description { white-space:pre-line; overflow-wrap:anywhere; }
.detail-original { font-size:12px; font-weight:700; }
.detail-original .ui-icon { display:inline-block; width:15px; height:15px; margin-right:.25rem; color:var(--red); vertical-align:-2px; }
.availability { margin:1.4rem 0 2rem; color:var(--muted); }
.size-picker { margin:1.2rem 0; padding:0; border:0; }
.size-picker legend { margin-bottom:.55rem; font-size:12px; font-weight:800; text-transform:uppercase; }
.size-options { display:flex; flex-wrap:wrap; gap:.55rem; }
.size-option { display:inline-flex; min-height:44px; align-items:center; border:1px solid var(--line); cursor:pointer; }
.size-option input { position:absolute; width:1px; height:1px; opacity:0; }
.size-option span { padding:.7rem .85rem; font-size:12px; font-weight:700; }
.size-option input:checked+span { background:var(--ink); color:#fff; }
.size-option input:focus-visible+span { outline:2px solid var(--red); outline-offset:2px; }
.size-option.is-sold-out { color:var(--muted); cursor:not-allowed; }
.stock-warning { color:var(--red); font-size:12px; font-weight:700; }
.cart-prune { min-height:44px; padding:.25rem; border:0; background:transparent; color:var(--red); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; }
.detail-actions button:disabled { opacity:.5; cursor:not-allowed; }
.availability strong { color:var(--ink); font-weight:600; }
.detail-actions { display:grid; gap:10px; }
.detail-whatsapp { min-height:56px; }
.primary-button,.secondary-button { display:flex; align-items:center; justify-content:center; width:100%; min-height:56px; padding:.9rem 1.2rem; border:1px solid var(--ink); font-size:12px; font-weight:800; letter-spacing:.06em; text-align:center; }
.primary-button { background:var(--ink); color:#fff; }
.primary-button:hover { background:var(--red); border-color:var(--red); }
.secondary-button { background:#fff; color:var(--ink); }
.secondary-button:hover { background:var(--paper); }
.demo-caption { color:var(--muted); font-size:11px; margin:1rem 0 2rem; }
details { border-top:1px solid var(--line); padding:.9rem 0; }
details:last-child { border-bottom:1px solid var(--line); }
summary { cursor:pointer; font-weight:700; }
details p { color:var(--muted); }
.search-form { max-width:770px; }
.search-form label { display:block; margin-bottom:.55rem; font-weight:700; }
.search-form>div { display:flex; gap:.5rem; }
.search-form input { flex:1; min-width:0; height:55px; border:1px solid var(--line); border-radius:0; padding:0 1rem; font-size:16px; }
.search-form button { display:flex; align-items:center; justify-content:center; gap:.35rem; min-width:125px; border:0; color:#fff; background:var(--ink); font-weight:800; }
.search-form button .ui-icon { width:16px; height:16px; }
.search-heading { display:flex; justify-content:space-between; align-items:end; margin-top:3rem; border-bottom:1px solid var(--line); }
.search-heading h2 { font:800 2rem var(--display); margin:0 0 .4rem; }
.search-hint { margin-top:3rem; color:var(--muted); }
.cart-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); gap:clamp(2rem,5vw,5rem); }
.cart-line { display:grid; grid-template-columns:105px 1fr auto; gap:1.2rem; padding:1.2rem 0; border-top:1px solid var(--line); }
.cart-thumb { display:block; aspect-ratio:4/5; overflow:hidden; }
.cart-line-info { display:flex; flex-direction:column; align-items:start; gap:.35rem; }
.cart-line-info strong { font-size:14px; }
.cart-line-info>span,.line-total { color:var(--muted); font-size:12px; }
.quantity-row { display:flex; gap:.8rem; align-items:center; margin-top:.5rem; font-size:12px; }
.quantity-control { display:flex; align-items:center; border:1px solid var(--line); }
.quantity-control button { display:grid; place-items:center; width:44px; height:44px; border:0; background:#fff; }
.quantity-control .ui-icon { width:18px; height:18px; }
.quantity-control button:hover { background:var(--paper); }
.quantity-control output { display:grid; place-items:center; min-width:28px; font-weight:700; }
.cart-line-info>button[data-remove] { min-height:44px; padding:0; border:0; border-bottom:1px solid var(--muted); color:var(--muted); background:transparent; font-size:11px; }
.cart-summary { height:fit-content; padding:1.5rem; background:var(--paper); }
.cart-summary h2 { margin:0 0 1.4rem; font:800 2rem var(--display); }
.cart-summary>div { display:flex; justify-content:space-between; gap:1rem; margin:.8rem 0; }
.cart-summary>div:nth-of-type(2) { padding-top:1rem; border-top:1px solid var(--line); font-size:16px; }
.cart-summary p,.cart-summary small { display:block; color:var(--muted); font-size:11px; }
.cart-summary .primary-button { margin:1.5rem 0 1rem; }
.cart-summary .cart-whatsapp { margin:1.5rem 0 1rem; }
.toast { position:fixed; z-index:120; left:50%; bottom:2rem; width:max-content; max-width:calc(100vw - 2rem); padding:.8rem 1.1rem; color:#fff; background:var(--ink); opacity:0; pointer-events:none; transform:translate(-50%,1rem); transition:opacity .2s ease,transform .2s ease; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
@media(max-width:1050px) { .header-inner { grid-template-columns:150px 1fr auto; } .desktop-nav { gap:.8rem; } .nav-group>a,.header-actions a { font-size:11px; } }
/* Five editorial columns need enough room for the longest category, including fallback fonts. */
@media(min-width:801px) and (max-width:1200px) {
  .category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .category-card:first-child { grid-row:span 2; aspect-ratio:auto; }
  .v2-product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:800px) {
  :root { --mobile-nav-height:61px; }
  html { scroll-padding-top:calc(81px + env(safe-area-inset-top)); }
  .site-header { padding-top:env(safe-area-inset-top); }
  .header-inner { grid-template-columns:1fr auto; min-height:80px; }
  .brand { width:125px; height:78px; }
  .brand img { width:103px; }
  .desktop-nav,.header-actions a:first-child { display:none; }
  .header-actions a { font-size:11px; }
  .bottom-nav { position:fixed; z-index:90; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); min-height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); border-top:1px solid var(--line); background:rgb(255 255 255 / .98); box-shadow:0 -5px 20px rgb(0 0 0 / .04); }
  .bottom-nav a { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:56px; color:var(--muted); font-size:10px; font-weight:700; }
  .bottom-nav a[aria-current="page"] { color:var(--red); }
  .bottom-nav .ui-icon { width:22px; height:22px; }
  .bottom-nav small { position:absolute; top:4px; left:calc(50% + 8px); display:grid; place-items:center; min-width:15px; height:15px; border-radius:50%; background:var(--red); color:#fff; font-size:9px; }
  body:has(.search-form input:focus) .bottom-nav { display:none; }
  .page-main { min-height:0; padding-bottom:1.5rem; }
  .page-main.is-home { padding-bottom:1rem; }
  .editorial-section { padding-top:1.75rem; }
  .site-footer { display:block; min-height:0; padding:1rem var(--pad) calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + .75rem); }
  .site-footer strong { font-size:1.7rem; }
  .site-footer span { margin-top:.25rem; font-size:1rem; }
  .marquee-set { gap:1rem; }
  .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .category-card { aspect-ratio:4/5; min-height:0; }
  .category-card:first-child { grid-row:span 2; aspect-ratio:auto; }
  .category-card-title { font-size:clamp(1.3rem,4.5vw,2.5rem); }
  .product-detail,.cart-layout { grid-template-columns:1fr; }
  .product-detail-image { max-height:600px; }
}
@media(max-width:560px) {
  .page-main.is-home { padding-top:1.2rem; }
  .home-intro { display:block; margin-bottom:1.1rem; }
  .home-intro h1 { font-size:clamp(2.5rem,13vw,4.3rem); }
  .home-intro p { margin:.55rem 0 0; max-width:none; }
  .section-title { display:block; }
  .section-title .eyebrow { margin-bottom:.45rem; }
  .section-title p { margin:.5rem 0 0; }
  .category-grid { gap:7px; }
  .category-card { aspect-ratio:3/4; }
  .category-card:first-child { min-height:340px; }
  .category-card-title { left:.65rem; right:.65rem; bottom:.65rem; font-size:clamp(1.1rem,5.4vw,2rem); }
  .category-card-arrow { width:40px; height:40px; }
  .category-card-arrow .ui-icon { width:17px; height:17px; }
  .v2-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem .6rem; }
  .v2-product-name { font-size:13px; }
  .v2-product-price { font-size:13px; }
  .whatsapp-button { gap:.35rem; padding:.6rem .35rem; font-size:11px; }
  .whatsapp-icon { width:16px; height:16px; }
  .detail-whatsapp,.cart-whatsapp { font-size:12px; }
  .catalog-toolbar { display:block; }
  .catalog-filters { flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(0px - var(--pad)); padding-inline:var(--pad); padding-bottom:.5rem; scrollbar-width:thin; }
  .catalog-filter { flex:none; }
  .catalog-sort { margin-top:.75rem; }
  .page-heading h1 { font-size:clamp(3.4rem,16vw,5rem); overflow-wrap:anywhere; }
  .back-link { margin-bottom:2rem; }
  .product-info h1 { font-size:clamp(3rem,14vw,5rem); }
  .search-form>div { gap:0; }
  .search-form button { min-width:88px; font-size:11px; }
  .cart-line { grid-template-columns:80px minmax(0,1fr); }
  .line-total { grid-column:2; }
  .toast { bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 1rem); }
}
@media(min-width:561px) and (max-width:800px) {
  .v2-product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) {
  .marquee-track { display:none; }
  .marquee-static { display:flex; align-items:center; justify-content:center; gap:1rem; min-height:36px; padding:.45rem 1rem; font:800 clamp(1.2rem,2.3vw,2rem)/1 var(--display); letter-spacing:.035em; white-space:nowrap; }
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}
/* Product gallery retains the public V3 order; only its first image is the cover. */
.gallery-thumbnails { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gallery-thumbnails button { width: 80px; height: 80px; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 2px; cursor: pointer; }
.gallery-thumbnails button[aria-pressed="true"] { border: 2px solid #c8192c; }
.gallery-thumbnails img { width: 100%; height: 100%; object-fit: contain; }