/* Custom overrides for Abejas Sin Fronteras
   Extracted from inline styles to satisfy no-inline-styles lint.
   Desktop-specific rules are wrapped in a min-width media query so the
   responsive.css mobile rules continue to take effect at small widths. */

/* =========================================================================
   Abejas Sin Fronteras — unified color palette tokens
   Every color on the site should reference one of these. When a future
   palette tweak is needed, change it here once and the whole site moves
   together. The vendor template (style.css L84+) defines --color-yellow
   and friends; we re-point those to our tokens so any vendor section that
   uses var(--color-yellow) automatically picks up our earthy gold instead
   of the original bright honey-yellow #e2b017.
   ========================================================================= */
:root {
    /* Light surfaces */
    --asf-cream: #F9F6F2;          /* primary cream bg for light sections */
    --asf-cream-deep: #fdfaf2;     /* slightly warmer inset / card bg */
    --asf-cream-pale: #FFF7D6;     /* pale honey — used on DARK sections for
                                      stat numbers, icons, accent text */

    /* Text */
    --asf-ink: #2b221f;            /* headlines + body on light bg */
    --asf-muted: #6f6f6f;          /* meta / italic EN line on light bg */
    --asf-muted-soft: #777;        /* slightly softer muted for asf-en */

    /* Brand accents */
    --asf-gold: #C19A6B;           /* primary accent — earthy muted gold */
    --asf-gold-deep: #8B6914;      /* hover / pressed state for gold */
    --asf-green: #639533;          /* agroecology green (subtitles, tags) */
    --asf-green-deep: #3d5e1f;     /* hover / pressed state for green */
    --asf-earth: #A0826D;          /* tertiary taupe accent */

    /* Dark-mode utilities (sections with landscape bg images) */
    --asf-dark-overlay: rgba(15, 22, 14, 0.7);
    --asf-dark-overlay-soft: rgba(15, 22, 14, 0.55);

    /* Re-point vendor brand vars to our palette so vendor sections that
       use var(--color-yellow) inherit our earthy gold instead of the
       original bright honey-yellow. */
    --color-yellow: var(--asf-gold);
    --color-yellow-deep: var(--asf-gold-deep);
    --color-green: var(--asf-green);
}

/* Defensive horizontal-overflow guard. The vendor template only ships
   responsive rules down to 370px, so absolutely-positioned decorations
   (bee-flies, shape-1, etc.) can leak past the viewport on narrower
   phones and create horizontal scroll. Belt-and-braces with html. */
html, body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100vw;
}

/* Site-wide background color (no pattern). */
body {
    background-color: #fdfaf2;
}

/* Section-title H2 / H6 responsive scaling. Template default is 37px
   line-height 50px with no mobile override, so headings like
   "Tasting the Story Behind Every Jar" or "Our Commitment to Harvesting
   Organic Honey" wrap to 3-4 lines and visually break at <=414px.
   Scale fluidly between phones and small tablets. */
@media (max-width: 767px) {
    .section-title h2,
    .section-title-center h2,
    .section-title-white h2,
    .section-title-center-white h2 {
        font-size: clamp(22px, 6.5vw, 32px);
        line-height: 1.25;
    }

    .section-title h6,
    .section-title-center h6,
    .section-title-white h6,
    .section-title-center-white h6 {
        font-size: 14px;
        line-height: 1.4;
    }
}

/* Brand-name horizontal on phones (matches desktop). With the heart and
   cart icons gone from the mobile navbar there's room for the wordmark
   to read as one phrase instead of two stacked lines. Overrides
   style.css line 832: flex-direction: column on max-width 767. */
@media (max-width: 767px) {
    .menu-bar.v1 .menu-logo .brand-name,
    .menu-bar.v2 .menu-logo .brand-name {
        flex-direction: row;
        gap: 0.25em;
        line-height: 1;
        white-space: nowrap;
        /* Bumped up from clamp(16px, 4vw, 20px) — extra space from the
           removed cart/heart lets the wordmark grow. */
        font-size: clamp(18px, 5vw, 26px);
    }

    /* Make hamburger sit at the same distance from the right edge as
       the logo sits from the left. Template adds padding-right: 32px
       on .menu-bar-content + margin-right: 8px on .menu-right at
       <=767px (style.css L800/L804) — strip them so both sides align
       with the container gutter. */
    .menu-bar.v1 .menu-bar-content,
    .menu-bar.v2 .menu-bar-content {
        padding-right: 0;
    }

    .menu-bar.v1 .menu-right,
    .menu-bar.v2 .menu-right {
        margin-right: 0;
    }
}

/* Safety net for the narrowest phones (Galaxy Fold folded ~280-359px).
   The Arima Madurai display font runs wider than typical sans-serif,
   so the wordmark could push past the viewport at 320px even with the
   navbar stripped down. Shrink + tighten the logo at these widths. */
@media (max-width: 359.98px) {
    .menu-bar.v1 .menu-logo .brand-name,
    .menu-bar.v2 .menu-logo .brand-name {
        font-size: 16px;
    }

    .menu-bar.v1 .menu-logo img,
    .menu-bar.v2 .menu-logo img {
        width: 44px;
        height: 48px;
    }
}

@media (max-width: 319.98px) {
    .menu-bar.v1 .menu-logo .brand-name,
    .menu-bar.v2 .menu-logo .brand-name {
        font-size: 14px;
    }

    .menu-bar.v1 .menu-logo img,
    .menu-bar.v2 .menu-logo img {
        width: 38px;
        height: 42px;
    }
}

/* On phones, strip the navbar down to logo + hamburger only.
   The wishlist (heart) button moves out of the top bar so the brand-name
   stays at full readable size. (The cart was removed from the navbar, so
   li 3 is now the hamburger and must stay visible.) */
@media (max-width: 575.98px) {
    .menu-bar.v1 .menu-right > ul > li:nth-child(2),
    .menu-bar.v2 .menu-right > ul > li:nth-child(2) {
        display: none;
    }
}

/* Slide-out menu header — display the logo image + brand-name
   horizontally next to each other, matching the navbar. Without these
   overrides the template renders the cloned logo with .mobile-logo a
   { display: inline-block; max-width: 140px } (style.css L1112-1114),
   which forces the brand-name to wrap below the image, and without a
   font-family/size on .mobile-logo .brand-name it inherits the body
   default — appearing as a small "AbejasSin Fronteras" with no gap. */
.menu-bar.v1 .menu-right .mobile-menu-header .mobile-logo a,
.menu-bar.v2 .menu-right .mobile-menu-header .mobile-logo a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: none;
}

.menu-bar.v1 .menu-right .mobile-menu-header .mobile-logo img,
.menu-bar.v2 .menu-right .mobile-menu-header .mobile-logo img {
    width: 44px;
    height: 48px;
    max-width: 44px;
    object-fit: cover;
    object-position: left center;
    flex-shrink: 0;
}

