/*
Theme Name: Angro Child
Theme URI: https://angro.modeltheme.com/
Template: angro
Author: ModelTheme
Author URI: http://modeltheme.com/
Description: WooCommerce B2B & Wholesale Theme
Version: 1.6.1
Text Domain: angro
Tags: custom-header, custom-menu, featured-images, post-formats, sticky-post
*/
/* Theme customization starts here
------------------------------------------------------- */
.fa-search::before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
}


/* =============================================================================
   WooCommerce Blocks — offlinecc checkout payment fields
   Theme: Angro Child
   Scope: body.woocommerce-checkout — no rules bleed outside checkout pages.

   Structure
   ─────────
   1. Shared tokens
   2. Payment method wrapper
   3. Radio control — outer box & option row
   4. Label group (fixes "rd" truncation bug)
   5. Accordion content (expanded card-fields area)
   6. offlinecc field layout — card number / expiry / CVC
   7. Labels & inputs
   8. Focus, placeholder & required-star polish
   9. Mobile (≤ 768 px)
   ============================================================================= */

/* 1. Shared tokens
   Custom properties keep all repeated values in one place.
   --------------------------------------------------------------------------- */
body.woocommerce-checkout {
    --chk-border      : #222222;
    --chk-border-soft : #dedede;
    --chk-text        : #222222;
    --chk-text-muted  : #9a9a9a;
    --chk-bg          : #ffffff;
    --chk-radius      : 4px;
    --chk-gap         : 28px;
    --chk-gap-half    : calc( var( --chk-gap ) / 2 );
    --chk-px          : 18px;
    --chk-label-size  : 13px;
    --chk-input-h     : 43px;
}

/* 2. Payment method wrapper
   Clears Angro's float-based column grid and gives the block a clean canvas.
   --------------------------------------------------------------------------- */
body.woocommerce-checkout #payment-method,
body.woocommerce-checkout .wc-block-checkout__payment-method {
    display       : block;
    width         : 100%;
    clear         : both;
    margin-bottom : 28px;
}

/* 3. Radio control — outer box & option row
   --------------------------------------------------------------------------- */

/* Outer bordered card.
   overflow:visible (not hidden) — hidden was clipping the accordion content
   on mobile when WooCommerce Blocks' JS set a pixel height slightly shorter
   than the actual expanded content, pushing expiry/CVC outside the box. */
body.woocommerce-checkout #payment-method
    .wc-block-components-radio-control {
    border        : 1px solid var( --chk-border );
    border-radius : var( --chk-radius );
    background    : var( --chk-bg );
    padding       : 0;
    overflow      : visible;
}

/* Strip WooCommerce Blocks' default accordion-option spacing */
body.woocommerce-checkout #payment-method
    .wc-block-components-radio-control-accordion-option {
    border  : none !important;
    margin  : 0    !important;
    padding : 0    !important;
}

/* Option row (the radio + label bar) */
body.woocommerce-checkout #payment-method
    .wc-block-components-radio-control__option {
    display        : flex        !important;
    align-items    : center      !important;
    min-height     : 48px;
    padding        : 13px var( --chk-px ) !important;
    margin         : 0           !important;
    box-sizing     : border-box;
    position       : relative;
    background     : var( --chk-bg );
}

/* Radio input — neutralise theme absolute-positioning */
body.woocommerce-checkout #payment-method
    .wc-block-components-radio-control__input {
    position  : static !important;
    flex      : 0 0 auto;
    width     : 16px   !important;
    height    : 16px   !important;
    margin    : 0 10px 0 0 !important;
}

/* 4. Label group — fixes the "Card" → "rd" truncation bug
   The Angro theme applies overflow:hidden + a negative text-indent
   to radio labels (intended for styled radio buttons). These overrides
   restore full visibility without touching elements outside this scope.
   --------------------------------------------------------------------------- */
