/*
Theme Name:   Shala Luxury
Theme URI:    https://shalaluxury.com.co
Description:  Tema hijo de Astra para Shala Luxury — sábanas de viscosa de bambú. Paleta verde/crema/marrón, tipografía Cormorant + Montserrat, barra de anuncio, marquesina de atributos y ventana de bienvenida.
Author:       José Puentes — Estratega Digital
Author URI:   https://josepuentes.com.co
Template:     astra
Version:      1.2.0
Text Domain:  shala-child
*/

/* ============================================================
   1. TOKENS DE MARCA
   ============================================================ */
:root{
  --sh-verde:#18332D;
  --sh-crema:#F2E4D2;
  --sh-marron:#3C2B16;
  --sh-gris:#CBCBCB;
  --sh-carbon:#434343;
  --sh-bambu:#55642F;
  --sh-bambu-txt:#F2E4D2;
  --sh-blanco:#FFFFFF;
  --sh-hueso:#FBF7F1;
  --sh-linea:rgba(24,51,45,.14);
  --sh-serif:'Cormorant Garamond', Georgia, serif;
  --sh-sans:'Montserrat', -apple-system, sans-serif;
  --sh-script:'Milky Noire', 'Cormorant Garamond', cursive;
}

@font-face{
  font-family:'Milky Noire';
  src:url('fonts/milky-noire.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ============================================================
   2. TIPOGRAFÍA
   ============================================================ */
body,
.ast-container,
button, input, select, textarea{
  font-family:var(--sh-sans);
  color:var(--sh-verde);
  line-height:1.66;
}

h1,h2,h3,h4,.entry-title,
.woocommerce-loop-product__title,
.product_title{
  font-family:var(--sh-serif);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.08;
  color:var(--sh-verde);
}
h1,.entry-title{font-size:clamp(34px,4.4vw,56px);}
h2{font-size:clamp(28px,3.4vw,40px);}
h3{font-size:clamp(22px,2.4vw,30px);}

.sh-script{font-family:var(--sh-script);color:var(--sh-marron);line-height:1;}
.sh-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--sh-bambu);margin-bottom:12px;display:block;
}
.sh-sub{
  font-family:var(--sh-serif);font-size:21px;font-style:italic;
  line-height:1.35;color:var(--sh-marron);
}

/* ============================================================
   3. BARRA DE ANUNCIO
   ============================================================ */
.sh-anuncio{
  background:var(--sh-verde);color:var(--sh-crema);text-align:center;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:10px 14px;position:relative;z-index:99;
}
.sh-anuncio a{color:var(--sh-crema);text-decoration:underline;text-underline-offset:3px;}

/* ============================================================
   4. MARQUESINA DE ATRIBUTOS
   ============================================================ */
.sh-marq{
  background:var(--sh-bambu);overflow:hidden;
  border-top:1px solid var(--sh-linea);border-bottom:1px solid var(--sh-linea);
}
.sh-marq__track{display:flex;width:max-content;animation:sh-run 38s linear infinite;}
.sh-marq:hover .sh-marq__track{animation-play-state:paused;}
@keyframes sh-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sh-marq__it{
  display:flex;align-items:center;gap:9px;padding:12px 32px;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sh-bambu-txt);white-space:nowrap;
}
.sh-marq__dot{width:4px;height:4px;background:var(--sh-bambu-txt);opacity:.45;border-radius:50%;align-self:center;}
@media(prefers-reduced-motion:reduce){.sh-marq__track{animation:none;}}

/* ============================================================
   5. BOTONES — un solo comportamiento: reposo verde, hover marrón
   ============================================================ */
.ast-button, .button, button, input[type=submit],
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce input.button,
.wc-block-components-button{
  font-family:var(--sh-sans) !important;
  font-size:11px !important;font-weight:700 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
  padding:15px 30px !important;border-radius:0 !important;
  background:var(--sh-verde) !important;color:var(--sh-crema) !important;
  border:1.5px solid var(--sh-verde) !important;
  transition:background .2s, border-color .2s, color .2s !important;
}
.ast-button:hover, .button:hover, button:hover, input[type=submit]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce input.button:hover,
.wc-block-components-button:hover{
  background:var(--sh-marron) !important;border-color:var(--sh-marron) !important;
  color:var(--sh-crema) !important;
}
.sh-btn-linea{
  background:transparent !important;color:var(--sh-verde) !important;
  border-color:var(--sh-verde) !important;
}
.sh-btn-linea:hover{background:var(--sh-verde) !important;color:var(--sh-crema) !important;}

