/*
 Theme Name:   Yungannabis
 Theme URI:    https://fundacionyungannabis.org.ar
 Description:  Child theme de Astra para Fundación Yungannabis
 Author:       OxxO Digital
 Author URI:   https://oxxo.digital
 Template:     astra
 Version:      3.7.3
 Text Domain:  yungannabis
*/

/* ═══════════════════════════════════════════════════════════════
   VARIABLES
   ═══════════════════════════════════════════════════════════════ */
:root {
    --yng-primary: #69CCB4;
    --yng-primary-dark: #4fb9a3;
    --yng-primary-accessible: #3e796b; /* WCAG AA contrast on white (5.06:1) */
    --yng-secondary: #4a5568; /* WCAG AA: 7.2:1 on white (was #768394 = 3.1:1) */
    --yng-dark: #030507;
    --yng-darker: #020304;
    --yng-gray-dark: #353c46;
    --yng-light: #f3f5f7;
    --yng-lighter: #f9fafb;
    --yng-brown: #73340B;
    --yng-whatsapp: #128C3C; /* WCAG AA: 4.6:1 on white */
    --yng-whatsapp-hover: #0e7030;
    --yng-white: #ffffff;
    --yng-border: #e2e6ea;
    --yng-shadow: 0 2px 8px rgba(3, 5, 7, 0.08);
    --yng-shadow-hover: 0 8px 24px rgba(3, 5, 7, 0.14);
    --yng-shadow-lg: 0 12px 32px rgba(3, 5, 7, 0.18);
    --yng-error: #C43A3A;
    --yng-radius: 12px;
    --yng-radius-sm: 8px;
    --yng-transition: 0.25s ease;

    /* Typography tokens */
    --yng-font-display: 'Montserrat', sans-serif;
    --yng-font-body: 'Open Sans', -apple-system, sans-serif;

    /* Status colors */
    --yng-success: #2D5A27;
    --yng-gold: #C4A35A;

    /* A11y focus ring (two-tone: white inner + teal outer) */
    --yng-focus-ring: 0 0 0 2px var(--yng-white), 0 0 0 4px var(--yng-primary-accessible);

    /* Easing */
    --yng-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

    /* Glassmorphism & glow */
    --yng-primary-glow: rgba(105, 204, 180, 0.12);
    --yng-glass-light: rgba(255, 255, 255, 0.12);
    --yng-glass-border: rgba(255, 255, 255, 0.15);
}

/* Nav FOUC prevention — fade in after JS injects items, with CSS-only fallback */
.main-header-menu { opacity: 0; transition: opacity 0.15s ease; animation: yng-nav-fallback 0s 0.5s forwards; }
.yng-nav-ready .main-header-menu { opacity: 1; animation: none; }
@keyframes yng-nav-fallback { to { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════
   BASE / GLOBAL
   ═══════════════════════════════════════════════════════════════ */
html {
    scroll-behavior: smooth;
}

body {
    color: var(--yng-dark);
    background: var(--yng-lighter);
    overflow-x: hidden;
}

#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: var(--yng-primary-accessible);
    transition: color var(--yng-transition);
}

a:hover {
    color: var(--yng-brown);
}

/* ═══════════════════════════════════════════════════════════════
   SKIP LINK (A11y)
   ═══════════════════════════════════════════════════════════════ */
.yng-skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 100000;
    background: var(--yng-dark);
    color: var(--yng-white);
    padding: 12px 24px;
    border-radius: 0 0 var(--yng-radius-sm) var(--yng-radius-sm);
    font-weight: 600;
    text-decoration: none;
}

.yng-skip-link:focus {
    top: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MEMBERSHIP PAGE — remove Astra/WC bottom whitespace
   ═══════════════════════════════════════════════════════════════ */
#planes {
    scroll-margin-top: 80px;
}

/* Planes section — full-width breakout + seamless transition from guide */
.woocommerce-page .yng-planes {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    max-width: 100vw;
    margin-top: 0;
    padding-top: 3rem;
}

/* Spacing between guide and planes */
.yng-guide.yng-section--alt {
    margin-bottom: 3rem;
    padding-bottom: 3rem;
}

/* More breathing room between planes and dispensario */
.woocommerce-page .yng-planes + .yng-section,
.woocommerce-page .yng-planes ~ #yng-productos {
    padding-top: 3rem;
}

.page-template-default .yng-planes:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Astra entry-content generates trailing padding on shortcode pages */
body.page .entry-content:has(.yng-planes) {
    padding-bottom: 0;
}

body.page .entry-content:has(.yng-planes) > .woocommerce:empty,
body.page .entry-content:has(.yng-planes) > p:empty {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER (matching original: dark navbar, white text, clean edge)
   ═══════════════════════════════════════════════════════════════ */
.ast-primary-header-bar {
    background-color: var(--yng-dark);
    border-bottom: none;
    overflow: hidden;
}

/* Hide broken custom-logo image — we use our own SVG logo */
.ast-site-identity .custom-logo-link {
    display: none !important;
}

/* SVG logo in header — full brand lockup (leaf + wordmark + subtitle) */
.ast-site-identity .yng-logo-svg {
    height: 40px;
    width: auto;
    max-width: 160px;
    filter: brightness(0) invert(1);
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

/* Hide WP site title text — logo SVG already contains wordmark.
   sr-only pattern preserves SEO anchor text + screen reader access. */
.ast-site-identity .site-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Site title link: keep white for a11y (screen readers may show it) */
.ast-site-identity .site-title a,
.ast-site-identity .site-title a:hover,
.ast-header-html-inner,
.ast-builder-layout-element .ast-site-title-wrap a {
    color: var(--yng-white) !important;
}

/* Nav links: white by default */
.ast-builder-menu .menu-item > .menu-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Nav CTA: "Asociarme" / "Renovar" highlighted button */
.yng-nav-cta {
    display: flex !important;
    align-items: center !important;
    padding: 0 8px !important;
}

.yng-nav-cta .yng-nav-cta__link {
    background: var(--yng-primary-accessible) !important;
    color: var(--yng-white) !important;
    border-radius: var(--yng-radius-sm);
    padding: 8px 20px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    height: auto !important;
    align-self: center !important;
    transition: all var(--yng-transition);
}

.yng-nav-cta .yng-nav-cta__link:hover {
    background: var(--yng-primary) !important;
    color: var(--yng-dark) !important;
}

/* Nav desktop: son 9 items (4 del menu + carrito + 3 inyectados por JS + el CTA) y el ancho
   pedido superaba el que da el encabezado, asi que el boton "Asociarme" caia a una segunda linea.
   Se achica el padding horizontal SOLO de los items de texto; el boton conserva el suyo.
   Medido 23/08/2026 @1280px: pedia 1062px contra 1007 disponibles; con 10px pide 966 (41 de margen).
   Debajo de ~1200px no entra ni con padding 0 -> ese tramo va por menu hamburguesa
   (breakpoint de Astra subido de 921 a 1200). */
/* >=1200px: alcanza con achicar el padding. Medido: pide 966 y hay ~967. */
@media (min-width: 1200px) {
    .ast-builder-menu .main-header-menu > .menu-item:not(.yng-nav-cta) > .menu-link {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* 1024-1199px: el encabezado da ~791-966px. Con padding 4 y 13px de tipografia pide 734. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .ast-builder-menu .main-header-menu > .menu-item:not(.yng-nav-cta) > .menu-link {
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 13px !important;
    }
    .yng-nav-cta .yng-nav-cta__link {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 13px !important;
    }
}

/* 922-1023px: ultimo tramo antes del menu hamburguesa (breakpoint de Astra = 921). Pide 654. */
@media (min-width: 922px) and (max-width: 1023px) {
    .ast-builder-menu .main-header-menu > .menu-item:not(.yng-nav-cta) > .menu-link {
        padding-left: 2px !important;
        padding-right: 2px !important;
        font-size: 12px !important;
    }
    .yng-nav-cta .yng-nav-cta__link {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 12px !important;
    }
}

/* Nav links: teal on hover and active */
.ast-builder-menu .menu-item > .menu-link:hover,
.ast-builder-menu .current-menu-item > .menu-link {
    color: var(--yng-primary) !important;
}

/* Active page indicator — subtle underline */
.ast-builder-menu .current-menu-item > .menu-link {
    position: relative;
}

.ast-builder-menu .current-menu-item > .menu-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--yng-primary);
    border-radius: 1px;
}

/* ───────────────────────────────────────────────────────────────
   MOBILE MENU FIX — Astra's mobile menu renders on a white panel, but
   the nav links (and even the <a>'s own background) inherit the desktop
   header's near-white text/background → white-on-white, invisible.
   Paint the mobile menu with the dark brand background so the existing
   light links are readable. Covers BOTH Astra mobile layouts the theme
   targets: the off-canvas popup (#ast-mobile-popup / .ast-mobile-popup-
   content) and the in-header dropdown (.ast-mobile-header-content /
   #ast-hf-mobile-menu). All selectors are mobile-only containers, so
   the desktop header is untouched. ─────────────────────────────────── */
#ast-mobile-popup,
#ast-mobile-popup .ast-mobile-popup-drawer,
#ast-mobile-popup .ast-mobile-popup-content,
#ast-mobile-popup .ast-mobile-popup-inner,
#ast-mobile-popup .main-header-menu,
.ast-mobile-popup-content .main-header-menu,
.ast-mobile-header-content,
.ast-mobile-header-content .main-header-menu,
.ast-mobile-header-content ul.ast-nav-menu,
#ast-hf-mobile-menu,
#ast-hf-mobile-menu .main-header-menu,
#ast-hf-mobile-menu ul.ast-nav-menu,
.ast-builder-menu-mobile .main-header-menu {
    background-color: var(--yng-dark) !important;
}

#ast-mobile-popup .menu-link,
#ast-mobile-popup .menu-item > a,
.ast-mobile-header-content .menu-link,
.ast-mobile-header-content .menu-item > a,
#ast-hf-mobile-menu .menu-link,
#ast-hf-mobile-menu .menu-item > a,
.ast-builder-menu-mobile .menu-link {
    color: rgba(255, 255, 255, 0.92) !important;
    background-color: transparent !important;
}

#ast-mobile-popup .menu-link:hover,
#ast-mobile-popup .current-menu-item > a,
.ast-mobile-header-content .menu-link:hover,
.ast-mobile-header-content .current-menu-item > a,
#ast-hf-mobile-menu .menu-link:hover,
#ast-hf-mobile-menu .current-menu-item > a {
    color: var(--yng-primary) !important;
}

