/*
 Theme Name:   Divi Child
 Template:     Divi
*/

:root{
	--menu-background-color: rgba(15,0,0,0.8);
}

/* ----- Design Tokens ----- */

.val_cart_totals,
.val_checkout_section,
.val_checkout_msg,
.val_checkout_billing,
.val_checkout_shipping,
.val_checkout_notes,
.val_checkout_order_review,
.val_checkout_payment,
.select2-container {
    --burgundy:       #8c2b3f;
    --burgundy-dark:  #6e2233;
    --burgundy-deep:  #2a0c0e;
    --gold:           #bb9975;
    --gold-light:     #cdb08e;
    --cream:          #f6eee0;
    --cream-dark:     #ede3d2;
    --white:          #ffffff;
    --black:          #000000;
    --text-dark:      #32373c;
    --text-mid:       #5a5a5a;
    --text-light:     #999;
    --border-light:   rgba(187, 153, 117, 0.3);
    --border-mid:     rgba(187, 153, 117, 0.5);
    --success:        #4a8c5c;
    --error:          #c0392b;

    --font-heading:   'Abril Fatface', serif;
    --font-script:    Georgia, 'Times New Roman', serif;
    --font-body:      'Courier New', 'Lucida Console', monospace;

    --radius:         6px;
    --transition:     all 0.3s ease;
}


/* ==============================================================================
   # Slider Principal (.val_slider_home)
   ============================================================================== */


 html body #page-container .et_pb_section .val_slider_home.et_pb_slider .et_pb_slide_0.et_pb_slide>.et_pb_container {
    max-width: 775px;
}

.val_slider_home .et_pb_container {
    margin: 0px 20px !important;
}

.val_slider_home .et_pb_button {
    outline: 1px solid #fff;
    outline-offset: 4px;
}

.val_slider_home .et_pb_button:hover {
    outline-offset: 7px;
}

.val_slider_home .et_parallax_bg {
    background-size: 102dvh auto;
    background-position: bottom 0vh right 0px;
}



.val_slider_home .et_pb_slide_description {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 18px;
    align-items: center;
}

.val_slider_home .et_pb_slide_title {
    grid-column: 1 / -1; /* ocupa las 2 columnas */
}

.val_slider_home .et_pb_slide_title a{
    font-size: clamp(24px, 9vw, 84px);
}

.val_slider_home .et_pb_slide_title::before {
    content: "TU TIENDA DE EXCELENCIA GASTRONÓMICA";
    font-family: 'Decimal Mono Pro', Helvetica, Arial, Lucida, sans-serif;
    display: block;
    color: #fff;
    font-size: clamp(11px, 2vw, 22px);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 5px;
    margin-bottom: -4px;
}

.val_slider_home .et_pb_button_wrapper {
    grid-column: 1;
    justify-self: start;
    margin-top: 0;
}

.val_slider_home .et_pb_slide_description::after {
    content: "";
    display: block;

    background-image: url("https://carnesquesorprenden.com/wp-content/uploads/byValniezo.png");
    background-size: contain;
    background-repeat: no-repeat;

    width: 202px;
    height: 36px; /* ajusta según proporción */

    grid-column: 2;
    justify-self: end;
    align-self: end;
}

html body #page-container .et_pb_section .val_slider_home.et_pb_slider .et_pb_slide .et_pb_more_button.et_pb_button {
    margin-top: 0px !important;
}


@media (max-width: 980px) {
    .val_slider_home .et_parallax_bg {
        background-size: 122% auto;
        background-position: bottom 11vh right -29px;
    }

    .val_slider_home .et_pb_slider_container_inner {
        vertical-align: top;
    }

    .val_slider_home .et_pb_slide_description {
        padding: 38% 8%;
    }

    .val_slider_home .et_pb_button_wrapper {
        margin-top: 0px;
    }
}

@media (max-width: 780px) {
    .val_slider_home .et_pb_slide_description {
        padding: 60vw 8%;
    }
}



.et_header_style_left #et-top-navigation .mobile_menu_bar {
	padding: 8px 0px 16px 0px;
}

#main-header, #mobile_menu{
	-webkit-backdrop-filter: blur(10px); /* Para Safari */
	backdrop-filter: blur(10px);
}

#main-header #et-top-navigation a{
	font-size: 23px;
	font-weight: 400;
	text-transform: uppercase;
}

#main-header .nav li ul {
    border-radius: 10px;
}

#et-boc .et-fixed-header #top-menu .sub-menu li.current-menu-item>a, 
#et-boc .et-fixed-header #top-menu .sub-menu li.current_page_item>a,
#et-boc #top-menu .sub-menu li.current-menu-item>a, 
#et-boc #top-menu .sub-menu li.current_page_item>a,
#top-menu .sub-menu li.current-menu-ancestor>a{
	color: #000000 !important;
}

#mobile_menu{
	background: var(--menu-background-color) !important;
}

.grecaptcha-badge{
	display: none;
}

/* Fixed Navigation Bar on mobile devices */
@media screen and (max-width: 980px) {
  #main-header.et-fixed-header {
    position: fixed;
  }

  #main-header{
	background: var(--menu-background-color);
    top: 0 !important;
    transition: all .3s 0s;
  }
}

