/*
 * Framberrie — CSS personalizado para tema hijo de Astra
 * Versión: 1.0
 * Paleta: Framberrie Pink (#E27F96), Sage Opal (#c8ddd6), Diamond Blue (#b8ddf0), Pale Violet (#d4b0e8)
 * Fuentes: Primeform Pro (cuerpo), Andrade Pro (acento), Transforma (display)
 *
 * Instrucciones:
 * 1. Sube las fuentes a /wp-content/themes/astra-child/fonts/
 * 2. Pega este archivo en /wp-content/themes/astra-child/framberrie-custom.css
 * 3. Encolalo desde functions.php (ver instrucciones adjuntas)
 */

/* ============================================================
   1. FUENTES
   ============================================================ */

@font-face {
  font-family: 'Primeform Pro';
  src: url('fonts/PrimeformPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Primeform Pro';
  src: url('fonts/PrimeformPro-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Primeform Pro';
  src: url('fonts/PrimeformPro-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Primeform Pro';
  src: url('fonts/PrimeformPro-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Primeform Pro';
  src: url('fonts/PrimeformPro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Primeform Pro';
  src: url('fonts/PrimeformPro-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Andrade Pro';
  src: url('fonts/Andrade_Pro_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Andrade Pro';
  src: url('fonts/Andrade_Pro_Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Andrade Pro';
  src: url('fonts/Andrade_Pro_Bold_Italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* Transforma: agregar cuando tengas el archivo */
/* @font-face {
  font-family: 'Transforma';
  src: url('fonts/Transforma.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
} */

/* ============================================================
   2. VARIABLES / TOKENS
   ============================================================ */

:root {
  /* Colores principales */
  --fr-pink:        #E27F96;
  --fr-pink-light:  #f1c6ca;
  --fr-pink-lightest: #fdf0f2;
  --fr-pink-bg:     #fdf5f6;
  --fr-pink-deep:   #5a2d3a;
  --fr-pink-mid:    #9a6a75;
  --fr-pink-dark-bg:#4a2030;

  /* Sage Opal */
  --fr-sage:        #c8ddd6;
  --fr-sage-dark:   #4a7a6a;
  --fr-sage-mid:    #7aaa96;
  --fr-sage-light:  #eaf4f0;

  /* Diamond Blue */
  --fr-blue:        #b8ddf0;
  --fr-blue-dark:   #3a7a8a;
  --fr-blue-mid:    #6aaabb;
  --fr-blue-light:  #eaf6fb;

  /* Pale Violet */
  --fr-violet:      #d4b0e8;
  --fr-violet-dark: #5a3d7a;
  --fr-violet-mid:  #8a6aaa;
  --fr-violet-light:#f2eaf8;

  /* Tipografía */
  --font-body:    'Primeform Pro', sans-serif;
  --font-accent:  'Andrade Pro', serif;
  --font-display: 'Transforma', 'Primeform Pro', sans-serif;

  /* Espaciado */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill:24px;
}

/* ============================================================
   3. BASE / RESET
   ============================================================ */

body,
.woocommerce,
.woocommerce-page {
  font-family: var(--font-body);
  color: #2c2c2c;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 500;
}

/* Títulos principales con Andrade Pro */
.fr-title-accent,
.entry-title,
.woocommerce h1.product_title {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  color: var(--fr-pink-deep);
}

/* ============================================================
   4. NAVBAR / HEADER
   ============================================================ */

.site-header,
#masthead,
.ast-site-header-wrap {
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
}

/* Logo */
.site-branding .site-title,
.ast-site-title {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 22px;
  color: var(--fr-pink-deep);
  letter-spacing: 0.1em;
}

/* Menú principal */
.main-navigation a,
.ast-primary-nav a,
#site-navigation a {
  font-family: var(--font-body);
  font-size: 14px;
  color: #6b6b6b;
  transition: color 0.2s;
}
.main-navigation a:hover,
.ast-primary-nav a:hover,
#site-navigation a:hover {
  color: var(--fr-pink);
}

/* Ítem activo */
.main-navigation .current-menu-item > a,
.ast-primary-nav .current-menu-item > a {
  color: var(--fr-pink);
  border-bottom: 2px solid var(--fr-pink);
}

/* Ofertas en el menú destacado */
.menu-item-ofertas > a {
  color: var(--fr-pink) !important;
  font-weight: 600;
}

/* Dropdown / submenú */
.main-navigation .sub-menu,
.ast-primary-nav .sub-menu {
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 8px 24px rgba(90,45,58,0.08);
}
.main-navigation .sub-menu a,
.ast-primary-nav .sub-menu a {
  font-size: 13px;
  padding: 10px 18px;
  color: #4a4a4a;
}
.main-navigation .sub-menu a:hover,
.ast-primary-nav .sub-menu a:hover {
  background: var(--fr-pink-bg);
  color: var(--fr-pink);
}

/* ============================================================
   5. BOTONES
   ============================================================ */

/* Botón primario */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
a.fr-btn,
button.fr-btn {
  background: var(--fr-pink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 28px !important;
  transition: background 0.2s;
  letter-spacing: 0.02em;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover {
  background: #d06a82 !important;
  color: #fff !important;
}

/* Botón outline */
.fr-btn-ghost,
a.fr-btn-ghost {
  background: transparent;
  color: var(--fr-pink);
  border: 1.5px solid var(--fr-pink);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 26px;
  transition: background 0.2s;
}
.fr-btn-ghost:hover {
  background: var(--fr-pink-bg);
}

/* ============================================================
   6. WOOCOMMERCE — TIENDA / CATÁLOGO
   ============================================================ */

/* Grid de productos */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Tarjeta de producto */
.woocommerce ul.products li.product {
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s;
  background: #fff;
  margin: 0 !important;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--fr-pink);
}

/* Imagen del producto */
.woocommerce ul.products li.product a img {
  border-radius: 0;
  transition: transform 0.3s;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.03);
}

/* Nombre del producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: #2c2c2c;
  padding: 4px 12px 2px;
}

/* Precio */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--fr-pink) !important;
  font-size: 15px;
  font-weight: 600;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product .price del {
  color: #aaa !important;
  font-size: 13px;
}

/* Badge "Nuevo" / "Oferta" */
.woocommerce span.onsale {
  background: var(--fr-pink);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  min-height: unset;
  min-width: unset;
  line-height: 1.4;
}

/* Estrellas */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--fr-pink);
}

/* ============================================================
   7. WOOCOMMERCE — PÁGINA DE PRODUCTO
   ============================================================ */

.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Título */
.woocommerce div.product .product_title {
  font-family: var(--font-accent);
  font-size: 26px;
  font-style: italic;
  color: var(--fr-pink-deep);
  margin-bottom: 8px;
}

/* Galería */
.woocommerce div.product div.images {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.woocommerce div.product div.images img {
  border-radius: var(--radius-lg);
}

/* Miniaturas */
.woocommerce div.product div.thumbnails a img,
.flex-control-thumbs li img {
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--fr-pink-light);
  opacity: 0.7;
  transition: opacity 0.2s, border-color 0.2s;
}
.flex-control-thumbs li img:hover,
.flex-control-thumbs li.flex-active img {
  border-color: var(--fr-pink);
  opacity: 1;
}

/* Precio en producto */
.woocommerce div.product p.price {
  font-size: 26px;
  font-weight: 600;
  color: var(--fr-pink) !important;
  margin: 12px 0;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs .tabs li a {
  font-family: var(--font-body);
  font-size: 13px;
  color: #6b6b6b;
}
.woocommerce div.product .woocommerce-tabs .tabs li.active a {
  color: var(--fr-pink);
  border-bottom: 2px solid var(--fr-pink);
}

/* Variaciones */
.woocommerce div.product form.cart .variations td.label label {
  font-size: 12px;
  font-weight: 600;
  color: #4a4a4a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.woocommerce div.product form.cart .variations select {
  border: 0.5px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 12px;
}

/* Cantidad */
.woocommerce div.product form.cart .qty {
  border: 0.5px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
  font-size: 14px;
  text-align: center;
  width: 60px;
  height: 40px;
}

/* ============================================================
   8. WOOCOMMERCE — CARRITO
   ============================================================ */

.woocommerce-cart table.cart {
  border-collapse: collapse;
  width: 100%;
}
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
  padding: 14px 10px;
  font-size: 13px;
  vertical-align: middle;
}
.woocommerce-cart table.cart th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b6b6b;
}

/* Imagen en carrito */
.woocommerce-cart table.cart td.product-thumbnail img {
  border-radius: var(--radius-md);
  border: 0.5px solid var(--fr-pink-light);
  width: 64px;
}

/* Nombre */
.woocommerce-cart table.cart td.product-name a {
  font-weight: 500;
  color: #2c2c2c;
  font-size: 13px;
}
.woocommerce-cart table.cart td.product-name a:hover {
  color: var(--fr-pink);
}

/* Precio en carrito */
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
  color: var(--fr-pink);
  font-weight: 600;
}

/* Botón eliminar */
.woocommerce-cart table.cart td.product-remove a.remove {
  color: #ccc !important;
  font-size: 18px;
  transition: color 0.2s;
}
.woocommerce-cart table.cart td.product-remove a.remove:hover {
  color: var(--fr-pink) !important;
  background: none;
}

/* Totales del carrito */
.woocommerce-cart .cart_totals {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.woocommerce-cart .cart_totals h2 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
}
.woocommerce-cart .cart_totals table {
  width: 100%;
  font-size: 13px;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  padding: 8px 0;
  border-bottom: 0.5px solid rgba(0,0,0,0.06);
}
.woocommerce-cart .cart_totals .order-total td {
  font-size: 20px;
  font-weight: 700;
  color: var(--fr-pink);
}

/* Campo de cupón */
.woocommerce-cart .coupon input.input-text {
  border: 0.5px solid rgba(0,0,0,0.12);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  font-family: var(--font-body);
  height: 40px;
}
.woocommerce-cart .coupon .button {
  height: 40px;
  border-radius: var(--radius-sm) !important;
  padding: 0 16px !important;
}

/* ============================================================
   9. WOOCOMMERCE — CHECKOUT
   ============================================================ */

.woocommerce-checkout .woocommerce {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}

/* Campos del formulario */
.woocommerce form .form-row label {
  font-size: 11px;
  font-weight: 600;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  border: 0.5px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 10px 14px;
  transition: border-color 0.2s;
  height: 40px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--fr-pink);
  outline: none;
}

/* Secciones del checkout */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  font-size: 15px;
  font-weight: 600;
  color: #2c2c2c;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
}

/* Resumen del pedido en checkout */
.woocommerce-checkout-review-order {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: sticky;
  top: 20px;
}
.woocommerce-checkout-review-order table {
  width: 100%;
  font-size: 13px;
}
.woocommerce-checkout-review-order table td,
.woocommerce-checkout-review-order table th {
  padding: 8px 0;
  border-bottom: 0.5px solid rgba(0,0,0,0.06);
}
.woocommerce-checkout-review-order .order-total td {
  font-size: 20px;
  font-weight: 700;
  color: var(--fr-pink);
}

/* Métodos de pago */
.woocommerce-checkout #payment {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 16px;
}
.woocommerce-checkout #payment ul.payment_methods li label {
  font-size: 13px;
  font-weight: 500;
}

