/*
Theme Name: Alana Artesanía
Theme URI: https://tudominio.com
Author: Tu Nombre
Description: Tema personalizado para la tienda de artesanía Alana.
Version: 1.0
Text Domain: alana
*/

/* ========================================
   1. VARIABLES Y ESTILOS GENERALES
======================================== */
:root {
  --cream: #F9F6F0;
  --card: #FFFDF9;
  --rose: #C8A2A2;
  --rose-d: #B88F8F;
  --sage: #A3B18A;
  --sage-soft: #E4E9D8;
  --blush: #F3E6E3;
  --ink: #5A4D4A;
  --line: rgba(90, 77, 74, 0.14);
  --sh: 0 10px 34px rgba(90, 77, 74, 0.08);
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--ink); font: 400 15px/1.6 var(--font-body); }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
.script { font-family: 'Great Vibes', cursive; color: var(--rose); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ========================================
   2. HEADER Y MENÚ (LOGO CON MAGIA TRANSPARENTE)
======================================== */
header { background: var(--cream); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; }
header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 90px; gap: 20px; }

/* Forzamos el tamaño del logo y le aplicamos el truco multiply */
.logo { display: flex; align-items: center; justify-self: start; }
.logo img { 
    height: 60px !important; 
    width: auto !important; 
    max-width: 250px !important; 
    object-fit: contain !important; 
    display: block;
    mix-blend-mode: multiply !important; /* ESTO HACE QUE EL BLANCO SEA TRANSPARENTE */
}

nav.main-nav { display: flex; justify-content: center; }
nav.main-nav ul { display: flex !important; flex-direction: row !important; list-style: none !important; padding: 0 !important; margin: 0 !important; gap: 30px !important; }
nav.main-nav ul li { margin: 0 !important; padding: 0 !important; }
nav.main-nav ul li a { font-size: 0.75rem !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; padding-bottom: 4px !important; border-bottom: 1px solid transparent !important; transition: 0.3s !important; }
nav.main-nav ul li a:hover, nav.main-nav ul li.current-menu-item a { border-color: var(--rose) !important; color: var(--rose-d) !important; }

.icons { display: flex; gap: 15px; justify-content: flex-end; color: var(--sage); }
.icons a:hover { color: var(--rose); }
.menu-toggle { display: none; }

/* ========================================
   3. PORTADA (HERO Y SECCIONES)
======================================== */
.hero { position: relative; min-height: 550px; display: grid; place-items: center; text-align: center; overflow: hidden; padding: 60px 24px;
  background: radial-gradient(ellipse 40% 55% at 12% 30%, rgba(200,162,162,0.3), transparent 70%), radial-gradient(ellipse 35% 50% at 88% 25%, rgba(163,177,138,0.25), transparent 70%), var(--cream); }
.hero-content { max-width: 800px; position: relative; z-index: 2; margin: 0 auto; }
.hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); margin: 0 auto 36px; }
.hero h1 .script { display: block; font-size: 1.2em; margin-top: 5px; }

.btn { display: inline-block; background: var(--rose); color: white; padding: 14px 36px; border-radius: 8px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(200,162,162,0.3); transition: 0.3s; }
.btn:hover { background: var(--rose-d); transform: translateY(-2px); }

.section { padding: 90px 0; }
.sec-head { text-align: center; margin-bottom: 50px; }
.sec-head .script { font-size: 2rem; display: block; margin-bottom: 5px; }
.sec-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); }

/* Tarjetas de la portada */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; }
.card { background: var(--card); border-radius: 14px; box-shadow: var(--sh); overflow: hidden; transition: 0.4s; display: flex; flex-direction: column; text-align: center; }
.card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(90,77,74,0.13); }
.card-info { padding: 20px; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; }
.card-info h3 { font-size: 1.1rem; margin-bottom: 8px; }
.card-price { font-size: 0.9rem; font-weight: 500; color: var(--rose-d); }

/* ========================================
   4. FOOTER
======================================== */
footer { background: var(--blush); padding: 60px 0 30px; }
.f-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.f-nav { display: flex; flex-direction: column; gap: 10px; font-size: 0.85rem; }
.f-nav a:hover { color: var(--rose-d); }
.copy { text-align: center; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.8rem; }

/* ========================================
   5. TIENDA Y PRODUCTOS (WOOCOMMERCE)
======================================== */
.woocommerce-page .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.woocommerce div.product .product_title { font-family: var(--font-heading) !important; font-size: 2.5rem !important; color: var(--ink) !important; margin-bottom: 10px !important; }
.woocommerce div.product p.price { color: var(--rose-d) !important; font-size: 1.5rem !important; font-weight: 500 !important; margin-bottom: 20px !important; }

/* Botones de WooCommerce */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce div.product form.cart button.button {
    background-color: var(--rose) !important; color: white !important; border-radius: 8px !important; padding: 12px 24px !important; font-family: var(--font-body) !important; font-size: 0.85rem !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; transition: 0.3s !important; border: none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce div.product form.cart button.button:hover { background-color: var(--rose-d) !important; transform: translateY(-2px); }

.woocommerce .quantity .qty { padding: 10px !important; border: 1px solid var(--line) !important; border-radius: 8px !important; font-family: var(--font-body) !important; }
.woocommerce div.product div.images img { border-radius: 14px !important; box-shadow: var(--sh) !important; }

/* Cuadrícula de la tienda */
.woocommerce ul.products { 
    display: grid !important; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; 
    gap: 30px !important; 
    justify-content: center !important;
}

.woocommerce ul.products li.product { 
    max-width: 350px !important;
    margin: 0 auto !important;
    float: none !important;
    background: var(--card) !important; 
    border-radius: 14px !important; 
    overflow: hidden !important; 
    text-align: center !important; 
    padding-bottom: 20px !important; 
    box-shadow: var(--sh) !important; 
    transition: 0.3s !important; 
    width: 100% !important; 
}

.woocommerce ul.products li.product:hover { transform: translateY(-5px); }

.woocommerce ul.products li.product a img { 
    width: 100% !important; 
    height: 350px !important; 
    object-fit: cover !important; 
    border-radius: 14px 14px 0 0 !important; 
}

.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Playfair Display', serif !important; font-size: 1.1rem !important; line-height: 1.4 !important; min-height: 60px; padding: 15px !important; }
.woocommerce ul.products li.product .button { margin: 10px 15px !important; width: calc(100% - 30px) !important; text-align: center; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }

/* ========================================
   6. RESPONSIVE (MÓVIL Y TABLET)
======================================== */
@media (max-width: 850px) {
  header .wrap { grid-template-columns: 1fr auto auto; }
  .menu-toggle { display: inline-flex; background: none; border: none; color: var(--ink); cursor: pointer; }
  
  .logo img { height: 45px !important; }

  nav.main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--cream); padding: 20px; border-bottom: 1px solid var(--line); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
  nav.main-nav.is-open { display: flex; }
  nav.main-nav ul { flex-direction: column !important; gap: 15px !important; align-items: center; }
  
  .f-grid { grid-template-columns: 1fr; }
}