/*
 Theme Name:  La Caribeña – Child
 Template:    hello-elementor
 Version:     1.1.0
 ------------------------------------------------------------------
  Refactor 2025-05-15  –  Limpieza y unificación de estilos
  •  Variables centralizadas  •  Duplicados eliminados  •  Naming claro
 ------------------------------------------------------------------*/

/* 1. IMPORTS & ROOT VARIABLES */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
:root {
  /* Palette */
  --clr-primary:      #EA5F7F;
  --clr-primary-dark: #b95b70;
  --clr-price:        #52042F;
  --clr-text:         #80002c;
  --clr-body:         #333;
  --clr-muted:        #555;
  --clr-highlight:    #f4e0e8;
  --clr-info-bg:      #fffaf4;
  --clr-info-border:  #f9d681;
  --clr-border:       #e0e0e0;
  --clr-table-head:   #f8f9fa;

  /* Typography */
  --ff-base:  'Outfit', sans-serif;
  --fs-base:  16px;
  --fs-sm:    14px;
  --fs-lg:    18px;
  --fs-price: 40px;

  /* Spacing & radius */
  --r-base:  5px;
  --sp-xs:   5px;
  --sp-s:   10px;
  --sp-m:   20px;
  --sp-l:   30px;

  /* Motion */
  --tr-base: .3s ease;
}

/* 2. GLOBAL RESET & BASE */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-base); }
body {
  margin:0;
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  line-height:1.65;
  color: var(--clr-body);
  background: #fdfdfd;
}
img { display:block; max-width:100%; height:auto; }
a {
  color: var(--clr-primary);
  text-decoration: none;
  transition: color var(--tr-base);
}
a:hover { color: var(--clr-primary-dark); text-decoration: underline; }

/* 3. FORMS & CONTROLS */
input:not([type=checkbox]):not([type=radio]), textarea, select {
  width:100%; padding: var(--sp-s);
  font-size: var(--fs-base);
  border:1px solid var(--clr-border);
  border-radius: var(--r-base);
  background:#fff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
  transition: border-color var(--tr-base);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 2px var(--clr-highlight);
  outline:none;
}
input[type=checkbox] { accent-color: var(--clr-primary); }

/* 4. BUTTONS */
.btn,
button,
input[type=button],
input[type=reset],
input[type=submit] {
  display: inline-block;
  font-weight: 500;
  font-size: var(--fs-sm);
  font-family: var(--ff-base);
  padding: var(--sp-s) var(--sp-m);
  border: 2px solid var(--clr-primary);
  border-radius: var(--r-base);
  cursor: pointer;
  text-align: center;
  transition: background var(--tr-base), border-color var(--tr-base), color var(--tr-base);
}
/* Primary */
.btn--primary {
  background: var(--clr-primary);
  color: #fff;
}
.btn--primary:hover {
  background: var(--clr-primary-dark);
  border-color: var(--clr-primary-dark);
}
/* Secondary */
.btn--outline {
  background: #fff;
  color: var(--clr-primary);
}
.btn--outline:hover {
  background: #f8f8f8;
  color: var(--clr-primary-dark);
  border-color: var(--clr-primary-dark);
}

/* 4.1 Grupo botones peso */
.grupo-botones-peso {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s);
  color: #EA5F7F;
}

/* Aplica estilo a los botones “peso” */
.grupo-botones-peso .peso-button {
  font: 500 var(--fs-sm) var(--ff-base);
  padding: var(--sp-s) var(--sp-m);
  border: 2px solid #EA5F7F;
  border-radius: var(--r-base);
  background: #fff;
  color: #EA5F7F;
  cursor: pointer;
  transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base);
}

.grupo-botones-peso .peso-button:hover {
  background: #EA5F7F;
  color: #fff;
  border-color: #b14a6c; /* o un tono un poquito más oscuro */
}

/* Aplica estilo a los botones “cantidad” */
.grupo-botones-cantidad .cantidad-button {
  font: 500 var(--fs-sm) var(--ff-base);
  padding: var(--sp-s) var(--sp-m);
  border: 2px solid #EA5F7F;
  border-radius: var(--r-base);
  background: #fff;
  color: #EA5F7F;
  cursor: pointer;
  transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base);
}

.grupo-botones-cantidad .cantidad-button:hover {
  background: #EA5F7F;
  color: #fff;
  border-color: #b14a6c; /* o un tono un poquito más oscuro */
}

/* 4.2 Grupo botones formato */
.grupo-botones-formato {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s);
  color: #EA5F7F;

}