/* Botón de pago */
.woocommerce-checkout #payment #place_order {
  background: var(--fr-pink) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 14px 32px !important;
  width: 100%;
  transition: background 0.2s;
}
.woocommerce-checkout #payment #place_order:hover {
  background: #d06a82 !important;
}

/* ============================================================
   10. WOOCOMMERCE — CONFIRMACIÓN / THANK YOU
   ============================================================ */

.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-family: var(--font-accent);
  font-size: 24px;
  font-style: italic;
  color: var(--fr-pink-deep);
  text-align: center;
  margin-bottom: 8px;
}
.woocommerce-order-received .woocommerce-thankyou-order-details {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-lg);
  padding: 20px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: center;
  margin: 20px 0;
}
.woocommerce-order-received .woocommerce-thankyou-order-details li strong {
  display: block;
  font-size: 12px;
  color: #6b6b6b;
  margin-bottom: 4px;
}

/* ============================================================
   11. FORMULARIOS GENERALES / MI CUENTA
   ============================================================ */

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
}
.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  color: #4a4a4a;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s;
}
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--fr-pink-bg);
  color: var(--fr-pink);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--fr-pink-bg);
  color: var(--fr-pink);
  font-weight: 600;
}

/* ============================================================
   12. FOOTER
   ============================================================ */