body.woocommerce-checkout #payment-method .wc-block-components-radio-control__option-layout,
body.woocommerce-checkout #payment-method .wc-block-components-radio-control__label-group,
body.woocommerce-checkout #payment-method .wc-block-components-radio-control__label,
body.woocommerce-checkout #payment-method .wc-block-components-payment-method-label {
    display      : inline-flex !important;
    align-items  : center;
    overflow     : visible     !important;
    white-space  : nowrap      !important;
    text-indent  : 0           !important;
    clip         : auto        !important;
    position     : static      !important;
    width        : auto        !important;
    max-width    : none        !important;
    min-width    : 0           !important;
    font-size    : 14px;
    line-height  : 20px;
    font-weight  : 600;
    color        : var( --chk-text );
}

/* 5. Accordion content (expanded card-fields area)
   height:auto + max-height:none override any inline px height that
   WooCommerce Blocks' JS injects, preventing content clipping on mobile.
   --------------------------------------------------------------------------- */
body.woocommerce-checkout #payment-method
    .wc-block-components-radio-control-accordion-content {
    display     : block   !important;
    overflow    : visible !important;
    height      : auto    !important;
    max-height  : none    !important;
    margin      : 0       !important;
    padding     : 0 var( --chk-px ) 20px !important;
    background  : var( --chk-bg );
}

/* 6. offlinecc field layout
   Card number spans full width; expiry and CVC sit side by side.
   --------------------------------------------------------------------------- */

/* Field wrapper — flex row with consistent gutters */
body.woocommerce-checkout #payment-method
    .offlinecc-payment-fields {
    display     : flex;
    flex-wrap   : wrap;
    gap         : 16px var( --chk-gap );
    width       : 100%;
    clear       : both;
    padding-top : 2px;
    box-sizing  : border-box;
}

/* Neutralise Angro / legacy WooCommerce float behaviour on .form-row */
body.woocommerce-checkout #payment-method
    .offlinecc-payment-fields .form-row {
    float      : none  !important;
    clear      : none  !important;
    margin     : 0     !important;
    padding    : 0     !important;
    display    : block !important;
    box-sizing : border-box;
}

/* Neutralise theme absolute-positioning of <p> elements inside fields */
body.woocommerce-checkout #payment-method
    .offlinecc-payment-fields p {
    position : static !important;
}

/* Card number — full width */
body.woocommerce-checkout #payment-method
    .offlinecc-payment-fields .form-row-wide {
    flex  : 0 0 100%;
    width : 100% !important;
}

/* Expiry & CVC — equal halves with a single gutter */
body.woocommerce-checkout #payment-method
    .offlinecc-payment-fields .form-row-first,
body.woocommerce-checkout #payment-method
    .offlinecc-payment-fields .form-row-last {
    flex  : 0 0 calc( 50% - var( --chk-gap-half ) );
    width : calc( 50% - var( --chk-gap-half ) ) !important;
}

/* 7. Labels & inputs
   --------------------------------------------------------------------------- */
body.woocommerce-checkout #payment-method
    .offlinecc-payment-fields label {
    display     : block   !important;
    position    : static  !important;
    margin      : 0 0 7px !important;
    padding     : 0       !important;
    font-size   : var( --chk-label-size );
    line-height : 18px;
    font-weight : 600;
    color       : var( --chk-text );
}

body.woocommerce-checkout #payment-method
    .offlinecc-payment-fields input.input-text {
    width         : 100%                              !important;
    height        : var( --chk-input-h )              !important;
    min-height    : var( --chk-input-h )              !important;
    box-sizing    : border-box;
    padding       : 10px 12px                         !important;
    border        : 1px solid var( --chk-border-soft ) !important;
    border-radius : 2px                               !important;
    background    : var( --chk-bg )                   !important;
    font-size     : 14px;
    line-height   : 21px;
    color         : var( --chk-text );
    box-shadow    : none                              !important;
    transition    : border-color .15s ease, box-shadow .15s ease;
}