@media (min-width: 981px) {
    .et_fullwidth_nav #main-header .container { 
        padding-right: 62px;
        padding-left: 80px;
    }
}


/*change hamburger icon to x when mobile menu is open*/
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '4d';
}


/*adjust the new toggle element which is added via jQuery*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}


/*some code to keep everyting positioned properly*/
ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}


/*remove default background color from menu items that have children*/
.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}


/*hide the submenu by default*/
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	opacity: 0;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    transition: opacity 0.5s ease, height 0.6s ease-out, visibility 0s 0.5s;
	interpolate-size: allow-keywords;
}


/*show the submenu when toggled open*/
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    transition: opacity 0.5s ease, height 0.6s ease-out;
}


/*adjust the toggle icon position and transparency*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: center;
	opacity: 1;
}


/*submenu toggle icon when closed*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '33';
	color: #ffffff;
	border-radius: 50%;
	padding: 3px;
}


/*submenu toggle icon when open*/
ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '32';
}


/*add point on top of the menu submenu dropdown*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
	position: absolute;
	right: 5%;
	margin-left: -20px;
	top: -14px;
	width: 0;
	height: 0;
	content: '';
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #ffffff;
}


/*adjust the position of the hamburger menu*/
.mobile_menu_bar {
	position: relative;
	display: block;
	bottom: 10px;
	line-height: 0;
}

/* aditional custom to buttons */
.button{
	text-transform: uppercase !important;
	padding: 0.4em 2em !important;
}

.button:hover{
	padding: 0.4em 2em !important;
	padding-right: 2.5em !important;
} 

/* product view */
@media (min-width: 981px) {
    .product-view-section-1, .product-view-column-2 {
        height: 100dvh;
    }
    .product-view-column-2{
        overflow-y: auto;
    }
}

.product-view-column-1, .product-view-column-1-module-code {
    height: 100%;
}

/* ===============================================================
   BLOQUE TÍTULO Y TOTALES (Cart Totals - Movido desde cart.css)
=============================================================== */

/* Asegurando que subtotal y order-total alinean a la derecha según petición de usuario */
html body.woocommerce-cart #page-container .val_cart_totals table.shop_table td,
html body.woocommerce-checkout #page-container .val_checkout_order_review table.shop_table td:not(.product-name),
html body.woocommerce-checkout #page-container .val_checkout_order_review table.shop_table th.product-total {
  text-align: right !important;
}

/* ===============================================================
   MÓDULO DE TOTALES (.val_cart_totals)
=============================================================== */

/* Contenedor principal del módulo */
.val_cart_totals {
  border-radius: 6px;
}

.val_cart_totals .cart_totals,
.val_checkout_order_review .et_pb_module_inner {
  background: #ffffff;
  border: 0.8px solid rgba(187, 153, 117, 0.3);
  border-radius: 6px;
  padding: 0;
}

/* Título secundario "Total del Carrito" y "Tu pedido" */
.val_cart_totals .cart_totals h2,
.val_checkout_order_review h3#order_review_heading {
  font-size: 22px;
  color: #32373c;
  padding: 22px 28px 18px;
  margin: 0;
  border-bottom: 0.8px solid rgba(187, 153, 117, 0.2);
}

/* Tabla de Subtotales y Tu pedido */
.val_cart_totals .cart_totals table.shop_table,
.val_checkout_order_review table.shop_table {
  border: none;
  padding: 0 28px;
  margin: 0;
  width: 100%;
}

.val_cart_totals .cart_totals table.shop_table th,
.val_cart_totals .cart_totals table.shop_table td,
.val_checkout_order_review table.shop_table th,
.val_checkout_order_review table.shop_table td {
  /* letter-spacing: 1px; */
  /* text-transform: uppercase; */
  color: #5a5a5a;
  background: transparent;
  border-bottom: 0.8px solid rgba(187, 153, 117, 0.3);
  padding: 16px 0;
}

/* Fila de Total final */
.val_cart_totals .cart_totals table.shop_table .order-total th,
.val_cart_totals .cart_totals table.shop_table .order-total td,
.val_checkout_order_review table.shop_table .order-total th,
.val_checkout_order_review table.shop_table .order-total td {
  border-top: 1px solid rgba(187, 153, 117, 0.5);
  border-bottom: none;
  font-size: 15px;
  font-weight: 700;
  color: #32373c;
  text-transform: none;
  letter-spacing: 0;
  padding: 20px 0;
  background-color: transparent !important;
}

.val_cart_totals .cart_totals table.shop_table .order-total .amount.button,
.val_cart_totals .cart_totals table.shop_table .order-total .amount,
.val_checkout_order_review table.shop_table .order-total .amount {
  color: #8c2b3f;
  font-size: 22px;
  font-weight: 700;
  font-family: Georgia, serif;
}

/* Espacio al final de la tabla de revisión de pedido */
.val_checkout_order_review table.shop_table {
  padding-bottom: 28px;
}

