/*
 Theme Name:   El Sur en Línea Child
 Theme URI:    https://www.elsurenlinea.com
 Description:  Child theme de Astra para El Sur en Línea — Productos Naturales
 Author:       El Sur en Línea
 Author URI:   https://www.elsurenlinea.com
 Template:     astra
 Version:      1.0.0
 Text Domain:  elsurenlinea-child
 Tags:         woocommerce, natural, colombia
*/

/* ================================================================
   VARIABLES GLOBALES — COLORES Y TIPOGRAFÍA
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --sur-blue:         #1A4B8C;
  --sur-blue-mid:     #2260B0;
  --sur-blue-dark:    #0F2D5A;
  --sur-blue-light:   #E8F0FA;
  --sur-accent:       #F4A22D;
  --sur-accent-light: #FEF3E2;
  --sur-green:        #16A34A;
  --sur-green-light:  #DCFCE7;
  --sur-red:          #DC2626;
  --sur-text:         #1A1A1A;
  --sur-muted:        #6B7280;
  --sur-border:       #E5E7EB;
  --sur-bg:           #F7F9FC;
  --sur-white:        #ffffff;
  --sur-radius:       10px;
  --sur-radius-lg:    14px;
}


/* ================================================================
   TIPOGRAFÍA GLOBAL
   ================================================================ */

body, p, li, input, select, textarea, button,
.woocommerce, .elementor {
  font-family: 'DM Sans', sans-serif !important;
  color: var(--sur-text);
}

h1, h2, h3,
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.entry-title, .product_title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  color: var(--sur-text) !important;
}

a { color: var(--sur-blue); transition: color 0.2s; }
a:hover { color: var(--sur-blue-mid); }


/* ================================================================
   BARRA SUPERIOR
   ================================================================ */

.ast-above-header, .top-bar, .header-widget-area {
  background-color: var(--sur-blue-dark) !important;
  color: #fff !important;
  font-size: 12px !important;
}
.ast-above-header a, .top-bar a { color: #fff !important; }


/* ================================================================
   NAVEGACIÓN / HEADER
   ================================================================ */

.site-header, #masthead, .ast-header-wrap, .main-header-bar {
  background-color: var(--sur-white) !important;
  border-bottom: 1px solid var(--sur-border) !important;
  box-shadow: 0 1px 8px rgba(26,75,140,0.06) !important;
}

.site-logo img, .custom-logo, .ast-site-identity img {
  max-height: 55px !important;
}

.main-navigation a, .ast-main-navigation a,
.site-navigation a, .main-header-menu a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--sur-muted) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  transition: all 0.2s !important;
}

.main-navigation a:hover, .ast-main-navigation a:hover,
.main-navigation .current-menu-item > a,
.ast-main-navigation .current-menu-item > a {
  color: var(--sur-blue) !important;
  background-color: var(--sur-blue-light) !important;
}

.main-navigation .sub-menu, .ast-main-navigation .sub-menu {
  border: 1px solid var(--sur-border) !important;
  border-radius: var(--sur-radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  padding: 6px !important;
}


/* ================================================================
   BOTONES GLOBALES
   ================================================================ */

.button, button, input[type="button"], input[type="submit"],
.ast-button, .elementor-button {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--sur-radius) !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
}

.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce .button.alt {
  background-color: var(--sur-blue) !important;
  color: var(--sur-white) !important;
  border: none !important;
  padding: 11px 22px !important;
  border-radius: var(--sur-radius) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important;
}

.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .button.alt:hover {
  background-color: var(--sur-blue-mid) !important;
  color: var(--sur-white) !important;
}