/* 8. Focus, placeholder & required-star polish
   --------------------------------------------------------------------------- */
body.woocommerce-checkout #payment-method
    .offlinecc-payment-fields input.input-text:focus {
    border-color : var( --chk-border )            !important;
    box-shadow   : 0 0 0 1px var( --chk-border )  !important;
    outline      : none                            !important;
}

body.woocommerce-checkout #payment-method
    .offlinecc-payment-fields input.input-text::placeholder {
    color   : var( --chk-text-muted );
    opacity : 1;
}

/* Required star — hidden by Angro's asterisk-suppression rule */
body.woocommerce-checkout #payment-method
    .offlinecc-payment-fields .required {
    color      : var( --chk-text ) !important;
    visibility : visible           !important;
}

/* 9. Mobile (≤ 768 px)
   Tighten horizontal padding; expiry and CVC stack to full width.
   --------------------------------------------------------------------------- */
@media only screen and ( max-width: 768px ) {

    body.woocommerce-checkout {
        --chk-px  : 14px;
        --chk-gap : 14px;
    }

    body.woocommerce-checkout #payment-method
        .offlinecc-payment-fields .form-row-first,
    body.woocommerce-checkout #payment-method
        .offlinecc-payment-fields .form-row-last {
        flex  : 0 0 100%;
        width : 100% !important;
    }
}


/* -----------------------------------------------------------------------
   Footer widget title toggle arrow — mobile
   The parent theme declares a Flaticon glyph for this element which
   does not render reliably (glyph absent from this font subset, or
   overridden by upstream rules). A pure CSS chevron is used instead —
   no icon font dependency, immune to plugin updates.
   -------------------------------------------------------------------- */
@media only screen and ( max-width: 767px ) {

    .footer-row-1 .widget-title::after {
        font-family   : inherit                            !important;
        content       : ''                                 !important;
        display       : block                              !important;
        width         : 7px                               !important;
        height        : 7px                               !important;
        border-right  : 2px solid #fff                    !important;
        border-bottom : 2px solid #fff                    !important;
        transform     : rotate( 45deg ) translateY( -3px ) !important;
        position      : absolute                           !important;
        top           : 50%                               !important;
        right         : 8px                               !important;
        background    : none                              !important;
        font-size     : inherit                           !important;
    }
}
/* -----------------------------------------------------------------------
   Fix FA5 solid icons rendered via .glyph-icon throughout the site.
   The Angro theme's .glyph-icon class sets font-family to Flaticon,
   which has no FA5 code points — causing hex boxes instead of glyphs.
   Covers: homepage category chips, nav category menu, and any other
   shortcode that uses .fas/.far/.fab alongside .glyph-icon.
   --------------------------------------------------------------------- */
.fas.glyph-icon,
.single-category .fas.glyph-icon,
.mt-categories-content .fas.glyph-icon {
    font-family : "Font Awesome 5 Free"  !important;
    font-weight : 900                    !important;
    font-style  : normal                 !important;
}

.far.glyph-icon {
    font-family : "Font Awesome 5 Free"  !important;
    font-weight : 400                    !important;
    font-style  : normal                 !important;
}

.fab.glyph-icon {
    font-family : "Font Awesome 5 Brands" !important;
    font-weight : 400                     !important;
    font-style  : normal                  !important;
}

/* =========================================================
   Mobile fixes — bottom nav + page-width overflow
   ========================================================= */