/* Row dividers + expand arrows + close (X) icon legible on the dark panel */
.ast-mobile-header-content .menu-item,
#ast-hf-mobile-menu .menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ast-mobile-header-content .ast-menu-toggle,
#ast-hf-mobile-menu .ast-menu-toggle,
#ast-mobile-popup .menu-toggle-close,
.ast-mobile-header-content .ahfb-svg-iconset,
#ast-mobile-popup .ahfb-svg-iconset {
    color: rgba(255, 255, 255, 0.92) !important;
    fill: rgba(255, 255, 255, 0.92) !important;
}

/* Remove Astra spacing above hero and side padding on shop */
.ast-separate-container #primary,
.ast-separate-container .ast-article-single,
.ast-plain-container #primary {
    margin-top: 0;
    padding-top: 0;
}

body.woocommerce #primary {
    padding-left: 0;
    padding-right: 0;
}

/* Hide Astra breadcrumb on shop/WooCommerce pages */
.woocommerce .ast-breadcrumbs-wrapper,
.woocommerce-page .ast-breadcrumbs-wrapper,
body.woocommerce .ast-breadcrumbs,
body.woocommerce-page .ast-breadcrumbs,
.woocommerce nav.woocommerce-breadcrumb,
.ast-above-header-bar .ast-breadcrumbs-wrapper {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION (matching original: photo bg + dark overlay)
   ═══════════════════════════════════════════════════════════════ */
.yng-hero {
    color: var(--yng-white);
    padding: 80px 24px;
    margin: 0 0 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 460px;
    display: flex;
    align-items: center;
    /* Break out of Astra content container for full-width */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Background image layer with gradient fallback */
.yng-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        url('images/hero-bg.jpg') center / cover no-repeat,
        linear-gradient(135deg, #0a2a1f 0%, #1a4d35 50%, #0d3525 100%);
    z-index: 0;
}

/* Dark overlay (70% opacity, matching original) */
.yng-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--yng-dark);
    opacity: 0.7;
    z-index: 1;
}

.yng-hero__inner {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.yng-hero__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--yng-white);
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.yng-hero__subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 28px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.yng-hero__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.yng-hero__btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: var(--yng-radius-sm);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all var(--yng-transition);
    cursor: pointer;
}

.yng-hero__btn--primary {
    background: var(--yng-primary-accessible);
    color: var(--yng-white);
}

.yng-hero__btn--primary:hover {
    background: var(--yng-brown);
    color: var(--yng-white);
    box-shadow: 0 4px 12px rgba(115, 52, 11, 0.4);
}

@media (hover: hover) {
    .yng-hero__btn--primary:hover {
        transform: translateY(-2px);
    }
}

.yng-hero__btn--secondary {
    background: rgba(255, 255, 255, 0.15);
    color: var(--yng-white);
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.yng-hero__btn--secondary:hover {
    border-color: var(--yng-primary);
    color: var(--yng-primary);
}

/* Hero compact variant for logged-in users */
.yng-hero--compact {
    min-height: 280px;
    padding: 48px 24px;
}

/* Membership nudge strip (below products, replaces full planes) */
.yng-membership-nudge {
    background: linear-gradient(135deg, var(--yng-dark) 0%, #1a4d35 100%);
    color: var(--yng-white);
    padding: 1.5rem 2rem;
    text-align: center;
    margin: 2rem 0;
    border-radius: var(--yng-radius);
}

.yng-membership-nudge__text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.yng-membership-nudge__link {
    display: inline-block;
    background: var(--yng-primary-accessible);
    color: var(--yng-white);
    padding: 0.6rem 1.5rem;
    border-radius: var(--yng-radius-sm, 8px);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background var(--yng-transition);
}

.yng-membership-nudge__link:hover {
    background: var(--yng-brown);
    color: var(--yng-white);
}

/* Alternating section backgrounds (below products) */
.yng-section--alt {
    background: var(--yng-light, #f3f5f7);
    padding: 2rem 1.5rem;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    max-width: 100vw;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION TITLES
   ═══════════════════════════════════════════════════════════════ */
.yng-section {
    margin-bottom: 48px;
}

.yng-section__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--yng-dark);
    text-align: center;
    margin: 0 0 4px;
    position: relative;
    padding-bottom: 12px;
}

.yng-section__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: var(--yng-primary-accessible);
    border-radius: 2px;
}

.yng-section__subtitle {
    text-align: center;
    color: var(--yng-secondary);
    font-size: 0.95rem;
    margin: 0 0 24px;
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY FILTER PILLS
   ═══════════════════════════════════════════════════════════════ */
.yng-cat-filters {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 16px;
    margin: 0 auto 20px;
    max-width: 720px;
}

.yng-cat-filters__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: 1px solid var(--yng-border);
    border-radius: 20px;
    background: var(--yng-light);
    color: var(--yng-dark);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--yng-transition);
    white-space: nowrap;
}

.yng-cat-filters__pill:hover {
    border-color: var(--yng-primary-accessible);
    color: var(--yng-primary-accessible);
}

.yng-cat-filters__pill--active {
    background: var(--yng-primary-accessible);
    color: var(--yng-white);
    border-color: var(--yng-primary-accessible);
}

.yng-cat-filters__pill--active:hover {
    background: var(--yng-brown);
    border-color: var(--yng-brown);
    color: var(--yng-white);
}

.yng-cat-filters__pill:focus-visible {
    outline: none;
    box-shadow: var(--yng-focus-ring);
}

.yng-cat-filters__count {
    font-weight: 400;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .yng-cat-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 16px;
        mask-image: linear-gradient(to right, transparent 0, black 8px, black calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, black 8px, black calc(100% - 24px), transparent 100%);
    }

    .yng-cat-filters::-webkit-scrollbar {
        display: none;
    }
}

/* Compliance: precio bloqueado para no-socios (ficha + archivos) */
.yng-price-locked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--yng-primary-accessible, #3e796b);
    background: var(--yng-light, #f3f5f7);
    border: 1px solid var(--yng-border, #e2e6ea);
    border-radius: 8px;
    padding: 6px 12px;
}

/* ═══════════════════════════════════════════════════════════════
   TRUST BAR (compliance signals)
   ═══════════════════════════════════════════════════════════════ */
.yng-trust-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 auto 20px;
    max-width: 960px;
}

.yng-trust-bar__item {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--yng-primary-accessible);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--yng-lighter);
    padding: 8px 18px;
    border-radius: 24px;
    box-shadow:
        4px 4px 8px rgba(3, 5, 7, 0.06),
        -3px -3px 6px rgba(255, 255, 255, 0.8);
    transition: box-shadow var(--yng-transition);
}

.yng-trust-bar__icon-svg {
    flex-shrink: 0;
    color: var(--yng-primary);
    width: 18px;
    height: 18px;
    transition: transform var(--yng-transition);
}

.yng-trust-bar__item:hover .yng-trust-bar__icon-svg {
    transform: scale(1.15);
}

.yng-legal-notice {
    text-align: center;
    font-size: 0.75rem;
    color: var(--yng-secondary);
    max-width: 720px;
    margin: -8px auto 24px;
    padding: 0 16px;
    line-height: 1.5;
}

.yng-servicios__note {
    position: absolute;
    bottom: 1rem;
    left: 1.5rem;
    right: 1.5rem;
    display: block;
    font-size: 0.72rem;
    color: var(--yng-secondary);
    line-height: 1.4;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   VALUE PROPOSITION SECTION
   ═══════════════════════════════════════════════════════════════ */
/* Gradient mesh background container */
.yng-value-props {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto 32px;
    padding: 32px 24px;
    background: transparent;
    border-radius: var(--yng-radius);
    border: none;
    box-shadow: none;
    overflow: hidden;
}

/* Gradient mesh pseudo-element */
.yng-value-props::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 15% 50%, rgba(105, 204, 180, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 30%, rgba(196, 163, 90, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(105, 204, 180, 0.05) 0%, transparent 50%),
        var(--yng-lighter);
    z-index: 0;
    pointer-events: none;
}

/* Glassmorphism cards */
.yng-value-props__item {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 28px 16px 24px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(105, 204, 180, 0.18);
    border-radius: var(--yng-radius);
    box-shadow: 0 4px 16px rgba(3, 5, 7, 0.04);
    transition: transform var(--yng-transition), box-shadow var(--yng-transition);
}

/* Hover glow */
.yng-value-props__item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 40%, rgba(105, 204, 180, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.yng-value-props__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--yng-shadow-hover);
}

