/*
Theme Name:   Fucking Navidad
Theme URI:    https://fucking-navidad.com
Description:  Child theme de Storefront para fucking-navidad.com
Author:       Dani
Template:     storefront
Version:      2.2.2
*/

/* =============================================
   CUSTOM PROPERTIES
   ============================================= */
:root {
  --fn-bg:           #fafaf8;
  --fn-bg-card:      #ffffff;
  --fn-bg-elevated:  #f4f4f2;
  --fn-bg-section:   #eeede9;
  --fn-red:          #cc2200;
  --fn-red-dark:     #991a00;
  --fn-red-hover:    #ff3300;
  --fn-gold:         #b8740f;
  --fn-gold-light:   #d4941e;
  --fn-text:         #1a1a18;
  --fn-text-muted:   #5a5a55;
  --fn-text-dim:     #999990;
  --fn-border:       #ddddd8;
  --fn-border-light: #e8e8e3;
  --fn-max-width:    1240px;
  --fn-radius:       2px;
  --fn-shadow:       0 4px 24px rgba(0,0,0,0.10);
  --fn-shadow-red:   0 8px 32px rgba(220,0,0,0.18);
  --header-h:        72px;
}

/* =============================================
   BASE RESET
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  max-width: 100%;
}

body {
  background: var(--fn-bg);
  color: var(--fn-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.page, body.home { background: var(--fn-bg); }

.storefront-breadcrumb { display: none !important; }
.page-template-default .secondary,
.home .secondary,
.page .secondary { display: none !important; }
.page-template-default #primary,
.home #primary,
.page #primary { width: 100% !important; float: none !important; margin: 0 !important; }

/* Full-width sections — romper todos los contenedores de Storefront */
body.home #content,
body.home #content .col-full,
body.home .site-content,
body.home .site-main,
body.home #primary,
body.home article,
body.home .entry-content,
body.home .entry-header,
body.page #content,
body.page #content .col-full,
body.page .site-content,
body.page .site-main,
body.page #primary,
body.page article,
body.page .entry-content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
  float: none !important;
}

/* Solo el col-full del contenido principal, no el del header */
body.home .site-main .col-full,
body.page .site-main .col-full {
  max-width: none !important;
  padding: 0 !important;
}

/* Restaurar padding del header y footer */
.site-header,
.site-header .col-full,
.site-footer .col-full,
.storefront-handheld-footer-bar {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Oswald', sans-serif;
  color: var(--fn-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

a { color: var(--fn-red); text-decoration: none; transition: color .2s; }
a:hover { color: var(--fn-red-hover); }
img { max-width: 100%; height: auto; display: block; }

/* Monospace para elementos "underground" */
.fn-mono {
  font-family: 'Courier New', Courier, monospace;
  font-size: .85rem;
  letter-spacing: .05em;
}

/* =============================================
   HEADER STICKY
   ============================================= */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #e8e8e5 !important;
  transition: box-shadow .3s !important;
}

.site-header.fn-scrolled {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

/* Header blanco — texto oscuro */
.site-header .site-branding h1 a,
.site-header .site-branding p.site-title a,
.site-header .site-title a {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: #1a1a18 !important;
}

.site-header p.site-description {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: .72rem !important;
  color: rgba(26,26,24,0.45) !important;
  letter-spacing: .04em !important;
  margin: 0 !important;
  text-transform: lowercase !important;
}

.main-navigation ul li a { color: #1a1a18 !important; }
.main-navigation ul li a:hover { color: var(--fn-red) !important; }
.site-header-cart a { color: #1a1a18 !important; }

/* Logo — tamaño adecuado, sombra con tono de marca */
.site-header .custom-logo {
  max-height: 80px !important;
  height: 80px !important;
  width: auto !important;
  max-width: 220px !important;
  display: block !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,0.55))
    drop-shadow(0 4px 14px rgba(180,30,0,0.30))
    drop-shadow(0 8px 28px rgba(0,0,0,0.14)) !important;
}

.site-header .custom-logo-link {
  display: flex !important;
  align-items: center !important;
}

/* Ocultar el texto del título cuando hay logo */
.site-header .site-branding:has(.custom-logo) .site-title,
.site-header .site-branding:has(.custom-logo) .site-description {
  display: none !important;
}

/* =============================================
   BOTONES
   ============================================= */
.fn-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2.25rem;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: none;
  cursor: pointer;
  border-radius: var(--fn-radius);
  transition: all .2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.fn-btn-primary {
  background: linear-gradient(135deg, #cc2200 0%, #e03300 100%);
  color: #fff;
  box-shadow: 0 8px 32px rgba(200,34,0,0.3);
}
.fn-btn-primary:hover {
  background: linear-gradient(135deg, #e03300 0%, #ff4400 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(200,34,0,0.5);
}

.fn-btn-secondary {
  background: transparent;
  color: var(--fn-text);
  border: 1.5px solid var(--fn-border);
}
.fn-btn-secondary:hover {
  border-color: var(--fn-red);
  color: var(--fn-red);
  transform: translateY(-2px);
}

/* =============================================
   LAYOUT
   ============================================= */
.fn-container { max-width: var(--fn-max-width); margin: 0 auto; padding: 0 2rem; }
.fn-section { padding: 6rem 0; }
.fn-section-tight { padding: 3.5rem 0; }
.fn-section-dark   { background: var(--fn-bg); }
.fn-section-card   { background: var(--fn-bg-section); }
.fn-section-raised { background: var(--fn-bg-elevated); }

.fn-section-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: .6rem;
  color: var(--fn-text);
  position: relative;
  display: inline-block;
}

/* Wrapper para centrar el starburst */
.fn-section-title-wrap {
  text-align: center;
  margin-bottom: .6rem;
}

/* Subrayado dorado para sección titles */
.fn-section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #c8841a, #e8a830, #c8841a);
  margin: .4rem auto 0;
  border-radius: 2px;
}

.fn-section-subtitle {
  text-align: center;
  color: var(--fn-text-muted);
  font-size: .97rem;
  margin-bottom: 3rem;
  margin-top: 0;
}

/* =============================================
   HERO
   ============================================= */
.fn-hero {
  min-height: calc(100vh - var(--header-h));
  background: var(--fn-bg);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 3rem 0 3rem;
}

.fn-hero::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(200,0,0,0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.fn-hero__inner {
  max-width: var(--fn-max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Logo grande en hero — brand statement */
.fn-hero__brand {
  margin-bottom: 1.75rem;
}
.fn-hero__brand-logo {
  width: 180px;
  height: 180px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.18));
}

.fn-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--fn-red);
  margin-bottom: 1.25rem;
  padding: .35rem .85rem;
  border: 1px solid rgba(220,0,0,0.35);
  border-radius: 100px;
  background: rgba(220,0,0,0.08);
  width: fit-content;
  flex-wrap: wrap;
  text-align: center;
}

.fn-hero__title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-weight: 700;
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--fn-text);
  margin: 0 0 1.5rem;
}

.fn-hero__title .fn-accent { color: var(--fn-red); }

.fn-hero__subtitle {
  font-size: 1.08rem;
  color: var(--fn-text-muted);
  line-height: 1.75;
  margin-bottom: 1.25rem;
  max-width: 460px;
}

.fn-hero__social {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .88rem;
  color: var(--fn-text-muted);
  margin-bottom: 2rem;
}

.fn-hero__stars { color: var(--fn-gold); letter-spacing: 2px; }

/* COUNTDOWN */
.fn-countdown {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: 2.25rem;
  flex-wrap: nowrap;
}

.fn-countdown__label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fn-text-muted);
  margin-right: .25rem;
  white-space: nowrap;
}

.fn-countdown__block {
  background: var(--fn-bg-elevated);
  border: 1px solid var(--fn-border-light);
  border-radius: 6px;
  padding: .5rem .75rem;
  text-align: center;
  min-width: 52px;
}

.fn-countdown__num {
  font-family: 'Oswald', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #c8841a;
  line-height: 1;
  display: block;
}

.fn-countdown__unit {
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fn-text-dim);
  display: block;
  margin-top: 2px;
}