.woocommerce ul.products li.product .button,
.add_to_cart_button {
  background-color: var(--sur-blue-light) !important;
  color: var(--sur-blue) !important;
  border: none !important;
  width: 100% !important;
  border-radius: 8px !important;
  padding: 9px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.woocommerce ul.products li.product .button:hover,
.add_to_cart_button:hover {
  background-color: var(--sur-blue) !important;
  color: var(--sur-white) !important;
}

.single_add_to_cart_button,
.woocommerce div.product form.cart .button {
  background-color: var(--sur-blue) !important;
  color: var(--sur-white) !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  border-radius: var(--sur-radius) !important;
  font-weight: 600 !important;
  width: 100% !important;
  border: none !important;
}

.single_add_to_cart_button:hover {
  background-color: var(--sur-blue-mid) !important;
}


/* ================================================================
   PRECIOS
   ================================================================ */

.woocommerce-Price-amount, .woocommerce .price,
.price .amount, .woocommerce ul.products li.product .price {
  color: var(--sur-blue) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  font-family: 'Playfair Display', serif !important;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
  color: var(--sur-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-family: 'DM Sans', sans-serif !important;
  opacity: 0.8 !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 28px !important;
  margin-bottom: 12px !important;
}


/* ================================================================
   BADGE DE OFERTA
   ================================================================ */

.woocommerce span.onsale, .onsale {
  background-color: var(--sur-accent) !important;
  color: var(--sur-white) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: 'DM Sans', sans-serif !important;
  top: 10px !important;
  left: 10px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.5 !important;
}


/* ================================================================
   GRID DE PRODUCTOS
   ================================================================ */

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

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--sur-white) !important;
  border: 1px solid var(--sur-border) !important;
  border-radius: var(--sur-radius-lg) !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: border-color 0.2s, transform 0.2s !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--sur-blue) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(26,75,140,0.1) !important;
}

.woocommerce ul.products li.product img {
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  aspect-ratio: 1 !important;
  object-fit: cover !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sur-text) !important;
  padding: 10px 12px 4px !important;
  line-height: 1.4 !important;
}

.woocommerce ul.products li.product .star-rating {
  color: var(--sur-accent) !important;
  padding: 0 12px 6px !important;
  font-size: 12px !important;
}

.woocommerce ul.products li.product .price { padding: 0 12px 8px !important; }
.woocommerce ul.products li.product .button { margin: 0 12px 12px !important; display: block !important; }


/* ================================================================
   PÁGINA INDIVIDUAL DE PRODUCTO
   ================================================================ */

.woocommerce div.product {
  background: var(--sur-white) !important;
  border-radius: var(--sur-radius-lg) !important;
  border: 1px solid var(--sur-border) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

.woocommerce div.product .product_title {
  font-size: 26px !important;
  line-height: 1.25 !important;
  margin-bottom: 10px !important;
}

.woocommerce div.product .star-rating { color: var(--sur-accent) !important; font-size: 14px !important; }
.woocommerce div.product .woocommerce-review-link { color: var(--sur-blue) !important; font-size: 13px !important; }

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--sur-muted) !important;
  margin-bottom: 18px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--sur-border) !important;
}

.woocommerce div.product form.cart .quantity input.qty {
  border: 1px solid var(--sur-border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  font-family: 'DM Sans', sans-serif !important;
  width: 70px !important;
  text-align: center !important;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 2px solid var(--sur-border) !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  background: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none !important; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--sur-muted) !important;
  padding: 12px 16px !important;
  background: none !important;
  text-shadow: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom: 2px solid var(--sur-blue) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--sur-blue) !important;
  background: none !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
  border: none !important;
  padding: 22px 0 !important;
  background: none !important;
}

/* Galería */
.woocommerce div.product div.images img {
  border-radius: var(--sur-radius) !important;
  border: 1px solid var(--sur-border) !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
  border-radius: 8px !important;
  border: 2px solid var(--sur-border) !important;
  opacity: 0.7 !important;
  transition: all 0.2s !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border-color: var(--sur-blue) !important;
  opacity: 1 !important;
}


/* ================================================================
   RESEÑAS
   ================================================================ */

#reviews #comments ol.commentlist li {
  background: var(--sur-white) !important;
  border: 1px solid var(--sur-border) !important;
  border-radius: var(--sur-radius) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

#reviews #comments ol.commentlist li .star-rating { color: var(--sur-accent) !important; }