/* Aplica estilo a los botones “formato” */
.grupo-botones-formato .formato-button {
  font: 500 var(--fs-sm) var(--ff-base);
  padding: var(--sp-s) var(--sp-m);
  border: 2px solid #EA5F7F;
  border-radius: var(--r-base);
  background: #fff;
  color: #EA5F7F;
  cursor: pointer;
  transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base);
}

.grupo-botones-formato .formato-button:hover {
  background: #EA5F7F;
  color: #fff;
  border-color: #b14a6c; /* o un tono un poquito más oscuro */
}

/* WooCommerce specific buttons */
.woocommerce .button,
.woocommerce-account .button {
  font-family: var(--ff-base);
}

/* Reducir padding en los botones de formato y peso */
.grupo-botones-formato .formato-button,
.grupo-botones-peso .peso-button {
  padding: var(--sp-xs) var(--sp-s);
}

/* Estado activo para botones de peso y formato */
.peso-button.activo,
.formato-button.activo {
  background: var(--clr-primary) !important;
  border-color: var(--clr-primary) !important;
  color: #FFF !important;
}

/* Estilo para el botón añadir al carrito deshabilitado */
.single_add_to_cart_button.button.disabled,
.single_add_to_cart_button.button:disabled {
  background: #F9BE3A !important;
  border-color: #F9BE3A !important;
  color: #fff !important;
  opacity: 1 !important; /* para evitar que baje la opacidad */
  cursor: not-allowed;
}

/* 5. SHOP LOOP */
.woocommerce ul.products li.product {
  .button { background: var(--clr-primary)!important; color: #fff!important; border: none!important; }
  .button:hover { background: var(--clr-primary-dark)!important; }
  form.cart .quantity { display: none!important; }
}

/* 6. PRODUCT DETAIL */
.product .price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-m);
  color: var(--clr-price);
}
.product .price .woocommerce-Price-amount { font-size: var(--fs-price); font-weight:700; }
.product .price del .woocommerce-Price-amount { font-size: .5em; color: var(--clr-muted); opacity:.7; }

/* 7. ACCOUNT AREA */
.woocommerce-account .woocommerce {
  display: flex;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: var(--r-base);
  box-shadow: 0 4px 10px rgba(0,0,0,.04);
  padding: 2rem;
}
.woocommerce-MyAccount-navigation { flex: 0 0 320px; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin:0; padding:0; }
.woocommerce-MyAccount-navigation a {
  display:flex; align-items:center;
  gap: var(--sp-xs);
  padding: .6rem 1rem;
  font: 500 .85rem/1.4 var(--ff-base);
  text-transform: uppercase;
  color: var(--clr-text);
  transition: background var(--tr-base);
}
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
  background: var(--clr-highlight);
  color: var(--clr-primary-dark);
}
.woocommerce-MyAccount-content h2 {
  font: 700 1.5rem var(--ff-base);
  margin-bottom: var(--sp-m);
  border-bottom: 2px solid var(--clr-highlight);
  color: var(--clr-text);
}

/* Responsive */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce { flex-direction: column; padding:1rem; }
  .woocommerce-MyAccount-navigation,
  .woocommerce-MyAccount-content { width:100%; padding:1.5rem; }
}

/* 8. TABLES */
.entry-content table:not(.shop_table):not(.cart):not(.variations) {
  width:100%;
  border:1px solid var(--clr-border);
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--r-base);
  overflow: hidden;
  margin-bottom: var(--sp-m);
}
.entry-content thead th {
  background: var(--clr-table-head);
  padding: var(--sp-s) var(--sp-m);
  border-bottom: 2px solid var(--clr-primary);
  font:600 var(--fs-sm) var(--ff-base);
  text-transform: uppercase;
}
.entry-content tbody td {
  padding: var(--sp-s) var(--sp-m);
  border-bottom: 1px solid var(--clr-border);
}
.entry-content tbody tr:hover td { background: var(--clf-highlight); }

/* 9. CART TOTALS */
.wc-block-components-totals-item--expanded {
  display:flex; justify-content:space-between; align-items:flex-start; gap: var(--sp-xs);
  margin: .4rem 0;
}
.wc-block-components-totals-item__description {
  flex:1;
  padding-left: 22px;
  margin-top:6px;
  font-size:.875rem;
  line-height:1.45;
}
.wc-block-components-totals-shipping__via { margin-top:6px; font-weight:600; }
.wc-block-components-totals-wrapper.order-total {
  border-top:1px solid var(--clr-border);
  padding-top: var(--sp-xs);
  margin-top: var(--sp-xs);
  font:700 1.25rem var(--ff-base);
}

