/* ===== BuenDeal brand overrides ===== */
:root {
    --background-color: #1A4A98 !important;
    --background-color-rgb: 26, 74, 152 !important;
    --accent-color: #FFB347;
    --accent-color-rgb: 255, 179, 71;
    --foreground-color: #ffffff;

    /* Bright Mexican-market cobalt, but pulled ~25% darker than the original
       Casa-Azul brightening so the lifted marigold below passes WCAG AA normal
       (4.5:1) for text-on-blue. Still clearly more vivid than the corporate
       #102B4C the project started with. */
    --bd-navy: #1A4A98;
    --bd-navy-deep: #143A7A;
    --bd-blue: #3B6FD8;
    --bd-cream: #F4EFE8;
    /* Lifted marigold — a touch brighter / more saturated than #F18A3F so it
       hits 4.7:1 on the new navy and stays unmistakably orange (not yellow). */
    --bd-marigold: #FFB347;
    --bd-magenta: #E0479E;

    /* Marker / handwriting — used only for short logo-like names, prices,
       and callouts (e.g. "$39.99", "100+ vendidas hoy", "MUNDIAL 2026",
       CTA labels, AHORRA badges). NEVER for body, descriptions, nav, or
       form labels — those stay Plus Jakarta Sans. */
    --bd-marker: 'Caveat', 'Marker Felt', 'Bradley Hand', cursive;
}

/* ===== Marker / handwriting application — short logo-like names, prices,
   and callouts only. Caveat reads larger than Plus Jakarta at the same
   px size, so most rules also bump font-size to compensate. ===== */
.wc-hero .eyebrow,
.wc-hero .cta,
.wc-hero .price,
.wc-hero .price .now,
.wc-hero .price .was,
.bd-cm-card .bd-cm-pct,
.bd-santa-ganga .sg-fire,
.bd-santa-ganga .sg-cta,
.bd-santa-ganga .sg-prices,
.bd-santa-ganga .sg-was,
.bd-santa-ganga .sg-now,
.bd-santa-ganga .sg-now sup,
.bd-santa-ganga .sg-save {
    font-family: var(--bd-marker) !important;
    font-weight: 700;
    letter-spacing: 0 !important;
}

/* ===== "Cut paper" market aesthetic — price buttons and CTAs are slightly
   hand-cut: irregular corner radii, a tiny rotation, soft lift shadow.
   Subtle — feels handmade, not broken. ===== */

.bd-santa-ganga .sg-cta {
    border-radius: 0 !important;
    transform: rotate(-1.2deg);
    box-shadow: 0 3px 8px rgba(0,0,0,0.28);
    transform-origin: center;
    font-size: 26px !important;
    line-height: 1.05 !important;
    padding: 8px 22px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em;
    -webkit-text-stroke: 1.2px currentColor;
    paint-order: stroke fill;
}
.bd-santa-ganga .sg-cta:hover {
    transform: rotate(-1.2deg) translateY(-1px);
}

.wc-hero .cta {
    border-radius: 0 !important;
    transform: rotate(0.8deg);
    box-shadow: 0 3px 8px rgba(0,0,0,0.28);
    transform-origin: center;
    font-size: 26px !important;
    line-height: 1.05 !important;
    padding: 8px 22px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em;
    -webkit-text-stroke: 1.2px currentColor;
    paint-order: stroke fill;
}
.wc-hero .cta:hover {
    transform: rotate(0.8deg) translateY(-1px);
}

/* Santa Ganga price strip — keep the bottom anchored to the panel, but
   give the top edge a subtle hand-cut wave so the strip reads like a
   torn / pasted-on price label. Wave depth is tuned to stay above the
   price text given Caveat's larger optical size. */
.bd-santa-ganga .sg-price-block {
    clip-path: polygon(
        0%   6%,
        18%  3%,
        38%  5%,
        58%  2%,
        78%  4%,
        100% 3%,
        100% 100%,
        0%   100%
    );
}