.yng-value-props__item:hover::before {
    opacity: 1;
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
    .yng-value-props__item {
        background: rgba(255, 255, 255, 0.92);
    }
}

/* SVG icon wrapper with bounce-in */
.yng-value-props__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: rgba(105, 204, 180, 0.1);
    color: var(--yng-primary-accessible);
    transition: background var(--yng-transition);
}

.yng-value-props__item:hover .yng-value-props__icon-wrap {
    background: rgba(105, 204, 180, 0.2);
}

.yng-value-props__icon-wrap svg {
    width: 28px;
    height: 28px;
}

/* Bounce-in animation for icons on scroll reveal */
@keyframes yngBounceIn {
    0%   { opacity: 0; transform: scale(0.3) rotate(-10deg); }
    50%  { opacity: 1; transform: scale(1.12) rotate(2deg); }
    70%  { transform: scale(0.95) rotate(-1deg); }
    100% { transform: scale(1) rotate(0); }
}

.yng-reveal-stagger--visible .yng-value-props__icon-wrap {
    animation: yngBounceIn 0.6s var(--yng-ease-spring) both;
}

.yng-value-props__item:nth-child(1) .yng-value-props__icon-wrap { animation-delay: 0.05s; }
.yng-value-props__item:nth-child(2) .yng-value-props__icon-wrap { animation-delay: 0.15s; }
.yng-value-props__item:nth-child(3) .yng-value-props__icon-wrap { animation-delay: 0.25s; }
.yng-value-props__item:nth-child(4) .yng-value-props__icon-wrap { animation-delay: 0.35s; }

.yng-value-props__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--yng-dark);
    margin: 0 0 4px;
}

.yng-value-props__text {
    font-size: 0.8rem;
    color: var(--yng-secondary);
    line-height: 1.4;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   DISCLAIMER (REPROCANN)
   ═══════════════════════════════════════════════════════════════ */
.yng-disclaimer {
    background: var(--yng-light);
    border-left: 4px solid var(--yng-primary);
    border-radius: var(--yng-radius-sm);
    padding: 12px 16px;
    margin: 0 auto 20px;
    max-width: 720px;
    font-size: 14px;
    color: var(--yng-dark);
}

/* Hide default WC shop page title (hero replaces it) */
.woocommerce-products-header__title.page-title {
    display: none;
}

/* Hide WC result count and ordering on shop (cleaner) */
.woocommerce-result-count,
.woocommerce-ordering {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT GRID
   ═══════════════════════════════════════════════════════════════ */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none; /* remove WC clearfix floats */
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARDS
   ═══════════════════════════════════════════════════════════════ */
.woocommerce ul.products li.product {
    background: var(--yng-white);
    border-radius: var(--yng-radius);
    box-shadow: var(--yng-shadow);
    padding: 0;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    overflow: hidden;
    transition: all var(--yng-transition);
    border: 1px solid var(--yng-border);
    display: flex;
    flex-direction: column;
}

/* Force summary wrap to fill remaining space for bottom-pinned buttons */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--yng-shadow-hover);
}

@media (hover: hover) {
    .woocommerce ul.products li.product:hover {
        transform: translateY(-4px);
    }
}

/* Product image */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-product-gallery img {
    border-radius: 0;
    margin: 0;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    background: var(--yng-light);
    transition: transform 0.4s var(--yng-ease-spring);
}

@media (hover: hover) {
    .woocommerce ul.products li.product:hover a img {
        transform: scale(1.05);
    }
}

/* Placeholder image styling — base */
.woocommerce ul.products li.product a img.woocommerce-placeholder,
.woocommerce-product-gallery__image--placeholder img,
.single-product .woocommerce-product-gallery img[src*="placeholder"] {
    background: linear-gradient(135deg, #0a1a15 0%, #0d2b22 40%, #153d30 100%) !important;
    opacity: 0.35;
}

/* Icon overlay on placeholder products */
.woocommerce ul.products li.product a:has(img.woocommerce-placeholder) {
    position: relative;
}

.woocommerce ul.products li.product a:has(img.woocommerce-placeholder)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    opacity: 0.3;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.8 8c.4.8.6 1.4.6 2 0 2.5-2.7 4.5-6 4.5S6.4 12.5 6.4 10c0-.6.2-1.2.5-2C4.1 8.8 2 10.4 2 12.5 2 15.5 6.5 18 12 18s10-2.5 10-5.5C22 10.4 20.2 8.8 17.8 8zM12 16c2.5 0 4.5-1.3 4.5-3s-2-3-4.5-3-4.5 1.3-4.5 3 2 3 4.5 3z'/%3E%3Cpath d='M12 3C8.7 3 6 5 6 7.5S8.7 12 12 12s6-2 6-4.5S15.3 3 12 3zm0 7.5c-2 0-3.5-1.1-3.5-2.5S10 5.5 12 5.5s3.5 1 3.5 2.5S14 10.5 12 10.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Category-specific placeholder gradients + icons */
.woocommerce ul.products li.product.product_cat-flores-secas a img.woocommerce-placeholder {
    background: linear-gradient(135deg, #0d2b1a 0%, #1a4d2e 50%, #2d7a4a 100%) !important;
}

.woocommerce ul.products li.product.product_cat-flores-secas a:has(img.woocommerce-placeholder)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.05 8.05a7 7 0 0 0 9.9 9.9l.2-.2a3 3 0 0 0-4.24-4.24l-.71.7a1 1 0 0 1-1.42-1.41l.71-.71a5 5 0 0 1 7.07 7.07l-.2.2A9 9 0 1 1 4.64 6.64l.2-.2a5 5 0 0 1 7.07 0 1 1 0 0 1-1.42 1.42 3 3 0 0 0-4.24 0l-.2.2z'/%3E%3C/svg%3E");
}

.woocommerce ul.products li.product.product_cat-fitopreparados a img.woocommerce-placeholder {
    background: linear-gradient(135deg, #3d2200 0%, #5a3600 50%, #7a4d0a 100%) !important;
}

.woocommerce ul.products li.product.product_cat-fitopreparados a:has(img.woocommerce-placeholder)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
}

.woocommerce ul.products li.product.product_cat-extractos a img.woocommerce-placeholder {
    background: linear-gradient(135deg, #0a2030 0%, #143850 50%, #1e5070 100%) !important;
}

.woocommerce ul.products li.product.product_cat-extractos a:has(img.woocommerce-placeholder)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2c-5.33 4.55-8 8.48-8 11.8 0 4.98 3.8 8.2 8 8.2s8-3.22 8-8.2c0-3.32-2.67-7.25-8-11.8zm0 18c-3.35 0-6-2.57-6-6.2 0-2.34 1.95-5.44 6-9.14 4.05 3.7 6 6.79 6 9.14 0 3.63-2.65 6.2-6 6.2z'/%3E%3C/svg%3E");
}

.woocommerce ul.products li.product.product_cat-semillas a img.woocommerce-placeholder {
    background: linear-gradient(135deg, #2a1f0a 0%, #4a3515 50%, #6b4f22 100%) !important;
}

.woocommerce ul.products li.product.product_cat-semillas a:has(img.woocommerce-placeholder)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20.5 3.5c-2.95 2.95-6.5 4-10 3.5.5 3.5 1.55 7.05 4.5 10 2.95-2.95 4-6.5 3.5-10 .5-.5 1-1 1.5-1.5l.5-.5-.5-.5-1.5 1.5z'/%3E%3Cpath d='M3.5 20.5c2.95-2.95 6.5-4 10-3.5-.5-3.5-1.55-7.05-4.5-10-2.95 2.95-4 6.5-3.5 10-.5.5-1 1-1.5 1.5l-.5.5.5.5 1.5-1.5z'/%3E%3C/svg%3E");
}

.woocommerce ul.products li.product.product_cat-servicios a img.woocommerce-placeholder {
    background: linear-gradient(135deg, #f0f2f5 0%, #e0e4e8 50%, #d0d5db 100%) !important;
    opacity: 0.5;
}

.woocommerce ul.products li.product.product_cat-servicios a:has(img.woocommerce-placeholder)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z'/%3E%3C/svg%3E");
}

/* Product info area */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
    padding: 0 16px 16px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 0 16px;
}

/* Category label above title */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .astra-shop-summary-wrap > .ast-woo-product-category {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--yng-secondary);
    background: var(--yng-light);
    padding: 3px 10px;
    border-radius: 20px;
    margin: 8px 16px 2px;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--yng-dark);
    margin: 8px 0;
    padding: 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}

/* Price */
.woocommerce ul.products li.product .price {
    color: var(--yng-dark);
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0 16px;
    margin-bottom: 12px;
}