.menu-bar.v1 .menu-right .mobile-menu-header .mobile-logo .brand-name,
.menu-bar.v2 .menu-right .mobile-menu-header .mobile-logo .brand-name {
    display: flex;
    flex-direction: row;
    gap: 0.25em;
    line-height: 1;
    white-space: nowrap;
    font-family: "Arima Madurai", cursive;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.5px;
}

.menu-bar.v1 .menu-right .mobile-menu-header .mobile-logo .brand-line,
.menu-bar.v2 .menu-right .mobile-menu-header .mobile-logo .brand-line {
    display: inline-block;
    white-space: nowrap;
}

/* Mobile-only cart entry: hidden inside the desktop main-menu, shown
   inside the cloned mobile slide-out menu (.mobile-main-manu, built by
   the template's JS from main-menu's HTML). */
.menu-bar .main-menu .mobile-only-cart {
    display: none;
}

.menu-bar .mobile-main-manu .mobile-only-cart {
    display: list-item;
}

.mobile-main-manu .mobile-only-cart > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Our Services — image grid (responsive: width:100%) */
.service-grid-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* Our Services — "Honey Production" content
   Editorial treatment: text sits directly on the section bg with a
   thin gold vertical rule on the left as a "thread" tying it back to
   the rest of the gold accent system. Larger headline, more breathing
   room, italic Spanish dropline above the headline as an eyebrow. */
.honey-production-card {
    background: transparent;
    padding: 0 0 0 28px;
    border-left: 2px solid var(--asf-gold);
    position: relative;
}

.honey-production-card h4 {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--asf-ink);
    margin-bottom: 18px;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.honey-production-card h4 .title-en {
    display: block;
    margin-top: 6px;
    font-size: 0.55em;
    font-weight: 400;
    font-style: italic;
    color: var(--asf-muted);
    letter-spacing: 0.04em;
}

.honey-production-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #3a3a3a;
    margin: 0 0 16px 0;
    font-weight: 400;
}

.honey-production-card p.asf-en {
    font-size: 0.92rem;
    font-style: italic;
    color: var(--asf-muted);
    margin-bottom: 0;
}

/* Stacked below 992px: give the card breathing room under the photo grid */
@media (max-width: 991px) {
    .honey-production-card {
        margin-top: 24px;
    }
}

/* Desktop-only fixed sizing — keep responsive.css mobile rules in charge below 992px. */
@media (min-width: 992px) {
    /* Long heading: wider than the theme's 58% cap so it wraps to 2 lines, not 3 */
    #our_services .section-title-center h2 {
        max-width: 80%;
        text-wrap: balance;
    }

    .honey-production-card {
        padding-left: 38px;
    }

    .honey-production-card h4 {
        font-size: 2.4rem;
        margin-bottom: 24px;
        max-width: 12ch;
    }

    .honey-production-card p {
        font-size: 1.05rem;
        line-height: 1.75;
        margin: 0 0 18px 0;
        max-width: 52ch;
    }

    .honey-production-card p.asf-en {
        font-size: 0.95rem;
    }

    .banner.v3 .product-img .main-img {
        width: 501px;
        height: 563px;
        object-fit: cover;
        margin-top: 50px;
    }

    .banner.v3 .product-img .small-img-1,
    .banner.v3 .product-img .small-img-2 {
        width: 130px;
        height: 130px;
        object-fit: cover;
    }

    .why-us .big-pic img {
        width: 484px;
        height: 443px;
        object-fit: cover;
        display: block;
    }

    .why-us .list-2 li {
        text-align: right;
        padding-left: 80px;
    }
}

/* =========================================================================
   Brand logo sizing — the new official Logo-Abejas-Sin-Fronteras.svg is
   2000x2000 (square, contains icon + wordmark). Constrain it everywhere
   it appears so it doesn't blow out the layout.
   ========================================================================= */

/* Navbar logo */
.menu-bar.v1 .menu-logo a,
.menu-bar.v2 .menu-logo a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.menu-bar.v1 .menu-logo img,
.menu-bar.v2 .menu-logo img {
    height: 56px;
    width: auto;
    max-width: none;
    object-fit: contain;
    display: block;
}

@media (max-width: 991px) {
    .menu-bar.v1 .menu-logo img,
    .menu-bar.v2 .menu-logo img {
        height: 48px;
    }
}

@media (max-width: 575px) {
    .menu-bar.v1 .menu-logo img,
    .menu-bar.v2 .menu-logo img {
        height: 42px;
    }
}

/* Mobile slide-out menu copies the navbar logo via JS — keep it in scale */
.menu-bar.v1 .menu-right .mobile-menu-header .mobile-logo img,
.menu-bar.v2 .menu-right .mobile-menu-header .mobile-logo img {
    height: 52px;
    width: auto;
    max-width: none;
    object-fit: contain;
}

/* Footer logo */
.footer-logo a {
    display: inline-block;
    line-height: 1;
}

.footer-logo img {
    height: 84px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 991px) {
    .footer-logo img {
        height: 72px;
    }
}

/* Quiénes Somos hero logo */
.asf-quienes-logo {
    text-align: center;
    margin: 0 auto 28px;
}

.asf-quienes-logo img {
    width: auto;
    height: auto;
    max-width: 220px;
    max-height: 220px;
    object-fit: contain;
    display: inline-block;
}

@media (max-width: 575px) {
    .asf-quienes-logo img {
        max-width: 160px;
        max-height: 160px;
    }
}

/* =========================================================================
   Abejas Sin Fronteras — homepage content sections
   ========================================================================= */

/* Navbar — same pale off-white cream as the hero AND the section right
   below the hero (.our-services.v1 = var(--color-white2) = #f9f6f2).
   Bottom border uses the deep agroecology green (#639533) — the same
   accent green from Quiénes Somos card + team role labels. */
.menu-bar.v1,
.menu-bar.v2 {
    background: #F9F6F2 !important;
    border-bottom: 1px solid #639533 !important;
}

.menu-bar.v1 .main-menu > ul > li > a,
.menu-bar.v2 .main-menu > ul > li > a,
.menu-bar.v1 .menu-right > ul > li > a,
.menu-bar.v2 .menu-right > ul > li > a,
.menu-bar.v1 .menu-right .search-open-btn,
.menu-bar.v2 .menu-right .search-open-btn,
.menu-bar.v1 .menu-right .shop-card-list .price,
.menu-bar.v2 .menu-right .shop-card-list .price,
.menu-bar.v1 .menu-right > ul > li > a > .my-icon,
.menu-bar.v2 .menu-right > ul > li > a > .my-icon {
    color: #2b221f !important;
}

.menu-bar.v1 .main-menu > ul > li > a:hover,
.menu-bar.v2 .main-menu > ul > li > a:hover {
    color: #8B6914 !important;
}