.fn-countdown__sep {
  font-family: 'Oswald', sans-serif;
  font-size: 1.3rem;
  color: #c8841a;
  opacity: .5;
  align-self: flex-start;
  margin-top: .35rem;
}

.fn-hero__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.fn-hero__image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fn-hero__image-wrap {
  position: relative;
  display: inline-block;
}

.fn-hero__image-wrap::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, rgba(200,0,0,0.5), transparent 60%);
  border-radius: 10px;
  z-index: 0;
}

.fn-hero__image-wrap img {
  position: relative;
  z-index: 1;
  border-radius: 8px;
  max-height: 560px;
  object-fit: cover;
  filter: drop-shadow(0 30px 70px rgba(200,0,0,0.2));
}

/* Fallback cuando no hay imagen de producto real */
.fn-hero__placeholder {
  position: relative;
  z-index: 1;
  width: 460px;
  max-width: 100%;
  aspect-ratio: 4/5;
  border-radius: 8px;
  background: linear-gradient(135deg, #1a0000 0%, #2d0505 40%, #0d0000 100%);
  border: 1px solid rgba(220,0,0,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  filter: drop-shadow(0 30px 70px rgba(200,0,0,0.2));
}

.fn-hero__placeholder-emoji { font-size: 8rem; line-height: 1; }

.fn-hero__placeholder-text {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(220,0,0,0.7);
}

/* Hero claro — usa variables del tema claro */
.fn-hero__title { color: var(--fn-text) !important; }
.fn-hero__subtitle { color: var(--fn-text-muted) !important; }
.fn-hero__eyebrow { color: var(--fn-red) !important; border-color: rgba(204,34,0,0.3) !important; background: rgba(204,34,0,0.06) !important; }
.fn-hero__social { color: var(--fn-text-muted) !important; }
.fn-countdown__label { color: var(--fn-text-muted) !important; }
/* Botón secundario del hero visible en fondo claro */
.fn-hero .fn-btn-secondary {
  color: var(--fn-text) !important;
  border-color: var(--fn-border) !important;
}
.fn-hero .fn-btn-secondary:hover {
  border-color: var(--fn-red) !important;
  color: var(--fn-red) !important;
}

/* =============================================
   TRUST BAR
   ============================================= */
.fn-trust-bar {
  background: var(--fn-bg-elevated);
  border-top: 1px solid var(--fn-border);
  border-bottom: 1px solid var(--fn-border);
  padding: 0 2rem;
}

.fn-trust-bar__inner {
  max-width: var(--fn-max-width);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.fn-trust-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1.1rem 2rem;
  font-size: .85rem;
  color: var(--fn-text-muted);
  font-weight: 500;
  border-right: 1px solid var(--fn-border);
  flex: 1;
  justify-content: center;
}

.fn-trust-item:last-child { border-right: none; }
.fn-trust-item__icon { font-size: 1.2rem; flex-shrink: 0; display: flex; align-items: center; }
.fn-trust-icon { font-size: 1.5rem; color: var(--fn-red); flex-shrink: 0; }
.fn-trust-item strong { color: var(--fn-text); font-weight: 600; }

/* =============================================
   URGENCY BAR
   ============================================= */
.fn-urgency-bar {
  background: linear-gradient(90deg, #cc2200 0%, #991a00 50%, #cc2200 100%);
  border-top: 2px solid #c8841a;
  border-bottom: 2px solid #c8841a;
  padding: .75rem 1.5rem;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  white-space: normal;
  word-break: break-word;
}

/* =============================================
   CATEGORÍAS
   ============================================= */
.fn-categories { background: var(--fn-bg-section); }

.fn-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.fn-category-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--fn-border);
  text-decoration: none;
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem 1.5rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.fn-category-card:nth-child(1) { background: linear-gradient(160deg, #1c0000 0%, #2d0a0a 50%, #0d0000 100%); }
.fn-category-card:nth-child(2) { background: linear-gradient(160deg, #00101c 0%, #0a1e2a 50%, #000a10 100%); }
.fn-category-card:nth-child(3) { background: linear-gradient(160deg, #001510 0%, #0a2820 50%, #000e0c 100%); }
.fn-category-card:nth-child(4) { background: linear-gradient(160deg, #1a0e00 0%, #2e1a00 50%, #0d0700 100%); }

.fn-category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.2) 55%, transparent 100%);
  z-index: 0;
  transition: opacity .3s;
}

.fn-category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  border-color: rgba(220,0,0,0.6);
}

.fn-category-card__emoji {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  font-size: 5rem;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
  transition: transform .3s ease;
}

.fn-category-card:hover .fn-category-card__emoji {
  transform: translate(-50%, -70%) scale(1.12);
}

.fn-category-card__body { position: relative; z-index: 2; }

.fn-category-card__name {
  font-family: 'Oswald', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #f2f2f2;
  display: block;
  letter-spacing: .06em;
}

.fn-category-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: var(--fn-red);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  margin-top: .4rem;
  transition: gap .2s;
}

.fn-category-card:hover .fn-category-card__cta { gap: .6rem; }

/* =============================================
   STEPS
   ============================================= */
.fn-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.fn-step {
  text-align: center;
  padding: 2.5rem 1.75rem;
  background: var(--fn-bg-elevated);
  border: 1px solid var(--fn-border);
  border-radius: 8px;
  transition: border-color .3s, transform .3s;
}

.fn-step { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.fn-step:hover { border-color: rgba(220,0,0,0.4); transform: translateY(-4px); }

.fn-step__number {
  font-family: 'Oswald', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: #c8841a;
  line-height: 1;
  margin-bottom: .75rem;
  opacity: .85;
}

.fn-step__title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2rem;
  color: var(--fn-text);
  text-transform: uppercase;
  margin-bottom: .6rem;
}

.fn-step__desc { color: var(--fn-text-muted); font-size: .9rem; line-height: 1.7; }
.fn-steps__cta { text-align: center; }

/* =============================================
   STEPS FULL (página Cómo Funciona)
   ============================================= */
.fn-steps-full {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-bottom: 3.5rem;
}

.fn-step-full {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 2rem 2.25rem;
  background: var(--fn-bg-elevated);
  border: 1px solid var(--fn-border);
  border-radius: 8px;
  transition: border-color .3s, transform .3s;
}

.fn-step-full:hover {
  border-color: rgba(220,0,0,0.4);
  transform: translateY(-3px);
}

.fn-step-full__icon {
  font-size: 2.8rem;
  flex-shrink: 0;
  line-height: 1;
  width: 3.5rem;
  text-align: center;
}

.fn-step-full__body { flex: 1; }

.fn-step-full__body h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fn-text);
  margin: 0 0 .6rem;
}

.fn-step-full__body p {
  color: var(--fn-text-muted);
  font-size: .97rem;
  line-height: 1.75;
  margin: 0;
}

/* =============================================
   FEATURED PRODUCTS
   ============================================= */
.fn-featured { background: var(--fn-bg-section); }

.fn-featured ul.products,
.fn-featured .products.columns-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Anular el clearfix de WooCommerce que ocupa la primera celda del grid */
.fn-featured ul.products::before,
.fn-featured ul.products::after {
  content: none !important;
  display: none !important;
}

.fn-featured ul.products li.product,
.fn-featured li.product,
.fn-featured li.product.first,
.fn-featured li.product.last {
  background: var(--fn-bg-elevated) !important;
  border: 1px solid var(--fn-border) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: border-color .3s, transform .3s, box-shadow .3s !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  clear: none !important;
  min-width: 0 !important;
}

.fn-featured li.product:hover {
  border-color: rgba(220,0,0,0.5) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4) !important;
}

.fn-featured li.product .woocommerce-loop-product__link img {
  width: 100% !important;
  aspect-ratio: 1 !important;
  object-fit: cover !important;
  transition: transform .4s ease !important;
}

.fn-featured li.product:hover img { transform: scale(1.05) !important; }

.fn-featured li.product .woocommerce-loop-product__title {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: var(--fn-text) !important;
  padding: 1rem 1.25rem .35rem !important;
  margin: 0 !important;
}

.fn-featured li.product .price {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--fn-red) !important;
  display: block !important;
  padding: 0 1.25rem .75rem !important;
}

.fn-featured li.product .button,
.fn-featured li.product .add_to_cart_button {
  background: var(--fn-red) !important;
  color: #fff !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: .85rem !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  border-radius: 0 !important;
  border: none !important;
  width: calc(100% - 2.5rem) !important;
  margin: 0 1.25rem 1.25rem !important;
  text-align: center !important;
  padding: .7rem !important;
  display: block !important;
  transition: background .2s !important;
}

.fn-featured li.product .button:hover,
.fn-featured li.product .add_to_cart_button:hover {
  background: var(--fn-red-hover) !important;
  color: #fff !important;
}

/* =============================================
   PILLARS / GARANTÍAS
   ============================================= */
.fn-pillars {
  background: var(--fn-bg-elevated);
  border-top: 1px solid var(--fn-border);
  border-bottom: 1px solid var(--fn-border);
}

.fn-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.fn-pillar {
  padding: 3rem 2.5rem;
  text-align: center;
  border-right: 1px solid var(--fn-border);
  transition: background .3s;
}

.fn-pillar:last-child { border-right: none; }
.fn-pillar { box-shadow: none; }
.fn-pillar:hover { background: rgba(204,34,0,0.04) !important; }

.fn-pillar__icon { font-size: 2.75rem; display: block; margin-bottom: 1.25rem; }

.fn-pillar__title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--fn-text);
  margin-bottom: .5rem;
  letter-spacing: .06em;
}

