/* ============================================================
   COMPONENTES - subconjunto usado en el modulo Home.
   Coincide 1:1 con reference/component-library.html del prototipo.
   Los componentes de Personalizador, Checkout, Producto (11-22)
   se agregan cuando se construyan esos modulos.
   ============================================================ */

/* 00 . Aviso de envio gratis + barra de progreso - pedido del cliente:
   que se vean SIEMPRE, en cualquier pagina y sin importar el scroll (no
   solo en el primer momento de carga). En vez de que ".tf-announce-bar"
   y "header" calculen cada uno su propio "position:sticky" con un "top"
   distinto (fragil: si el aviso cambia de alto hay que reajustar el top
   del header a mano), el sticky vive en el contenedor que los envuelve a
   los dos (".tf-sticky-top", ver header.php) - adentro, todo fluye
   normal, uno debajo del otro. */
  .tf-sticky-top{position:sticky;top:0;z-index:100;}
  /* Se desplaza sola de derecha a izquierda - mismo truco que
     ".tf-marquee" de la Home (pages.css): 2 copias identicas seguidas,
     se anima el contenedor solo -50% de su ancho total (@keyframes
     tfMarqueeScroll, definida ahi mismo y reutilizada aqui). */
  .tf-announce-bar{background:var(--gold);overflow:hidden;padding:11px 0;}
  .tf-announce-track{display:flex;width:max-content;animation:tfMarqueeScroll 26s linear infinite;}
  .tf-announce-group{display:flex;flex-shrink:0;}
  .tf-announce-group span{
    white-space:nowrap;font-family:'Oswald';font-weight:500;font-size:13px;letter-spacing:.06em;
    color:#1b1305;padding:0 28px;
  }
  .tf-announce-group span strong{color:#1b1305;font-weight:700;}
  @media (prefers-reduced-motion:reduce){.tf-announce-track{animation:none;}}

/* Barra de progreso "te faltan S/.X para envio gratis" - mismo
   TF_CHILD_FREE_SHIPPING_MIN que el aviso de arriba (ver
   tf_child_render_shipping_progress() en inc/woocommerce.php), para que
   nunca queden dos numeros distintos si el monto cambia. Se actualiza
   sola por AJAX al agregar un producto al carrito (fragments de
   WooCommerce, mismo mecanismo que ya actualiza el numerito del carrito
   en el header) - no hace falta JS propio. */
  .tf-shipping-progress{background:#000;padding:9px 20px;border-bottom:1px solid rgba(255,255,255,.12);}
  .tf-shipping-progress-track{max-width:420px;height:4px;margin:0 auto 7px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden;}
  .tf-shipping-progress-track span{display:block;height:100%;background:var(--gold);border-radius:2px;transition:width .4s ease;}
  .tf-shipping-progress p{margin:0;text-align:center;font-family:'Oswald';font-weight:500;font-size:11.5px;letter-spacing:.04em;color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;}
  .tf-shipping-progress p strong{color:var(--gold);font-weight:700;}
  .tf-shipping-progress p svg{width:13px;height:13px;stroke:var(--gold);fill:none;stroke-width:2.5;flex-shrink:0;}

/* 01 . Header / Navegacion */
  header{background:rgba(13,11,8,0.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
  :root[data-theme="light"] header{background:rgba(247,243,234,0.92);}
  .nav-row{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px;}
  .logo{font-family:'Anton';font-size:22px;letter-spacing:.03em;white-space:nowrap;}
  .logo span{color:var(--gold);}
  .logo small{display:block;font-family:'Oswald';font-weight:500;font-size:9px;letter-spacing:.3em;color:var(--ink-muted);margin-top:2px;}
  nav.primary{display:flex;gap:34px;}
  nav.primary a{font-family:'Oswald';font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);transition:color .15s;}
  nav.primary a:hover,nav.primary a.active,nav.primary a.current-menu-item{color:var(--gold);}
  /* "Iniciar Sesion/Registrarse" (o "Mi Cuenta"): solo para el panel
     movil (hamburguesa) - en escritorio ya existe el icono de cuenta
     aparte en el header, mostrar los dos ahi seria redundante. */
  .tf-nav-account-link{display:none;}
  .nav-icons{display:flex;align-items:center;gap:20px;}
  .nav-icons svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.6;}
  /* Woodmart trae su propio estilo generico para <button> (fondo gris
     claro, ancho/alto de sobra) que le ganaba en especificidad al
     nuestro - mismo patron ya visto antes con el boton hamburguesa. Se
     resetea con !important y appearance:none para que quede igual de
     "solo icono" que la cuenta/carrito de al lado. */
  .nav-search-toggle{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background:none !important;border:none !important;padding:0 !important;
    width:auto !important;height:auto !important;min-width:0 !important;
    cursor:pointer;display:flex;align-items:center;
  }
  .nav-search-toggle svg{width:19px;height:19px;stroke:var(--ink) !important;fill:none !important;stroke-width:1.6;flex-shrink:0;transition:stroke .15s;}
  .nav-search-toggle:hover svg,.nav-search-toggle[aria-expanded="true"] svg{stroke:var(--gold) !important;}

/* Panel desplegable del buscador (header) */
  .nav-search-panel{
    position:fixed;top:78px;left:0;right:0;z-index:150;
    background:var(--bg-raised);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .nav-search-panel.is-open{max-height:120px;}
  .nav-search-form{max-width:640px;margin:0 auto;padding:20px 28px;display:flex;gap:12px;align-items:center;}
  .nav-search-form input[type="search"]{
    flex:1;background:var(--bg);border:1px solid var(--line);color:var(--ink);
    padding:12px 16px;font-family:'Barlow';font-size:14.5px;
  }
  .nav-search-form input[type="search"]:focus{outline:none;border-color:var(--gold-dim);}
  .nav-search-form button{
    background:var(--gold);border:1px solid var(--gold);color:#1b1305;
    width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  /* flex-shrink:0 en el SVG (no solo en el boton): un boton con
     display:flex encoge a su hijo SVG a 0 de ancho por defecto en
     flexbox - mismo bug ya encontrado antes con el icono de la
     hamburguesa. Sin esto, el boton se ve como un cuadrado solido sin
     nada adentro. */
  .nav-search-form button svg{width:18px;height:18px;stroke:#1b1305;fill:none;stroke-width:2;flex-shrink:0;}
  .cart-dot{position:relative;}
  .cart-dot em{position:absolute;top:-7px;right:-9px;background:var(--gold);color:#1b1305;font-style:normal;font-size:10px;font-family:'Oswald';font-weight:600;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
  .nav-toggle{
    display:none !important;appearance:none;-webkit-appearance:none;-moz-appearance:none;
    align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;
    width:38px;height:38px;padding:0;margin:0;
    background:transparent !important;border:1px solid var(--line) !important;
    border-radius:6px;color:var(--ink) !important;box-shadow:none !important;
  }
  .nav-toggle svg{width:19px !important;height:19px !important;flex-shrink:0;stroke:var(--ink) !important;fill:none !important;stroke-width:1.8;}
  .nav-toggle .icon-close{display:none;}
  .nav-backdrop{display:none;}

/* Botones */
  .btn{
    font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13.5px;
    padding:16px 30px;border-radius:1px;display:inline-flex;align-items:center;gap:10px;
    transition:transform .15s ease, background .15s ease, color .15s ease;
  }
  .btn-solid{background:var(--gold);color:#1b1305;}
  .btn-solid:hover{background:var(--gold-bright);transform:translateY(-2px);}
  .btn-outline{border:1px solid var(--gold-dim);color:var(--ink);}
  .btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);}
  .btn-dark{background:#17140d;color:#fff;}
  .btn-dark:hover{background:#000;transform:translateY(-2px);}

/* 03 . Trust Indicator (Home) */
  .trust{padding:0;border-bottom:1px solid var(--line);background:#0a0806;}
  .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);}
  .trust-item{display:flex;align-items:center;gap:20px;padding:44px 34px;position:relative;}
  .trust-item + .trust-item{border-left:1px solid var(--line);}
  .trust-item svg{width:54px;height:54px;stroke:var(--gold);fill:none;stroke-width:1.1;flex-shrink:0;}
  .trust-item .txt{max-width:22ch;}
  .trust-item h3{font-family:'Oswald';font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase;margin:0 0 7px;color:var(--ink);}
  .trust-item p{margin:0;font-size:13px;color:var(--ink-muted);line-height:1.48;}

/* 04 . Category Tile */
  .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
  .cat-tile{background:var(--bg-raised);padding:30px 22px;display:flex;flex-direction:column;gap:16px;min-height:168px;transition:background .18s ease;}
  .cat-tile:hover{background:var(--bg-raised-2);}
  .cat-tile .thumb{width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--bg-raised-2);display:flex;align-items:center;justify-content:center;max-width:64px;border:1px solid var(--gold-dim);}
  .cat-tile .thumb img{width:100%;height:100%;object-fit:cover;}
  .cat-tile .thumb svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.4;}
  .cat-tile .name{font-family:'Oswald';font-weight:600;font-size:14px;letter-spacing:.03em;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .cat-tile .name svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:2;flex-shrink:0;}

/* 05 . Combo Card */
  .combo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .combo-card{position:relative;background:var(--bg-raised);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;transition:border-color .18s ease, transform .18s ease;}
  .combo-card:hover{border-color:var(--gold-dim);transform:translateY(-4px);}
  .combo-card .badge{align-self:flex-start;font-family:'Oswald';font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-dim);border-radius:20px;padding:5px 12px;margin-bottom:16px;}
  .combo-card .ph{aspect-ratio:1/1;background:var(--bg);margin-bottom:18px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .combo-card .ph img{width:100%;height:100%;object-fit:cover;}
  /* Mismo Ken Burns que Hero/F27 (@keyframes tfKenBurns, en pages.css) -
     arranca cuando la tarjeta entra en pantalla (misma clase "in-view"
     que ya usa el scroll reveal). No interfiere con el hover-swap: ese
     solo cambia src/srcset y border/outline, nunca "transform". */
  @media (prefers-reduced-motion:no-preference){
    .combo-card .ph img{animation:tfKenBurns 15s ease-out forwards;animation-play-state:paused;}
    .combo-card.in-view .ph img{animation-play-state:running;}
  }
  .combo-card h4{font-family:'Anton';font-weight:400;font-size:18px;margin-bottom:6px;text-transform:uppercase;}
  .combo-card .desc{color:var(--ink-muted);font-size:13px;margin-bottom:16px;}
  .combo-card .meta-row{display:flex;gap:20px;border-top:1px solid var(--line);padding-top:16px;margin-bottom:16px;flex-wrap:wrap;}
  .combo-card .meta{display:flex;align-items:center;gap:7px;font-family:'Oswald';font-weight:600;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);}
  .combo-card .meta svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.6;}
  /* Tono dedicado solo para este precio (mas suave/menos saturado), a
     pedido del cliente - no toca la variable global --gold, el resto del
     sitio sigue con el dorado estandar. */
  .combo-card .price{font-family:'Anton';font-size:26px;color:#c2a35c;flex-grow:1;}
  .combo-card .price-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
  .combo-card .btn{width:100%;justify-content:center;padding:13px 20px;font-size:12.5px;}

/* 06 . Product Card (F27).
   ".f27-plist" es SOLO del mini-listado F27 del Home (3 productos, con
   su propio carrusel en movil - ver responsive.css). El catalogo/
   categoria completo (archive-product.php / taxonomy-product_cat.php)
   usa ".archive-grid", una clase propia e independiente, para que un
   ajuste futuro al F27 del Home no vuelva a filtrarse sin querer a esas
   paginas (ya paso una vez: el carrusel movil de F27 se aplico sin
   querer tambien ahi, por compartir la misma clase). El componente de
   tarjeta ".f27-card" si se sigue reutilizando en los dos casos, eso es
   intencional. */
  .f27-plist{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:36px;}
  .archive-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-bottom:36px;}
  .f27-card{position:relative;}
  .f27-card .ph{aspect-ratio:1/1;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:14px;overflow:hidden;}
  .f27-card .ph img{width:100%;height:100%;object-fit:cover;}
  /* Mismo Ken Burns que Hero/F27 - se usa tanto en el Home como en la
     pagina de categoria F27 (mismo componente .f27-card en las dos). */
  @media (prefers-reduced-motion:no-preference){
    .f27-card .ph img{animation:tfKenBurns 15s ease-out forwards;animation-play-state:paused;}
    .f27-card.in-view .ph img{animation-play-state:running;}
  }
  .f27-card .ph svg{width:34px;height:34px;stroke:var(--gold-dim);fill:none;stroke-width:1.2;}
  .f27-card h4{font-family:'Oswald';font-weight:600;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px;}
  .f27-card .desc{font-size:12px;color:var(--ink-muted);margin-bottom:12px;line-height:1.4;}
  .f27-card .price-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .f27-card .price{font-family:'Anton';font-size:19px;color:var(--gold);}
  .f27-card .btn{width:100%;justify-content:center;padding:11px 16px;font-size:11.5px;margin-top:14px;}
  .f27-more{text-align:center;}

/* Corazon de wishlist, en la fila del precio (no superpuesto sobre la
   foto - correccion pedida por el cliente, antes tapaba la imagen).
   Reutilizado en .combo-card y .f27-card - ver tf_child_wishlist_button()
   en inc/helpers.php. Usa el wishlist real de Woodmart (su propio JS ya
   escucha ".wd-wishlist-btn a"), no necesita JS nuestro. El "agregar al
   carrito rapido" que iba aqui se quito: el carrito solo se agrega
   desde la pagina de producto. */
  .wd-wishlist-btn a{
    width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
    background:var(--bg);border:1px solid var(--gold-dim);transition:background .15s,border-color .15s;
  }
  .wd-wishlist-btn svg{width:15px;height:15px;stroke:var(--ink-muted);fill:none;stroke-width:1.8;transition:stroke .15s,fill .15s;}
  .wd-wishlist-btn a:hover{background:var(--gold);border-color:var(--gold);}
  .wd-wishlist-btn a:hover svg{stroke:#1b1305;}
  /* Estado "ya agregado" - Woodmart le pone la clase "added" sola a su
     boton de wishlist cuando el producto ya esta guardado. */
  .wd-wishlist-btn a.added{background:var(--gold);border-color:var(--gold);}
  .wd-wishlist-btn a.added svg{stroke:#1b1305;fill:#1b1305;}

  /* Wishlist pausada (TF_CHILD_WISHLIST_ENABLED en constants.php): el
     "Sticky toolbar" de Woodmart trae su propio link de wishlist de
     fabrica, sin pasar por nuestro codigo - se oculta por CSS via la
     clase de <body> que agrega tf_child_wishlist_disabled_body_class(). */
  .tf-wishlist-off .wd-header-wishlist{display:none !important;}

/* Tarjetas clicables (.ph como <a>): quita el contorno de foco por defecto
   del navegador, sin tocar el border de diseño de .ph (linea fina siempre
   presente). Respaldo permanente ademas del forzado por JS en el hover. */
  a.ph:focus,
  a.ph:focus-visible,
  a.ph:active{outline:none;box-shadow:none;}

/* 07 . Feature Card (Por que elegir).
   La foto real es el fondo completo de la tarjeta (de esquina a esquina),
   con un degradado oscuro encima para que icono/titulo/texto sigan
   siendo legibles - igual que .testi-vcard mas abajo. Tarjeta cuadrada
   en escritorio Y en el carrusel movil (ver responsive.css). */
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
  .why-card{
    position:relative;aspect-ratio:1/1;overflow:hidden;
    background:var(--bg-raised);padding:32px;
    display:flex;flex-direction:column;
  }
  .why-card-bg{position:absolute;inset:0;z-index:0;}
  .why-card-bg img{width:100%;height:100%;object-fit:cover;display:block;}
  .why-card-bg .pending{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:var(--bg);padding:0 20px;text-align:center;
    font-family:'Oswald';font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted);
  }
  .why-card::after{
    content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg, rgba(13,11,8,.1) 0%, rgba(13,11,8,.55) 55%, rgba(13,11,8,.94) 100%);
  }
  .why-card svg{position:relative;z-index:1;width:30px;height:30px;stroke:var(--gold);fill:none;stroke-width:1.3;margin-bottom:20px;}
  .why-card h3{position:relative;z-index:1;font-family:'Oswald';font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;}
  .why-card p{position:relative;z-index:1;color:var(--ink-muted);font-size:14px;margin:0;}

/* 08 . Testimonial Video Card */
  .testi{background:var(--bg-raised);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;}
  .testi-track-wrap{overflow:hidden;padding:24px 0;margin:0 -28px;padding-left:28px;padding-right:28px;}
  .testi-track{display:flex;gap:18px;width:max-content;will-change:transform;}
  .testi-vcard{width:210px;aspect-ratio:9/15;border-radius:8px;overflow:hidden;position:relative;background:linear-gradient(160deg,#241d12,#0d0b08);flex-shrink:0;will-change:transform;}
  .testi-vcard .play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:52px;height:52px;border-radius:50%;background:rgba(13,11,8,.55);border:1.5px solid rgba(243,237,224,.8);
    display:flex;align-items:center;justify-content:center;
  }
  .testi-vcard .play svg{width:18px;height:18px;fill:var(--ink);stroke:none;margin-left:3px;}
  .testi-vcard .grad{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(13,11,8,0),rgba(13,11,8,.92) 70%);}
  .testi-vcard .meta{position:absolute;left:14px;right:14px;bottom:14px;}
  .testi-vcard .nm{display:flex;align-items:center;gap:6px;font-family:'Oswald';font-weight:600;font-size:13px;color:var(--ink);margin-bottom:6px;}
  .testi-vcard .nm svg{width:14px;height:14px;stroke:#3ba1e8;fill:#3ba1e8;flex-shrink:0;}
  .testi-vcard .stars{color:var(--gold);font-size:12px;letter-spacing:1.5px;}
  .testi-vcard-tag{position:absolute;top:10px;left:10px;background:rgba(13,11,8,.6);border:1px solid rgba(243,237,224,.25);color:var(--ink-muted);font-family:'Oswald';font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:20px;}
  .testi-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .testi-vcard .meta .quote{font-size:11.5px;color:var(--ink-muted);line-height:1.35;margin-bottom:8px;}
  .testi-vcard .play{z-index:2;}

  .testi-arrow{
    position:absolute;top:44%;transform:translateY(-50%);z-index:5;
    width:40px;height:40px;border-radius:50%;background:var(--bg);border:1.5px solid var(--gold-dim);
    box-shadow:0 4px 14px rgba(0,0,0,.45);
    display:flex;align-items:center;justify-content:center;color:var(--gold);
    cursor:pointer;transition:border-color .15s,background .15s;
  }
  .testi-arrow:hover{background:var(--gold);color:var(--bg);border-color:var(--gold);}
  .testi-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
  .testi-arrow.prev{left:2px;}
  .testi-arrow.next{right:2px;}
  .testi-quote-big{max-width:640px;margin:44px auto 0;text-align:center;position:relative;}
  .testi-quote-big .qm{font-family:'Anton';font-size:70px;color:var(--gold-dim);line-height:0;display:block;margin-bottom:6px;}
  .testi-quote-big p{font-size:19px;color:var(--ink);line-height:1.5;}
  .testi-quote-big .src{margin-top:14px;font-family:'Oswald';font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);}
  .stat-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:52px;}
  .stat{text-align:center;padding:34px 20px;position:relative;}
  .stat + .stat{border-left:1px solid var(--line);}
  .stat .n{font-family:'Anton';font-size:36px;color:var(--gold);}
  .stat .l{font-family:'Oswald';font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-top:6px;}

/* 10 . Footer */
  footer{padding:76px 0 0;}
  .foot-grid{display:grid;grid-template-columns:1.3fr .8fr .8fr .8fr 1.1fr;gap:36px;padding-bottom:56px;}
  .foot-brand .logo{margin-bottom:16px;}
  .foot-brand p{color:var(--ink-muted);font-size:13.5px;max-width:32ch;margin-bottom:20px;}
  .social-row{display:flex;gap:12px;}
  .social-row a{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;}
  .social-row svg{width:15px;height:15px;stroke:var(--ink-muted);fill:none;stroke-width:1.6;}
  .foot-col h5{font-family:'Oswald';font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;}
  .foot-col a{display:block;color:var(--ink-muted);font-size:13.5px;margin-bottom:11px;}
  .foot-col a:hover{color:var(--gold);}
  .contact-item{display:flex;gap:10px;margin-bottom:14px;font-size:13.5px;color:var(--ink-muted);}
  .contact-item svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.6;flex-shrink:0;margin-top:1px;}
  .wa-btn{margin-top:6px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gold-dim);padding:12px 20px;font-family:'Oswald';font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;}
  .foot-bottom{border-top:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
  .foot-bottom .badges{display:flex;gap:26px;flex-wrap:wrap;}
  .foot-badge{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-muted);}
  .foot-badge svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.5;}
  .copyright{font-size:12px;color:var(--ink-muted);}