/* Contenedor del botón proceder al pago */
.val_cart_totals .cart_totals .wc-proceed-to-checkout {
  padding: 0 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Botón Proceder al Pago (Alta especificidad para sobreescribir Divi) */
html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals a.checkout-button,
html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals button.button.alt,
html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals input.button.alt,
.val_checkout_payment #payment #place_order {
  display: block !important;
  width: 100% !important;
  padding: 16px !important;
  background: #8c2b3f !important;
  /* var(--burgundy) */
  background-image: none !important;
  color: #f6eee0 !important;
  /* var(--cream) */
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  border: none !important;
  border-radius: 6px !important;
  /* var(--radius) */
  cursor: pointer !important;
  transition: left 0.5s ease, background-color 0.5s ease !important;
  /* var(--transition) */
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* Efecto de barrido (Shine) del mockup */
html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals a.checkout-button::before,
html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals button.button.alt::before,
html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals input.button.alt::before,
.val_checkout_payment #payment #place_order::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent) !important;
  transition: left 0.6s ease !important;
  z-index: 10 !important;
  /* Para que sea visible en Divi */
  pointer-events: none !important;
  opacity: 1;
}

html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals a.checkout-button:hover,
html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals a.checkout-button:focus-visible,
html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals button.button.alt:hover,
html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals button.button.alt:focus-visible,
html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals input.button.alt:hover,
.val_checkout_payment #payment #place_order:hover {
  background: #6e2233 !important;
  /* var(--burgundy-dark) */
  background-image: none !important;
  box-shadow: 0 4px 20px rgba(140, 43, 63, 0.3) !important;
}

html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals a.checkout-button:hover::before,
html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals a.checkout-button:focus-visible::before,
html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals button.button.alt:hover::before,
html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals button.button.alt:focus-visible::before,
html body.woocommerce-cart #page-container .et_pb_section .val_cart_totals input.button.alt:hover::before,
.val_checkout_payment #payment #place_order:hover::before {
  left: 100% !important;
}

.woocommerce-cart #main-header,
.woocommerce-checkout #main-header {
  background-color: rgba(15,0,0,0.8) !important;
}

.checkout-inline-error-message {
  color: var(--error);
  font-size: 14px;
  font-weight: 500;

}

/* Inputs & Textareas */
.val_cart_totals input,
.val_cart_totals textarea,
.val_cart_totals select,
.val_checkout_section input,
.val_checkout_section textarea,
.val_checkout_section select,
.select2-container--default .select2-selection--single {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--radius) !important;
    background: var(--white) !important;
    color: var(--text-dark) !important;
    outline: none !important;
    transition: var(--transition) !important;
    /* letter-spacing: 0.3px !important; */
    width: 100% !important;
    height: auto !important;
    box-shadow: none !important;
}


/* ----- Base Reset ----- */

.val_cart_totals *,
.val_checkout_section * {
    box-sizing: border-box;
}


/* ============================================
   FORMULARIOS — Facturación · Envío · Notas
   ============================================ */


.val_checkout_billing,
.val_checkout_shipping,
.val_checkout_notes {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 24px 28px 28px;
    margin-bottom: 28px;
}

.val_checkout_billing h3,
.val_checkout_shipping h3,
.val_checkout_notes h3 {
    font-size: 22px !important;
    color: var(--text-dark) !important;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 0.8px solid var(--border-light);
    display: flex;
    align-items: center;
}

/* Labels */

.val_cart_totals .form-row label,
.val_checkout_section .form-row label,
.val_checkout_billing label,
.val_checkout_shipping label,
.val_checkout_notes label {
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
    font-weight: normal;
}

.val_cart_totals .form-row label .required,
.val_checkout_section .form-row label .required {
    color: var(--burgundy);
    margin-left: 2px;
    text-decoration: none;
    border: none;
}


/* ============================================
   SELECT2 — Dropdown overrides
   ============================================ */

.val_cart_totals .select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-dark) !important;
    line-height: normal !important;
    padding-left: 0 !important;
    text-align: left;
}

.val_cart_totals .select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
    transform: translateY(-50%) !important;
}

.val_cart_totals .select2-container--default .select2-selection--single .select2-selection__arrow b,
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: static;
    margin: 0;
    transform: none;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--burgundy) !important;
    color: var(--cream) !important;
}


/* ============================================
   CHECKBOXES
   ============================================ */

.val_checkout_section .woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin-top: 6px;
}

.val_checkout_section .woocommerce-form__label-for-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--burgundy);
    margin-top: 1px;
    flex-shrink: 0;
    cursor: pointer;
}

.val_checkout_section .woocommerce-form__label-for-checkbox span {
    font-size: 16px;
    letter-spacing: 0.3px;
    text-transform: none;
    /* color: var(--text-mid); */
    cursor: pointer;
}

.woocommerce .val_cart_totals button[type="submit"] {
    background-color: var(--burgundy) !important;
    color: var(--cream) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: none !important;
    padding: 5px 40px !important;
}

.woocommerce .val_cart_totals button[type="submit"]:hover {
    background-color: var(--burgundy-dark) !important;
    color: var(--cream) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.woocommerce .val_cart_totals button[type="submit"]::after {
    font-size: 25px;
    line-height: 1.2em;
}