.menu-bar.v1 .mobile-menu-btn span,
.menu-bar.v2 .mobile-menu-btn span {
    background: #2b221f !important;
}

/* Strip the template's yellow "underline" box-shadow on these action btns —
   it conflicts with the new green circle treatment below. */
.menu-bar.v1 .menu-right .search-open-btn,
.menu-bar.v2 .menu-right .search-open-btn,
.menu-bar.v1 .menu-right .wishlist-btn,
.menu-bar.v2 .menu-right .wishlist-btn,
.menu-bar.v1 .menu-right .shop-card-btn .my-icon,
.menu-bar.v2 .menu-right .shop-card-btn .my-icon {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Template adds background: var(--color-black) (#2b221f brown) to the OUTER
   .wishlist-btn wrapper — kill it so only the inner green circle shows.
   .shop-card-btn outer is already var(--color-tr) transparent. */
.menu-bar.v1 .menu-right .wishlist-btn,
.menu-bar.v2 .menu-right .wishlist-btn {
    background: transparent !important;
}

/* Navbar action icons (search, heart/wishlist, shopping bag) — wrap each in
   a green circle to match the border-bottom accent. Icon glyph itself stays
   white. The text bits (cart price $0.00, count badges) stay separate. */
.menu-bar.v1 .menu-right .search-open-btn,
.menu-bar.v2 .menu-right .search-open-btn,
.menu-bar.v1 .menu-right .wishlist-btn .my-icon,
.menu-bar.v2 .menu-right .wishlist-btn .my-icon,
.menu-bar.v1 .menu-right .shop-card-btn .my-icon,
.menu-bar.v2 .menu-right .shop-card-btn .my-icon {
    background: #639533 !important;
    color: #ffffff !important;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    transition: background 0.2s ease;
}

.menu-bar.v1 .menu-right .search-open-btn:hover,
.menu-bar.v2 .menu-right .search-open-btn:hover,
.menu-bar.v1 .menu-right .wishlist-btn:hover .my-icon,
.menu-bar.v2 .menu-right .wishlist-btn:hover .my-icon,
.menu-bar.v1 .menu-right .shop-card-btn:hover .my-icon,
.menu-bar.v2 .menu-right .shop-card-btn:hover .my-icon {
    background: #2b221f !important;
}

/* Brand-name "Abejas / Sin Fronteras" — template sets it to white. On the
   cream navbar it disappeared, so set to near-black. */
.menu-bar.v1 .menu-logo .brand-name,
.menu-bar.v2 .menu-logo .brand-name,
.menu-bar.v1 .menu-logo .brand-line,
.menu-bar.v2 .menu-logo .brand-line {
    color: #2b221f !important;
}

/* Wipe remaining yellow accents in the navbar (cart count badge, wishlist
   count, cart card price) — anything left at var(--color-yellow) goes dark. */
.menu-bar.v1 .shop-card-list .count,
.menu-bar.v2 .shop-card-list .count,
.menu-bar.v1 .wishlist-btn .count,
.menu-bar.v2 .wishlist-btn .count,
.menu-bar.v1 .menu-right .count,
.menu-bar.v2 .menu-right .count {
    background: #2b221f !important;
    color: #F9F6F2 !important;
}

/* Hero / banner uses the DEEPER amber so it doesn't read as "bright yellow".
   Vars cascade — every var(--color-yellow) inside .banner.v1 retints. */
.banner.v1 {
    --color-yellow: #8B6914;
}

/* Hero background — pale off-white cream (#F9F6F2 replaces dark #201A18).
   The dark band you saw was .banner.v1::before — must override both. */
.banner.v1 {
    background: #F9F6F2 !important;
}

.banner.v1::before {
    background: #F9F6F2 !important;
}

/* The dark oval/sweep behind the banner buttons was .banner-content::before
   (template style.css L2718: width:80%, height:155px, border-radius:100%,
   background:var(--color-black2)). Override to match the cream hero. */
.banner.v1 .banner-content::before {
    background: #F9F6F2 !important;
}

/* The honeycomb swirl at the bottom of the hero is .banner.v1::after
   (template style.css L2691: bg-image shap-1.png). Removed from the design. */
.banner.v1::after {
    display: none !important;
}

.banner.v1 .section-title-white.v1 h2,
.banner.v1 .hero-tagline-es,
.banner.v1 .hero-tagline-en,
.banner.v1 .section-title-white.v1 h2 .title-en,
.banner.v1 .check-mark-list.v1 li h6 {
    color: #2b221f !important;
}

/* "Tienda · Shop" button (link-anime v2 in the hero). The visible color
   comes from .link-anime.v2::before (template style.css L1635: amber
   var(--color-yellow)). Override the pseudo + the .v2::after dark layer
   so the surface reads as #2b221f with white text. */
.banner.v1 .all-btns a.link-anime.v2,
.banner.v1 .all-btns a.link-anime.v2:hover {
    color: #ffffff !important;
}

.banner.v1 .all-btns a.link-anime.v2::before {
    background: #2b221f !important;
}

.banner.v1 .all-btns a.link-anime.v2::after {
    background: #1a1311 !important;
}

.banner.v1 .check-mark-list.v1 .my-icon,
.banner.v1 .play-btn.v1 {
    background: #8B6914 !important;
}

.banner.v1 .play-btn.v1 .icon-play-t {
    color: #fff;
}

/* The decorative honeycomb/shape PNGs (banner/v1/shap-1.png, shap-2.png and
   v2 equivalents) are baked at the original bright Western-Bee yellow. Filter
   them down to the new earthy palette wherever they're shown as backgrounds. */
.banner.v1 .shape-1,
.banner.v1 .shape-2,
.banner.v2 .bee-1,
.banner.v2 .bee-2,
.banner.v3 .shape-1,
.banner.v3 .shape-2,
.bee-fly,
[data-background*="banner/v1/shap-"],
[data-background*="banner/v2/shap-"] {
    filter: hue-rotate(-12deg) saturate(0.55) brightness(0.82);
}

/* Honey-drip side decorations (banner-shapeleft.png / banner-shaperight.png and
   companion shap-2.png from honeycom-b-a/v1). These render as ::before / ::after
   pseudo-elements on multiple sections — filter them all. */
.banner.v3::before,
.banner.v3::after,
.bg-honey-shap-2::before,
.bg-honey-shap-2::after,
.who-we-are.v1 .who-we-box::before,
.who-we-are.v1 .who-we-img::before,
.who-we-are.v1 .who-we-img::after {
    filter: hue-rotate(-12deg) saturate(0.55) brightness(0.82);
}

/* Mute the bright-yellow honeycomb textures from honeybackground/. They're
   applied via data-background JS as the element's background-image, so we use
   background-blend-mode (NOT filter — that would tint the form inputs and
   headings sitting on top of the image). Multiply blends the bright honey
   yellow toward the new earthy amber. */
[data-background*="honeybackground/fresh-comb-honey"],
[data-background*="honeybackground/golden-uneven-grunge"],
[data-background*="honeybackground/bee-on-honey-dipper"],
[data-background*="honeybackground/honeybees-on-comb"],
[data-background*="honeybackground/beekeeper-working"] {
    background-color: #a17c2b;
    background-blend-mode: multiply;
}

/* Bilingual heading EN line — works inside any heading level */
.title-en {
    display: block;
    margin-top: 8px;
    font-size: 0.6em;
    font-weight: 400;
    font-style: italic;
    color: #888;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.section-title h2 .title-en,
.section-title-center h2 .title-en,
.section-title-white h2 .title-en,
.section-title-center-white h2 .title-en {
    margin-top: 10px;
    font-size: 0.5em;
}

/* Generic bilingual EN paragraph — italic, muted */
p.asf-en {
    font-style: italic;
    color: #777;
    font-size: 0.9em;
    line-height: 1.6;
}

/* Honey Production CTA — aligned to the editorial gold rule above,
   styled as a real button so the section ends with a clear next step. */
.honey-production-cta {
    margin-top: 30px;
    padding-left: 28px;
}

.honey-production-cta .link-anime.v1 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--asf-ink);
    color: var(--asf-cream-pale) !important;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.2s ease, transform 0.2s ease;
}

.honey-production-cta .link-anime.v1:hover {
    background: var(--asf-gold-deep);
    color: #fff !important;
    transform: translateY(-2px);
}

@media (min-width: 992px) {
    .honey-production-cta {
        padding-left: 38px;
    }
}

/* Bilingual subtitles + EN paragraphs inside the template's Services V3 cards.
   The base template only styled h4 + p, so add the missing bits to match the
   ASF bilingual pattern. */
.our-services.v3 .service-card h5 {
    font-size: 13px;
    font-weight: 500;
    font-style: italic;
    color: #FFF7D6;
    margin-top: -6px;
    margin-bottom: 12px;
    text-transform: none;
}

.our-services.v3 .service-card p.asf-en {
    font-size: 13px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 8px;
    margin-bottom: 0;
}

/* Services V3 is now a Swiper carousel — equal-height slides + bottom-aligned
   EN paragraphs. Swiper auto-equalizes height when slides have same parent
   flex height, so we set the cards to fill their slide. */
.our-services.v3 .services-slider {
    position: relative;
    overflow: hidden;
}

.our-services.v3 .services-slider .swiper-wrapper {
    align-items: stretch;
}

.our-services.v3 .services-slider .swiper-slide {
    height: auto;
    display: flex;
}

.our-services.v3 .services-slider .service-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.our-services.v3 .services-slider .service-card p:last-child {
    margin-top: auto;
}

/* One standard card height; a long description scrolls inside its card
   (same pattern as the Our Hive cards). EN paragraph stays bottom-aligned. */
.our-services.v3 .services-slider .service-card {
    height: 645px;
}

@media (max-width: 1199px) {
    .our-services.v3 .services-slider .service-card {
        height: 665px;
    }
}

@media (max-width: 991px) {
    .our-services.v3 .services-slider .service-card {
        height: 800px;
    }
}

@media (max-width: 575px) {
    .our-services.v3 .services-slider .service-card {
        height: 760px;
    }
}

@media (max-width: 374px) {
    .our-services.v3 .services-slider .service-card {
        height: 845px;
    }
}

.our-services.v3 .service-card h4,
.our-services.v3 .service-card h5,
.our-services.v3 .service-card > .my-icon {
    flex-shrink: 0;
}

.asf-service-bio {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-right: 6px;
    margin-right: -6px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #C19A6B rgba(255, 255, 255, 0.08);
}

.asf-service-bio::-webkit-scrollbar {
    width: 6px;
}

.asf-service-bio::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.asf-service-bio::-webkit-scrollbar-thumb {
    background: #C19A6B;
    border-radius: 3px;
}

/* Contact banner checklist: white check on the gold circle (gold-on-gold was invisible) */
.banner.v1 .check-mark-list.v1 .my-icon {
    color: #fff;
}

/* Pager row — prev arrow | numbered pages | next arrow (sits between the
   slider and the "contáctanos · contact us" button). Mimics the shop-page
   pagination style. */
.our-services.v3 .services-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 32px 0 28px;
    flex-wrap: wrap;
}