@media (max-width: 992px) {

    /* Kill sideways page shift globally */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* --- Fixed bottom nav: 4 items share the width evenly --- */
    .mobile_footer_icon_wrapper {
        display: flex !important;
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
    }
    .mobile_footer_icon_wrapper > .col-md-3 {
        flex: 1 1 0 !important;
        min-width: 0 !important;       /* lets items shrink below content width */
        width: auto !important;         /* override Bootstrap col-md-3 fixed width */
        float: none !important;
        padding: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    .mobile_footer_icon_wrapper > .col-md-3 a {
        display: block !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 6px 2px !important;
    }
    .mobile_footer_icon_wrapper > .col-md-3 a i {
        display: block !important;
        margin: 0 auto 2px !important;
        font-size: 18px !important;
    }

    /* --- Hero: inline 100px/48px <p> text overflows narrow screens.
       The theme caps h1–h6 on mobile but not <p>, so cap them here. --- */
    .header-main .wpb_text_column p {
        font-size: clamp(22px, 9vw, 48px) !important;
        line-height: 1.15 !important;
        letter-spacing: 1px !important;
        word-break: break-word !important;
    }
    /* First block (site name + subtitle) a bit smaller */
    .header-main .wpb_text_column:first-of-type p {
        font-size: clamp(16px, 6vw, 28px) !important;
        letter-spacing: 2px !important;
    }

    /* "Oferta de Verano" summer-sale banner (also inline 100px) */
    .vc_custom_1626084502255 h2 {
        font-size: clamp(28px, 10vw, 48px) !important;
        line-height: 1.1 !important;
    }
}



/* Restore the FontAwesome icon on the fixed-search submit button.
   A generic input[type="submit"]{font-family:Poppins} rule was
   overriding the icon font, so the glyph rendered as a tofu box. */
.fixed-search-inside .search-form .search-submit,
.modeltheme-search .search-submit {
  font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
  font-weight: 900; /* FA5/6 solid icons need weight 900 to render */
}

.wp-block-social-links .wp-social-link-gravatar { display: none !important; }

/* Move Chiripa cookie banner higher on mobile/tablet */
/* Chiripa cookie banner — mobile/tablet (Angro breakpoint 992px) */
@media (max-width: 992px) {

    /* Pin to both edges: banner can never exceed the viewport,
       regardless of how the inline CSS positions/sizes it */
    #cht-cookie {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: 100vw !important;
        transform: none !important;
        box-sizing: border-box !important;
        bottom: 45px !important;
        z-index: 999999 !important;
        /* Cap height so prefs panel never runs off-screen */
        max-height: calc(100vh - 110px) !important;
        max-height: calc(100dvh - 110px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    #cht-cookie-fab {
        left: 12px !important;
        bottom: 65px !important;
        width: 40px !important;
        height: 40px !important;
        z-index: 999999 !important;
    }

    /* Inner containers must never exceed the banner */
    #cht-cookie .cht-cookie-inner,
    #cht-cookie .cht-cookie-prefs {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #cht-cookie .cht-cookie-inner {
        padding: 18px 18px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }

    #cht-cookie .cht-cookie-text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* The overflow culprit: stop nowrap text stretching the layout */
    #cht-cookie .cht-cookie-actions {
        width: 100% !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    #cht-cookie .cht-cookie-actions a,
    #cht-cookie .cht-cookie-actions button {
        white-space: normal !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #cht-cookie .cht-btn-accept,
    #cht-cookie .cht-btn-reject {
        flex: 1 1 auto !important;
        text-align: center !important;
    }

    #cht-cookie .cht-cookie-prefs {
        padding: 4px 18px 20px !important;
    }

    /* Toggle rows: text shrinks, toggle never gets clipped */
    #cht-cookie .cht-pref-row {
        min-width: 0 !important;
    }
    #cht-cookie .cht-pref-row > *:first-child {
        min-width: 0 !important;
    }
}
/* Prevent site-wide horizontal overflow on mobile */
@media (max-width: 992px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* css fix product hoover
 * 
 * /* Fix: mini-cart product thumbnails going dark on hover */
.widget_shopping_cart .woocommerce-mini-cart-item a:hover img,
.widget_shopping_cart_content .woocommerce-mini-cart-item a:hover img,
.header_mini_cart .woocommerce-mini-cart-item a img {
	opacity: 1 !important;
	filter: none !important;
	background: transparent !important;
}
.widget_shopping_cart .woocommerce-mini-cart-item a::before,
.widget_shopping_cart .woocommerce-mini-cart-item a::after {
	content: none !important;
}
/* Wishlist en la cuadrícula: solo corazón, sin texto */
.products .yith-wcwl-add-to-wishlist-button__label {
	display: none;
}
.products .yith-wcwl-add-to-wishlist-button {
	gap: 0;
}
.products .yith-wcwl-add-to-wishlist-button .yith-wcwl-icon-svg {
	width: 22px;
	height: 22px;
}

.wc-block-cart-item__wrap .wc-block-components-product-details {
	display: none;
}

/* Carrito (bloque) en móvil: la fila es CSS grid — permitir que encoja */
@media (max-width: 700px) {
	.wp-block-woocommerce-cart .wc-block-cart-items,
	.wp-block-woocommerce-cart .wc-block-cart-items__row {
		width: 100% !important;
		max-width: 100% !important;
	}
	.wc-block-cart-items__row {
		grid-template-columns: 64px minmax(0, 1fr) auto !important;
	}
	/* Clave: los hijos de grid no encogen sin esto */
	.wc-block-cart-items__row > td,
	.wc-block-cart-item__product,
	.wc-block-cart-item__wrap {
		min-width: 0 !important;
	}
	.wc-block-cart-item__total {
		white-space: nowrap;
	}
	.wc-block-cart-item__wrap .wc-block-components-product-details {
		font-size: 12px;
		line-height: 1.4;
	}
}
/* Ocultar metadatos/descripción del producto en el carrito */
.wc-block-cart-item__wrap .wc-block-components-product-metadata {
	display: none;
}

/* Ocultar metadatos del producto en carrito y checkout */
.wc-block-components-product-metadata {
	display: none;
}

.wc-block-cart-item__wrap .wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
	display: none;
}

