/* ==========================================================================
   TONY MUSICA FACHADA · Rebranding layer (site-wide)
   Dresses Storefront + WooCommerce (shop, category, product, cart,
   checkout, account) in the facade palette and Cinzel Decorative.
   It also carries the facade header/footer styles, because
   css/front-page.css loads on the front page only.
   Nothing here hides or unregisters plugin output: the WhatsApp plugins
   (Click to Chat, OneClick Chat to Order) render through the standard
   hooks exactly as they do under plain Storefront.
   ========================================================================== */

:root{
  --bg:#0D0B09; --bg2:#141110; --ink:#F2EDE4; --ink-dim:#B9B0A2;
  --accent:#E5322D; --amber:#E8A020; --line:#2A241F; --card:#171310;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,sans-serif;
}
a{ color:var(--amber); }
a:hover{ color:var(--accent); }

/* ---------- typography ---------- */
h1, h2, h3, h4, h5, h6,
.site-title,
.page-title,
.product_title,
.woocommerce-loop-product__title,
.wc-block-grid__product-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
}
.anton{ font-family:'Cormorant Garamond',serif; font-weight:700; letter-spacing:.01em; }

/* ---------- facade header (same rules as the prototype) ---------- */
header{position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; gap:14px;
  padding:12px 16px; background:rgba(13,11,9,.82); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);}
body.admin-bar header{ top:32px; }
/* FIX 8: on inner pages the header is sticky (in flow) instead of fixed,
   so it can never overlap page titles; the padding-top arithmetic that
   kept failing under the admin bar is retired below. The front page
   keeps the fixed header its hero was designed around. */
body:not(.home) header{ position:sticky; }
@media (max-width:782px){ body.admin-bar header{ top:46px; } }
.brandbox{position:relative; display:flex; align-items:center; gap:9px;}
.brand{font-size:20px; text-decoration:none; display:flex; align-items:center; gap:9px; color:var(--ink);}
.brand b{color:var(--accent); font-weight:400;}
.brand-seal{width:30px; height:30px; border-radius:50%; display:block;}
.brand-seal-btn{background:none; border:none; padding:0; cursor:pointer; position:relative; display:block; line-height:0;}
.brand-seal-btn .caret{position:absolute; right:-8px; bottom:-5px; font-size:9px; color:var(--amber);
  background:var(--bg); border:1px solid var(--line); border-radius:50%; width:15px; height:15px;
  display:flex; align-items:center; justify-content:center;}
.brand-seal-link{display:block; line-height:0;}
header nav{margin-left:auto; display:flex; gap:8px; align-items:center;}
header nav a{font-size:13px; font-weight:600; text-decoration:none; padding:8px 10px; border:1px solid var(--line); border-radius:999px; color:var(--ink);}
header nav a.wa{background:#1FA855; border-color:#1FA855; color:#fff;}
.tgl{font:600 12px Inter,sans-serif; background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:8px 10px; cursor:pointer;}
#menu-drop{position:absolute; top:calc(100% + 6px); left:12px; min-width:264px; z-index:60; display:none;
  background:rgba(13,11,9,.9); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:16px; padding:8px; box-shadow:0 24px 50px rgba(0,0,0,.35);}
#menu-drop.open{display:block;}
#menu-drop a{display:flex; align-items:baseline; gap:10px; padding:10px 12px; border-radius:10px;
  text-decoration:none; color:var(--ink); font-size:14px; font-weight:600;}
#menu-drop a .n{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:11px; color:var(--accent); min-width:20px;}
#menu-drop .sep{height:1px; background:var(--line); margin:6px 4px;}
@media (max-width: 680px){
  header{flex-wrap:wrap; row-gap:8px; padding:10px 14px;}
  .brand{font-size:18px;}
  .brand-seal{width:27px; height:27px;}
  header nav{order:3; width:100%; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; margin-left:0;}
  header nav::-webkit-scrollbar{display:none;}
  header nav a, header nav .tgl{white-space:nowrap; flex:none;}
}

/* the fixed header needs room on every page except the front page,
   whose hero is designed to run underneath it */