body {
    background-color: var(--bd-cream) !important;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-variation-settings: normal !important;
    letter-spacing: -0.01em;
}
h1 { font-weight: 800 !important; }
h2 { font-weight: 700 !important; }

main, #content, .market-grid, .offers, .teasers, .reviews {
    background-color: var(--bd-cream);
}

/* Hide Univision-only super-nav */
#header .super-nav { display: none !important; }

/* Hide cookie-consent bottom sheet (matches Lewis & Conger preview) */
#cookie-consent,
.cookie-consent,
#cookie-bar,
.bottom-sheet,
[id*="cookie-consent"] {
    display: none !important;
}

/* Brand-color header — Lewis & Conger pattern: linear-gradient with the
   bottom 42px in deeper navy so the sub-nav reads as the darker stripe at
   the bottom of the same blue band (no separate background needed).
   Override platform's fixed 188px height so the header collapses to its
   real content (branding row + 42px sub-nav stripe). */
#header,
#header.dark {
    background: linear-gradient(to top,
        var(--bd-navy-deep) 42px,
        var(--bd-navy) 42px) !important;
    background-image: linear-gradient(to top,
        var(--bd-navy-deep) 42px,
        var(--bd-navy) 42px) !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}
/* The MorningSave platform lays out branding + sub-nav + search as three
   flex columns in one row, which puts the sub-nav next to the branding
   instead of below it. Re-stack to match L&C: branding (top-left), search
   (top-right), sub-nav as a full-width 42px stripe at the bottom. */
#header > nav {
    align-items: flex-start !important;
    position: relative;
    padding-bottom: 42px !important;
    height: auto !important;
    min-height: 132px !important;  /* match L&C: 90px branding row + 42px stripe */
}
#header > nav .branding {
    height: auto !important;
    align-self: flex-start !important;
}
#header > nav .search {
    align-self: flex-start !important;
    top: 14px !important;  /* match L&C; platform default puts it at top:36 which collides with the sub-nav stripe */
}
#header > nav .branding .logo.bd-logo {
    position: static !important;
    top: auto !important;
    left: auto !important;
}
#header > nav > .sub-nav {
    position: absolute !important;
    left: 4px !important;   /* mirror nav's padding-left */
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}
#header > nav > .sub-nav > ul {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
#header > nav > .sub-nav li a.menu {
    color: #ffffff !important;
    font-size: 16px;
    line-height: 1;
}

/* Header text + nav */
#header nav, #header nav *, #header .sub-nav, #header .sub-nav * {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-variation-settings: normal !important;
}

/* Restore FontAwesome icon font on icon-bearing elements (search, clear, etc.) */
#header .fa,
#header [class*=" fa-"],
#header [class^="fa-"],
#header i.fa,
#header button.fa,
#header a.fa,
.fa, [class*=" fa-"], [class^="fa-"] {
    font-family: FontAwesome, 'Font Awesome 5 Free', 'Font Awesome 6 Free' !important;
    font-weight: normal !important;
}
#header .sub-nav,
#header .sub-nav ul,
#header .sub-nav li,
#header .sub-nav li a,
#header .sub-nav a { font-size: 14px !important; }
#header .trending dt, #header .trending dd a {
    color: rgba(255,255,255,0.85);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
#header nav .search input {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    background: transparent !important;
    color: #ffffff !important;
}
#header nav .search input::placeholder {
    color: rgba(255,255,255,0.6) !important;
}
/* Match L&C: no full box around the search input, just a thin underline
   under the magnifier + input row. */
#header nav .search form,
#header nav .search form > div {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
#header nav .search form > div {
    border-bottom: 1px solid rgba(255,255,255,0.85) !important;
}
#header nav .search .fa-search { color: rgba(255,255,255,0.85) !important; }