.our-services.v3 .services-pager .prev-btn,
.our-services.v3 .services-pager .next-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.our-services.v3 .services-pager .prev-btn:hover,
.our-services.v3 .services-pager .next-btn:hover {
    background: #C19A6B;
    color: #2b221f;
    border-color: #C19A6B;
}

.our-services.v3 .services-pager .swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.our-services.v3 .services-pager .swiper-pagination {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    transform: none;
}

.our-services.v3 .services-pager .swiper-pagination-bullet {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.our-services.v3 .services-pager .swiper-pagination-bullet:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

.our-services.v3 .services-pager .swiper-pagination-bullet-active {
    background: #C19A6B;
    color: #2b221f;
    border-color: #C19A6B;
}

.our-services.v3 .services-pager .swiper-pagination-bullet-active:hover {
    background: #8B6914;
    border-color: #8B6914;
}

@media (max-width: 575px) {
    .our-services.v3 .services-pager .prev-btn,
    .our-services.v3 .services-pager .next-btn,
    .our-services.v3 .services-pager .swiper-pagination-bullet {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
}

.section-title-white h2 .title-en,
.section-title-center-white h2 .title-en {
    color: rgba(255, 255, 255, 0.78);
}

/* Hero bilingual paragraphs */
.banner.v1 .hero-tagline-es {
    font-size: 17px;
    line-height: 1.55;
}

.banner.v1 .hero-tagline-en {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.55;
    font-style: italic;
    opacity: 1;
}

/* Generic section spacing for ASF sections */
.asf-section {
    padding: 80px 0;
}

@media (max-width: 767px) {
    .asf-section {
        padding: 50px 0;
    }
}

/* Quiénes Somos two-column ES/EN */
.asf-quienes-row {
    margin-top: 30px;
}

.asf-text {
    background: #fdfaf2;
    border-left: 4px solid #C19A6B;
    padding: 26px 28px;
    border-radius: 8px;
    height: 100%;
}

.asf-text-en {
    background: #f6f3eb;
    border-left-color: #639533;
}

.asf-lang-label {
    display: inline-block;
    margin-bottom: 12px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #C19A6B;
    color: #1a1a1a;
    border-radius: 999px;
}

.asf-text-en .asf-lang-label {
    background: #639533;
    color: #fff;
}

.asf-text p {
    font-size: 15px;
    line-height: 1.7;
    color: #3a3a3a;
    margin-bottom: 14px;
}

.asf-text-en p {
    font-style: italic;
}

.asf-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .asf-quienes-row > [class*="col-"] + [class*="col-"] {
        margin-top: 22px;
    }
}

/* What We Do — dark tint over bg image for legibility */
.asf-hacemos {
    position: relative;
    isolation: isolate;
}

.asf-hacemos::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 28, 18, 0.58) 0%, rgba(20, 28, 18, 0.48) 100%);
    z-index: 0;
    pointer-events: none;
}