#reviews #comments ol.commentlist li .comment-text .description p {
  font-size: 13.5px !important;
  color: var(--sur-muted) !important;
  line-height: 1.65 !important;
  font-style: italic !important;
}

#review_form_wrapper textarea,
#review_form_wrapper input[type="text"],
#review_form_wrapper input[type="email"] {
  border: 1px solid var(--sur-border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  width: 100% !important;
}

#review_form_wrapper textarea:focus,
#review_form_wrapper input:focus {
  border-color: var(--sur-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(26,75,140,0.1) !important;
}

#review_form_wrapper #submit {
  background-color: var(--sur-blue) !important;
  color: var(--sur-white) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 11px 24px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}


/* ================================================================
   CARRITO
   ================================================================ */

.woocommerce table.cart, .woocommerce-cart table.cart {
  border: 1px solid var(--sur-border) !important;
  border-radius: var(--sur-radius-lg) !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.woocommerce table.cart th {
  background-color: var(--sur-blue-light) !important;
  color: var(--sur-blue) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  border: none !important;
}

.woocommerce table.cart td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--sur-border) !important;
  border-top: none !important;
  vertical-align: middle !important;
  font-size: 13.5px !important;
}

.woocommerce table.cart td.product-name a {
  font-weight: 500 !important;
  color: var(--sur-text) !important;
}

.woocommerce table.cart td.product-name a:hover { color: var(--sur-blue) !important; }

.woocommerce table.cart td.product-price,
.woocommerce table.cart td.product-subtotal {
  color: var(--sur-blue) !important;
  font-weight: 700 !important;
}

.woocommerce table.cart td.product-remove a.remove {
  color: var(--sur-muted) !important;
  border-radius: 50% !important;
  transition: all 0.2s !important;
  background: none !important;
}

.woocommerce table.cart td.product-remove a.remove:hover {
  background-color: var(--sur-red) !important;
  color: var(--sur-white) !important;
}

.woocommerce .coupon input.input-text {
  border: 1px solid var(--sur-border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
}

.woocommerce .coupon .button {
  background-color: var(--sur-blue-light) !important;
  color: var(--sur-blue) !important;
  border: 1px solid var(--sur-blue) !important;
}

.woocommerce .coupon .button:hover {
  background-color: var(--sur-blue) !important;
  color: var(--sur-white) !important;
}

/* Totales del carrito */
.woocommerce .cart-collaterals .cart_totals {
  background: var(--sur-white) !important;
  border: 1px solid var(--sur-border) !important;
  border-radius: var(--sur-radius-lg) !important;
  overflow: hidden !important;
}

.woocommerce .cart-collaterals .cart_totals h2 {
  background-color: var(--sur-blue) !important;
  color: var(--sur-white) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  margin: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
}

.woocommerce .cart-collaterals .cart_totals table th,
.woocommerce .cart-collaterals .cart_totals table td {
  font-size: 13.5px !important;
  padding: 10px 16px !important;
  border: none !important;
  border-bottom: 1px solid var(--sur-border) !important;
}

.woocommerce .cart-collaterals .cart_totals table tr:last-child td {
  color: var(--sur-blue) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border-bottom: none !important;
}

.woocommerce .cart-collaterals .wc-proceed-to-checkout .checkout-button {
  background-color: var(--sur-blue) !important;
  color: var(--sur-white) !important;
  border-radius: var(--sur-radius) !important;
  font-size: 15px !important;
  padding: 14px !important;
  width: 100% !important;
  text-align: center !important;
  font-weight: 600 !important;
}

.woocommerce .cart-collaterals .wc-proceed-to-checkout .checkout-button:hover {
  background-color: var(--sur-blue-mid) !important;
}


/* ================================================================
   CHECKOUT
   ================================================================ */

.woocommerce-checkout h3, #order_review_heading {
  font-size: 18px !important;
  border-bottom: 2px solid var(--sur-blue-light) !important;
  padding-bottom: 10px !important;
  margin-bottom: 18px !important;
}