/* ===== BuenDeal logo lockup — left-aligned, sized to L&C's ~70px scale ===== */
#header nav .branding {
    display: flex;
    align-items: center;
    gap: 14px;
}
#header nav .branding .logo.bd-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    min-height: 90px;  /* fill the 90px branding row (above the 42px sub-nav stripe) so the lockup is vertically centered */
}
#header nav .branding .logo.bd-logo img { display: none !important; }
#header nav .branding .logo.bd-logo img.bd-logo-image {
    display: block !important;
    height: 91px;
    width: auto;
    max-width: none;
    /* Negative margins on both ends — top pulls the wordmark above the
       header's top edge slightly, bottom lets the lower edge drape into
       the dark sub-nav stripe. */
    margin: -5px 0 -33px 0;
    padding: 0;
    position: relative;
    z-index: 10;
}
/* Header / nav need overflow:visible so the logo can drape down across the
   sub-nav stripe without being clipped. */
#header,
#header > nav,
#header > nav .branding,
#header > nav .branding .logo.bd-logo {
    overflow: visible !important;
}
#header nav .branding .logo.bd-logo::before,
#header nav .branding .logo.bd-logo::after { content: none !important; }

/* Mobile: the platform's mobile header puts .branding, .search, and .sub-nav
   inside #header > nav with absolute positioning + wide widths that overflow
   a 390px viewport. Reset to a wrapping flex row: logo left, search right,
   sub-nav (hamburger + nav links) on a second line spanning full width. */
@media (max-width: 768px) {
    #header > nav {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 12px !important;
        gap: 0 !important;
        row-gap: 0 !important;
        position: relative !important;
    }
    #header > nav .branding {
        flex: 0 0 auto !important;
        margin: 0 auto 0 0 !important;
        justify-content: flex-start !important;
        min-height: 0 !important;
    }
    #header > nav .search {
        position: static !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }
    /* Platform renders both a search submit button and a clear (×) button —
       the × is meaningless when the input is empty. Hide it on mobile. */
    #header > nav .search .fa-remove,
    #header > nav .search button[type="reset"] {
        display: none !important;
    }
    #header > nav .search form,
    #header > nav .search form > div {
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #header > nav .search input[type="search"] {
        display: none !important;
    }
    #header > nav .search button[type="submit"] {
        position: static !important;
        height: 40px !important;
        width: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #header > nav .sub-nav {
        position: static !important;
        flex: 1 1 100% !important;
        order: 3 !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        /* Negative top margin pulls the sub-nav up so the logo's lower edge
           drapes over its top — same overlap effect as translateY but without
           the empty gap above the logo. */
        margin: -16px 0 0 0 !important;
        min-height: 0 !important;
    }
    #header > nav .sub-nav > * {
        line-height: 1.1 !important;
    }
    #header > nav .sub-nav a,
    #header > nav .sub-nav li {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        height: auto !important;
    }
    #header nav .branding .logo.bd-logo {
        min-height: 0 !important;
        justify-content: flex-start !important;
    }
    #header nav .branding .logo.bd-logo img.bd-logo-image {
        height: 56px;
        margin: 0 !important;
        display: block !important;
        /* z-index keeps the wordmark layered above the sub-nav stripe so the
           drape (created by sub-nav's negative margin-top) reads cleanly. */
        position: relative;
        z-index: 10;
    }

    /* Trust strip: scroll horizontally instead of wrapping to 3 lines */
    .trust-strip {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 18px !important;
        padding: 8px 12px !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .trust-strip::-webkit-scrollbar { display: none; }
    .trust-strip span { white-space: nowrap !important; flex-shrink: 0 !important; }
}