.asf-hacemos > .container {
    position: relative;
    z-index: 1;
}

/* Same tint treatment for Influencia (also uses a bg image) */
.asf-influencia {
    position: relative;
    isolation: isolate;
}

.asf-influencia::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 22, 14, 0.82) 0%, rgba(15, 22, 14, 0.72) 100%);
    z-index: 0;
    pointer-events: none;
}

.asf-influencia > .container {
    position: relative;
    z-index: 1;
}

/* Testimonial — slight tint over the Nicaragua landscape (2.png) so the
   white "Customer Reviews" + "Tasting the Story Behind Every Jar" stay
   readable. Stronger at the top where the headline sits, fading down so
   the landscape still shows through behind the white review cards. */
.testimonial.v1 {
    position: relative;
    isolation: isolate;
}

.testimonial.v1::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 22, 14, 0.5) 0%, rgba(15, 22, 14, 0.25) 100%);
    z-index: 0;
    pointer-events: none;
}

.testimonial.v1 > .container {
    position: relative;
    z-index: 1;
}

/* What We Do — mission intro + focus cards */
.asf-mission {
    max-width: 880px;
    margin: 0 auto 40px;
    text-align: center;
}

.asf-mission p,
.asf-mission-es,
.asf-mission-en {
    color: #ffffff;
}

.asf-mission-es {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 12px;
    color: #ffffff;
}

.asf-mission-en {
    font-size: 14px;
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.88);
}

.asf-focus-grid > [class*="col-"] {
    margin-bottom: 24px;
}

.asf-focus-card.service-card {
    height: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    padding: 26px 24px;
    backdrop-filter: blur(4px);
    transition: transform 0.2s ease, background 0.2s ease;
}

.asf-focus-card.service-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.1);
}

.asf-focus-card .my-icon {
    color: #FFF7D6;
}

.asf-focus-card h4 {
    margin-top: 14px;
    margin-bottom: 4px;
    color: #ffffff;
}

.asf-focus-card h5 {
    font-size: 14px;
    font-weight: 500;
    font-style: italic;
    color: #FFF7D6;
    margin-bottom: 14px;
    text-transform: none;
}

.asf-focus-card p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #ffffff;
}

.asf-focus-card p.asf-en {
    font-size: 13px;
    font-style: italic;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.78);
}

/* Values list — 2-col on desktop, single on mobile */
.asf-values-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.asf-values-list li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fffaf0;
    border: 1px solid #f1e6c8;
    border-radius: 10px;
    padding: 18px 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.asf-values-list li:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.asf-values-list .my-icon {
    flex-shrink: 0;
    font-size: 36px;
    color: #C19A6B;
    line-height: 1;
}

.asf-values-list h5 {
    margin: 0 0 4px 0;
    font-size: 16px;
    line-height: 1.35;
    color: #1a1a1a;
}

.asf-values-list p {
    margin: 0;
    font-size: 13px;
    font-style: italic;
    color: #6f6f6f;
}

@media (max-width: 767px) {
    .asf-values-list {
        grid-template-columns: 1fr;
    }
}

/* Principios cards */
.asf-principios-grid {
    margin-top: 30px;
}

.asf-principios-grid > [class*="col-"] {
    margin-bottom: 26px;
}

.asf-principio-card {
    position: relative;
    background: #fff;
    border: 1px solid #efe7d2;
    border-radius: 12px;
    padding: 30px 26px 26px;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.asf-principio-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

.asf-principio-num {
    position: absolute;
    top: -14px;
    left: 22px;
    background: #C19A6B;
    color: #1a1a1a;
    font-weight: 800;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    letter-spacing: 0.05em;
}

.asf-principio-card h4 {
    font-size: 18px;
    margin-bottom: 2px;
    line-height: 1.3;
}

.asf-principio-card h5 {
    font-size: 13px;
    font-weight: 500;
    font-style: italic;
    color: #639533;
    margin-bottom: 14px;
    text-transform: none;
}

.asf-principio-card p {
    font-size: 14px;
    line-height: 1.65;
    color: #444;
    margin-bottom: 10px;
}

.asf-principio-card p.asf-en {
    font-size: 13px;
    font-style: italic;
    color: #777;
    margin-bottom: 0;
}

/* Influencia / Impact stats */
.asf-influencia-intro {
    max-width: 920px;
    margin: 0 auto 40px;
    text-align: center;
}

.asf-influencia-intro p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 12px;
    color: #ffffff;
}

.asf-influencia-intro p.asf-en {
    font-size: 13px;
    font-style: italic;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.88);
}

.asf-stats-row {
    margin-top: 10px;
}

.asf-stats-row > [class*="col-"] {
    margin-bottom: 22px;
}

.asf-stat-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 28px 22px;
    text-align: center;
    height: 100%;
    backdrop-filter: blur(4px);
    transition: transform 0.2s ease, background 0.2s ease;
}

.asf-stat-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.1);
}

.asf-stat-num {
    display: block;
    font-size: 42px;
    font-weight: 800;
    color: #FFF7D6;
    line-height: 1.1;
    margin-bottom: 10px;
}

.asf-stat-card h5 {
    color: #fff;
    font-size: 15px;
    line-height: 1.35;
    margin-bottom: 6px;
}

.asf-stat-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-style: italic;
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 575px) {
    .asf-stat-num {
        font-size: 34px;
    }
}

/* Origen — image + text */
.asf-origen-img img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.asf-origen p {
    font-size: 15px;
    line-height: 1.7;
    color: #3a3a3a;
    margin-bottom: 14px;
}

.asf-origen p.asf-en {
    font-size: 13px;
    font-style: italic;
    color: #777;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .asf-origen-img {
        margin-bottom: 26px;
    }
}

/* Nuestra Red — network map */
.asf-mapa {
    background: #fdfaf2;
}

.asf-mapa-intro {
    max-width: 900px;
    margin: 0 auto 36px;
    text-align: center;
}

.asf-mapa-intro p {
    font-size: 15px;
    line-height: 1.7;
    color: #3a3a3a;
    margin-bottom: 12px;
}

.asf-mapa-intro p.asf-en {
    font-size: 13.5px;
    color: #777;
    font-style: italic;
    margin-bottom: 0;
}

.asf-mapa-img {
    margin: 0 0 28px 0;
    text-align: center;
}

.asf-mapa-img img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 760px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(80, 65, 40, 0.12);
    background: #fffaf0;
}

@media (max-width: 991px) {
    .asf-mapa-img img {
        max-height: 620px;
    }
}