/* Add to cart button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
    background: var(--yng-primary-accessible);
    color: var(--yng-white);
    border: none;
    border-radius: var(--yng-radius-sm);
    padding: 10px 24px;
    font-family: var(--yng-font-display);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    text-align: center;
    width: 100%;
    margin: auto 0 0;
    transition: background var(--yng-transition), box-shadow var(--yng-transition);
    text-transform: none;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
    background: var(--yng-brown);
    color: var(--yng-white);
    box-shadow: 0 4px 12px rgba(115, 52, 11, 0.3);
}

/* Membership grid: center when fewer items than columns */
#yng-membresias ul.products {
    justify-content: center;
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   MEMBERSHIP PRODUCT CARDS (special styling)
   ═══════════════════════════════════════════════════════════════ */
.woocommerce ul.products li.product.yng-is-membership {
    border: 2px solid var(--yng-primary-accessible);
    position: relative;
}

.woocommerce ul.products li.product.yng-is-membership::after {
    content: 'Membresía';
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--yng-primary-accessible);
    color: var(--yng-white);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 20px;
    z-index: 2;
}

.woocommerce ul.products li.product.yng-is-membership .button,
.woocommerce ul.products li.product.yng-is-membership a.button {
    background: var(--yng-dark);
}

.woocommerce ul.products li.product.yng-is-membership .button:hover,
.woocommerce ul.products li.product.yng-is-membership a.button:hover {
    background: var(--yng-brown);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.woocommerce .button,
.woocommerce a.button,
.ast-button,
button.ast-button {
    background-color: var(--yng-primary-accessible);
    border-color: var(--yng-primary-accessible);
    color: var(--yng-white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: var(--yng-radius-sm);
    transition: all var(--yng-transition);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.ast-button:hover,
button.ast-button:hover {
    background-color: var(--yng-brown);
    border-color: var(--yng-brown);
    color: var(--yng-white);
}

/* Alt button (checkout, cart) */
.woocommerce .button.alt,
.woocommerce a.button.alt {
    background: var(--yng-dark);
    border-color: var(--yng-dark);
}

.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover {
    background: var(--yng-brown);
    border-color: var(--yng-brown);
}

/* Login / register submit buttons rendered with the light mint primary
   (white-on-mint ≈ 1.9:1, fails WCAG AA). Force the accessible dark green
   used by every other CTA. Scoped to the account forms only. */
.woocommerce-account .woocommerce form.woocommerce-form-login button[name="login"],
.woocommerce-account .woocommerce form.woocommerce-form-register button[name="register"],
.woocommerce form.woocommerce-form-login button.button,
.woocommerce form.woocommerce-form-register button.button {
    background-color: var(--yng-primary-accessible) !important;
    border-color: var(--yng-primary-accessible) !important;
    color: var(--yng-white) !important;
}

.woocommerce-account .woocommerce form.woocommerce-form-login button[name="login"]:hover,
.woocommerce-account .woocommerce form.woocommerce-form-register button[name="register"]:hover,
.woocommerce form.woocommerce-form-login button.button:hover,
.woocommerce form.woocommerce-form-register button.button:hover {
    background-color: var(--yng-brown) !important;
    border-color: var(--yng-brown) !important;
    color: var(--yng-white) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE
   ═══════════════════════════════════════════════════════════════ */
.single-product .product .summary {
    padding: 20px;
}

.single-product .product .price {
    font-size: 1.5rem;
    color: var(--yng-dark);
    font-weight: 700;
}

.single-product .product .single_add_to_cart_button {
    padding: 14px 32px;
    font-size: 1rem;
}

/* Lock icon on single product button for non-members */
.yng-non-member.single-product .single_add_to_cart_button::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E") no-repeat center / contain;
    filter: brightness(0) invert(1);
}

.yng-membership-banner {
    background: var(--yng-light);
    border-left: 4px solid var(--yng-primary-accessible);
    border-radius: var(--yng-radius-sm);
    padding: 16px 20px;
    margin: 16px 0;
}

.yng-membership-banner p {
    margin: 0 0 8px;
    color: var(--yng-dark);
    font-size: 0.9rem;
}

.yng-membership-banner__hint {
    color: var(--yng-primary-accessible);
    font-weight: 600;
    font-size: 0.85rem;
    margin: 0 0 12px;
}

.yng-membership-banner .yng-hero__btn {
    display: inline-block;
    font-size: 0.85rem;
    padding: 10px 20px;
}

/* ═══════════════════════════════════════════════════════════════
   CART & CHECKOUT
   ═══════════════════════════════════════════════════════════════ */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
    max-width: 960px;
    margin: 0 auto;
}

.woocommerce table.cart td,
.woocommerce table.cart th {
    padding: 12px 16px;
}

/* ═══════════════════════════════════════════════════════════════
   MY ACCOUNT
   ═══════════════════════════════════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 10px 16px;
    border-radius: var(--yng-radius-sm);
    transition: background var(--yng-transition);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--yng-light);
    color: var(--yng-brown);
    border-left: 3px solid transparent;
    padding-left: 13px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--yng-light);
    color: var(--yng-primary-accessible);
    font-weight: 600;
    border-left: 3px solid var(--yng-primary-accessible);
    padding-left: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER (edge-to-edge, dark, no gaps)
   ═══════════════════════════════════════════════════════════════ */
/* Eliminate gap between last section (contact) and footer */
.ast-separate-container #primary,
.content-area.primary,
#primary {
    padding-bottom: 0;
    margin-bottom: 0;
}

.site-footer {
    background-color: var(--yng-dark);
    color: rgba(255, 255, 255, 0.85);
    padding: 0;
    margin-top: 0;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
}

/* Override Astra container constraints inside footer */
.site-footer .ast-container,
.site-below-footer-wrap .ast-container,
.site-footer .ast-builder-grid-row,
.site-footer .ast-row {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.site-below-footer-wrap {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.site-footer a {
    color: var(--yng-primary);
}

.site-footer a:hover {
    color: var(--yng-white);
}

.yng-footer {
    padding: 48px 24px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.yng-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 32px;
}

.yng-footer__col h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--yng-white);
    margin: 0 0 12px;
}

.yng-footer__col p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 8px;
}

.yng-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.yng-footer__col ul li {
    margin-bottom: 6px;
}

.yng-footer__col ul li a {
    font-size: 0.9rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
}

.yng-footer__col ul li {
    margin-bottom: 0;
}

.yng-footer__social {
    display: flex;
    gap: 12px;
    margin: 12px 0;
}

.yng-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--yng-primary);
    transition: all var(--yng-transition);
}

.yng-footer__social-link:hover {
    background: var(--yng-primary);
    color: var(--yng-white);
}

.yng-footer__social-link:focus-visible {
    outline: none;
    box-shadow: var(--yng-focus-ring);
}

.yng-footer__legal {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 12px !important;
    line-height: 1.5;
}

/* Astra copyright bar + below-footer — edge-to-edge dark */
.ast-footer-copyright,
.site-footer,
.site-below-footer-wrap {
    background: var(--yng-darker) !important;
    color: rgba(255, 255, 255, 0.4);
    border-radius: 0 !important;
    margin: 0;
    width: 100%;
}

.site-below-footer-wrap,
.site-below-footer-wrap .ast-builder-grid-row-container-inner,
.site-below-footer-wrap .ast-builder-footer-grid-columns {
    background: var(--yng-darker) !important;
    padding-top: 0;
    padding-bottom: 0;
}

.ast-footer-copyright {
    padding: 12px 24px;
    font-size: 0.75rem;
    text-align: center;
    border-radius: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
   WC NOTICES
   ═══════════════════════════════════════════════════════════════ */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--yng-primary);
    background: var(--yng-lighter);
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--yng-primary);
}

.woocommerce-error {
    border-top-color: #C43A3A;
}

/* ═══════════════════════════════════════════════════════════════
   FOCUS STATES (A11y)
   ═══════════════════════════════════════════════════════════════ */
.yng-hero__btn:focus-visible,
.woocommerce .button:focus-visible,
.woocommerce a.button:focus-visible,
.ast-button:focus-visible,
button.ast-button:focus-visible,
.yng-sidebar .yng-sidebar__item:focus-visible,
.yng-sidebar .yng-sidebar__subitem:focus-visible,
.yng-tier-chips__pill:focus-visible,
.yng-member-banner__btn:focus-visible,
.yng-member-banner__close:focus-visible,
.yng-back-to-top:focus-visible,
.yng-nav-cta__link:focus-visible,
.ast-builder-menu .menu-item > .menu-link:focus-visible,
.yng-contact__wa-btn:focus-visible,
.yng-servicios__cta:focus-visible,
.yng-wa-float:focus-visible,
.yng-membership-nudge__link:focus-visible,
.yng-promos-grid__item:focus-visible {
    outline: none;
    box-shadow: var(--yng-focus-ring);
}

@media print {
    .yng-wa-float,
    .yng-back-to-top {
        display: none !important;
    }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:focus-visible {
    outline: none;
    box-shadow: var(--yng-focus-ring);
    background: var(--yng-light);
}

/* ═══════════════════════════════════════════════════════════════
   DISCOUNT TEASER "Valor socio" (non-members)
   ═══════════════════════════════════════════════════════════════ */
.yng-discount-teaser {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--yng-primary-accessible);
    padding: 8px 14px;
    margin: 4px 16px 8px;
    line-height: 1.25;
    background: rgba(105, 204, 180, 0.14);
    border-radius: var(--yng-radius-sm);
    border-left: 3px solid var(--yng-primary-accessible);
    min-height: 2.4em;
}