body:not(.home) #content{ padding-top:28px; }
body.admin-bar:not(.home) #content{ padding-top:28px; }
@media (max-width: 680px){ body:not(.home) #content{ padding-top:20px; } }

/* ---------- facade footer ---------- */
footer{border-top:1px solid var(--line); padding:26px 20px 40px; color:var(--ink-dim); font-size:13px;
  display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between; align-items:center; background:var(--bg);}
footer a{ color:var(--ink); }

/* ---------- Storefront content ---------- */
.site-content{ background:var(--bg); }
.hentry .entry-content, .page .entry-content{ color:var(--ink); }
.entry-title a, .hentry .entry-header .entry-title{ color:var(--ink); }
.widget{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.widget .widget-title, .widget .widgettitle{
  font-family:'Cormorant Garamond',serif; font-weight:700; font-size:1.35em; color:var(--ink); border-bottom:1px solid var(--line); }
.storefront-breadcrumb{ background:var(--bg2); border-bottom:1px solid var(--line); color:var(--ink-dim); }
.storefront-breadcrumb a{ color:var(--ink-dim); }

/* ---------- WooCommerce ---------- */
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering{ color:var(--ink-dim); }
.price, .woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--amber); font-weight:800; }
.woocommerce span.onsale{ background:var(--accent); color:#fff; border:none; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .button, button, input[type="submit"]{
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  border-radius:999px; font-weight:800;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .button:hover, button:hover, input[type="submit"]:hover{
  background:#B3231F; color:#fff;
}
.woocommerce a.button.added::after, .woocommerce a.button.loading::after{ color:#fff; }
.woocommerce ul.products li.product .button{ background:#1FA855; border-color:#1FA855; font-size:12.5px; padding:8px 13px; }
.woocommerce ul.products li.product{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding-bottom:14px; }
.woocommerce ul.products li.product img{ background:#fff; border-radius:14px 14px 0 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs{ border-top:1px solid var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ background:var(--bg2); border-color:var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ color:var(--ink-dim); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ background:var(--bg); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--ink); }
.woocommerce-message, .woocommerce-info{ background:var(--bg2); color:var(--ink); border-top-color:var(--amber); }
.woocommerce-error{ background:var(--bg2); color:var(--ink); border-top-color:var(--accent); }
.woocommerce table.shop_table{ border-color:var(--line); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th{ border-color:var(--line); }
.woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-checkout #payment{
  background:var(--card); border:1px solid var(--line); border-radius:14px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="password"], textarea, select{
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:8px;
  box-shadow:none;
}
.woocommerce nav.woocommerce-pagination ul{ border-color:var(--line); }
.woocommerce nav.woocommerce-pagination ul li{ border-color:var(--line); }
.woocommerce nav.woocommerce-pagination ul li a{ color:var(--ink-dim); }
.woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--accent); color:#fff; }
.woocommerce-MyAccount-navigation ul li a{ color:var(--ink); }
.woocommerce-MyAccount-navigation ul li.is-active a{ color:var(--amber); }
mark{ background:var(--amber); color:#171310; }

/* ---------- FIX: WooCommerce cart & checkout legibility ----------
   Root cause: the rules above only restyled shop_table border colors.
   Storefront paints the cart/checkout table cells with near-white
   backgrounds of its own, while this layer sets near-white body text,
   so prices, subtotals and totals rendered pale-on-white.
   Fix: force the facade's dark surfaces and light text inside the
   cart and checkout tables, totals included. */
body.woocommerce-cart .woocommerce table.shop_table,
body.woocommerce-checkout .woocommerce table.shop_table{
  background:var(--card);
  color:var(--ink);
}
body.woocommerce-cart .woocommerce table.shop_table th,
body.woocommerce-cart .woocommerce table.shop_table td,
body.woocommerce-checkout .woocommerce table.shop_table th,
body.woocommerce-checkout .woocommerce table.shop_table td{
  background:var(--card);
  color:var(--ink);
  border-color:var(--line);
}
body.woocommerce-cart .woocommerce table.shop_table thead th,
body.woocommerce-checkout .woocommerce table.shop_table thead th,
body.woocommerce-cart .woocommerce table.shop_table tbody tr:nth-child(2n) td,
body.woocommerce-checkout .woocommerce table.shop_table tbody tr:nth-child(2n) td{
  background:var(--bg2);
}
body.woocommerce-cart .woocommerce table.shop_table .amount,
body.woocommerce-checkout .woocommerce table.shop_table .amount,
body.woocommerce-cart .woocommerce table.shop_table strong,
body.woocommerce-checkout .woocommerce table.shop_table strong{
  color:var(--ink);
}
body.woocommerce-cart .woocommerce table.shop_table tr.order-total th,
body.woocommerce-cart .woocommerce table.shop_table tr.order-total td,
body.woocommerce-checkout .woocommerce table.shop_table tr.order-total th,
body.woocommerce-checkout .woocommerce table.shop_table tr.order-total td{
  background:var(--bg2);
}
body.woocommerce-cart .woocommerce table.shop_table tr.order-total .amount,
body.woocommerce-checkout .woocommerce table.shop_table tr.order-total .amount{
  color:var(--amber);
  font-weight:800;
}
/* checkout payment area: same dark logic (its box was WooCommerce light grey) */
.woocommerce-checkout #payment ul.payment_methods li{ color:var(--ink); }
.woocommerce-checkout #payment .payment_box{ background:var(--bg2); color:var(--ink); }
.woocommerce-checkout #payment .payment_box::before{ border-bottom-color:var(--bg2); }
/* cart/checkout forms: labels in facade ink, and the quantity number
   inputs join the dark input styling the global rules missed
   (they only listed text/email/tel/search/password) */
body.woocommerce-cart .woocommerce form label,
body.woocommerce-checkout .woocommerce form label{ color:var(--ink); }
body.woocommerce-cart .woocommerce .quantity .qty,
body.woocommerce-checkout .woocommerce .quantity .qty,
body.woocommerce-cart .woocommerce form input[type="number"],
body.woocommerce-checkout .woocommerce form input[type="number"]{
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; box-shadow:none;
}
body.woocommerce-cart .woocommerce form input::placeholder,
body.woocommerce-cart .woocommerce form textarea::placeholder,
body.woocommerce-checkout .woocommerce form input::placeholder,
body.woocommerce-checkout .woocommerce form textarea::placeholder{
  color:var(--ink-dim); opacity:1;
}

/* ---------- FIX: product title typography ----------
   Cinzel Decorative is a tall display face; with Storefront's default
   sizing and line-height, wrapped title lines touched or overlapped.
   Slightly smaller single-product title, airier leading everywhere,
   and long uppercase words are allowed to break instead of colliding. */
.single-product .product_title,
.woocommerce div.product .product_title{
  font-size:clamp(28px, 1.4rem + 2.2vw, 40px);
  line-height:1.22;
  overflow-wrap:break-word;
  margin-bottom:.35em;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.wc-block-grid__product-title{
  line-height:1.25;
  overflow-wrap:break-word;
}

/* FIX extension (same pale-on-white defect): My Account shop tables */
body.woocommerce-account .woocommerce table.shop_table{background:var(--card);color:var(--ink);}
body.woocommerce-account .woocommerce table.shop_table th,
body.woocommerce-account .woocommerce table.shop_table td{background:var(--card);color:var(--ink);border-color:var(--line);}
body.woocommerce-account .woocommerce table.shop_table thead th{background:var(--bg2);}
body.woocommerce-account .woocommerce table.shop_table .amount,
body.woocommerce-account .woocommerce table.shop_table strong{color:var(--ink);}
body.woocommerce-account .woocommerce form label{color:var(--ink);}

/* FIX 2: checkout payment-method strip legibility (whole #payment scope) */
body.woocommerce-checkout #payment,
body.woocommerce-checkout #payment ul.payment_methods,
body.woocommerce-checkout #payment ul.payment_methods li{background:var(--card);color:var(--ink);}
body.woocommerce-checkout #payment ul.payment_methods li label,
body.woocommerce-checkout #payment ul.payment_methods li p,
body.woocommerce-checkout #payment .payment_box p{color:var(--ink);}
body.woocommerce-checkout #payment div.payment_box{background:var(--bg2);color:var(--ink);}

/* FIX 3: shop archive top rail (carousel / widget product lists) price legibility */
body.post-type-archive-product .price,
body.tax-product_cat .price,
body.post-type-archive-product li.product .price,
body.tax-product_cat li.product .price,
body.post-type-archive-product .owl-item .price,
body.tax-product_cat .owl-item .price{color:var(--ink);}
body.post-type-archive-product .price .amount,
body.tax-product_cat .price .amount,
body.post-type-archive-product .owl-item .amount,
body.tax-product_cat .owl-item .amount{color:var(--ink);}
body.post-type-archive-product .price ins,
body.tax-product_cat .price ins{text-decoration:none;}
body.post-type-archive-product .price ins .amount,
body.tax-product_cat .price ins .amount,
body.post-type-archive-product .owl-item ins .amount,
body.tax-product_cat .owl-item ins .amount{color:var(--amber);font-weight:700;}
body.post-type-archive-product .price del .amount,
body.tax-product_cat .price del .amount,
body.post-type-archive-product .owl-item del .amount,
body.tax-product_cat .owl-item del .amount{color:var(--ink-dim);text-decoration:line-through;}
.wpcs_product_carousel_slider .price,
.wpcs_product_carousel_slider .price,
.wpcs_product_carousel_slider .price .amount,
.wpcs_product_carousel_slider .price .amount,
.wpcs_product_carousel_slider .owl-item .amount,
.wpcs_product_carousel_slider .owl-item .amount{color:var(--ink);}
.wpcs_product_carousel_slider .price ins .amount,
.wpcs_product_carousel_slider .price ins .amount,
.wpcs_product_carousel_slider .owl-item ins .amount,
.wpcs_product_carousel_slider .owl-item ins .amount{color:var(--amber);font-weight:700;}
.wpcs_product_carousel_slider .price del .amount,
.wpcs_product_carousel_slider .price del .amount,
.wpcs_product_carousel_slider .owl-item del .amount,
.wpcs_product_carousel_slider .owl-item del .amount{color:var(--ink-dim);text-decoration:line-through;}
.wpcs_product_carousel_slider a,
.wpcs_product_carousel_slider a,
.wpcs_product_carousel_slider .woocommerce-loop-product__title,
.wpcs_product_carousel_slider .woocommerce-loop-product__title{color:var(--ink);}
.widget .product_list_widget li .amount,
.woocommerce.widget_products li .amount{color:var(--ink);}
.widget .product_list_widget li ins,
.woocommerce.widget_products li ins{text-decoration:none;}
.widget .product_list_widget li ins .amount,
.woocommerce.widget_products li ins .amount{color:var(--amber);font-weight:700;}
.widget .product_list_widget li del .amount,
.woocommerce.widget_products li del .amount{color:var(--ink-dim);text-decoration:line-through;}
.widget .product_list_widget li a,
.woocommerce.widget_products li a,
.widget .product_list_widget li .product-title,
.woocommerce.widget_products li .product-title{color:var(--ink);}

/* ---------- FIX 5: mobile hardening (≤680px) ----------
   Owner's phone test (iPhone, ~390px) on /tienda/ showed the fixed
   header overlapping content, product cards colliding, and horizontal
   drift. Measured mobile header height from the rules above: two rows
   (brand row ≈30px + full-width nav row ≈38px + row-gap 8px + vertical
   padding 20px + border 1px) ≈ 97px. The old 118px top padding cleared
   that for visitors but NOT when the WordPress admin bar is present
   (≤782px the bar adds 46px and pushes the fixed header down by the
   same amount: bottom edge ≈143px > 118px, a ~25px overlap). The rules
   below give the content real clearance in both cases, force the
   WooCommerce grid into a clean two-column stack at phone widths, and
   clip horizontal overflow at the specific wide offenders.
   Header z-index stays 50 (menu dropdown 60 inside its stacking
   context): far below the Side Cart drawer's own layers, so our header
   can never cover or trap the drawer's close control. */
header{ z-index:50; }
@media (max-width: 680px){
  body:not(.home) #content{ padding-top:20px; }

  .woocommerce ul.products{
    display:flex; flex-wrap:wrap; gap:14px;
    max-width:100%; margin:0; padding:0;
  }
  .woocommerce ul.products::before,
  .woocommerce ul.products::after{ display:none; }
  .woocommerce ul.products li.product{
    float:none; clear:none; width:calc(50% - 7px); margin:0;
    box-sizing:border-box; min-width:0;
    display:flex; flex-direction:column;
  }
  .woocommerce ul.products li.product img{ max-width:100%; height:auto; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:14px; line-height:1.3; min-height:0;
    overflow-wrap:break-word;
  }
  .woocommerce ul.products li.product .price{
    display:block; margin-top:6px; line-height:1.35;
  }
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart{
    display:block; text-align:center; white-space:normal;
    margin:10px 10px 0;
  }
  .woocommerce ul.products li.product .added_to_cart{ margin-top:6px; }

  /* FIX 6: the FIX 5 grid rules above are unscoped, so at phone widths
     they also wrapped the facade homepage's chapter rails (.tm-wc-rail),
     whose product lists are WooCommerce ul.products too. Wrapped, the
     rail's cards stacked vertically inside the horizontal scroller:
     scrollWidth stopped exceeding clientWidth, the rails no longer
     scrolled sideways, and every rail progress bar (.rail-fill, driven
     from rail.scrollLeft) froze at its 8% start, exactly what the
     owner's phone test showed. The rails are horizontal strips, not
     grids: keep them nowrap (this selector outranks the FIX 5 rule). */
  .tm-wc-rail .woocommerce ul.products{ flex-wrap:nowrap; }

  #page, .site-content{ overflow-x:clip; }
  #menu-drop{ max-width:calc(100vw - 24px); }
}
@media (max-width: 782px){
  body.admin-bar:not(.home) #content{ padding-top:20px; }
}

/* ---------- FIX 8: real phone catalog (owner's iPhone audit, 2026-11-05) ----------
   Measured at the preview's 320px width: the shop grid fell back to one
   column (WooCommerce's smallscreen stylesheet beat the FIX 5 intent),
   grid and related titles ran to ten lines, the archive H1 was 42px,
   the single-product title let the floating cart button eat its words,
   and the offers slider stretched small photos to full width. */
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:15px; }
@media (max-width: 680px){
  body:not(.home) .woocommerce ul.products.columns-2 li.product,
  body:not(.home) .woocommerce ul.products.columns-3 li.product,
  body:not(.home) .woocommerce ul.products.columns-4 li.product,
  body:not(.home) .woocommerce ul.products.columns-5 li.product,
  body:not(.home) .woocommerce ul.products li.product{ width:calc(50% - 7px) !important; }
  body:not(.home) .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:14px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .woocommerce-products-header__title, .page-title{ font-size:30px; line-height:1.2; }
  .single-product .product_title, .woocommerce div.product .product_title{ font-size:24px; padding-right:60px; }
  .wcpscwc-product-slider .slick-slide img{ max-height:230px; width:auto; max-width:100%; object-fit:contain; margin:0 auto; }
  .wcpscwc-product-slider .woocommerce-loop-product__title{
    font-size:14px; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
}

/* ---------- FIX 9: the plugin's offers carousel is retired under the facade ----------
   Owner's call (2026-11-05): the "OFERTAS DEL MES" block (WooCommerce
   Product Carousel Slider, Owl Carousel) is replaced on shop archives
   by the facade's own offers rail (tm_offers_rail in functions.php).
   With any photo cap present, the carousel rendered its first slide
   blank under the facade; uncapped, its square photos were as tall as
   the screen. This stylesheet only loads with the facade, so the live
   Storefront store keeps its carousel and the plugin's 180px cap. */
.wpcs_product_carousel_slider{ display:none !important; }
/* The carousel lives on the Tienda page inside a SiteOrigin Page
   Builder row, together with the separate text widget that prints its
   "OFERTAS DEL MES" title. Hiding the slider alone left that row on
   screen as an empty dark card (and a duplicate heading next to the
   facade's own rail), so the whole row goes: any panel row containing
   the carousel is hidden under the facade. The search row below it is
   a different row and stays. */
.panel-grid:has(.wpcs_product_carousel_slider){ display:none !important; }
.widget:has(.wpcs_product_carousel_slider){ display:none !important; }

/* ---------- FIX 10 (2026-11-07): los ajustes de Nadia y Tony ----------
   Approved by the family from Muestra 2 and applied on Martin's order.
   (1) Section headings stay in Cinzel Decorative but are no longer forced
       to all caps: the templates author them in sentence case, so dropping
       text-transform renders them capitalized (large initial, small caps
       for the rest, which is how this face draws its lowercase).
   (2) Product names move to the simple face (Inter): long names in a
       display face were the readability pain Nadia flagged. Category
       titles stay in Cinzel: they are family headings, not product text.
   (3) The green loop buttons (cart, the plugin's WhatsApp button and the
       theme's "Lo quiero") get smaller padding and type, so more product
       cards fit on a phone screen.
   (4) The shop page's search panel (SiteOrigin widget_search) becomes a
       slim one-row pill instead of a tall dark block over the products. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title{
  font-family:Inter,system-ui,sans-serif; font-weight:700; text-transform:none; letter-spacing:0; line-height:1.35;
}
.single-product .product_title,
.woocommerce div.product .product_title{
  font-family:Inter,system-ui,sans-serif; font-weight:700; text-transform:none; letter-spacing:0;
}
.so-panel.widget_search{ padding:6px; border-radius:999px; margin-bottom:12px; }
.so-panel.widget_search .search-form{ display:flex; align-items:center; gap:8px; }
.so-panel.widget_search .search-form label{ flex:1 1 auto; margin:0; display:block; }
.so-panel.widget_search .search-field{ width:100%; margin:0; border-radius:999px; padding:9px 14px; }
.so-panel.widget_search .search-submit{ flex:none; margin:0; border-radius:999px; padding:9px 16px; }

/* ---------- FIX 11 (2026-11-07): la letra de los titulos es Cormorant Garamond ----------
   The family chose option B from Muestra 3: the display face for every
   heading, the wordmark and the magazine is now Cormorant Garamond, which
   has true lowercase letterforms (Cinzel Decorative drew lowercase as
   small capitals, so capitalized headings still read as all caps).
   Cormorant's heaviest weight is 700 and it runs smaller and lighter than
   Cinzel, so the explicit display sizes in front-page.css were raised
   about 10 percent to keep the same presence. Product names stay in Inter
   (FIX 10); kicks, prices and body text are unchanged. */

/* ---------- FIX 12 (2026-11-07): menu accordion (las solapas) ----------
   Each catalog area in the seal menu expands to its real subcategories.
   The panel scrolls when the accordions make it taller than the screen. */
#menu-drop{max-height:min(74vh, 660px); overflow-y:auto;}
#menu-drop .tm-mi{position:relative;}
#menu-drop .tm-mi > a{padding-right:46px;}
#menu-drop .tm-acc{position:absolute; top:3px; right:4px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--ink); font-size:14px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 2px;}
#menu-drop .tm-acc[aria-expanded="true"]{transform:rotate(180deg);}
#menu-drop .tm-sub{display:none; padding:0 0 8px 32px;}
#menu-drop .tm-sub.open{display:block;}
#menu-drop .tm-sub a{display:block; padding:7px 10px; font-size:13.5px; font-weight:600; color:var(--ink-dim); border-radius:8px;}
#menu-drop .tm-sub a:hover{color:var(--ink);}

/* ---------- FIX 13 (2026-11-07): the inner-page menu cannot be covered ----------
   On shop and category pages the page's own title block painted over the
   dropdown's top rows (the panel hangs below the header there, over the
   content). On inner pages the panel now renders IN the sticky header's
   flow, under the bar, so opening it grows the header instead of
   overlapping the page: nothing can cover its rows. The front page keeps
   the floating panel, which works there. */
body:not(.home) header{flex-wrap:wrap;}
body:not(.home) header > nav{order:2;}
body:not(.home) #menu-drop{position:static; order:3; flex:0 0 100%; margin-top:8px; max-width:none;}

/* ---------- FIX 15 (2026-11-08): que el menu se descubra ----------
   Tony's catch: customers did not realize the seal opens the menu; the
   only hint was a 15px caret badge. The button is now a labeled chip,
   seal + the word "Categorias", and the open panel is more solid so
   its list stays readable over photos. */
.brand-seal-btn{display:flex; align-items:center; gap:8px; line-height:1;
  padding:5px 13px 5px 6px; border:1px solid var(--line); border-radius:999px;
  background:color-mix(in srgb, var(--bg) 55%, transparent);}
.brand-seal-btn .menu-label{font-family:Inter,system-ui,sans-serif; font-size:13px; font-weight:800;
  letter-spacing:.02em; color:var(--ink); white-space:nowrap;}
.brand-seal-btn .menu-arrow{color:var(--amber); font-size:11px;}
#menu-drop{background:rgba(13,11,9,.96);}