@media (max-width: 575px) {
    .asf-mapa-img img {
        max-height: 460px;
    }
}

.asf-mapa-img figcaption {
    margin-top: 14px;
    font-size: 13px;
    color: #8a7a55;
    font-style: italic;
    line-height: 1.5;
}

.asf-mapa-img figcaption .asf-en-inline {
    color: #aaa;
    margin-left: 6px;
}

.asf-mapa-countries {
    list-style: none;
    padding: 0;
    margin: 8px auto 0;
    max-width: 920px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
}

.asf-mapa-countries li {
    background: #fff;
    border: 1px solid #efe7d2;
    color: #3a3a3a;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.asf-mapa-countries li:hover {
    background: #fffaf0;
    border-color: #C19A6B;
}

.asf-mapa-countries .asf-tag {
    color: #639533;
    font-style: italic;
    font-weight: 400;
    font-size: 11.5px;
    margin-left: 4px;
}

/* Team / Colmena cards */
.asf-team-row {
    margin-top: 30px;
}

.asf-team-row > [class*="col-"] {
    margin-bottom: 28px;
}

.asf-person-card {
    background: #fff;
    border: 1px solid #efe7d2;
    border-radius: 14px;
    padding: 22px 20px 24px;
    height: 100%;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.asf-person-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

.asf-person-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 18px;
    background: #faf5e6;
    border: 3px solid #C19A6B;
}

.asf-person-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.asf-person-card h4 {
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 4px;
    text-align: center;
}

.asf-person-card h6 {
    font-size: 12px;
    font-weight: 500;
    color: #639533;
    font-style: italic;
    text-align: center;
    margin-bottom: 16px;
    text-transform: none;
    line-height: 1.4;
}

.asf-person-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 10px;
}

.asf-person-card p.asf-en {
    font-size: 12.5px;
    font-style: italic;
    color: #777;
    margin-bottom: 0;
}

.asf-team-note {
    margin-top: 24px;
    padding: 18px 22px;
    background: #fffaf0;
    border: 1px dashed #e4d49a;
    border-radius: 10px;
    text-align: center;
    font-size: 13.5px;
    color: #6a5a2c;
    line-height: 1.6;
}

/* Colmena slider — slides need equal-height cards */
.asf-team .asf-team-slider {
    margin-top: 30px;
    overflow: hidden;
}

.asf-team .asf-team-slider .swiper-wrapper {
    align-items: stretch;
}

.asf-team .asf-team-slider .swiper-slide {
    height: auto;
    display: flex;
}

/* One standard card height; long bios scroll inside the card */
.asf-team .asf-team-slider .swiper-slide .asf-person-card {
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: column;
}

.asf-person-card .asf-person-img,
.asf-person-card h4,
.asf-person-card h6 {
    flex-shrink: 0;
}

.asf-person-bio {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
    margin-right: -8px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #C19A6B #faf5e6;
}

.asf-person-bio::-webkit-scrollbar {
    width: 6px;
}

.asf-person-bio::-webkit-scrollbar-track {
    background: #faf5e6;
    border-radius: 3px;
}

.asf-person-bio::-webkit-scrollbar-thumb {
    background: #C19A6B;
    border-radius: 3px;
}

@media (max-width: 767px) {
    .asf-team .asf-team-slider .swiper-slide .asf-person-card {
        height: 560px;
    }
}

/* Colmena pager — light-background variant of the services pager */
.asf-team .asf-team-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 32px 0 12px;
    flex-wrap: wrap;
}

.asf-team .asf-team-pager .prev-btn,
.asf-team .asf-team-pager .next-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #C19A6B;
    background: transparent;
    color: #2b221f;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.asf-team .asf-team-pager .prev-btn:hover,
.asf-team .asf-team-pager .next-btn:hover {
    background: #C19A6B;
    color: #2b221f;
    border-color: #C19A6B;
}

.asf-team .asf-team-pager .swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.asf-team .asf-team-pager .swiper-pagination {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    transform: none;
}

.asf-team .asf-team-pager .swiper-pagination-bullet {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #C19A6B;
    background: transparent;
    color: #2b221f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.asf-team .asf-team-pager .swiper-pagination-bullet:hover {
    background: #fdf3d4;
    border-color: #C19A6B;
}

.asf-team .asf-team-pager .swiper-pagination-bullet-active {
    background: #C19A6B;
    color: #2b221f;
    border-color: #C19A6B;
}

.asf-team .asf-team-pager .swiper-pagination-bullet-active:hover {
    background: #8B6914;
    border-color: #8B6914;
}

/* Phones: keep arrows + all 6 page buttons on one line (fits a 360px screen) */
@media (max-width: 575px) {
    .asf-team .asf-team-pager {
        gap: 6px;
        flex-wrap: nowrap;
    }

    .asf-team .asf-team-pager .swiper-pagination {
        gap: 4px;
    }

    .asf-team .asf-team-pager .prev-btn,
    .asf-team .asf-team-pager .next-btn,
    .asf-team .asf-team-pager .swiper-pagination-bullet {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        font-size: 13px;
    }
}

/* CTA cards — dark tint over the Nicaragua landscape so the white headline
   and form / button stay readable. Applies to:
   - .news-letter (Newsletter CTA in the footer, on every page)
   - .mobile-ads-box (Download App CTA on the homepage)
   The overlay matches the card's border-radius so it stays inside the
   rounded corners. The brand-gold border ties the card back to the rest
   of the site's accent palette (pager buttons, hover states). */
.info-footer.v1 .news-letter,
.download-app.v1 .mobile-ads-box {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 2px solid #C19A6B;
}

.info-footer.v1 .news-letter::before,
.download-app.v1 .mobile-ads-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

.info-footer.v1 .news-letter > *,
.download-app.v1 .mobile-ads-box > * {
    position: relative;
    z-index: 1;
}

/* CTA cards now sit on a darkened landscape — force the headline and
   sub-label to white so they're legible against the tint. Applies to
   both the Newsletter card (footer) and the Download App card. */
.info-footer.v1 .news-letter .section-title h2,
.info-footer.v1 .news-letter .section-title h6,
.info-footer.v2 .news-letter .section-title h2,
.info-footer.v2 .news-letter .section-title h6,
.download-app.v1 .mobile-ads-box .section-title h2,
.download-app.v1 .mobile-ads-box .section-title h6 {
    color: #ffffff;
}

/* Footer background — slight dark tint over the Nicaragua landscape image
   so the white text and gold accents stay readable. */
.info-footer.v1 {
    position: relative;
    isolation: isolate;
}

.info-footer.v1::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
    z-index: 0;
}

.info-footer.v1 > .container {
    position: relative;
    z-index: 1;
}

/* Long email addresses wrap instead of running off narrow phones */
.info-footer .info-link li a {
    max-width: 100%;
}