/* Logomark — six radial figures with raised arms, gradient ring of colors */
.bd-logo .bd-mark {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    display: inline-block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><g id='f'><circle cx='50' cy='15' r='7.5' stroke='none'/><path d='M 44 26 Q 50 24 56 26 L 53 47 Q 50 50 47 47 Z' stroke='none'/><path d='M 44 26 Q 36 19 28 12' stroke-width='6' stroke-linecap='round' fill='none'/><path d='M 56 26 Q 64 19 72 12' stroke-width='6' stroke-linecap='round' fill='none'/></g></defs><use href='%23f' fill='%233CB371' stroke='%233CB371'/><use href='%23f' fill='%2337A2D8' stroke='%2337A2D8' transform='rotate(60 50 50)'/><use href='%23f' fill='%235B7DCD' stroke='%235B7DCD' transform='rotate(120 50 50)'/><use href='%23f' fill='%238E5CC4' stroke='%238E5CC4' transform='rotate(180 50 50)'/><use href='%23f' fill='%23E0479E' stroke='%23E0479E' transform='rotate(240 50 50)'/><use href='%23f' fill='%23F18A3F' stroke='%23F18A3F' transform='rotate(300 50 50)'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Stacked text — wordmark on top, tagline below */
.bd-logo .bd-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

/* Wordmark — Caveat handwriting, split-color + split-weight: "Buen" regular
   white, "Deal" bold marigold. Reads like a hand-painted market sign.
   Selector prefix `#header` is required to beat the `#header nav *` Plus
   Jakarta sweep above (which has higher specificity than `.bd-logo …`). */
#header .bd-logo .bd-wordmark,
#header .bd-logo .bd-buen,
#header .bd-logo .bd-deal {
    font-family: var(--bd-marker) !important;
}
#header .bd-logo .bd-wordmark {
    font-size: 60px;
    letter-spacing: 0;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
}
#header .bd-logo .bd-buen { color: #ffffff; font-weight: 400 !important; }
#header .bd-logo .bd-deal { color: var(--bd-marigold); font-weight: 700 !important; }

/* Tagline — sits directly under the wordmark, mirrors MorningSave pattern */
.bd-logo .bd-tagline {
    margin-top: 6px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--bd-marigold);
    line-height: 1;
}

/* Trust-signal strip — pulled directly from Bahigh's deck (B6) */
body::before {
    content: "";
    display: none; /* placeholder; trust strip injected below header via .trust-strip class if present */
}
.trust-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    padding: 12px 20px;
    margin: 0 !important;
    background: #ffffff;
    border-bottom: 1px solid rgba(16,43,76,0.08);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--bd-navy);
}
.trust-strip span { display: inline-flex; align-items: center; gap: 6px; }
.trust-strip span::before {
    content: "";
    width: 16px; height: 16px;
    background-color: var(--bd-marigold);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Hide TV-show curation sections and TV menu */
ul.shows { display: none !important; }
h1:has(+ ul.shows) { display: none !important; }
.tv-menu, a.tv-menu, li:has(> a.tv-menu) { display: none !important; }

/* Hide TV-show event tiles by href pattern */
li:has(> a[href="/despierta-america"]),
li:has(> a[href="/desiguales"]),
li:has(> a[href="/fundadores-destacados"]),
li:has(> a[href="/la-voz-de-la-manana"]),
li:has(> a[href="/los-favoritos-de-monica-y-migbelis"]),
li:has(> a[href="/sientesequienpueda"]) {
    display: none !important;
}

/* Hide Univision-celebrity-tied deal cards and trending searches */
li:has(> a[href*="/deals/yes-you-can"]),
li:has(> a[href*="/deals/univision-"]),
li:has(> a[href*="yahaira"]),
li:has(> a[href*="carlos-calderon"]),
li:has(> a[href*="/yes-you-can-"]),
dd:has(> a[href*="yahaira"]),
.trending-menu li:has(> a[href*="yahaira"]),
.trending-menu li:has(> a[href*="carlos"]) {
    display: none !important;
}

/* Hide all sponsored Univision banners and legacy fragments (Mother's Day Box, Yes You Can banner,
   "Compra por Categoría" dark gray hero, etc.) — fixed selector to also catch `fragment-a6jPA*`. */
[class*="a6jPA"] {
    display: none !important;
}

/* Hide any "more deals" sub-list anchors pointing to Univision-tied products */
a[href*="/deals/yes-you-can"],
a[href*="/deals/univision-"],
a[href*="shop.univision.com/go/"] {
    display: none !important;
}
li:has(> a[href*="/deals/yes-you-can"]),
li:has(> a[href*="/deals/univision-"]) {
    display: none !important;
}

/* Hide bottom membership-sister-sites Shop Univision badge */
footer .membership .sites li a[title="Shop Univision"] { display: none !important; }

/* Sub-nav text */
#header .sub-nav li a, #header .sub-nav a {
    color: rgba(255,255,255,0.95);
}