/* Quantity Stepper (variante oscura) - usado en Producto, y luego en Carrito/Pago */
  .qty-dark{display:flex;align-items:center;border:1px solid var(--gold-dim);width:fit-content;}
  .qty-dark span{width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-family:'Oswald';font-size:15px;color:var(--ink);}
  .qty-dark span.op{color:var(--gold);cursor:pointer;}
  .qty-dark input.qty-input{width:38px;height:38px;text-align:center;border:0;background:transparent;font-family:'Oswald';font-size:15px;color:var(--ink);-moz-appearance:textfield;}
  .qty-dark input.qty-input::-webkit-outer-spin-button,
  .qty-dark input.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* Tabla de tallas (pagina Guia de Tallas) */
  .size-table-wrap{overflow-x:auto;margin:8px 0 12px;border:1px solid var(--line);}
  .size-table{width:100%;border-collapse:collapse;min-width:420px;}
  .size-table th,.size-table td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;white-space:nowrap;}
  .size-table thead th{font-family:'Oswald';font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);background:var(--bg-raised);}
  .size-table tbody td{color:var(--ink-muted);}
  .size-table tbody td:first-child{color:var(--ink);font-family:'Oswald';font-weight:600;}
  .size-table tbody tr:last-child td{border-bottom:none;}
  .size-note{font-size:13px;color:var(--ink-muted);margin:14px 0 40px;}
  .size-chip-row{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 12px;}