.info-footer .info-link li .text {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* =========================================================================
   Vendor sections — Mode C rebrand
   Sections 12 (banner.v3 "How Honey is Produced"), 13 (why-us), 15
   (our-products), 16 (we-serve), 18 (blog-news) shipped with the vendor
   template's bright honey-yellow accents. The :root override at the top
   of this file re-points --color-yellow → var(--asf-gold), which already
   retints the icons, prices, post-tags, hover states, etc. The rules
   below handle the remaining touches (backgrounds, shadows, card borders)
   so these sections fully land in our cream rhythm.
   ========================================================================= */

/* Anchor backgrounds to our cream so the rhythm reads
   cream → cream → cream → DARK consistently. */
.banner.v3,
.why-us.v1 {
    background: var(--asf-cream);
}

/* Why-Us: vendor uses --color-yellow icon bg + --color-black drop shadow.
   The yellow now reads earthy via the token; deepen the shadow to our
   gold-deep so it pairs with the icon instead of clashing. Also force
   the icon glyph color to ink so it stays legible on the earthier bg. */
.why-us.v1 li .my-icon {
    color: var(--asf-ink);
    box-shadow: 0 5px 0 var(--asf-gold-deep);
}

/* Our Products card frame — vendor border is 1px rgba ink @ 0.1, fine.
   Just unify the radius with our team / principio cards (14px). */
.product-card.v1,
.product-card.v2 {
    border-radius: 14px;
    border-color: #efe7d2;
}

/* We-Serve cards — vendor styles ship without a card frame; give them a
   subtle cream-deep panel like our values / principios cards so the
   section visually pairs with sections 4 and 5. */
.we-serve.v1 .we-serve-card {
    background: var(--asf-cream-deep);
    border: 1px solid #efe7d2;
    border-radius: 14px;
    padding: 28px 22px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.we-serve.v1 .we-serve-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.06);
}

/* Blog News post cards — match team / principio card frame. The
   post-tag and meta colors already inherit our gold via --color-yellow. */
.blog-news.v1 .blog-card {
    background: #fff;
    border: 1px solid #efe7d2;
    border-radius: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-news.v1 .blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.06);
}

/* Banner v3 (How Honey is Produced) — the section pairs a product photo
   trio on the left with a list of honey-production steps on the right.
   The vendor uses --color-yellow for list-marker accents; that's now
   our earthy gold. Add a faint cream-deep card behind the right column
   so it reads as content, not floating text on white. */
.banner.v3 .product-img {
    border-radius: 14px;
}

/* =========================================================================
   Editorial chapter dividers
   Five numbered breath stops that group the homepage's 18 sections into a
   readable narrative. Designed to read like magazine chapter marks:
       — small all-caps "Capítulo 01" eyebrow in gold
       — thin horizontal rule (the "thread")
       — large Spanish title with a smaller English line beneath
   Background is cream so the divider feels like a deliberate pause, not
   another content row. Narrow container (720px) so type doesn't sprawl.
   ========================================================================= */
.asf-chapter {
    padding: 110px 0 80px;
    background: var(--asf-cream);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.asf-chapter > .container {
    max-width: 720px;
    position: relative;
    z-index: 1;
}

.asf-chapter-mark {
    position: absolute;
    left: 40px;
    bottom: 24px;
    width: 130px;
    height: auto;
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 991px) {
    .asf-chapter-mark {
        width: 100px;
        left: 24px;
        bottom: 20px;
    }
}

@media (max-width: 575px) {
    .asf-chapter-mark {
        width: 72px;
        left: 16px;
        bottom: 14px;
        opacity: 0.7;
    }
}

.asf-chapter-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4em;
    color: var(--asf-gold);
    text-transform: uppercase;
    margin-bottom: 28px;
}

.asf-chapter-line {
    width: 56px;
    height: 1px;
    background: var(--asf-gold);
    margin: 0 auto 28px;
    opacity: 0.7;
}

.asf-chapter-title {
    font-size: 52px;
    line-height: 1.1;
    color: var(--asf-ink);
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.asf-chapter-title .title-en {
    display: block;
    margin-top: 14px;
    font-size: 0.34em;
    font-weight: 400;
    font-style: italic;
    color: var(--asf-muted);
    letter-spacing: 0.04em;
}

@media (max-width: 991px) {
    .asf-chapter {
        padding: 80px 0 60px;
    }
    .asf-chapter-title {
        font-size: 42px;
    }
}

@media (max-width: 575px) {
    .asf-chapter {
        padding: 64px 0 44px;
    }
    .asf-chapter-eyebrow {
        font-size: 11px;
        letter-spacing: 0.3em;
        margin-bottom: 20px;
    }
    .asf-chapter-title {
        font-size: 32px;
    }
}

/* Alternating widths — the chapter dividers already alternate narrow
   (720px cream) ↔ wide (full container content). For text-heavy
   columns inside sections, tighten the reading measure so paragraphs
   sit at ~60ch instead of sprawling across the half-column. */
.asf-origen p {
    max-width: 56ch;
}

/* =========================================================================
   "El Mundo de las abejas Meliponini" — bee/hive photo gallery
   6 large square photos in a 3-up grid on desktop, 2-up on tablet,
   1-up on mobile. Each photo has a small Spanish + English caption
   underneath. Background is cream; this section is pure photography
   as a visual rest stop between text-heavy sections.
   ========================================================================= */
.asf-meliponas {
    background: var(--asf-cream);
    padding: 110px 0;
    text-align: center;
}

.asf-meliponas-intro {
    max-width: 720px;
    margin: 0 auto 56px;
}

.asf-meliponas-intro h2 {
    font-size: 44px;
    line-height: 1.15;
    color: var(--asf-ink);
    margin: 0 0 14px 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.asf-meliponas-intro h2 .title-en {
    display: block;
    margin-top: 10px;
    font-size: 0.4em;
    font-weight: 400;
    font-style: italic;
    color: var(--asf-muted);
    letter-spacing: 0.04em;
}

.asf-meliponas-intro p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--asf-muted);
    max-width: 560px;
    margin: 0 auto;
    font-style: italic;
}

.asf-meliponas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1160px;
    margin: 0 auto;
}

.asf-melipona-card {
    text-align: left;
    transition: transform 0.4s ease;
}

.asf-melipona-card:hover {
    transform: translateY(-4px);
}

.asf-melipona-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px;
    background: #f1eadc;
    margin-bottom: 18px;
    box-shadow: 0 18px 40px rgba(60, 45, 25, 0.1);
    position: relative;
}

.asf-melipona-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.asf-melipona-card:hover .asf-melipona-img img {
    transform: scale(1.05);
}