/* Links use brand blue */
a { color: var(--bd-blue); }
a:visited { color: var(--bd-blue); }

/* Buy buttons — navy with marigold hover */
button.buy-it, .button.buy-it, .buy-it,
button.add-to-cart, .button.add-to-cart {
    background-color: var(--bd-navy) !important;
    color: #ffffff !important;
}
button.buy-it:hover, .button.buy-it:hover, .buy-it:hover,
button.add-to-cart:hover, .button.add-to-cart:hover {
    background-color: var(--bd-marigold) !important;
}

.story .read-more, .story a.read-more,
a.read-more, .read-more {
    color: var(--bd-blue) !important;
}

/* Footer */
footer, .universal-footer {
    background: var(--bd-navy-deep);
}

/* Pricing */
.price .now, .price-tag .now { color: var(--bd-navy); }

/* Sale-badge / deal-badge — small UI badges only, marigold on navy. The .clearance / .discount
   classes are used by the platform on big container elements (sections, product cards) so we
   DON'T color those — bleeds into product titles and tanks legibility. */
.badge.sale, .badge.deal, .deal-badge, .savings-badge {
    background-color: var(--bd-marigold) !important;
    color: #000000 !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* World Cup teaser hero — injected as .wc-hero block in HTML */
.wc-hero {
    margin: 24px auto 0;
    padding: 28px 32px;
    background: linear-gradient(110deg, var(--bd-navy) 0%, var(--bd-navy) 50%, var(--bd-navy-deep) 100%);
    color: #ffffff;
    border-radius: 14px;
    max-width: 1040px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
    align-items: center;
    box-shadow: 0 8px 24px rgba(16,43,76,0.18);
    overflow: hidden;
}
.wc-hero .wc-hero-text { display: flex; flex-direction: column; gap: 6px; }
.wc-hero .wc-hero-img {
    align-self: stretch;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: -28px -32px -28px 0;
}
.wc-hero .wc-hero-img img {
    display: block;
    max-width: 100%;
    height: 100%;
    width: auto;
    object-fit: cover;
    object-position: center right;
}
.wc-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    color: var(--bd-marigold);
    margin-bottom: 6px;
    text-transform: none;
}
.wc-hero h2 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 6px;
    color: #ffffff !important;
    letter-spacing: -0.02em;
}
.wc-hero p {
    margin: 0;
    font-size: 15px;
    color: rgba(255,255,255,0.85);
}
.wc-hero .cta {
    display: inline-block;
    padding: 12px 22px;
    background: var(--bd-marigold);
    color: #000000;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    font-size: 14px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.wc-hero .cta:hover { background: #e07a2e; }
.wc-hero .price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 14px;
    color: #ffffff;
}
.wc-hero .price .now {
    font-size: 28px;
    font-weight: 800;
    color: var(--bd-marigold);
}
.wc-hero .price .was {
    font-size: 16px;
    text-decoration: line-through;
    color: rgba(255,255,255,0.6);
}
@media (max-width: 720px) {
    .wc-hero { grid-template-columns: 1fr; padding: 22px; }
}

/* ===== Section: Commerce model (70/20/10) ===== */
.bd-commerce-model {
    max-width: 1080px;
    margin: 28px auto;
    padding: 0 20px;
}
.bd-commerce-model h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--bd-navy);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.bd-commerce-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
/* Cut-paper colour-card treatment — each card is a solid sheet of festival
   paper, sharp corners, slight rotation per card so they read like three
   pieces pasted up by hand. Text inside is dark navy for contrast. */