/* Preguntas frecuentes: acordeon nativo (<details>/<summary>), sin JS */
  .faq-item{border:1px solid var(--line);background:var(--bg-raised);padding:0 24px;margin-bottom:12px;}
  .faq-item summary{
    padding:20px 0;font-family:'Oswald';font-weight:600;font-size:15px;letter-spacing:.02em;
    color:var(--ink);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:"+";font-family:'Anton';font-size:20px;color:var(--gold);flex-shrink:0;transition:transform .2s ease;
  }
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item p{color:var(--ink-muted);font-size:14.5px;line-height:1.7;margin:0 0 22px;}

/* Popup de registro (10% OFF) - una sola vez por visitante (localStorage,
   ver theme.js), no se muestra a quien ya tiene sesion iniciada ni en
   Carrito/Checkout/Mi Cuenta (ver la condicion en footer.php). A pedido
   del cliente usa negro y blanco (no el dorado del resto del sitio),
   igual que la referencia que mando. */
  .tf-popup-overlay{
    position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.82);
    display:flex;align-items:center;justify-content:center;padding:20px;
  }
  .tf-popup-overlay[hidden]{display:none;}
  .tf-popup{
    position:relative;width:100%;max-width:420px;background:#000;
    border:1px solid rgba(255,255,255,.18);padding:40px 34px;text-align:center;
  }
  /* Boton generico de Woodmart (:is(.btn,.button,button,...)) le gana en
     especificidad/orden de carga a nuestra clase - mismo patron ya visto
     varias veces (buscador, hamburguesa): se fuerza con !important cada
     propiedad que Woodmart tambien fija, si no el boton sale como un
     cuadrado blanco de 40x42 en vez de un circulo chico sin fondo. */
  .tf-popup-close{
    position:absolute !important;top:14px !important;right:14px !important;
    width:32px !important;height:32px !important;min-width:0 !important;min-height:0 !important;
    padding:0 !important;margin:0 !important;border-radius:50% !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    background:none !important;border:1px solid rgba(255,255,255,.3) !important;
    appearance:none !important;-webkit-appearance:none !important;-moz-appearance:none !important;
    cursor:pointer;color:#fff;transition:border-color .15s,opacity .15s;
  }
  .tf-popup-close:hover{border-color:#fff !important;opacity:.75;}
  .tf-popup-close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
  .tf-popup .eyebrow{display:block;margin-bottom:10px;color:#fff;}
  .tf-popup h3{font-family:'Anton';font-size:clamp(22px,3vw,28px);margin-bottom:12px;color:#fff;}
  .tf-popup p{color:rgba(255,255,255,.65);font-size:13.5px;line-height:1.6;margin-bottom:24px;}
  .tf-popup form{display:flex;flex-direction:column;gap:14px;}
  .tf-popup input{
    width:100%;background:#000;border:1px solid rgba(255,255,255,.3);color:#fff;
    padding:13px 16px;font-family:'Barlow';font-size:14.5px;transition:border-color .15s;
  }
  .tf-popup input:focus{outline:none;border-color:#fff;}
  .tf-popup input::placeholder{color:rgba(255,255,255,.45);opacity:1;}
  .tf-popup .btn{justify-content:center;background:#fff;color:#000;border-color:#fff;}
  .tf-popup .btn:hover{background:transparent;color:#fff;}
  .tf-popup-error{display:block;min-height:16px;color:#e0776b;font-size:12.5px;margin-top:4px;}
  .tf-popup-success .tf-popup-code-row{
    display:flex;align-items:center;justify-content:center;gap:10px;
    border:1px dashed rgba(255,255,255,.35);padding:14px;margin-bottom:12px;
  }
  .tf-popup-success .tf-popup-code{font-family:'Oswald';font-weight:600;font-size:20px;letter-spacing:.12em;color:#fff;}
  .tf-popup-copy{
    background:none !important;border:none !important;padding:0 !important;min-width:0 !important;min-height:0 !important;
    display:flex !important;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.65);
  }
  .tf-popup-copy:hover{color:#fff;}
  .tf-popup-copy svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;}
  .tf-popup-success .tf-popup-note{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:22px;}
  .tf-popup-success .btn{width:100%;}
  body.tf-popup-open{overflow:hidden;}

/* Insignias de menu ("Nuevo"/"Popular") - referencia visual que mando el
   cliente. Se agregan por codigo en TF_Child_Nav_Walker (inc/helpers.php)
   segun el titulo del item de menu, no a mano en cada template. */
  .tf-nav-badge{
    display:inline-block;margin-left:6px;padding:2px 7px;position:relative;top:-1px;
    font-family:'Oswald';font-weight:600;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  }
  .tf-nav-badge-new{background:var(--gold);color:#1b1305;}
  .tf-nav-badge-popular{background:none;border:1px solid var(--gold-dim);color:var(--gold);}
  .tf-nav-badge-hot{background:#e63946;color:#fff;}
  .faq-item p a{color:var(--gold);}

/* ===== Stepper (Carrito > Personaliza > Envio > Pago > Confirmacion) =====
   Compartido de verdad por TODAS las pantallas del flujo de compra
   (Personalizador, Envio-Metodo/Datos/Detalle, y las que faltan de Pago/
   Confirmacion) - por eso vive aqui en components.css (cargado siempre,
   ver inc/enqueue.php), no en personalizador.css. Antes SI vivia solo en
   personalizador.css: las 3 Pantallas nuevas de Envio no cargan ese
   archivo, asi que el Stepper entero (incluido el tamano del icono de
   "Compra 100% segura") salia sin ningun estilo - un SVG sin
   width/height definidos se dibuja a su tamano real (cientos de px),
   tapando la pantalla. Se corrige moviendolo aqui, para que cualquier
   pantalla nueva del flujo lo herede automaticamente sin tener que
   acordarse de copiarlo cada vez. */
  .flow-head{background:#0a0806;border-bottom:1px solid var(--line);padding:20px 0;position:sticky;top:0;z-index:40;}
  .flow-head-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
  .flow-logo{font-family:'Anton';font-size:17px;color:var(--ink);}
  .flow-logo span{color:var(--gold);}
  .flow-steps{display:flex;align-items:center;gap:10px;}
  .flow-step{display:flex;align-items:center;gap:9px;}
  .flow-step .c{
    width:26px;height:26px;border-radius:50%;border:1px solid var(--gold-dim);
    display:flex;align-items:center;justify-content:center;font-family:'Oswald';font-weight:600;font-size:11px;color:var(--ink-muted);
  }
  .flow-step.active .c{background:var(--gold);border-color:var(--gold);color:#1b1305;}
  .flow-step.done .c{background:transparent;border-color:var(--gold);color:var(--gold);}
  .flow-step span.lbl{font-family:'Oswald';font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted);}
  .flow-step.active span.lbl{color:var(--gold);}
  .flow-sep{width:26px;height:1px;background:var(--line);}
  .flow-secure{display:flex;align-items:center;gap:7px;font-family:'Oswald';font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);}
  .flow-secure svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:1.6;}
  /* Variante clara: la usan el Personalizador y las pantallas de Envio (.flow-head.light) */
  .flow-head.light{background:#ffffff;border-bottom:1px solid #e6ded0;}
  .flow-head.light .flow-logo{color:#16130d;}
  .flow-head.light .flow-step .c{border-color:#d8cfba;color:#8a8272;}
  .flow-head.light .flow-step.active .c{background:var(--flow-orange);border-color:var(--flow-orange);color:#fff;}
  .flow-head.light .flow-step.done .c{background:var(--flow-orange);border-color:var(--flow-orange);color:#fff;}
  .flow-head.light .flow-step span.lbl{color:#8a8272;}
  .flow-head.light .flow-step.active span.lbl{color:#16130d;font-weight:700;}
  .flow-head.light .flow-sep{background:#e6ded0;}
  .flow-head.light .flow-secure{color:#16130d;}
  .flow-head.light .flow-secure svg{stroke:#16130d;}