/* Member price is the conversion hook — give it its own line, large + bold. */
.yng-discount-teaser strong {
    display: block;
    margin-top: 2px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--yng-primary-accessible);
}

/* ═══════════════════════════════════════════════════════════════
   DISCOUNT BADGE (inline in price + overlay on cards)
   ═══════════════════════════════════════════════════════════════ */
.yng-discount-badge {
    display: inline-block;
    background: var(--yng-primary-accessible);
    color: var(--yng-white);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    vertical-align: middle;
    white-space: nowrap;
}

.woocommerce ul.products li.product .price del {
    color: var(--yng-secondary);
    font-size: 0.85em;
    margin-right: 4px;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    font-weight: 700;
    color: var(--yng-dark);
}

/* ═══════════════════════════════════════════════════════════════
   CHECKOUT LOGIN PROMPT (non-logged-in users)
   ═══════════════════════════════════════════════════════════════ */
.yng-checkout-login {
    max-width: 520px;
    margin: 60px auto;
    padding: 48px 32px;
    text-align: center;
    background: var(--yng-white);
    border-radius: var(--yng-radius);
    box-shadow: var(--yng-shadow);
    border: 1px solid var(--yng-border);
}

.yng-checkout-login__icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
    display: block;
}

.yng-checkout-login h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--yng-dark);
    margin: 0 0 12px;
}

.yng-checkout-login p {
    color: var(--yng-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 28px;
}

.yng-checkout-login__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.yng-checkout-login__steps {
    text-align: left;
    max-width: 300px;
    margin: 0 auto 24px;
    padding-left: 20px;
    font-size: 0.9rem;
    color: var(--yng-dark);
    line-height: 2;
}

.yng-checkout-login__actions .yng-hero__btn {
    width: 100%;
    max-width: 300px;
    text-align: center;
}

.yng-checkout-login__actions .yng-hero__btn--secondary {
    background: transparent;
    color: var(--yng-primary-accessible);
    border: 2px solid var(--yng-primary-accessible);
}

.yng-checkout-login__actions .yng-hero__btn--secondary:hover {
    background: var(--yng-primary-accessible);
    color: var(--yng-white);
}

/* ═══════════════════════════════════════════════════════════════
   HIDE REDUNDANT PAGE TITLES (hero/shortcode replaces them)
   ═══════════════════════════════════════════════════════════════ */
body.page-id-417 .entry-header,
body.page-id-417 .entry-title {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE
   ═══════════════════════════════════════════════════════════════ */
.single-product .woocommerce-product-gallery {
    background: var(--yng-light);
    border-radius: var(--yng-radius);
    overflow: hidden;
}

.single-product .product .product_title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--yng-dark);
    line-height: 1.3;
    margin-bottom: 8px;
}

.single-product .product_meta {
    font-size: 0.8rem;
    color: var(--yng-secondary);
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--yng-border);
}

/* Hide SKU from customers — internal reference only */
.single-product .product_meta .sku_wrapper {
    display: none;
}

.single-product .woocommerce-product-details__short-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--yng-gray-dark);
    margin-bottom: 20px;
}

.single-product .quantity .qty {
    border: 1px solid var(--yng-border);
    border-radius: var(--yng-radius-sm);
    padding: 10px 12px;
    font-size: 1rem;
    width: 80px;
    text-align: center;
}

.single-product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 32px 0 0;
    list-style: none;
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--yng-border);
}

.single-product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

.single-product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--yng-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--yng-transition), border-color var(--yng-transition);
}

.single-product .woocommerce-tabs ul.tabs li.active a {
    color: var(--yng-dark);
    border-bottom-color: var(--yng-primary-accessible);
}

.single-product .woocommerce-tabs .panel {
    padding: 24px 0;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════
   CART PAGE
   ═══════════════════════════════════════════════════════════════ */
.woocommerce table.cart {
    border-collapse: collapse;
    border: none;
}

.woocommerce table.cart th {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--yng-secondary);
    border-bottom: 2px solid var(--yng-border);
}

.woocommerce table.cart td {
    border-bottom: 1px solid var(--yng-light);
    vertical-align: middle;
}

.woocommerce table.cart td.product-thumbnail img {
    border-radius: var(--yng-radius-sm);
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.woocommerce table.cart td.product-name a {
    font-weight: 600;
    color: var(--yng-dark);
}

.woocommerce table.cart td.product-remove a.remove {
    color: var(--yng-secondary) !important;
    font-size: 1.2rem;
    transition: color var(--yng-transition);
}

.woocommerce table.cart td.product-remove a.remove:hover {
    color: var(--yng-error) !important;
    background: none !important;
}

.woocommerce .cart_totals {
    background: var(--yng-white);
    border-radius: var(--yng-radius);
    box-shadow: var(--yng-shadow);
    padding: 24px;
    border: 1px solid var(--yng-border);
}

.woocommerce .cart_totals h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 16px;
}

.woocommerce .cart_totals .checkout-button {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   CHECKOUT FORM
   ═══════════════════════════════════════════════════════════════ */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    border: 1px solid var(--yng-border);
    border-radius: var(--yng-radius-sm);
    padding: 12px 16px;
    font-size: 0.95rem;
    font-family: 'Open Sans', sans-serif;
    transition: border-color var(--yng-transition), box-shadow var(--yng-transition);
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
    border-color: var(--yng-primary-accessible);
    box-shadow: 0 0 0 3px rgba(62, 121, 107, 0.15);
    outline: none;
}

.woocommerce-checkout .form-row label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--yng-dark);
    margin-bottom: 4px;
}

.woocommerce-checkout #order_review_heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 32px 0 16px;
}

.woocommerce-checkout #order_review {
    background: var(--yng-white);
    border-radius: var(--yng-radius);
    box-shadow: var(--yng-shadow);
    padding: 24px;
    border: 1px solid var(--yng-border);
}