.fn-pillar__desc { color: var(--fn-text-muted); font-size: .88rem; line-height: 1.7; }

/* =============================================
   HERO PEQUEÑO (páginas internas)
   ============================================= */
.fn-page-hero {
  background: var(--fn-bg-elevated);
  padding: 5rem 0 4rem;
  text-align: center;
  border-bottom: 1px solid var(--fn-border);
  position: relative;
  overflow: hidden;
}

.fn-page-hero::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(200,0,0,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.fn-page-hero__title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fn-text);
  margin: 0;
  position: relative;
}

.fn-page-hero__subtitle {
  color: var(--fn-text-muted);
  font-size: 1.05rem;
  margin-top: .85rem;
  position: relative;
}

/* =============================================
   SOBRE NOSOTROS
   ============================================= */
.fn-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.fn-about__heading {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: var(--fn-text);
}

.fn-about__text p {
  color: var(--fn-text-muted);
  line-height: 1.85;
  margin-bottom: 1.35rem;
  font-size: 1.05rem;
}

.fn-about__text p strong { color: var(--fn-text); }

.fn-about__image { position: relative; }
.fn-about__image img { width: 100%; border-radius: 6px; border: 1px solid var(--fn-border); }

/* =============================================
   FAQ
   ============================================= */
.fn-faq { margin-bottom: 4rem; }
.fn-faq h2 { font-size: 2rem; margin-bottom: 2.5rem; text-align: center; }
.fn-faq__item { border-bottom: 1px solid var(--fn-border); }
.fn-faq__item input[type="checkbox"] { display: none; }

.fn-faq__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.35rem 0;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fn-text);
  user-select: none;
  transition: color .2s;
}

.fn-faq__label:hover { color: var(--fn-red); }
.fn-faq__label::after { content: '+'; font-size: 1.5rem; color: var(--fn-red); line-height: 1; }
.fn-faq__item input:checked + .fn-faq__label::after { content: '−'; }

.fn-faq__answer {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease, padding .35s;
  color: var(--fn-text-muted); line-height: 1.8; font-size: .97rem;
}

.fn-faq__item input:checked ~ .fn-faq__answer { max-height: 400px; padding-bottom: 1.35rem; }

/* =============================================
   ENVÍOS Y DEVOLUCIONES
   ============================================= */
.fn-shipping__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }

.fn-shipping__block h3 {
  font-family: 'Oswald', sans-serif; font-size: 1.5rem;
  color: var(--fn-red); text-transform: uppercase;
  margin-bottom: 1.5rem; border-bottom: 1px solid var(--fn-border);
  padding-bottom: .75rem;
}

.fn-shipping-table { width: 100%; border-collapse: collapse; }
.fn-shipping-table th {
  text-align: left; padding: .75rem 1rem;
  background: var(--fn-bg-elevated);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase; font-size: .8rem;
  letter-spacing: .1em; color: var(--fn-text-muted);
  border-bottom: 1px solid var(--fn-border);
}
.fn-shipping-table td { padding: .85rem 1rem; color: var(--fn-text-muted); border-bottom: 1px solid var(--fn-border); font-size: .93rem; }
.fn-shipping-table tr:last-child td { border-bottom: none; }

.fn-returns-list { list-style: none; padding: 0; margin: 0; }
.fn-returns-list li { padding: .8rem 0; border-bottom: 1px solid var(--fn-border); color: var(--fn-text-muted); line-height: 1.7; font-size: .93rem; }
.fn-returns-list li:last-child { border-bottom: none; }
.fn-returns-list li::before { content: '→ '; color: var(--fn-red); font-weight: 700; }

.fn-note {
  background: var(--fn-bg-elevated);
  border-left: 3px solid var(--fn-red);
  padding: 1.25rem 1.5rem;
  margin-top: 2rem;
  color: var(--fn-text-muted);
  font-size: .88rem; line-height: 1.75;
  border-radius: 0 4px 4px 0;
}

/* =============================================
   ANIMATIONS
   ============================================= */