/* ============================================================
   6. CABECERA
   ============================================================ */
.main-header-bar,
.ast-primary-header-bar,
.ast-above-header-bar,
.site-header .ast-container{background:var(--sh-crema) !important;}
.main-header-bar,.ast-primary-header-bar{border-bottom:1px solid var(--sh-linea) !important;}
.main-header-menu a, .ast-header-break-point .main-header-menu a{
  font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--sh-verde);
}
.main-header-menu .menu-item > a{position:relative;}
.main-header-menu .menu-item > a::after{
  content:"";position:absolute;left:0;bottom:6px;height:1px;width:0;
  background:var(--sh-bambu);transition:width .25s;
}
.main-header-menu .menu-item > a:hover::after{width:100%;}

/* ============================================================
   7. PRODUCTO — listado
   ============================================================ */
.woocommerce ul.products li.product{
  background:var(--sh-hueso);border:1px solid #EBE5DC;overflow:hidden;
  padding:0 !important;transition:border-color .24s, box-shadow .24s;
}
.woocommerce ul.products li.product:hover{border-color:var(--sh-bambu);box-shadow:0 8px 26px rgba(24,51,45,.07);}
.woocommerce ul.products li.product a img{margin-bottom:0 !important;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.woocommerce ul.products li.product:hover a img{transform:scale(1.04);}
.woocommerce ul.products li.product .astra-shop-summary-wrap{padding:17px 20px 20px;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--sh-serif) !important;font-size:24px !important;
  font-weight:500 !important;line-height:1.15 !important;padding:0 !important;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{
  font-family:var(--sh-sans);font-size:17px;font-weight:800;color:var(--sh-verde);
}
.woocommerce ul.products li.product .price del{opacity:.45;font-weight:500;}
.sh-simbolo{font-size:11.5px;color:var(--sh-bambu);font-weight:600;letter-spacing:.04em;}
.sh-medidas{
  display:inline-block;margin-top:9px;font-size:10.5px;color:rgba(24,51,45,.62);
  text-decoration:none;border-bottom:1px dotted rgba(24,51,45,.35);padding-bottom:2px;
}
.sh-medidas:hover{color:var(--sh-bambu);border-bottom-color:var(--sh-bambu);}

/* etiqueta "Más vendido" */
.sh-badge{
  position:absolute;top:12px;left:12px;z-index:3;background:var(--sh-bambu);
  color:var(--sh-bambu-txt);font-size:9px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 10px;
}
.woocommerce span.onsale{
  background:var(--sh-bambu);color:var(--sh-bambu-txt);border-radius:0;
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  min-height:auto;line-height:1;padding:7px 11px;
}

/* ============================================================
   8. PRODUCTO — ficha
   ============================================================ */
.woocommerce div.product .product_title{font-size:clamp(30px,3.6vw,44px);margin-bottom:8px;}
.woocommerce div.product form.cart .variations label{
  font-family:var(--sh-sans);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.woocommerce div.product form.cart .variations select{
  border:1px solid var(--sh-linea);border-radius:0;padding:12px 14px;
  font-family:var(--sh-sans);font-size:13px;color:var(--sh-verde);background:var(--sh-blanco);
}
.woocommerce-tabs ul.tabs li a{
  font-family:var(--sh-sans) !important;font-size:11px !important;
  font-weight:700 !important;letter-spacing:.12em !important;text-transform:uppercase !important;
}

/* ============================================================
   9. FRANJA DE CONFIANZA
   ============================================================ */
.sh-conf{background:var(--sh-verde);color:var(--sh-crema);}
.sh-conf__in{display:grid;grid-template-columns:auto repeat(3,1fr);align-items:center;padding:0 40px;max-width:1200px;margin:0 auto;}
.sh-conf__lbl{
  font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sh-crema);padding:0 30px 0 14px;white-space:nowrap;border-left:2px solid var(--sh-crema);
}
.sh-conf__c{display:flex;align-items:center;gap:12px;padding:18px 22px;border-left:1px solid rgba(242,228,210,.18);transition:background .22s;}
.sh-conf__c:hover{background:rgba(242,228,210,.06);}
.sh-conf__c b{display:block;font-size:12px;font-weight:700;}
.sh-conf__c span{font-size:11px;color:rgba(242,228,210,.72);line-height:1.45;}

/* ============================================================
   10. VENTANA DE BIENVENIDA (cupón 10%)
   ============================================================ */
.sh-velo{
  position:fixed;inset:0;background:rgba(24,51,45,.55);z-index:99990;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.sh-velo[hidden]{display:none;}
.sh-pop{
  background:var(--sh-crema);width:100%;max-width:760px;
  display:grid;grid-template-columns:1fr 1fr;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.42);animation:sh-pop .45s cubic-bezier(.2,.8,.3,1);
}
@keyframes sh-pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.sh-pop__im{background:var(--sh-hueso) center/cover no-repeat;min-height:310px;}
.sh-pop__tx{padding:40px 38px;display:flex;flex-direction:column;justify-content:center;}
.sh-pop .sh-pop__x,
button.sh-pop__x{
  position:absolute !important;top:12px !important;right:12px !important;z-index:5;
  width:36px !important;height:36px !important;min-width:0 !important;min-height:0 !important;
  padding:0 !important;margin:0 !important;border-radius:50% !important;
  background:var(--sh-verde) !important;color:var(--sh-crema) !important;
  border:1.5px solid rgba(242,228,210,.55) !important;
  display:flex !important;align-items:center;justify-content:center;
  font-family:var(--sh-sans) !important;font-size:19px !important;font-weight:400 !important;
  letter-spacing:0 !important;text-transform:none !important;line-height:1 !important;
  cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.28);
  transition:background .2s,color .2s,border-color .2s !important;
}
.sh-pop .sh-pop__x:hover,
button.sh-pop__x:hover{
  background:var(--sh-crema) !important;color:var(--sh-verde) !important;
  border-color:var(--sh-crema) !important;transform:none !important;
}
.sh-pop h4{font-family:var(--sh-serif);font-size:36px;font-weight:400;line-height:1.06;margin:0 0 10px;}
.sh-pop p{font-size:13px;color:rgba(24,51,45,.76);margin-bottom:18px;line-height:1.65;}
.sh-pop input[type=email]{
  width:100%;border:1px solid rgba(24,51,45,.25);background:transparent;
  padding:12px 14px;font-family:var(--sh-sans);font-size:13px;color:var(--sh-verde);margin-bottom:10px;
}
.sh-pop__msg{font-size:12.5px;line-height:1.5;margin:10px 0 0;min-height:1em;}
.sh-pop__msg.sh-ok{color:#55642F;font-weight:600;}
.sh-pop__msg.sh-err{color:#8C2F2F;}
.sh-pop__no{background:none !important;border:none !important;padding:0 !important;margin-top:11px;font-size:11px;color:rgba(24,51,45,.5);text-align:center;cursor:pointer;text-decoration:underline;}

/* ============================================================
   11. PIE DE PÁGINA
   ============================================================ */
.site-footer, .ast-small-footer, .footer-adv,
.site-primary-footer-wrap, .site-below-footer-wrap,
.ast-footer-copyright{background:#0F231E !important;color:var(--sh-crema) !important;}
.ast-footer-copyright *{color:var(--sh-crema) !important;}
.site-footer a, .ast-small-footer a{color:var(--sh-crema) !important;opacity:.82;transition:.16s;}
.site-footer a:hover{opacity:1;color:var(--sh-bambu) !important;}
.site-footer h2,.site-footer h3,.site-footer .widget-title{
  font-family:var(--sh-sans) !important;font-size:9.5px !important;font-weight:800 !important;
  letter-spacing:.2em !important;text-transform:uppercase !important;color:var(--sh-bambu) !important;
}
.sh-pagos{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.sh-pagos span{font-size:9px;font-weight:700;letter-spacing:.05em;border:1px solid rgba(242,228,210,.28);padding:4px 8px;}

/* ============================================================
   12. WHATSAPP FLOTANTE
   ============================================================ */
.sh-wa{
  position:fixed;right:22px;bottom:22px;z-index:9990;width:52px;height:52px;border-radius:50%;
  background:var(--sh-verde);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.22);transition:.2s;
}
.sh-wa:hover{background:var(--sh-marron);}
.sh-wa svg{width:26px;height:26px;fill:var(--sh-crema);}

/* ============================================================
   13. MÓVIL
   ============================================================ */
@media(max-width:920px){
  .sh-conf__in{grid-template-columns:1fr;padding:0;}
  .sh-conf__lbl{padding:16px 24px 0;border-left:none;}
  .sh-conf__c{border-left:none;border-top:1px solid rgba(242,228,210,.18);}
  .sh-pop{grid-template-columns:1fr;}
  .sh-pop__im{min-height:130px;}
  .sh-velo{align-items:flex-start;padding-top:60px;}
  .sh-marq__it{padding:11px 22px;font-size:10px;}
}