/* Checkout: ocultar precio unitario duplicado bajo el nombre (el total va a la derecha) */
.wc-block-components-order-summary-item__description .wc-block-cart-item__prices {
	display: none;
}

/* Checkout móvil: el resumen se duplica (slot/fill) — ocultar la copia dentro del formulario */
@media (max-width: 700px) {
	.wc-block-checkout__form .wp-block-woocommerce-checkout-order-summary-block,
	form.wc-block-checkout__form .checkout-order-summary-block-fill-wrapper {
		display: none;
	}
}

.price_slider .ui-slider-handle {
	width: 16px;
	height: 16px;
}
.price_slider .ui-slider-handle:last-child {
	z-index: 3;
}

/* Price slider: ensure handles receive pointer events */
.widget_price_filter .price_slider {
	position: relative;
	z-index: 5;
}
.widget_price_filter .ui-slider-handle {
	z-index: 6 !important;
	pointer-events: auto !important;
	width: 16px;
	height: 16px;
	top: -6px;
}
.widget_price_filter .widget-title::before,
.sidebar-content .widget::before {
	pointer-events: none;
}

 /* Vista de lista: descripción compacta con separadores */


ul.products li.product .product-description .desc-sep {
	color: #f56c48;
	margin: 0 2px;
	font-weight: 600;
}


ul.products li.product .product-description br {
	display: none;
}
ul.products li.product .product-description {
	line-height: 1.7;
}

.product-description .chtx-specs {
	list-style: none;
	margin: 0;
	padding: 0;
}
.product-description .chtx-specs li {
	padding: 3px 0;
	border-bottom: 1px dashed #eee;
	font-size: 14px;
}

.angro-shop-sort-group img[src=""],
.angro-shop-sort-group img:not([src]),
.gridlist-toggle img {
	display: none;
}

/* Breadcrumb: ocultar el "Page N" pegado tras Tienda */
.angro-breadcrumbs .breadcrumb {
	font-size: 0;
}
.angro-breadcrumbs .breadcrumb li {
	font-size: 14px;
}