.fn-animate {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
.fn-animate.fn-visible { opacity: 1; transform: translateY(0); }
.fn-animate:nth-child(2) { transition-delay: .08s; }
.fn-animate:nth-child(3) { transition-delay: .16s; }
.fn-animate:nth-child(4) { transition-delay: .24s; }

/* =============================================
   WOOCOMMERCE GLOBAL
   ============================================= */
.single-product .product .summary .price {
  color: var(--fn-red) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 2rem !important;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single-product .single_add_to_cart_button {
  background: var(--fn-red) !important;
  color: #fff !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  border-radius: var(--fn-radius) !important;
  border: none !important;
  transition: background .2s !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single-product .single_add_to_cart_button:hover {
  background: var(--fn-red-hover) !important;
  color: #fff !important;
}

/* WooCommerce — adaptar a tema claro */
.woocommerce-page,
.woocommerce { background: var(--fn-bg) !important; color: var(--fn-text) !important; }
.woocommerce .woocommerce-breadcrumb { color: var(--fn-text-muted) !important; }
.woocommerce table.shop_table { background: var(--fn-bg-card) !important; }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #payment { background: var(--fn-bg-card) !important; border: 1px solid var(--fn-border) !important; }

/* =============================================
   FOOTER
   ============================================= */
/* Footer mantiene colores oscuros explícitos */
.site-footer { background: #040404 !important; color: #888 !important; border-top: 1px solid #222 !important; }
.site-footer a { color: #555 !important; transition: color .2s !important; }
.site-footer a:hover { color: var(--fn-red) !important; }
.site-footer p, .site-footer li, .fn-footer-credit { color: #888; }

/* Ocultar cualquier crédito de WooCommerce/Storefront que escape al PHP */
.site-footer .storefront-credit,
.site-footer [class*="storefront-credit"],
.site-footer p a[href*="woocommerce.com"],
.site-footer p a[href*="wordpress.org"],
.site-footer p a[href*="storefront"] {
  display: none !important;
}
/* Si el párrafo padre solo contiene ese enlace, ocultarlo también */
.site-footer p:has(> a[href*="woocommerce.com"]),
.site-footer p:has(> a[href*="wordpress.org"]) {
  display: none !important;
}

/* =============================================
   SVG ICONS — CATEGORÍAS
   ============================================= */
.fn-category-card__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
  transition: transform .3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fn-category-card:hover .fn-category-card__icon {
  transform: translate(-50%, -70%) scale(1.12);
}

.fn-cat-svg { width: 90px; height: 90px; }

/* Phosphor icon en category cards */
.fn-cat-icon {
  font-size: 5rem;
  color: var(--fn-red);
  filter: drop-shadow(0 4px 12px rgba(204,34,0,0.4));
  transition: transform .3s ease, color .3s;
  display: block;
}
.fn-category-card:hover .fn-cat-icon {
  transform: scale(1.12);
  color: var(--fn-red-hover);
}

/* =============================================
   SVG ICONS — PILLARS
   ============================================= */
.fn-pillar-svg { width: 52px; height: 52px; display: block; margin: 0 auto; }

/* Phosphor icon en pillars */
.fn-pillar-icon {
  font-size: 2.75rem;
  display: block;
  margin-bottom: 1.25rem;
  color: var(--fn-red);
}
.fn-pillar:nth-child(2) .fn-pillar-icon { color: var(--fn-gold); }

/* =============================================
   HERO IMAGE
   ============================================= */
.fn-hero__image-wrap img {
  position: relative;
  z-index: 1;
  border-radius: 8px;
  max-height: 560px;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 70px rgba(200,0,0,0.3));
  background: transparent;
}

/* =============================================
   FOOTER CREDIT PERSONALIZADO
   ============================================= */
/* Footer nav — enlaces legales */
.fn-footer-nav {
  padding: 1rem 0 .5rem;
  border-top: 1px solid #1e1e1e;
}

.fn-footer-nav__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: .25rem 1.5rem !important;
}

.fn-footer-nav__list li {
  margin: 0 !important;
  padding: 0 !important;
}

.fn-footer-nav__list a {
  font-size: .78rem !important;
  color: #666 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-family: 'Oswald', sans-serif !important;
  padding: .3rem 0 !important;
  display: inline-block !important;
  transition: color .2s !important;
}

.fn-footer-nav__list a:hover {
  color: var(--fn-red) !important;
}

.fn-footer-credit {
  text-align: center;
  font-size: .8rem;
  color: var(--fn-text-dim);
  padding: .75rem 0;
  margin: 0;
}

@media (max-width: 768px) {
  .fn-footer-nav__list {
    gap: .2rem 1rem !important;
  }
  .fn-footer-nav__list a {
    font-size: .72rem !important;
  }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .fn-categories__grid { grid-template-columns: repeat(2, 1fr); }
  .fn-featured ul.products,
  .fn-featured .products.columns-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
  :root { --header-h: 60px; }

  /* Hero: sin min-height en móvil — evita espacio vacío enorme */
  .fn-hero { min-height: 0 !important; padding: 2rem 0 !important; }
  .fn-hero__inner { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
  .fn-hero__image { order: -1; }
  /* Logo en hero: centrado y más pequeño en móvil */
  .fn-hero__brand { display: flex; justify-content: center; margin-bottom: 1.25rem; }
  .fn-hero__brand-logo { width: 130px; height: 130px; }
  .fn-hero__subtitle { max-width: 100%; }
  .fn-hero__cta, .fn-hero__social { justify-content: center; }
  .fn-hero__eyebrow {
    margin: 0 auto 1.25rem;
    white-space: normal;
    text-align: center;
    justify-content: center;
    max-width: 100%;
  }
  .fn-countdown { justify-content: center; }
  .fn-hero__image-wrap {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .fn-hero__image-wrap img {
    max-height: 320px;
    width: 100%;
    object-fit: contain;
  }

  .fn-trust-bar__inner { flex-wrap: wrap; }
  .fn-trust-item { padding: .75rem 1rem; font-size: .8rem; width: 50%; border-bottom: 1px solid var(--fn-border); flex: none; }
  .fn-trust-item:nth-child(odd) { border-right: 1px solid var(--fn-border); }
  .fn-trust-item:nth-child(even) { border-right: none; }
  .fn-trust-item:nth-last-child(-n+2) { border-bottom: none; }

  .fn-categories__grid { grid-template-columns: repeat(2, 1fr); }
  .fn-category-card { aspect-ratio: 1 / 1.1; }

  .fn-steps__grid { grid-template-columns: 1fr; }
  .fn-featured ul.products,
  .fn-featured .products.columns-4 { grid-template-columns: repeat(2, 1fr) !important; }

  .fn-pillars__grid { grid-template-columns: 1fr; }
  .fn-pillar { border-right: none; border-bottom: 1px solid var(--fn-border); }
  .fn-pillar:last-child { border-bottom: none; }

  .fn-about__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .fn-about__image { display: none; }
  .fn-shipping__grid { grid-template-columns: 1fr; }
  .fn-section { padding: 3rem 0; }
  .fn-cat-svg { width: 70px; height: 70px; }
  .fn-pillar-svg { width: 44px; height: 44px; }
  .fn-step-full { flex-direction: column; gap: 1rem; padding: 1.5rem; }
  .fn-step-full__icon { width: auto; }
  .fn-hero__placeholder { width: 100%; }
}

@media (max-width: 480px) {
  .fn-container { padding: 0 1.25rem; }
  .fn-hero { padding: 3rem 0; }
  .fn-hero__title { font-size: 2.6rem; }
  .fn-btn { padding: .9rem 1.6rem; font-size: .92rem; }
  .fn-categories__grid { gap: .75rem; }
  .fn-featured ul.products,
  .fn-featured .products.columns-4 { grid-template-columns: 1fr !important; }

  /* Countdown fix overflow — cambio 3 */
  .fn-countdown {
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
  }
  .fn-countdown__label {
    width: 100%;
    text-align: center;
    margin-right: 0;
    margin-bottom: .25rem;
  }
  .fn-countdown__block { min-width: 46px; padding: .4rem .5rem; }
  .fn-countdown__num { font-size: 1.3rem; }

  /* Botones CTA stack vertical */
  .fn-hero__cta {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .fn-hero__cta .fn-btn { width: 100%; justify-content: center; }

  /* Categorías cards */
  .fn-categories__grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .fn-category-card { aspect-ratio: 1 / 1.2; padding: 1.25rem 1rem; }
  .fn-category-card__name { font-size: 1rem; }
  .fn-cat-svg { width: 60px; height: 60px; }

  /* Trust bar pantallas muy pequeñas */
  .fn-trust-item { width: 100%; border-right: none !important; border-bottom: 1px solid var(--fn-border) !important; }
  .fn-trust-item:last-child { border-bottom: none !important; }

  /* Steps padding */
  .fn-step { padding: 1.75rem 1.25rem; }
  .fn-steps__grid { gap: .75rem; }
}

@media (max-width: 768px) {
  /* -----------------------------------------------
     DOM real de Storefront:
       #masthead
         > div.col-full           (logo + buscador)
         > div.storefront-primary-navigation
             > div.col-full       (nav + carrito)

     Estrategia: header flex-row, primer col-full
     solo con el logo, nav-section ocupa el resto.
     ---------------------------------------------- */

  /* 1. Header: fila única, padding lateral 1rem */
  .site-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-height: 64px !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2. Primer col-full (logo): solo lo que necesite, sin crecer */
  .site-header > .col-full {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 3. Ocultar buscador — es lo que hacía crecer el primer col-full */
  .site-header .site-search { display: none !important; }

  /* 4. Logo: tamaño adecuado */
  .site-header .custom-logo {
    height: 52px !important;
    max-height: 52px !important;
    width: auto !important;
  }

  /* 5. storefront-primary-navigation: llena el espacio restante */
  .storefront-primary-navigation {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 6. Segundo col-full (nav+carrito): auto, sin padding extra */
  .storefront-primary-navigation > .col-full {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* 7. Carrito y búsqueda ocultos en móvil */
  .site-header-cart,
  .site-header .cart-contents { display: none !important; }

  /* 8. Botón MENÚ — oscuro sobre fondo blanco */
  .menu-toggle {
    background: transparent !important;
    border: 1.5px solid rgba(26,26,24,0.28) !important;
    border-radius: 4px !important;
    color: #1a1a18 !important;
    padding: .45rem 1rem .45rem 2.4rem !important;
    font-family: 'Oswald', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    font-size: .82rem !important;
    min-height: 44px !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .menu-toggle::before {
    position: absolute !important;
    left: .7rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
  }
  .menu-toggle:hover,
  .menu-toggle:focus {
    border-color: var(--fn-red) !important;
    color: var(--fn-red) !important;
  }

  /* 9. Menú flotante — sale por debajo sin expandir el header */
  .main-navigation {
    position: static !important;
  }
  .storefront-primary-navigation {
    position: relative !important;
  }
  /* Estado cerrado: oculto explícitamente para evitar el flash al cerrar */
  .main-navigation .nav-menu,
  .main-navigation > div > ul {
    display: none !important;
    position: static !important;
  }
  .main-navigation.toggled .nav-menu,
  .main-navigation.toggled > div > ul,
  .main-navigation.toggled ul {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    min-width: 260px !important;
    width: auto !important;
    z-index: 9999 !important;
    background: #1a1a18 !important;
    border-top: 3px solid var(--fn-red) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22) !important;
    border-radius: 0 0 6px 6px !important;
    overflow: hidden !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .main-navigation ul li a {
    display: block !important;
    padding: .85rem 1.5rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    font-family: 'Oswald', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-size: .9rem !important;
    color: #f0f0ee !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  .main-navigation ul li:last-child a {
    border-bottom: none !important;
  }
  .main-navigation ul li a:hover {
    color: var(--fn-red) !important;
    background: rgba(255,255,255,0.04) !important;
  }
  .site-header-cart a {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center !important;
    color: #1a1a18 !important;
  }
}

/* =============================================
   WOOCOMMERCE RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  /* Shop grid */
  .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .75rem !important;
  }
  /* Single product */
  .woocommerce div.product {
    display: block !important;
  }
  .woocommerce div.product .woocommerce-product-gallery {
    float: none !important;
    width: 100% !important;
    margin-bottom: 1.5rem !important;
  }
  .woocommerce div.product .summary {
    float: none !important;
    width: 100% !important;
  }
  /* Cart */
  .woocommerce-cart .woocommerce table.shop_table {
    font-size: .88rem !important;
  }
  .woocommerce-cart table.cart td.actions {
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  /* Checkout */
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
  }
  /* Botones WC */
  .woocommerce .button,
  .woocommerce input.button,
  .woocommerce a.button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* =============================================
   PÁGINAS INTERNAS RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .fn-page-hero { padding: 3rem 0 2.5rem; }
  .fn-page-hero__title { font-size: clamp(1.8rem, 6vw, 2.8rem); }
  .fn-faq h2 { font-size: 1.6rem; }
  .fn-about__grid { grid-template-columns: 1fr; gap: 2rem; }
  .fn-shipping__grid { grid-template-columns: 1fr; gap: 2rem; }
  .fn-section { padding: 3rem 0; }
  .fn-section-tight { padding: 2rem 0; }
}

@media (max-width: 480px) {
  .fn-section-title { font-size: 1.6rem; }
  .fn-section-subtitle { font-size: .88rem; margin-bottom: 1.75rem; }
  .fn-container { padding: 0 1rem; }
  .fn-shipping-table { font-size: .82rem; }
  .fn-shipping-table th, .fn-shipping-table td { padding: .6rem .75rem; }
}

/* =============================================
   CARRITO / CHECKOUT / MI CUENTA
   ============================================= */

/* Títulos de página WooCommerce */
.woocommerce-cart h1,
.woocommerce-checkout h1,
.woocommerce-account h1,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title {
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  color: var(--fn-text) !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  margin-bottom: 2rem !important;
}

/* Tabla del carrito */
.woocommerce-cart table.cart,
.woocommerce table.shop_table {
  border: 1px solid var(--fn-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  font-size: .95rem !important;
}

.woocommerce table.shop_table th {
  background: var(--fn-bg-elevated) !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-size: .8rem !important;
  color: var(--fn-text-muted) !important;
  border-bottom: 2px solid var(--fn-border) !important;
  padding: 1rem !important;
}

.woocommerce table.shop_table td {
  border-bottom: 1px solid var(--fn-border) !important;
  padding: 1rem !important;
  vertical-align: middle !important;
}

/* Totales */
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--fn-bg-elevated) !important;
  border: 1px solid var(--fn-border) !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
}

.woocommerce .cart_totals h2,
.woocommerce #order_review_heading {
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  font-size: 1.2rem !important;
  color: var(--fn-text) !important;
  margin-bottom: 1rem !important;
}

/* Formulario checkout */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #payment h3 {
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  font-size: 1.1rem !important;
  color: var(--fn-text) !important;
  border-bottom: 2px solid var(--fn-border) !important;
  padding-bottom: .75rem !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  border: 1.5px solid var(--fn-border) !important;
  border-radius: 4px !important;
  padding: .75rem 1rem !important;
  font-size: .95rem !important;
  background: var(--fn-bg-card) !important;
  color: var(--fn-text) !important;
  transition: border-color .2s !important;
  width: 100% !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--fn-red) !important;
  outline: none !important;
}

/* Mi cuenta — tabs */
.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 2rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .5rem !important;
}

.woocommerce-MyAccount-navigation ul li a {
  display: inline-block !important;
  padding: .5rem 1.25rem !important;
  background: var(--fn-bg-elevated) !important;
  border: 1px solid var(--fn-border) !important;
  border-radius: 4px !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  font-size: .85rem !important;
  letter-spacing: .06em !important;
  color: var(--fn-text) !important;
  transition: all .2s !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--fn-red) !important;
  border-color: var(--fn-red) !important;
  color: #fff !important;
}

/* Responsive carrito */
@media (max-width: 768px) {
  .woocommerce-cart table.cart thead { display: none !important; }
  .woocommerce-cart table.cart td {
    display: block !important;
    text-align: right !important;
    padding: .6rem 1rem !important;
    border-bottom: none !important;
  }
  .woocommerce-cart table.cart td::before {
    content: attr(data-title) ": ";
    float: left !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: .8rem !important;
    color: var(--fn-text-muted) !important;
  }
  .woocommerce-cart table.cart tr { border-bottom: 1px solid var(--fn-border) !important; }
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
  }
  .woocommerce-MyAccount-navigation ul { flex-direction: column !important; }
}

/* =============================================
   COOKIE CONSENT BANNER
   ============================================= */
#fn-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(8,6,4,0.97);
  color: #f2f2f2;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 9999;
  border-top: 2px solid #cc2200;
  font-size: .88rem;
  flex-wrap: wrap;
}
#fn-cookie-banner p {
  margin: 0;
  color: rgba(242,242,242,0.85);
  flex: 1;
}
#fn-cookie-banner a { color: #cc2200; }
#fn-cookie-banner button {
  background: #cc2200;
  color: #fff;
  border: none;
  padding: .6rem 1.5rem;
  font-family: 'Oswald', sans-serif;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