.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout .woocommerce-input-wrapper textarea,
.woocommerce form .input-text {
  border: 1px solid var(--sur-border) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13.5px !important;
  width: 100% !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.woocommerce-checkout .woocommerce-input-wrapper input:focus,
.woocommerce form .input-text:focus {
  border-color: var(--sur-blue) !important;
  box-shadow: 0 0 0 3px rgba(26,75,140,0.1) !important;
  outline: none !important;
}

.woocommerce-checkout #payment {
  background: var(--sur-white) !important;
  border: 1px solid var(--sur-border) !important;
  border-radius: var(--sur-radius-lg) !important;
  overflow: hidden !important;
}

.woocommerce #payment #place_order,
.woocommerce-checkout #payment #place_order {
  background-color: var(--sur-blue) !important;
  color: var(--sur-white) !important;
  border: none !important;
  border-radius: var(--sur-radius) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 16px 24px !important;
  width: 100% !important;
  cursor: pointer !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: background-color 0.2s !important;
}

.woocommerce #payment #place_order:hover {
  background-color: var(--sur-blue-mid) !important;
}


/* ================================================================
   NOTIFICACIONES
   ================================================================ */

.woocommerce-message, .woocommerce-info {
  background-color: var(--sur-blue-light) !important;
  border-top: 3px solid var(--sur-blue) !important;
  color: var(--sur-blue-dark) !important;
  border-radius: 0 var(--sur-radius) var(--sur-radius) 0 !important;
  font-size: 13.5px !important;
  padding: 14px 16px !important;
}

.woocommerce-error {
  background-color: #FEF2F2 !important;
  border-top: 3px solid var(--sur-red) !important;
  color: var(--sur-red) !important;
  border-radius: 0 var(--sur-radius) var(--sur-radius) 0 !important;
}


/* ================================================================
   PAGINACIÓN
   ================================================================ */

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--sur-border) !important;
  border-radius: 6px !important;
  color: var(--sur-muted) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  padding: 7px 13px !important;
  margin: 0 3px !important;
  transition: all 0.2s !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background-color: var(--sur-blue-light) !important;
  color: var(--sur-blue) !important;
  border-color: var(--sur-blue) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--sur-blue) !important;
  color: var(--sur-white) !important;
  border-color: var(--sur-blue) !important;
}


/* ================================================================
   FOOTER
   ================================================================ */

.site-footer, #colophon, footer {
  background-color: var(--sur-blue-dark) !important;
  color: rgba(255,255,255,0.82) !important;
}

.site-footer a, #colophon a {
  color: rgba(255,255,255,0.75) !important;
  transition: color 0.2s !important;
}

.site-footer a:hover, #colophon a:hover { color: var(--sur-white) !important; }

.site-footer .widget-title, .site-footer .widgettitle {
  color: var(--sur-white) !important;
  border-bottom-color: rgba(255,255,255,0.15) !important;
  font-size: 14px !important;
}

.site-footer p, .site-footer li {
  color: rgba(255,255,255,0.72) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}


/* ================================================================
   BOTÓN FLOTANTE WHATSAPP
   ================================================================ */

.whatsapp-btn-float, .yith-whatsapp-button {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  background-color: #25D366 !important;
  color: var(--sur-white) !important;
  border-radius: 50% !important;
  width: 54px !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  box-shadow: 0 4px 18px rgba(37,211,102,0.4) !important;
  z-index: 9999 !important;
  text-decoration: none !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.whatsapp-btn-float:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 24px rgba(37,211,102,0.55) !important;
}


/* ================================================================
   RESPONSIVE MÓVIL
   ================================================================ */

@media (max-width: 768px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .woocommerce div.product { padding: 16px !important; }
  .woocommerce div.product .product_title { font-size: 22px !important; }
  .woocommerce div.product p.price { font-size: 22px !important; }
  .woocommerce table.cart thead { display: none !important; }
  .woocommerce table.cart td { display: block !important; width: 100% !important; }
}

@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}