/* 10. MESSAGES & NOTICES */
.woocommerce-message,
.woocommerce-info {
  position: relative;
  font-family: var(--ff-base);
  background: var(--clr-info-bg) !important;
  border:1px solid var(--clr-info-border) !important;
  border-left:5px solid var(--clr-info-border) !important;
  border-radius: var(--r-base);
  padding: 1rem 1.25rem 1rem 3rem;
  color: var(--clr-body);
  box-shadow: 0 2px 5px rgba(0,0,0,.03);
}
.woocommerce-message::before,
.woocommerce-info::before {
  content: '\2714';
  position: absolute;
  left: 1.2rem;
  top: 50%; transform: translateY(-50%);
  font-size:1.25rem;
  color: var(--clr-info-border) !important;
}
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-info a.button {
  background: var(--clr-primary) !important;
  border:none !important;
  color: #fff !important;
  padding: .6rem 1.2rem;
  border-radius: var(--r-base);
  font: 600 var(--fs-sm) var(--ff-base);
  transition: background var(--tr-base);
}
.woocommerce-message .button:hover,
.woocommerce-info a.button:hover {
  background: var(--clr-primary-dark) !important;
}

/* 11. MISC & OVERRIDES */
.tax_label { display:none!important; }

/* Google Reviews */
button.cr-all-reviews-add-review {
  @extend .btn--primary;
  background:#EA5F7F!important;
  border-color:#EA5F7F!important;
  font-size: 15px;
}
button.cr-all-reviews-add-review:hover {
  background:#d14d6a!important;
}
.cr-ajax-search { display:none!important; }

/*  ── Ajustes para el prefijo “Desde” en precio variable ── */
.price .desde {
  font-size: 18px;        /* fuerza 16px */
  text-transform: none;   /* quita cualquier uppercase */
}

.codigo-numero {
    font-family: 'Niconne', cursive;
    font-size: 60px;
    line-height: 50px;
    display: inline-block; /* para respetar el line-height */
}

/* ── PRECIO PERSONALIZADO ── */
#precio-personalizado {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  font-size: 60px !important;
  font-weight: bold !important;
}

/* Forzar color negro en el importe */
#precio-personalizado .woocommerce-Price-amount {
  color: #000 !important;
}

/* Sufijo “Impuestos Incl.” */
#precio-personalizado.has-price::after {
  content: "Impuestos Incl.";
  display: inline;
  font-size: 14px;
  font-weight: 300;
  color: #000;
  margin-left: 0.5ch;
  vertical-align: baseline;
}

/* Forzar tamaño 50 px en el importe */
#precio-personalizado .woocommerce-Price-amount,
#precio-personalizado .woocommerce-Price-amount bdi {
  font-size: 60px !important;
  line-height: 1;
}

/* ───────── FORZAR PRECIO 50px ───────── */
#precio-personalizado,
#precio-personalizado * {
  font-size: 60px !important;
  line-height: 1 !important;
}

/* Además, vuelve a forzar el color negro */
#precio-personalizado .woocommerce-Price-amount,
#precio-personalizado bdi,
#precio-personalizado * {
  color: #000 !important;
}

.peso-button.no-interactive {
  background-color: var(--clr-primary);
  color: white;
  border: 2px solid var(--clr-primary-dark);
  pointer-events: none; /* Evita que sea clicable */
}

.peso-button.no-interactive:hover {
  background-color: var(--clr-primary); /* Evita hover */
  color: white;
  border-color: var(--clr-primary-dark);
}

.cantidad-button.no-interactive {
  background-color: var(--clr-primary); /* Color principal del branding */
  color: white;
  border: 2px solid var(--clr-primary-dark);
  pointer-events: none; /* Evita que sea clicable */
}

.cantidad-button.no-interactive:hover {
  background-color: var(--clr-primary); /* Evita hover */
  color: white;
  border-color: var(--clr-primary-dark);
}

#contenedor-buscador {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#contenedor-buscador.active {
  display: block;
  opacity: 1;
}

/* Estilización de precios en loops y categorías */
.price {
  color: #52042F !important;
  font-weight: 600;
  font-size: 1.2em;
}

.price .desde,
.price .woocommerce-Price-amount,
.price .woocommerce-Price-currencySymbol {
  color: #52042F !important;
  font-weight: 600;
}

.price .woocommerce-Price-amount {
  display: inline-flex;
  align-items: center;
}

.price .woocommerce-Price-currencySymbol {
  margin-left: 2px;
}

#precio-personalizado small {
  font-size: 14px !important;
  font-weight: 300 !important;
  color: #555; /* Color gris más suave para diferenciar del precio */
  margin-left: 4px;
  display: inline-block;
  vertical-align: middle;
}