#fn-cookie-banner button:hover { background: #ff3300; }
@media (max-width: 480px) {
  #fn-cookie-banner { flex-direction: column; padding: 1rem; }
  #fn-cookie-banner button { width: 100%; }
}

/* =============================================
   HANDHELD FOOTER BAR — rediseño brand
   ============================================= */
body .storefront-handheld-footer-bar {
  background: #080604 !important;
  border-top: 2px solid rgba(204,34,0,0.7) !important;
  padding: 0 !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
}

body .storefront-handheld-footer-bar ul {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body .storefront-handheld-footer-bar ul li {
  flex: 1 !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
}

body .storefront-handheld-footer-bar ul li:last-child {
  border-right: none !important;
}

body .storefront-handheld-footer-bar ul li > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 56px !important;
  padding: .5rem !important;
  background: #080604 !important;
  color: rgba(242,242,242,0.75) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: .55rem !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  gap: .2rem !important;
  transition: color .2s, background .2s !important;
  text-decoration: none !important;
}

body .storefront-handheld-footer-bar ul li > a:hover,
body .storefront-handheld-footer-bar ul li > a:focus {
  color: #f2f2f2 !important;
  background: rgba(204,34,0,0.15) !important;
}

/* Phosphor Icons en la barra */
body .storefront-handheld-footer-bar ul li > a i {
  font-size: 1.5rem !important;
  line-height: 1 !important;
  display: block !important;
}