.woocommerce-checkout #place_order {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION (A11y)
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .woocommerce ul.products li.product,
    .woocommerce ul.products li.product a img,
    .yng-hero__btn,
    a,
    .yng-nav-cta__link,
    .yng-cat-filters__pill,
    .yng-quality-badges img,
    .yng-community__pillar,
    .yng-footer__social-link,
    .yng-sidebar .yng-sidebar__item,
    .yng-sidebar .yng-sidebar__subitem,
    .yng-tier-chips__pill,
    .yng-back-to-top,
    .yng-member-banner__btn,
    .yng-age-gate__btn {
        transition: none;
    }

    .woocommerce ul.products li.product:hover,
    .woocommerce ul.products li.product:hover a img,
    .yng-hero__btn--primary:hover,
    .yng-back-to-top--visible {
        transform: none;
    }

    .yng-age-gate__overlay,
    .yng-age-gate__box {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   AGE GATE MODAL
   ═══════════════════════════════════════════════════════════════ */
@keyframes yngGateOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes yngGateBoxIn {
    0%   { opacity: 0; transform: scale(0.95) translateY(16px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.yng-age-gate {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yng-age-gate__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    animation: yngGateOverlayIn 0.3s ease forwards;
}

.yng-age-gate__box {
    position: relative;
    background: var(--yng-white);
    border-radius: var(--yng-radius);
    padding: 40px 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: var(--yng-shadow-lg);
    opacity: 0;
    animation: yngGateBoxIn 0.4s var(--yng-ease-spring) 0.15s forwards;
}

.yng-age-gate__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--yng-dark);
    margin: 0 0 12px;
}

.yng-age-gate__text {
    font-size: 0.95rem;
    color: var(--yng-secondary);
    line-height: 1.6;
    margin: 0 0 24px;
}

.yng-age-gate__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.yng-age-gate__btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--yng-radius-sm);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.yng-age-gate__btn--confirm {
    background: var(--yng-primary-accessible);
    color: var(--yng-white);
}

.yng-age-gate__btn--confirm:hover {
    background: var(--yng-brown);
}

.yng-age-gate__btn--deny {
    background: var(--yng-light);
    color: var(--yng-secondary);
}

.yng-age-gate__btn--deny:hover {
    background: var(--yng-border);
}

.yng-age-gate__btn:focus-visible {
    outline: none;
    box-shadow: var(--yng-focus-ring);
}

.yng-age-gate__legal {
    font-size: 0.75rem;
    color: var(--yng-secondary);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .yng-hero::before {
        background:
            url('images/hero-bg-mobile.jpg') center / cover no-repeat,
            linear-gradient(135deg, #0a2a1f 0%, #1a4d35 50%, #0d3525 100%);
    }

    .yng-hero {
        padding: 48px 16px;
        min-height: 280px;
        text-align: center;
    }

    .yng-hero--compact {
        min-height: 200px;
        padding: 32px 16px;
    }

    .yng-hero__inner {
        margin: 0 auto;
    }

    .yng-hero__title {
        font-size: 1.75rem;
    }

    .yng-hero__subtitle {
        font-size: 0.95rem;
    }

    .yng-hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .yng-hero__btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
        gap: 16px;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.9rem;
        padding: 0 12px;
    }

    .woocommerce ul.products li.product .price {
        font-size: 0.95rem;
        padding: 0 12px;
    }

    .yng-section__title {
        font-size: 1.25rem;
    }

    .yng-footer__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .yng-trust-bar {
        gap: 6px;
        max-width: 100%;
        padding: 8px 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .yng-trust-bar__item {
        padding: 5px 10px;
        font-size: 0.68rem;
        white-space: nowrap;
    }

    .yng-value-props {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 20px 12px;
    }

    .yng-value-props__item {
        padding: 20px 12px 16px;
    }

    .yng-quality-badges {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .yng-checkout-login {
        padding: 32px 20px;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
        gap: 16px;
        max-width: 360px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .yng-value-props {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .yng-quality-badges {
        grid-template-columns: repeat(3, 1fr);
    }

    .yng-hero {
        padding: 60px 24px;
        min-height: 380px;
    }

    .yng-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* Base hidden state — elements start invisible and shifted down */
.yng-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Visible state */
.yng-reveal--visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Stagger children — each child delays slightly more */
.yng-reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.yng-reveal-stagger--visible > *:nth-child(1) { transition-delay: 0s; }
.yng-reveal-stagger--visible > *:nth-child(2) { transition-delay: 0.08s; }
.yng-reveal-stagger--visible > *:nth-child(3) { transition-delay: 0.16s; }
.yng-reveal-stagger--visible > *:nth-child(4) { transition-delay: 0.24s; }
.yng-reveal-stagger--visible > *:nth-child(5) { transition-delay: 0.32s; }
.yng-reveal-stagger--visible > *:nth-child(6) { transition-delay: 0.40s; }
.yng-reveal-stagger--visible > *:nth-child(7) { transition-delay: 0.48s; }
.yng-reveal-stagger--visible > *:nth-child(8) { transition-delay: 0.56s; }

.yng-reveal-stagger--visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .yng-reveal,
    .yng-reveal-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .yng-value-props__icon-wrap {
        animation: none !important;
        opacity: 1;
    }

    .yng-quality-badges__item:hover {
        animation: none;
    }

    .yng-value-props__item:hover {
        transform: none;
    }

    .yng-trust-bar__item:hover {
        transform: none;
    }

    .yng-hero__title,
    .yng-hero__subtitle,
    .yng-hero__actions {
        animation: none !important;
    }

    .yng-scroll-progress {
        display: none;
    }

    .yng-promos-grid__item {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   HERO ENTRANCE ANIMATION
   ═══════════════════════════════════════════════════════════════ */

@keyframes yngHeroIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.yng-hero__title {
    animation: yngHeroIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.yng-hero__subtitle {
    animation: yngHeroIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.yng-hero__actions {
    animation: yngHeroIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* ═══════════════════════════════════════════════════════════════
   DIRECTIONAL REVEAL VARIANTS
   ═══════════════════════════════════════════════════════════════ */

.yng-reveal--left  { transform: translateX(-32px); }
.yng-reveal--right { transform: translateX(32px); }
.yng-reveal--scale { transform: scale(0.95); opacity: 0; }

/* ═══════════════════════════════════════════════════════════════
   SCROLL PROGRESS INDICATOR
   ═══════════════════════════════════════════════════════════════ */

.yng-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--yng-primary-accessible, #3e796b);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 9999;
    pointer-events: none;
    animation: yngScrollProgress linear;
    animation-timeline: scroll();
}

@keyframes yngScrollProgress {
    to { transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════════
   HOME IDENTITY SECTIONS (after product grid)
   ═══════════════════════════════════════════════════════════════ */

/* Animated gradient border for quality badges */
@property --yng-badge-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes yngBadgeSpin {
    to { --yng-badge-angle: 360deg; }
}

/* Quality Badges */
.yng-quality-badges {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    justify-items: center;
    align-items: start;
    padding: 2rem 1rem;
    max-width: 900px;
    margin: 0 auto 2rem;
}

.yng-quality-badges__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: transform var(--yng-transition);
}

.yng-quality-badges__item:hover {
    transform: translateY(-4px);
}

/* Badge image — keep original aspect, no circular crop (PNGs have built-in text) */
.yng-quality-badges__item img {
    height: auto;
    width: 130px;
    opacity: 0.82;
    filter: grayscale(0.15);
    transition:
        opacity var(--yng-transition),
        filter var(--yng-transition),
        transform var(--yng-transition);
}

.yng-quality-badges__item:hover img {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.08);
}

/* Promo Banners — static grid (no MetaSlider dependency) */
.yng-promo-banners {
    max-width: 1200px;
    margin: 0 auto 0;
    padding: 1rem 1.5rem 2.5rem;
}

/* Visual break between promos and community — white stripe via border */
section.yng-promo-banners.yng-section--alt {
    padding-bottom: 2.5rem;
    border-bottom: 2.5rem solid var(--yng-white);
}

.yng-promos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    max-width: 960px;
    margin: 0 auto;
}

.yng-promos-grid__item {
    display: block;
    border-radius: var(--yng-radius);
    overflow: hidden;
    transition: transform var(--yng-transition), box-shadow var(--yng-transition);
}

.yng-promos-grid__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--yng-shadow, 0 4px 16px rgba(3, 5, 7, 0.12));
}

.yng-promos-grid__item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--yng-radius);
    aspect-ratio: 400 / 711;
    object-fit: cover;
}

/* Promo carousel on mobile — horizontal scroll instead of stacked portrait banners */
@media (max-width: 768px) {
    .yng-promos-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding-bottom: 0.75rem;
    }
    .yng-promos-grid__item {
        flex: 0 0 80vw;
        scroll-snap-align: center;
    }
    .yng-promos-grid__item img {
        aspect-ratio: 3 / 4;
    }
}

/* SANANDA Showcase */
/* Servicios Section */
.yng-servicios {
    padding: 2.5rem 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.yng-servicios__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--yng-dark);
    margin-bottom: 0.75rem;
}

.yng-servicios__subtitle {
    color: var(--yng-gray-dark);
    margin-bottom: 2.5rem;
    font-size: 1.05rem;
}

.yng-servicios__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.yng-servicios__card {
    background: var(--yng-white);
    border-radius: var(--yng-radius);
    padding: 2.5rem 1.5rem 3.75rem;
    box-shadow: var(--yng-shadow);
    transition: box-shadow var(--yng-transition), transform var(--yng-transition);
    text-align: center;
    display: flex;
    flex-direction: column;
    position: relative;
}

.yng-servicios__card:hover {
    box-shadow: var(--yng-shadow-hover);
    transform: translateY(-2px);
}

.yng-servicios__icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.yng-servicios__card h3,
.yng-servicios__card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--yng-dark);
    margin-bottom: 0.75rem;
}

.yng-servicios__card p {
    color: var(--yng-gray-dark);
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.yng-servicios__icon svg {
    width: 48px;
    height: 48px;
    color: var(--yng-primary-accessible, #3e796b);
}

.yng-servicios__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--yng-radius-sm, 8px);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--yng-transition), transform var(--yng-transition);
    margin-top: auto;
    align-self: center;
}

.yng-servicios__cta:hover {
    transform: translateY(-1px);
}

.yng-servicios__cta--wa {
    background: var(--yng-whatsapp);
    color: #fff;
}

.yng-servicios__cta--wa:hover {
    background: var(--yng-whatsapp-hover);
    color: #fff;
}

.yng-servicios__cta--wa svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.yng-servicios__cta--primary {
    background: var(--yng-primary-accessible, #3e796b);
    color: #fff;
}

.yng-servicios__cta--primary:hover {
    background: var(--yng-primary-dark, #2d5a4f);
    color: #fff;
}

/* .yng-servicios__text grows to fill so all CTAs share one baseline */
.yng-servicios__text {
    flex-grow: 1;
}

@media (max-width: 768px) {
    .yng-servicios__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .yng-servicios__card {
        padding: 2rem 1.25rem;
    }

    .yng-servicios__cta {
        width: 100%;
        justify-content: center;
    }

    /* Cards stack on mobile — note returns to flow (no overlap with CTA) */
    .yng-servicios__card {
        padding-bottom: 2rem;
    }

    .yng-servicios__note {
        position: static;
        margin-top: 0.75rem;
    }
}

/* Guide Section — "Nuevo en Cannabis Medicinal" */
.yng-guide {
    padding: 2rem 1.5rem 1.5rem;
    max-width: 960px;
    margin: 0 auto;
}

.yng-guide__container {
    text-align: center;
}

.yng-guide__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--yng-dark);
    margin: 0 0 0.5rem;
}

.yng-guide__subtitle {
    color: var(--yng-gray-dark);
    font-size: 0.95rem;
    margin: 0 0 2.5rem;
}

.yng-guide__steps {
    display: flex;
    gap: 0;
    justify-content: center;
    position: relative;
}

.yng-guide__step {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0 1rem;
}

.yng-guide__step:not(.yng-guide__step--last)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 2px;
    background: var(--yng-border, #e2e6ea);
    z-index: 0;
}

.yng-guide__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--yng-primary-accessible, #3e796b);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.yng-guide__step-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--yng-dark);
    margin: 0 0 0.25rem;
}

.yng-guide__step-desc {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--yng-gray-dark);
    margin: 0;
}