.asf-melipona-num {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(43, 34, 31, 0.7);
    color: var(--asf-cream-pale);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 5px 10px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.asf-melipona-card h4 {
    font-size: 19px;
    line-height: 1.3;
    color: var(--asf-ink);
    margin: 0 0 4px 0;
    font-weight: 700;
}

.asf-melipona-card .asf-melipona-en {
    font-size: 13px;
    font-style: italic;
    color: var(--asf-muted);
    line-height: 1.5;
    margin: 0;
}

/* Gallery is the last section before the footer: on wide screens the
   newsletter card is pulled up over it, so leave room for the overlap */
@media (min-width: 1200px) {
    main > .asf-meliponas:last-child {
        padding-bottom: 220px;
    }
}

/* Gallery: a lone photo on the last row sits centered, not stuck to the left */
@media (min-width: 992px) {
    .asf-meliponas-grid > .asf-melipona-card:last-child:nth-child(3n+1) {
        grid-column: 2;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .asf-meliponas-grid > .asf-melipona-card:last-child:nth-child(2n+1) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 24px) / 2);
    }
}

@media (max-width: 991px) {
    .asf-meliponas {
        padding: 80px 0;
    }
    .asf-meliponas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .asf-meliponas-intro h2 {
        font-size: 36px;
    }
}

@media (max-width: 575px) {
    .asf-meliponas {
        padding: 60px 0;
    }
    .asf-meliponas-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .asf-meliponas-intro h2 {
        font-size: 30px;
    }
    .asf-meliponas-intro {
        margin-bottom: 40px;
    }
}

/* Hero photo on desktop (.rount-profile-bg): the template circle was 60% of
   the viewport, bled off the right edge and under the header, and offset the
   photo 115px down — so only a zoomed-in corner showed. Fit the whole circle
   on screen and center the photo on the bee (~38% across, ~55% down).
   No transform here: it would put the gold ::before disc above the photo.
   Mobile/tablet already show the photo well and are left untouched. */
@media (min-width: 1200px) {
    html:not([dir=rtl]) .banner.v1 .rount-profile-bg,
    html[dir=rtl] .banner.v1 .rount-profile-bg {
        width: min(42vw, 600px);
        height: min(42vw, 600px);
        top: calc(50% - min(21vw, 300px));
        right: max(15px, calc((100% - 1320px) / 2 + 15px));
        background-position: 38% 55%;
    }
}

/* Contact banner: three call-to-action buttons — tighter gap so they fit one row on tablets */
@media (max-width: 991px) {
    .banner.v1 .banner-content .all-btns {
        gap: 12px;
    }
}

/* Footer payment logos: scale down instead of overflowing small phones */
.pement-img {
    max-width: 100%;
}

.pement-img img {
    max-width: 100%;
    height: auto;
}

/* Contact banner buttons: full-width stack on phones (labels vary a lot in length) */
@media (max-width: 575px) {
    .banner.v1 .banner-content .all-btns li {
        width: 100%;
    }

    .banner.v1 .banner-content .all-btns a {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* Contact page details card: tighter padding on phones so the email fits */
@media (max-width: 575px) {
    .contact-us.v1 .info-content {
        padding: 36px 22px;
    }

    .contact-us.v1 .info-content li {
        gap: 14px;
        flex-wrap: nowrap;
    }

    .contact-us.v1 .info-content li p {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* Newsletter confirmation / error line under the subscribe form */
.subscribe-response {
    margin: 12px 0 0;
    font-size: 14px;
    color: #fff;
    min-height: 1em;
}

.subscribe-response.error {
    color: #ffd6a5;
}

/* Etsy shop link in the navbar — pill button so it stands apart from the text links */
.menu-bar.v1 .main-menu > ul > li > a.nav-shop-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #639533;
    color: #fff !important;
    transition: background 0.2s ease;
}

.menu-bar.v1 .main-menu > ul > li > a.nav-shop-link:hover {
    background: #4f7a27;
}

.menu-bar.v1 .main-menu > ul > li > a.nav-shop-link::before,
.menu-bar.v1 .main-menu > ul > li > a.nav-shop-link::after {
    display: none !important;
}

.nav-shop-link .my-icon {
    font-size: 15px;
    line-height: 1;
}

/* Header "♥ Etsy" pill (replaces the old wishlist heart) — links to the Etsy
   shop on every screen size, so the desktop menu pill is hidden as a duplicate. */
.menu-bar.v1 .menu-right .etsy-shop-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    background: #639533 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s ease;
}

.menu-bar.v1 .menu-right .etsy-shop-btn:hover {
    background: #4f7a27 !important;
}

.menu-bar.v1 .menu-right .etsy-shop-btn .my-icon {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    font-size: 15px !important;
}

@media (min-width: 1200px) {
    .menu-bar.v1 .main-menu .nav-shop-item {
        display: none;
    }
}

/* Header right side is now just "♥ Etsy" + the menu button (search removed).
   The template shows/hides these slots by position (li:nth-child), so pin them
   by class instead. Phones keep logo + menu button only; Etsy is in the menu. */
.menu-bar.v1 .menu-right > ul > li.menu-toggle-item {
    display: inline-block !important;
}

.menu-bar.v1 .menu-right > ul > li.etsy-item {
    display: none !important;
}

@media (min-width: 768px) {
    .menu-bar.v1 .menu-right > ul > li.etsy-item {
        display: inline-block !important;
    }
}

.menu-bar.v1 .menu-right .etsy-shop-btn {
    width: auto !important;
    margin: 0 !important;
}

/* Inside the slide-out mobile menu the pill sits on its own line */
.mobile-menu-bar .nav-shop-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #639533;
    color: #fff !important;
}

/* Desktop shows the full menu, so the menu button stays hidden there */
@media (min-width: 1200px) {
    .menu-bar.v1 .menu-right > ul > li.menu-toggle-item {
        display: none !important;
    }
}

/* Only two menu links, so show the full menu from tablet size up; the
   menu button is for phones only. */
@media (min-width: 768px) {
    .menu-bar.v1 .main-menu {
        display: block;
    }

    .menu-bar.v1 .menu-right > ul > li.menu-toggle-item {
        display: none !important;
    }

    .menu-bar.v1 .main-menu .nav-shop-item {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .menu-bar.v1 .main-menu > ul {
        gap: 22px;
    }
}

/* "Donar" pill beside Etsy — honey gold so the two calls to action read apart */
.menu-bar.v1 .menu-right > ul > li.donate-item {
    display: none !important;
}

@media (min-width: 768px) {
    .menu-bar.v1 .menu-right > ul > li.donate-item {
        display: inline-block !important;
    }

    .menu-bar.v1 .menu-right > ul {
        gap: 10px;
    }
}

.menu-bar.v1 .menu-right .donate-btn {
    background: #C19A6B !important;
    color: #2b221f !important;
}

.menu-bar.v1 .menu-right .donate-btn:hover {
    background: #a9824f !important;
}

.menu-bar.v1 .menu-right .donate-btn .my-icon {
    color: #2b221f !important;
}

.mobile-menu-bar .nav-donate-link {
    background: #C19A6B;
    color: #2b221f !important;
}