/* Ocultar span de texto del icono del carrito de Storefront si existe */
body .storefront-handheld-footer-bar ul li > a span:not(.count) {
  font-family: 'Oswald', sans-serif !important;
  font-size: .58rem !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}

/* Badge del carrito */
.storefront-handheld-footer-bar .cart .count {
  background: var(--fn-red) !important;
  color: #fff !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: .6rem !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 9px !important;
  padding: 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 6px !important;
  right: calc(50% - 20px) !important;
  line-height: 1 !important;
}

.storefront-handheld-footer-bar .cart {
  position: relative !important;
}

/* Ítem activo */
.storefront-handheld-footer-bar ul li.active > a,
.storefront-handheld-footer-bar ul li.current > a {
  color: var(--fn-red) !important;
}

/* =============================================
   RESTAURAR PADDING — PÁGINAS WC Y LEGALES
   ============================================= */

/* Títulos: entry-header contiene el h1 que aparece cortado en móvil */
@media (max-width: 768px) {
  body.woocommerce-page .entry-header,
  body.page-template-default .entry-header {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* Contenido WooCommerce (carrito, checkout, mi cuenta, tienda, producto) */
@media (max-width: 768px) {
  body.woocommerce-page .woocommerce {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Páginas legales — el contenido va directo en .entry-content */
  body.page-template-default .entry-content {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* === WOOF Filters (AC-8) === */
body .woof_container_inner h4,
body .woof h4,
body .woof .woof_container_inner > h4 {
    font-family: Oswald, sans-serif;
    color: #b8740f;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    margin-bottom: 8px;
}
body .woof_list li input[type=checkbox]:checked + label,
body .woof_list li.woof_selected_item > label {
    color: #cc2200;
    font-weight: bold;
}
body .woof_container {
    background: #fafaf8;
    padding: 12px 0;
}
body .woof_reset_search_form,
body a.woof_reset_search_form {
    background: #cc2200;
    color: #fff;
    padding: 6px 14px;
    border-radius: 2px;
    text-transform: uppercase;
    font-size: 11px;
    font-family: Oswald, sans-serif;
    letter-spacing: 1px;
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
}
body .woof_reset_search_form:hover {
    background: #aa1a00;
    color: #fff;
}
body .woof_selected_filters_block a {
    background: #cc2200;
    color: #fff;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    margin: 2px;
    display: inline-block;
    text-decoration: none;
}
body .woof_selected_filters_block a:after {
    content: ' x';
}
/* Botón nativo WOOF: estilo base (WOOF lo muestra/oculta según viewport via su propio JS) */
body .woof_show_mobile_button,
body button.woof_show_mobile_button {
    background: #1a1a18;
    color: #fff;
    border: none;
    padding: 8px 16px;
    font-family: Oswald, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 2px;
    margin-bottom: 10px;
    width: 100%;
    text-align: left;
}
body .woof_show_mobile_button:hover,
body button.woof_show_mobile_button:hover {
    background: #cc2200;
}
/* Desktop: sidebar visible */
@media (min-width: 768px) {
    /* Ensure WOOF widget is visible in sidebar on desktop */
    body.post-type-archive-product .secondary,
    body.tax-product_cat .secondary,
    body.tax-product_tag .secondary {
        display: block !important;
    }
}
@media (max-width: 767px) {
    /* Hide sidebar on mobile by default — WOOF native JS toggles it */
    body.post-type-archive-product .secondary,
    body.tax-product_cat .secondary,
    body.tax-product_tag .secondary {
        display: none !important;
    }
    /* WOOF native open state */
    body.post-type-archive-product .secondary.woof_is_open,
    body.tax-product_cat .secondary.woof_is_open,
    body.tax-product_tag .secondary.woof_is_open {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 320px;
        height: 100%;
        overflow-y: auto;
        background: #fafaf8;
        z-index: 9999;
        padding: 16px;
        box-shadow: 4px 0 24px rgba(0,0,0,0.3);
    }
    body .woof_container.woof_is_closed {
        display: none !important;
    }
    body .woof_container.woof_is_open {
        display: block !important;
    }
}

/* =============================================
   MEJORAS VISUALES PRO — Zalando-level
   ============================================= */

/* ── M1 + M2: Hover image swap + Aspect ratio 3:4 (via fn-img-wrap) ── */
.fn-img-wrap {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f4f4f2;
  width: 100%;
}

.fn-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  transition: opacity 0.35s ease !important;
}

/* Segunda imagen — oculta por defecto */
.fn-img-wrap img.fn-hover-img {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
}

/* Solo en dispositivos con hover real */
@media (hover: hover) {
  .woocommerce ul.products li.product:hover .fn-img-wrap img:not(.fn-hover-img) {
    opacity: 0 !important;
  }
  .woocommerce ul.products li.product:hover .fn-img-wrap img.fn-hover-img {
    opacity: 1 !important;
  }
}

/* ── M3: Card hover polish ── */
.woocommerce ul.products li.product {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

@media (hover: hover) {
  .woocommerce ul.products li.product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.13) !important;
  }
}

/* ── M4: Sticky "Añadir al carrito" en móvil ── */
.fn-sticky-cart {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: #ffffff;
  border-top: 1px solid #e8e8e5;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.10);
  padding: .75rem 1rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.fn-sticky-cart--visible {
  transform: translateY(0) !important;
}

.fn-sticky-cart__info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
  flex: 1;
}

.fn-sticky-cart__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  text-transform: uppercase;
  color: var(--fn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fn-sticky-cart__price {
  font-weight: 700;
  font-size: .95rem;
  color: var(--fn-text);
}

.fn-sticky-cart__btn {
  background: var(--fn-red) !important;
  color: #fff !important;
  border: none !important;
  padding: .7rem 1.2rem !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.fn-sticky-cart__btn:hover {
  background: var(--fn-red-hover) !important;
}

/* Feedback visual al hacer scroll al formulario */
.fn-form-highlight {
  outline: 2px solid var(--fn-red) !important;
  outline-offset: 4px !important;
  border-radius: 4px !important;
}

@media (max-width: 768px) {
  .fn-sticky-cart {
    display: flex !important;
  }
  /* Separar del handheld footer bar */
  body.single-product .storefront-handheld-footer-bar {
    display: none !important;
  }
}

/* ── M5: Swatches de color y talla ── */
.fn-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .5rem 0 .75rem;
}

/* Swatch de color */
.fn-swatch--color {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 2px;
  cursor: pointer;
  background: transparent;
  transition: border-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fn-swatch__dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  box-sizing: border-box;
}

.fn-swatch--color:hover,
.fn-swatch--color.fn-swatch--active {
  border-color: var(--fn-text) !important;
}

.fn-swatch--color.fn-swatch--active {
  box-shadow: 0 0 0 1px var(--fn-text);
}

/* Swatch de talla */
.fn-swatch--size {
  min-width: 44px;
  height: 44px;
  padding: 0 .6rem;
  border: 1.5px solid var(--fn-border);
  background: #fff;
  border-radius: 3px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--fn-text);
  cursor: pointer;
  transition: all 0.18s ease;
}

.fn-swatch--size:hover {
  border-color: var(--fn-text);
}

.fn-swatch--size.fn-swatch--active {
  background: var(--fn-text) !important;
  color: #fff !important;
  border-color: var(--fn-text) !important;
}

/* Ocultar labels redundantes de variaciones cuando hay swatches */
.single-product .variations th.label label {
  font-family: 'Oswald', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fn-text-muted);
}

/* ── M6: Tipografía y whitespace en ficha de producto ── */
.single-product .product_title.entry-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--fn-text) !important;
  margin-bottom: .5rem !important;
}

.single-product .summary .price {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--fn-text) !important;
  margin-bottom: 1.2rem !important;
  display: block !important;
}

.single-product .summary .price ins {
  text-decoration: none !important;
  color: var(--fn-red) !important;
}

.single-product .variations_form .variations {
  margin-bottom: 1rem !important;
  width: 100% !important;
  border: none !important;
}