.bd-cm-card {
    background: var(--bd-cm-accent, var(--bd-marigold));
    border: 0;
    border-radius: 0;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    transform: rotate(-0.8deg);
    transform-origin: center;
}
.bd-commerce-grid > .bd-cm-card:nth-child(2) { transform: rotate(0.6deg); }
.bd-commerce-grid > .bd-cm-card:nth-child(3) { transform: rotate(-0.5deg); }

.bd-cm-card .bd-cm-pct {
    font-size: 36px;
    font-weight: 700;
    color: var(--bd-navy) !important;
    line-height: 1;
}
.bd-cm-card h3 {
    font-size: 20px;
    font-weight: 800 !important;
    color: var(--bd-navy) !important;
    margin: 0;
    letter-spacing: -0.01em;
}
.bd-cm-card p {
    font-size: 13px;
    color: var(--bd-navy);
    opacity: 0.85;
    margin: 0 0 4px;
    line-height: 1.45;
}
.bd-cm-card .bd-cm-pillar {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bd-navy) !important;
    margin-top: auto;
}
@media (max-width: 720px) {
    .bd-commerce-grid { grid-template-columns: 1fr; }
}

/* ===== Section: Persona spotlight ===== */
.bd-persona-spotlight {
    max-width: 1080px;
    margin: 28px auto;
    padding: 28px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: center;
    background: linear-gradient(120deg, #ffffff 0%, var(--bd-cream) 100%);
    border: 1px solid rgba(16,43,76,0.10);
    border-radius: 14px;
}
.bd-portrait {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(16,43,76,0.18);
    /* keep the conic gradient ring as a 4px frame */
    background: conic-gradient(from 90deg, #7BD636, #FFD23F, #FF4D8B, #E53935, #F4EFE8, #F18A3F, #7BD636);
    padding: 4px;
}
.bd-portrait-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
/* legacy initial fallback — keep rule in case old markup appears elsewhere */
.bd-initial {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 56px;
    color: var(--bd-navy);
    letter-spacing: -0.04em;
}
.bd-persona-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bd-persona-content .bd-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bd-marigold);
}
.bd-persona-content h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--bd-navy);
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.01em;
}
.bd-persona-content p {
    font-size: 14px;
    color: rgba(16,43,76,0.78);
    margin: 0;
    line-height: 1.5;
}
.bd-persona-cta {
    display: inline-block;
    margin-top: 4px;
    padding: 10px 18px;
    background: var(--bd-navy);
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    font-size: 13px;
    letter-spacing: 0.02em;
    align-self: flex-start;
}
.bd-persona-cta:hover { background: var(--bd-navy-deep); }
@media (max-width: 720px) {
    .bd-persona-spotlight { grid-template-columns: 1fr; text-align: center; }
    .bd-portrait { margin: 0 auto; }
    .bd-persona-cta { align-self: center; }
}