.widget.widget_nav_menu h2.widgettitle {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #4a7a6a !important;
}

/* ============================================================
   13. RESPONSIVE — TABLET (max 1024px)
   ============================================================ */

@media (max-width: 1024px) {

  /* Grid de productos: 3 columnas */
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Producto individual */
  .woocommerce div.product {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Checkout */
  .woocommerce-checkout .woocommerce {
    grid-template-columns: 1fr;
  }
  .woocommerce-checkout-review-order {
    position: static;
  }

  /* Thank you */
  .woocommerce-order-received .woocommerce-thankyou-order-details {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   14. RESPONSIVE — MÓVIL (max 768px)
   ============================================================ */

@media (max-width: 768px) {

  /* Menú hamburguesa — Astra lo maneja nativamente,
     solo ajustamos colores */
  .ast-mobile-menu-trigger span,
  .ast-mobile-menu-trigger span::before,
  .ast-mobile-menu-trigger span::after {
    background: var(--fr-pink-deep);
  }
  .ast-mobile-nav-wrap {
    background: #fff;
    border-top: 2px solid var(--fr-pink-light);
  }
  .ast-mobile-nav-wrap a {
    font-size: 15px;
    padding: 12px 20px;
    border-bottom: 0.5px solid rgba(0,0,0,0.06);
  }

  /* Grid de productos: 2 columnas */
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  /* Nombre de producto más pequeño */
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 12px;
  }

  /* Producto individual */
  .woocommerce div.product {
    grid-template-columns: 1fr;
  }
  .woocommerce div.product .product_title {
    font-size: 20px;
  }
  .woocommerce div.product p.price {
    font-size: 20px;
  }

  /* Carrito */
  .woocommerce-cart table.cart thead {
    display: none;
  }
  .woocommerce-cart table.cart td {
    display: block;
    text-align: right;
    padding: 6px 10px;
  }
  .woocommerce-cart table.cart td::before {
    content: attr(data-title);
    float: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: #6b6b6b;
  }
  .woocommerce-cart table.cart td.product-thumbnail {
    text-align: center;
  }
  .woocommerce-cart table.cart td.product-thumbnail::before {
    display: none;
  }

  /* Checkout */
  .woocommerce-checkout .woocommerce {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Thank you */
  .woocommerce-order-received .woocommerce-thankyou-order-details {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Footer */
  .site-footer .ast-footer-widget-area {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  /* Tipografía general */
  body {
    font-size: 15px;
  }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 16px; }
}

/* ============================================================
   15. RESPONSIVE — MÓVIL PEQUEÑO (max 480px)
   ============================================================ */

@media (max-width: 480px) {

  /* Grid de productos: 1 columna */
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Botones full width */
  .woocommerce a.button,
  .woocommerce button.button {
    width: 100%;
    text-align: center;
  }

  /* Footer en columna única */
  .site-footer .ast-footer-widget-area {
    grid-template-columns: 1fr;
  }

  /* Thank you */
  .woocommerce-order-received .woocommerce-thankyou-order-details {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   16. UTILIDADES
   ============================================================ */

/* Badges de ingredientes */
.fr-badge-natural {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fr-sage-light);
  border: 0.5px solid var(--fr-sage);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--fr-sage-dark);
  font-weight: 500;
}

/* Barra de envío gratis */
.fr-shipping-progress {
  background: var(--fr-sage-light);
  border: 0.5px solid var(--fr-sage);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--fr-sage-dark);
}
.fr-shipping-progress-bar {
  height: 4px;
  background: rgba(74,122,106,0.2);
  border-radius: 2px;
  margin-top: 6px;
}
.fr-shipping-progress-fill {
  height: 100%;
  background: var(--fr-sage-dark);
  border-radius: 2px;
  transition: width 0.3s;
}

/* Pill de año en footer */
.fr-footer-year::before {
  content: '© ';
}