.single-product .variations_form .variations td,
.single-product .variations_form .variations th {
  padding: .3rem 0 !important;
  border: none !important;
  background: transparent !important;
  vertical-align: top !important;
}

.single-product .single_add_to_cart_button {
  width: 100% !important;
  padding: 1rem 2rem !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  background: var(--fn-text) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  margin-top: .75rem !important;
}

.single-product .single_add_to_cart_button:hover {
  background: var(--fn-red) !important;
}

.single-product .woocommerce-variation-add-to-cart {
  margin-top: 1rem !important;
}

@media (max-width: 768px) {
  .single-product .single_add_to_cart_button {
    font-size: 1rem !important;
    padding: 1rem !important;
  }
}

/* =============================================
   DESKTOP HEADER — fila única (fix nav duplicada + gap)
   ============================================= */
@media (min-width: 769px) {
  /* Header: fila única, altura fija */
  .site-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
  }
  /* Primer col-full: logo + buscador, sin padding vertical */
  .site-header > .col-full {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    padding: 0 !important;
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
  }
  /* Ocultar nav duplicada del primer col-full */
  .site-header > .col-full .main-navigation {
    display: none !important;
  }
  /* Search visible y alineado */
  .site-header > .col-full .site-search {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* storefront-primary-navigation: ocupa el resto a la derecha */
  .storefront-primary-navigation {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border-top: none !important;
  }
  .storefront-primary-navigation > .col-full {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2rem !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
  }
  /* Carrito visible en desktop */
  .storefront-primary-navigation .site-header-cart {
    display: flex !important;
    align-items: center !important;
  }
  /* Nav links en fila horizontal */
  .storefront-primary-navigation .main-navigation ul.nav-menu,
  .storefront-primary-navigation .main-navigation > div > ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .storefront-primary-navigation .main-navigation ul.nav-menu > li > a,
  .storefront-primary-navigation .main-navigation > div > ul > li > a {
    padding: 0 1rem !important;
    white-space: nowrap !important;
    font-size: .9rem !important;
    font-family: 'Oswald', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    line-height: 72px !important;
    display: block !important;
    color: #1a1a18 !important;
    text-decoration: none !important;
  }
  .storefront-primary-navigation .main-navigation ul.nav-menu > li > a:hover {
    color: #cc2200 !important;
  }
  /* Ocultar botón MENÚ en desktop */
  .storefront-primary-navigation .menu-toggle {
    display: none !important;
  }
}

/* Espacio sobre título de página en categorías y tienda desktop */
@media (min-width: 769px) {
  .woocommerce-page .entry-header,
  .tax-product_cat .entry-header,
  .post-type-archive-product .entry-header {
    padding-top: 2rem !important;
  }
}

/* =============================================
   DESKTOP HEADER FIX v2 — selector correcto
   La nav duplicada es .secondary-navigation,
   no .main-navigation (error en v1)
   ============================================= */