.yng-guide__cta {
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .yng-guide__container {
        position: relative;
    }

    .yng-guide__container::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: calc(100% - 3rem);
        background: linear-gradient(to right, transparent, var(--yng-light, #f3f5f7));
        pointer-events: none;
        z-index: 2;
    }

    .yng-guide__steps {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1rem;
    }

    .yng-guide__step {
        flex: 0 0 140px;
        scroll-snap-align: center;
    }

    .yng-guide__step:not(.yng-guide__step--last)::after {
        width: calc(100% - 30px);
        left: calc(50% + 15px);
    }
}

/* Mission Section */
.yng-mission {
    padding: 4rem 1.5rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.yng-mission__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--yng-dark);
    margin-bottom: 1.5rem;
}

.yng-mission p {
    color: var(--yng-gray-dark);
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   Community Section — organic green wash
   ═══════════════════════════════════════════════════════════════ */
.yng-community {
    padding: 4rem 1.5rem;
    background: linear-gradient(168deg, #f3f5f7 0%, #e8f5f0 50%, #f3f5f7 100%);
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    box-sizing: border-box;
}

.yng-community__intro {
    max-width: 700px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.yng-community__title {
    font-family: var(--yng-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--yng-dark);
    margin-bottom: 1rem;
}

.yng-community__title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--yng-primary), var(--yng-primary-accessible));
    margin: 0.75rem auto 0;
    border-radius: 2px;
}

.yng-community__intro p {
    color: var(--yng-gray-dark);
    line-height: 1.7;
}

.yng-community__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.yng-community__pillar {
    position: relative;
    text-align: left;
    padding: 2rem 1.5rem 2rem 2rem;
    background: var(--yng-white);
    border-radius: var(--yng-radius);
    box-shadow: var(--yng-shadow);
    overflow: hidden;
    transition: box-shadow var(--yng-transition), transform var(--yng-transition);
}

.yng-community__pillar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--yng-primary) 0%, var(--yng-primary-accessible) 100%);
    border-radius: 4px 0 0 4px;
    transition: width var(--yng-transition);
}

.yng-community__pillar:hover {
    box-shadow: 0 12px 32px rgba(62, 121, 107, 0.12);
    transform: translateY(-4px);
}

.yng-community__pillar:hover::before {
    width: 6px;
}

.yng-community__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(105, 204, 180, 0.15), rgba(62, 121, 107, 0.1));
    color: var(--yng-primary-accessible);
    margin-bottom: 1rem;
}

.yng-community__pillar h3 {
    font-family: var(--yng-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--yng-dark);
    margin: 0 0 0.5rem;
}

.yng-community__pillar p {
    color: var(--yng-gray-dark);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Legal Info Section — dark authority with glassmorphism
   ═══════════════════════════════════════════════════════════════ */
.yng-legal-info {
    padding: 5rem 1.5rem;
    background: linear-gradient(175deg, #030507 0%, #0a1a15 60%, #0d2118 100%);
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    box-sizing: border-box;
}

.yng-legal-info__title {
    font-family: var(--yng-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    text-align: center;
    color: var(--yng-white);
    margin: 0 0 2.5rem;
}

.yng-legal-info__title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--yng-primary);
    margin: 0.75rem auto 0;
    border-radius: 2px;
}

.yng-legal-info__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.yng-legal-info__card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--yng-radius);
    border: 1px solid rgba(105, 204, 180, 0.15);
    border-top: 3px solid var(--yng-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: background var(--yng-transition), border-color var(--yng-transition), transform var(--yng-transition), box-shadow var(--yng-transition);
}

.yng-legal-info__card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(105, 204, 180, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(105, 204, 180, 0.1), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.yng-legal-info__card h3 {
    font-family: var(--yng-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--yng-primary);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.yng-legal-info__card p {
    font-family: var(--yng-font-body);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0 0 8px;
}

.yng-legal-info__card p:last-child {
    margin-bottom: 0;
}

.yng-legal-info__card strong {
    color: var(--yng-gold);
}

/* ═══════════════════════════════════════════════════════════════
   Contact Section — warm teal gradient closer
   ═══════════════════════════════════════════════════════════════ */
.yng-contact {
    padding: 5rem 1.5rem;
    text-align: center;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    box-sizing: border-box;
    background: linear-gradient(160deg, var(--yng-primary-accessible) 0%, #2a8f78 40%, var(--yng-primary) 100%);
    color: var(--yng-white);
}

.yng-contact__title {
    font-family: var(--yng-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--yng-white);
    margin-bottom: 0.75rem;
}

.yng-contact__title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: rgba(255, 255, 255, 0.5);
    margin: 0.75rem auto 0;
    border-radius: 2px;
}

.yng-contact__intro {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.yng-contact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto 3rem;
}

.yng-contact__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: var(--yng-glass-light);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--yng-radius);
    padding: 1.5rem 1rem;
    border: 1px solid var(--yng-glass-border);
    transition: background var(--yng-transition), transform var(--yng-transition);
}

.yng-contact__item:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
}

.yng-contact__item svg {
    color: var(--yng-white);
}

.yng-contact__item p {
    margin: 0;
    color: var(--yng-white);
}

.yng-contact__item a {
    color: var(--yng-white);
    text-decoration: none;
}

.yng-contact__item a:hover {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
}

.yng-contact__wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--yng-white);
    color: var(--yng-whatsapp);
    padding: 1.1rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    transition: transform var(--yng-transition), box-shadow var(--yng-transition), color var(--yng-transition);
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.yng-contact__wa-btn:hover {
    color: var(--yng-whatsapp-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

.yng-contact__social {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.yng-contact__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--yng-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background var(--yng-transition), color var(--yng-transition);
}

.yng-contact__social-link:hover {
    background: var(--yng-white);
    color: var(--yng-primary-accessible);
}

.yng-contact__social-link:focus-visible,
.yng-contact__wa-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--yng-primary-accessible), 0 0 0 4px var(--yng-white);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — Identity sections
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .yng-sananda,
    .yng-mission {
        padding: 1.5rem 1rem;
    }

    .yng-community {
        padding: 2.5rem 1rem;
    }

    .yng-legal-info {
        padding: 3rem 1rem;
    }

    .yng-contact {
        padding: 3rem 1rem;
    }

    .yng-sananda__title,
    .yng-mission__title,
    .yng-legal-info__title,
    .yng-community__title,
    .yng-contact__title {
        font-size: 1.65rem;
    }

    .yng-mission p {
        font-size: 0.95rem;
    }

    .yng-community__grid,
    .yng-legal-info__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .yng-community__pillar {
        text-align: left;
    }

    .yng-contact__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .yng-contact__wa-btn {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.5rem;
    }

    /* Header: smaller logo on mobile — ensure visibility */
    .ast-site-identity .yng-logo-svg,
    .ast-mobile-header .yng-logo-svg,
    .ast-mobile-header-bar .yng-logo-svg {
        height: 30px;
        max-width: 120px;
        display: inline-block !important;
    }

    /* CTA in mobile menu: full-width and prominent */
    .yng-nav-cta {
        padding: 12px 20px !important;
        margin-top: 8px;
    }

    .yng-nav-cta .yng-nav-cta__link {
        display: block !important;
        text-align: center;
        width: 100%;
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
    }

    /* Cart button: ensure 44px touch target on mobile */
    .yng-cart-btn {
        padding: 12px 14px !important;
        min-width: 44px;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .yng-quality-badges {
        grid-template-columns: repeat(2, 1fr);
        padding: 1rem 0.5rem;
        gap: 0.75rem;
    }

    .yng-quality-badges__item img {
        width: 80px;
    }

    .yng-sidebar {
        display: none;
    }

    .yng-shop-layout {
        display: block;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR CATEGORY FILTERS (Desktop only)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    .yng-shop-layout {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 2rem;
        align-items: start;
    }

    .yng-sidebar {
        position: sticky;
        top: 100px;
        padding: 1.5rem;
        background: var(--yng-light);
        border-radius: var(--yng-radius);
    }
}

.yng-sidebar__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--yng-secondary);
    margin-bottom: 1rem;
}

.yng-sidebar__list {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.yng-sidebar__list li {
    list-style: none !important;
}

.yng-sidebar .yng-sidebar__item {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    min-height: 44px;
    padding: 0.6rem 0.8rem !important;
    border: none !important;
    background: none !important;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--yng-gray-dark) !important;
    border-radius: calc(var(--yng-radius) / 2);
    transition: all var(--yng-transition);
}

.yng-sidebar .yng-sidebar__item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: var(--yng-primary-accessible) !important;
}

.yng-sidebar .yng-sidebar__item--active {
    background: var(--yng-primary-accessible) !important;
    color: var(--yng-white) !important;
    font-weight: 600;
}

.yng-sidebar .yng-sidebar__item--active:hover {
    background: var(--yng-brown) !important;
    color: var(--yng-white) !important;
}

.yng-sidebar__count {
    font-size: 0.75rem;
    opacity: 0.55;
    margin-left: 2px;
    font-weight: 400;
}

.yng-sidebar .yng-sidebar__item--active .yng-sidebar__count {
    opacity: 0.8;
}

/* Tier sub-filters (sidebar) */
.yng-sidebar .yng-sidebar__sub {
    list-style: none !important;
    padding: 0 0 0 0.8rem;
    margin: 0.25rem 0 0;
    display: none !important;
}

.yng-sidebar .yng-sidebar__sub li {
    list-style: none !important;
}