/* ===== Section: Community (city groups + Comadre Network) ===== */
.bd-community {
    max-width: 1080px;
    margin: 32px auto 16px;
    padding: 0 20px;
}
.bd-community h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--bd-navy);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.bd-community-sub {
    font-size: 14px;
    color: rgba(16,43,76,0.7);
    margin: 0 0 16px;
}
.bd-community-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.bd-comm-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid rgba(16,43,76,0.10);
    border-radius: 12px;
    text-decoration: none !important;
    transition: border-color 0.15s ease;
}
.bd-comm-card:hover { border-color: var(--bd-blue); }
.bd-comm-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(16,43,76,0.55);
}
.bd-comm-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--bd-navy) !important;
    letter-spacing: -0.01em;
}
.bd-comm-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-color: transparent;
}
.bd-comm-whatsapp:hover { border-color: transparent; }
.bd-comm-whatsapp .bd-comm-tag { color: rgba(255,255,255,0.9); }
.bd-comm-whatsapp .bd-comm-name { color: #ffffff !important; }
@media (max-width: 720px) {
    .bd-community-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Section: Payments ===== */
.bd-payments {
    max-width: 1080px;
    margin: 16px auto 36px;
    padding: 24px 28px;
    background: #ffffff;
    border: 1px solid rgba(16,43,76,0.08);
    border-radius: 14px;
}
.bd-payments h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--bd-navy);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.bd-payments-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.bd-payments-grid li {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(16,43,76,0.75);
}
.bd-payments-grid li strong {
    display: block;
    font-size: 14px;
    color: var(--bd-navy);
    font-weight: 700;
    margin-bottom: 2px;
}
@media (max-width: 720px) {
    .bd-payments-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Width standardization: every BuenDeal section + WC hero shares the same outer container.
   This makes left/right edges line up regardless of inner padding. ===== */
.wc-hero,
.bd-commerce-model,
.bd-persona-spotlight,
.bd-community,
.bd-payments {
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Card-style sections (have their own bg + padding) — outer padding 0, inner padding kept */
.wc-hero,
.bd-persona-spotlight,
.bd-payments {
    padding-left: 28px !important;
    padding-right: 28px !important;
}

/* Container-style sections (grid of cards inside) — no horizontal padding so cards span full width */
.bd-commerce-model,
.bd-community {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 1080px) {
    .wc-hero,
    .bd-commerce-model,
    .bd-persona-spotlight,
    .bd-community,
    .bd-payments {
        margin-left: 20px !important;
        margin-right: 20px !important;
        max-width: calc(100% - 40px) !important;
    }
}

/* ===== Papel-picado section divider — multi-color cut-paper garland that
   sits between major page sections to carry the Mexican-market identity
   across the layout. Used as a decorative <img class="bd-divider">. ===== */
.bd-divider {
    display: block;
    width: 100%;
    max-width: 1040px;   /* matches the page's content max-width so dividers don't blow out to viewport edges in <body> */
    margin: 18px auto;
    padding: 0;
    height: auto;
    pointer-events: none;
    user-select: none;
}

/* ===== Platform "superlative-list" sections (Best Sellers / New Arrivals /
   Clearance) — bring them into the BuenDeal visual family: cobalt + edge
   confetti background, marker-font headline in white, cut-paper marigold
   "Ver más" button. ===== */
section.superlative-list {
    background: var(--bd-navy) url('/img/section-bg-cobalt-confetti.jpg') center / cover no-repeat !important;
    border-radius: 14px !important;
    padding: 32px 28px 28px !important;
    margin: 28px auto !important;
}
section.superlative-list > header h1,
section.superlative-list > header h1 a {
    font-family: var(--bd-marker) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    font-size: 56px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-transform: none !important;
    -webkit-text-stroke: 2px currentColor;
    paint-order: stroke fill;
}

section.superlative-list a.more {
    display: inline-block;
    font-family: var(--bd-marker) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #000 !important;
    background: var(--bd-marigold) !important;
    padding: 8px 22px !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.02em !important;
    border-radius: 0 !important;
    transform: rotate(-1.4deg);
    transform-origin: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.28);
    -webkit-text-stroke: 1.2px currentColor;
    paint-order: stroke fill;
    text-decoration: none !important;
}
section.superlative-list a.more:hover {
    transform: rotate(-1.4deg) translateY(-1px);
}
section.superlative-list a.more-bottom {
    display: inline-block;
    font-family: var(--bd-marker) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #000 !important;
    background: var(--bd-marigold) !important;
    padding: 10px 28px !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.02em !important;
    border-radius: 0 !important;
    transform: rotate(0.8deg);
    transform-origin: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.28);
    -webkit-text-stroke: 1.2px currentColor;
    paint-order: stroke fill;
    text-decoration: none !important;
}
section.superlative-list a.more-bottom:hover {
    transform: rotate(0.8deg) translateY(-1px);
}

/* Product titles, prices, and sold-out labels inside the cobalt sections need
   to be white for contrast — the platform's inline --theme-foreground-color: #000
   is unreadable on navy. */
section.superlative-list .offer h2,
section.superlative-list .offer h2 a,
section.superlative-list .offer > a,
section.superlative-list .offer .sale-price,
section.superlative-list .offer .sale-price .symbol,
section.superlative-list .offer .sale-price .whole,
section.superlative-list .offer .sale-price .fraction,
section.superlative-list .offer .sale-price .separator,
section.superlative-list .offer .discount,
section.superlative-list .offer .sold-out {
    color: #ffffff !important;
}
section.superlative-list .offer .list-price {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Backfill empty masonry cells with smaller items wherever they fit, the
   way morningsave.com packs its product grids. Doesn't change item sizes,
   just changes the grid placement algorithm. Also strips the platform's
   cream bg so the section's cobalt+confetti shows through. */
section.superlative-list ol.offers {
    grid-auto-flow: dense !important;
    background: transparent !important;
}

/* ===== Section: Santa Ganga deal-of-the-day (modeled on SideDeal Daily Deal) ===== */
.bd-santa-ganga {
    max-width: 1040px !important;
    margin: 24px auto 0 !important;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(16,43,76,0.18);
    background: #1F1F1F;
}
.bd-santa-ganga .sg-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 6px 28px;
    background: #EDE0C8 url('/img/santa-ganga-wall-cream.png') center / cover no-repeat;
    color: #1A4A98;
    flex-wrap: wrap;
    position: relative;
}
/* Santa Ganga lockup — single integrated illustration (icon + signpaint
   wordmark generated together via gpt-image-2). Replaces the previous
   icon + Caveat-wordmark composite. */
.bd-santa-ganga .sg-lockup-img {
    display: block;
    max-height: clamp(82px, 10.5vw, 135px);
    height: auto;
    width: auto;
    max-width: 100%;
}
.bd-santa-ganga .sg-body {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: stretch;
}
.bd-santa-ganga .sg-info {
    padding: 28px 28px 0 28px;
    background: #2A2A2A;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 320px;
}
.bd-santa-ganga .sg-info h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800 !important;
    font-size: 22px;
    line-height: 1.22;
    color: #ffffff !important;
    margin: 0;
    letter-spacing: -0.01em;
}
.bd-santa-ganga .sg-fire {
    font-size: 22px;
    color: rgba(255,255,255,0.92);
    font-weight: 600;
    line-height: 1.1;
}
.bd-santa-ganga .sg-cta {
    display: inline-block;
    background: var(--bd-marigold);
    color: #000000 !important;
    text-decoration: none !important;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    align-self: flex-start;
}
.bd-santa-ganga .sg-cta:hover { background: #e07a2e; }
.bd-santa-ganga .sg-price-block {
    margin: auto -28px 0 -28px;
    background: var(--bd-marigold);
    color: #000000;
    padding: 26px 28px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bd-santa-ganga .sg-desc {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,0.86);
    margin: 0;
    max-width: 36ch;
}
.bd-santa-ganga .sg-prices {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: nowrap;
    line-height: 1;
}
.bd-santa-ganga .sg-was {
    font-size: 28px;
    text-decoration: line-through;
    color: rgba(0,0,0,0.55);
    line-height: 1;
}
.bd-santa-ganga .sg-now {
    font-size: 52px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}
/* Caveat is hand-painted; treat the cents as naturally smaller text on the
   same baseline rather than a typographic super. */
.bd-santa-ganga .sg-now sup {
    font-size: 0.6em;
    font-weight: 700;
    vertical-align: baseline;
    margin-left: 2px;
}
.bd-santa-ganga .sg-save {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
}
.bd-santa-ganga .sg-photo { align-self: stretch; }
.bd-santa-ganga .sg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 320px;
}
@media (max-width: 720px) {
    .bd-santa-ganga .sg-body { grid-template-columns: 1fr; }
    .bd-santa-ganga .sg-photo img { min-height: 220px; }
}