@media (min-width: 769px) {
  /* Ocultar .secondary-navigation del primer col-full */
  body .site-header > .col-full .secondary-navigation,
  body.storefront-secondary-navigation .site-header .secondary-navigation {
    display: none !important;
    visibility: hidden !important;
  }

  /* Logo + search en el primer col-full */
  .site-header > .col-full {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 24px !important;
    height: 72px !important;
  }

  /* Buscador: ancho fijo y alineado */
  .site-header > .col-full .site-search {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 260px !important;
    margin: 0 !important;
  }
  .site-header > .col-full .site-search input[type=search],
  .site-header > .col-full .site-search input.search-field {
    width: 100% !important;
    height: 38px !important;
    border-radius: 6px !important;
    border: 1px solid #ddd8d0 !important;
    background: #f5f5f3 !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    box-shadow: none !important;
  }

  /* storefront-primary-navigation: nav + carrito a la derecha */
  .storefront-primary-navigation {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 72px !important;
    padding: 0 !important;
    background: transparent !important;
    border-top: none !important;
  }
  .storefront-primary-navigation > .col-full {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 0 24px 0 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 72px !important;
  }

  /* Nav items: Oswald uppercase */
  body .storefront-primary-navigation .main-navigation {
    display: flex !important;
    align-items: center !important;
  }
  body .storefront-primary-navigation .main-navigation ul,
  body .storefront-primary-navigation .main-navigation ul.menu,
  body .storefront-primary-navigation .main-navigation ul.nav-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  body .storefront-primary-navigation .main-navigation ul li > a {
    font-family: 'Oswald', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #1a1a18 !important;
    padding: 0 12px !important;
    line-height: 72px !important;
    white-space: nowrap !important;
    display: block !important;
    text-decoration: none !important;
  }
  body .storefront-primary-navigation .main-navigation ul li > a:hover,
  body .storefront-primary-navigation .main-navigation ul li.current-menu-item > a {
    color: #cc2200 !important;
  }

  /* Carrito */
  body .storefront-primary-navigation .site-header-cart {
    display: flex !important;
    align-items: center !important;
    margin-left: 16px !important;
  }
  body .storefront-primary-navigation .site-header-cart .cart-contents {
    color: #1a1a18 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  /* Ocultar botón MENÚ en desktop */
  .storefront-primary-navigation .menu-toggle {
    display: none !important;
  }
}

/* =============================================
   DESKTOP HEADER FIX v3 — logo height + search icon
   ============================================= */
@media (min-width: 769px) {
  /* Logo: reducir para caber en header 72px */
  .site-header .custom-logo {
    height: 54px !important;
    max-height: 54px !important;
    width: auto !important;
  }
  .site-header .custom-logo-link {
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Search: padding-left para la lupa, input dentro del col-full */
  .site-header .site-search form,
  .site-header .site-search .woocommerce-product-search {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .site-header .site-search input[type=search],
  .site-header .site-search input.search-field {
    padding-left: 36px !important;
    padding-right: 12px !important;
    height: 38px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Botón submit: posicionado a la izquierda del input */
  .site-header .site-search button[type=submit],
  .site-header .site-search input[type=submit] {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    color: #9a9a96 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    z-index: 1 !important;
    box-shadow: none !important;
  }
  .site-header .site-search button[type=submit]:hover {
    color: #b8740f !important;
    background: transparent !important;
  }
}

/* =============================================
   DESKTOP HEADER FIX v4 — raíz de los bugs
   1) margin-bottom del Customizer de Storefront
   2) Form del buscador ancho completo
   3) Botón submit a la derecha del input
   4) Icono nativo webkit eliminado
   ============================================= */

/* Bug 1: Storefront Customizer inyecta margin-bottom en .site-header */
body .site-header {
  margin-bottom: 0 !important;
}

/* Bug 2 y 3: buscador de WooCommerce — form estrecho y botón a la izquierda */
@media (min-width: 769px) {
  body .site-header .site-search .widget_product_search {
    width: 100% !important;
  }
  body .site-header .site-search form.woocommerce-product-search {
    width: 100% !important;
    display: flex !important;
    position: relative !important;
  }
  body .site-header .site-search input[type=search],
  body .site-header .site-search input.search-field {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 14px !important;
    padding-right: 40px !important;
  }
  /* Mover botón submit a la derecha */
  body .site-header .site-search button[type=submit] {
    position: absolute !important;
    right: 8px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
    color: #9a9a96 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
  }
  body .site-header .site-search button[type=submit]:hover {
    color: #b8740f !important;
    background: transparent !important;
  }
}

/* Bug 4: icono nativo del navegador en input[type=search] */
.site-header .site-search input[type=search]::-webkit-search-decoration,
.site-header .site-search input[type=search]::-webkit-search-cancel-button,
.site-header .site-search input[type=search]::-webkit-search-results-button,
.site-header .site-search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  display: none !important;
}

/* =============================================
   HERO DESKTOP — eliminar centrado vertical
   El hero tenía min-height:100vh + align-items:center
   que dejaba espacio vacío arriba en desktop.
   Alineamos desde arriba como en móvil.
   ============================================= */
@media (min-width: 769px) {
  .fn-hero {
    min-height: 0 !important;
    align-items: flex-start !important;
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}

/* HEADER — evitar overflow del logo por drop-shadow */
.site-header {
  overflow: hidden !important;
}

/* =============================================
   HERO DESKTOP v2 — padding más ajustado
   ============================================= */
@media (min-width: 769px) {
  .fn-hero {
    padding-top: 2.5rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Revertir overflow:hidden del header — rompe dropdown móvil */
.site-header {
  overflow: visible !important;
}

/* Logo: bajar ligeramente para que el drop-shadow no salga del header */
@media (min-width: 769px) {
  .site-header .site-branding {
    padding-top: 4px !important;
  }
}

/* =============================================
   FIX DEFINITIVO v5 — Gap + Logo
   Basado en análisis de agentes especializados
   ============================================= */

/* Fix 1: margin-bottom del header — selector específico que gana a Storefront */
.home.page .site-header,
.no-wc-breadcrumb .site-header,
.woocommerce-active.home .site-header,
body.home .site-header {
  margin-bottom: 0 !important;
}

/* Fix 2: Hero desktop — especificidad aumentada para ganar al base .fn-hero */
@media (min-width: 769px) {
  body .fn-hero,
  .site-content .fn-hero,
  #content .fn-hero {
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    padding-top: 2.5rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Fix 3: site-content sin margin/padding fantasma */
body .site-content,
body #content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body #content > .col-full {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Fix 4: Logo — eliminar drop-shadow grande + clip-path para contener sombra */
@media (min-width: 769px) {
  .site-header .site-branding {
    padding-top: 0 !important;
  }
  .site-header .custom-logo-link {
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
  }
  .site-header .custom-logo {
    filter:
      drop-shadow(0 2px 4px rgba(0,0,0,0.45))
      drop-shadow(0 4px 12px rgba(180,30,0,0.25)) !important;
    clip-path: inset(0 -60px -60px -60px) !important;
  }
}

/* =============================================
   FIX v6 — Logo centrado + búsqueda limpia
   ============================================= */

/* Fix logo: padding vertical en col-full para que el logo respire */
@media (min-width: 769px) {
  .site-header > .col-full {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
    height: 72px !important;
  }
  /* Branding ocupa toda la altura para centrar el logo */
  .site-header .site-branding {
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .site-header .custom-logo-link {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
  }
  .site-header .custom-logo {
    height: 50px !important;
    max-height: 50px !important;
    width: auto !important;
  }
}

/* Fix búsqueda: ocultar botón submit, usar background-image para el icono */
@media (min-width: 769px) {
  body .site-header .site-search button[type=submit],
  body .site-header .site-search input[type=submit] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
  }
  body .site-header .site-search input[type=search],
  body .site-header .site-search input.search-field {
    padding-left: 36px !important;
    padding-right: 14px !important;
    background-image: url(data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg width=16 height=16 viewBox=0 0 256 256%3E%3Cpath fill=%239a9a96 d=M229.66 218.34l-50.07-50.06a88.21 88.21 0 1 0-11.31 11.31l50.06 50.07a8 8 0 0 0 11.32-11.32ZM40 112a72 72 0 1 1 72 72A72.08 72.08 0 0 1 40 112Z/%3E%3C/svg%3E) !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    background-size: 16px !important;
  }
}

/* FIX BUSQUEDA FINAL: padding-left correcto para que el texto no choque con la lupa */
@media (min-width: 769px) {
  body .site-header .site-search input[type='search'],
  body .site-header .site-search input.search-field {
    padding-left: 14px !important;
    padding-right: 14px !important;
    background-image: none !important;
  }
  /* Asegurar que el botón está completamente oculto */
  body .site-header .site-search button {
    display: none !important;
  }
  /* Eliminar decoración nativa del navegador */
  body .site-header .site-search input[type='search']::-webkit-search-decoration,
  body .site-header .site-search input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none !important;
    display: none !important;
  }
}

/* =============================================
   BREAKPOINT MEDIO — 769px-1100px
   El nav no cabe en pantallas medianas.
   Mostrar botón MENÚ por debajo de 1100px.
   ============================================= */

/* Entre 769px y 1100px: layout compacto */
@media (min-width: 769px) and (max-width: 1099px) {
  /* Reducir el buscador */
  .site-header > .col-full {
    flex: 0 0 auto !important;
  }
  .site-header > .col-full .site-search {
    flex: 0 0 180px !important;
  }

  /* Nav items más compactos */
  body .storefront-primary-navigation .main-navigation ul li > a {
    padding: 0 8px !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
  }

  /* Carrito más compacto */
  body .storefront-primary-navigation .site-header-cart .cart-contents {
    font-size: 12px !important;
  }
}

/* Por debajo de 1024px: cambiar a layout móvil (botón MENÚ) */
@media (max-width: 1023px) {
  /* Activar el layout de móvil */
  .site-header {
    flex-direction: row !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 1rem !important;
  }
  .site-header > .col-full {
    flex: 0 0 auto !important;
    gap: 12px !important;
    height: 64px !important;
  }
  /* Ocultar buscador en medio (aparece en el menú móvil) */
  .site-header .site-search {
    display: none !important;
  }
  /* Mostrar el botón MENÚ (menu-toggle) */
  .menu-toggle {
    display: inline-flex !important;
  }
  /* Ocultar nav links (se muestran con el toggle) */
  .storefront-primary-navigation .main-navigation ul.nav-menu,
  .storefront-primary-navigation .main-navigation > div > ul {
    display: none !important;
  }
  .storefront-primary-navigation .main-navigation.toggled ul.nav-menu,
  .storefront-primary-navigation .main-navigation.toggled > div > ul {
    display: block !important;
    position: absolute !important;
    top: 64px !important;
    right: 0 !important;
    left: auto !important;
    min-width: 260px !important;
    z-index: 9999 !important;
    background: #1a1a18 !important;
    border-top: 3px solid var(--fn-red) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22) !important;
    border-radius: 0 0 6px 6px !important;
  }
  /* Carrito visible en tablet */
  body .storefront-primary-navigation .site-header-cart {
    display: flex !important;
  }
  /* Logo más pequeño en tablet */
  .site-header .custom-logo {
    height: 44px !important;
    max-height: 44px !important;
  }
}

/* =============================================
   FIX DEFINITIVO DEL ICONO DE BÚSQUEDA
   Storefront inyecta un icono Font Awesome via
   .widget_product_search form::before
   con position:absolute; left:1em
   Solución: ocultarlo y normalizar el padding
   ============================================= */
body .site-header .site-search .widget_product_search form::before,
body .site-header .site-search .widget_product_search form.woocommerce-product-search::before {
  display: none !important;
  content: none !important;
}
body .site-header .site-search .widget_product_search input[type='text'],
body .site-header .site-search .widget_product_search input[type='search'],
body .site-header .site-search .widget_product_search input.search-field {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* =============================================
   TARJETAS DE CATEGORÍA — imágenes punk
   ============================================= */
.fn-category-card__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  z-index: 0 !important;
  transition: transform .4s ease !important;
}
.fn-category-card:hover .fn-category-card__img {
  transform: scale(1.06) !important;
}
/* Texto en blanco siempre sobre imagen */
body .fn-category-card__name { color: #ffffff !important; }
body .fn-category-card__cta  { color: #ffffff !important; }
body .fn-category-card:hover .fn-category-card__cta { color: var(--fn-red) !important; }

/* =============================================
   WOOF MÓVIL — botón nativo .woof_show_mobile_filter
   ============================================= */
@media (max-width: 768px) {
  /* Botón FILTRAR nativo de WOOF */
  body .woof_show_mobile_filter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #1a1a18 !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 18px !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    border-radius: 2px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body .woof_show_mobile_filter:hover {
    background: #cc2200 !important;
  }
  /* Ocultar imagen dentro del botón */
  body .woof_show_mobile_filter img {
    display: none !important;
  }
  /* Botón CERRAR dentro del panel */
  body .woof_hide_mobile_filter {
    display: none !important;
    background: #cc2200 !important;
    color: #fff !important;
    padding: 8px 18px !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
  }
  body .woof_show_filter_for_mobile .woof_hide_mobile_filter {
    display: flex !important;
  }
}