.yng-sidebar .yng-sidebar__sub.yng-sidebar__sub--visible {
    display: block !important;
}

.yng-sidebar .yng-sidebar__subitem {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    min-height: 44px;
    padding: 0.4rem 0.8rem !important;
    border: none !important;
    background: none !important;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.82rem;
    color: var(--yng-gray-dark) !important;
    border-radius: calc(var(--yng-radius) / 2);
    transition: all var(--yng-transition);
}

.yng-sidebar .yng-sidebar__subitem:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: var(--yng-primary-accessible) !important;
}

.yng-sidebar .yng-sidebar__subitem--active {
    background: var(--yng-primary-accessible) !important;
    color: var(--yng-white) !important;
    font-weight: 600;
}

.yng-sidebar .yng-sidebar__subitem--active:hover {
    background: var(--yng-brown) !important;
    color: var(--yng-white) !important;
}

/* Tier chips (mobile secondary row) */
.yng-tier-chips {
    display: none;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 16px;
    margin: -8px auto 16px;
}

.yng-tier-chips--visible {
    display: flex;
}

.yng-tier-chips__pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 5px 14px;
    border: 1px solid var(--yng-border);
    border-radius: 14px;
    background: var(--yng-white);
    color: var(--yng-dark);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--yng-transition);
    white-space: nowrap;
}

.yng-tier-chips__pill:hover {
    border-color: var(--yng-primary-accessible);
    color: var(--yng-primary-accessible);
}

.yng-tier-chips__pill--active {
    background: var(--yng-primary-accessible);
    color: var(--yng-white);
    border-color: var(--yng-primary-accessible);
}

.yng-tier-chips__pill--active:hover {
    background: var(--yng-brown);
    border-color: var(--yng-brown);
    color: var(--yng-white);
}

/* Desktop: hide tier chips (sidebar has sub-filters) */
@media (min-width: 769px) {
    .yng-tier-chips,
    .yng-tier-chips.yng-tier-chips--visible {
        display: none !important;
    }
}

/* Hide horizontal pills on desktop (sidebar replaces them) */
@media (min-width: 769px) {
    .yng-cat-filters {
        display: none;
    }
}

/* Bienestar Consciente */
/* Back to Top */
/* `padding: 0` es OBLIGATORIO, no cosmetico. Sin el, el boton hereda el `padding: 12px 24px`
   de Astra y, con `box-sizing: border-box` sobre 44 px de ancho, el ancho de contenido queda
   en cero: la flecha (un <svg width="20">) computaba 0 px y se veia un ovalo verde VACIO.
   Ademas el relleno lo estiraba a 48x44 en telefono y 60x44 en escritorio, o sea una elipse
   y no el circulo de 44 que declara la regla. Se noto recien al apagar el #ast-scroll-top de
   Astra, que hasta entonces se dibujaba encima y tapaba el problema. */
.yng-back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    padding: 0;
    flex: 0 0 auto;
    border-radius: 50%;
    border: none;
    background: var(--yng-primary-accessible);
    color: var(--yng-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.3s;
    z-index: 90;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.yng-back-to-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.yng-back-to-top:hover {
    background: var(--yng-brown);
}

/* WhatsApp Floating Button */
.yng-wa-float {
    position: fixed;
    bottom: 6rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--yng-whatsapp);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.3s;
    text-decoration: none;
}

.yng-wa-float--visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Con el chat de Bravilo prendido (functions.php, yungannabis_bravilo_widget) el boton de WhatsApp
   sube: los dos se anclan abajo a la derecha y el globo del chat lo tapaba. */
.yng-con-bravilo .yng-wa-float {
    bottom: 10rem;
}

.yng-wa-float--visible:hover {
    background: var(--yng-whatsapp-hover);
    transform: scale(1.05);
    color: #fff;
}

@media (max-width: 768px) {
    .yng-wa-float {
        width: 48px;
        height: 48px;
        bottom: 5.5rem;
        right: 2rem;
    }

    .yng-wa-float svg {
        width: 24px;
        height: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yng-wa-float {
        animation: none;
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
}

/* Non-member Banner */
.yng-member-banner {
    position: relative;
    background: linear-gradient(135deg, var(--yng-primary-accessible), var(--yng-brown));
    color: var(--yng-white);
    padding: 1.25rem 3.5rem 1.25rem 1.5rem;
    border-radius: var(--yng-radius);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.yng-member-banner__text {
    flex: 1;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    min-width: 200px;
}

.yng-member-banner__actions {
    display: flex;
    gap: 0.75rem;
}

.yng-member-banner__btn {
    padding: 0.5rem 1.25rem;
    border-radius: calc(var(--yng-radius) / 2);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--yng-transition);
    white-space: nowrap;
}

.yng-member-banner__btn--primary {
    background: var(--yng-white);
    color: var(--yng-primary-accessible);
}

.yng-member-banner__btn--primary:hover {
    background: var(--yng-light);
    color: var(--yng-brown);
}

.yng-member-banner__btn--secondary {
    background: transparent;
    color: var(--yng-white);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.yng-member-banner__btn--secondary:hover {
    border-color: var(--yng-white);
    background: rgba(255, 255, 255, 0.1);
}

.yng-member-banner__close {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    background: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yng-member-banner__close:hover,
.yng-member-banner__close:focus {
    color: var(--yng-white);
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
}

@media (max-width: 768px) {
    .yng-member-banner {
        flex-direction: column;
        text-align: center;
        padding: 1rem 2.5rem 1rem 1rem;
    }

    .yng-member-banner__actions {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET: Trust badges 3×2 grid
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
    .yng-trust-bar {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-content: center;
        gap: 10px;
    }

    .yng-trust-bar__item {
        padding: 6px 14px;
        font-size: 0.72rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PAGINATION — WooCommerce shop pages
   ═══════════════════════════════════════════════════════════════ */
.woocommerce-pagination {
    text-align: center;
    padding: 2rem 0;
}

.woocommerce-pagination ul {
    display: inline-flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--yng-radius-sm);
    font-family: var(--yng-font-display);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--yng-dark);
    border: 1px solid var(--yng-border);
    transition: all var(--yng-transition);
    text-decoration: none;
}

.woocommerce-pagination ul li a:hover {
    background: var(--yng-light);
    border-color: var(--yng-primary-accessible);
    color: var(--yng-primary-accessible);
}

.woocommerce-pagination ul li span.current {
    background: var(--yng-primary-accessible);
    color: var(--yng-white);
    border-color: var(--yng-primary-accessible);
}


/* ═══════════════════════════════════════════════════════════════
   ARREGLOS DE LA AUDITORIA DE UX — 31/08/2026
   Todo lo de aca salio de medir el sitio vivo a 390 px, no de criterio general.
   ═══════════════════════════════════════════════════════════════ */

/* Habia DOS botones de "volver arriba" encimados: el nuestro (#yng-back-to-top, 48x44,
   z-index 90) y el nativo de Astra (#ast-scroll-top, 31,5x31,5, z-index 99). Se solapaban
   en 29,5x29,5 px y, por tener z mayor, el de Astra se quedaba con los toques — siendo el
   mas chico de los dos y estando por debajo del minimo de 44 px.
   Al tope de la pagina el de Astra esta en display:none, por eso una revision sin
   scrollear no lo ve. Se apaga por CSS y no por el Customizer para que quede versionado. */
#ast-scroll-top,
.ast-scroll-top-icon,
#ast-scroll-top.ast-scroll-to-top-right {
    display: none !important;
}

/* Aca habia una regla para <=600px que decia subir el FAB de WhatsApp y hacia lo contrario:
   la regla que ya existia para <=768px lo pone en `bottom: 5.5rem` (88 px) y esta lo bajaba a
   `5rem` (80 px), ademas de acercarlo al borde con `right: 1rem`. O sea que empeoraba las dos
   cosas que decia arreglar. Se elimina y queda la de <=768px, que es la buena.
   El comentario original justificaba el cambio citando "+800 socios registrados en todo el
   pais", un texto que ese mismo lote habia borrado del hero por insostenible. */

/* Objetivos tactiles del age gate. Los dos botones median 287x39,2 separados por solo 12 px:
   un toque errado en "No tengo 21" saca a la persona del sitio sin vuelta. Se les da la
   altura minima y se separan mas. */
.yng-age-gate__actions {
    gap: 20px;
}

.yng-age-gate__btn {
    min-height: 48px;
}

/* La hamburguesa media 39,6x39,6, por debajo del minimo de 44. */
.ast-mobile-header-wrap .menu-toggle,
.ast-mobile-header-wrap .ast-mobile-menu-trigger-minimal,
.ast-mobile-header-wrap .ast-button-wrap .menu-toggle {
    min-width: 44px;
    min-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════
   Aviso de sitio de pruebas (3.6.6)
   Se muestra solo mientras el dominio sea el provisorio; ver
   yungannabis_aviso_sitio_de_pruebas() en functions.php.
   ═══════════════════════════════════════════════════════════════ */
.yng-aviso-pruebas {
    position: relative;
    z-index: 1000;
    background: #532206;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    padding: 8px 16px;
    letter-spacing: .01em;
}
.yng-aviso-pruebas strong { font-weight: 700; }
@media (max-width: 480px) {
    .yng-aviso-pruebas { font-size: 12px; padding: 7px 12px; }
}