/* g90 — homepage advertising (Admin → Advertising). Loaded only when the master switch advertising.enabled is ON.
   Colours read the shared --ob-* tokens when the page has them (dev, ob-design.css) and fall back to the live
   OndjangoBay values otherwise. Class prefix obp- ("OndjangoBay promo"): ad blockers hide "ad" / "ads" class names. */
.obp-home {
    --obp-orange: var(--ob-primary, #f99e1c);
    --obp-ink: var(--ob-ink, #222);
    --obp-muted: var(--ob-muted, #666);
    --obp-line: var(--ob-border, #e6e6e6);
    --obp-card: var(--ob-card, #fff);
    --obp-black: var(--ob-black, #111);
    --obp-radius: var(--ob-radius-sm, 8px);
    --obp-top: 100px; /* just under the fixed category bar of the live header (51 + 33 px) + 16 px; obp-home.js corrects it */
    position: relative;
}

/* ── P1 side rails: hidden below 1500 px (g122; was 1280); at 1500 px and above the centre column narrows to make room ── */
.obp-rail { display: none; overflow-anchor: none; } /* never the scroll anchor: a stuck rail does not move, so content growing above would push the page */
@media (min-width: 1500px) {
    .obp-home.has-rails {
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr) 160px;
        column-gap: 20px;
        max-width: 1680px;
        margin: 0 auto;
        padding: 0 16px;
        align-items: stretch;
    }
    .obp-home.has-rails > .obp-center { min-width: 0; }
    .obp-home.has-rails > .obp-center .container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
    .obp-rail { display: block; position: relative; z-index: 1; padding-top: 24px; }
    .obp-inline { display: none !important; }
}
.obp-rail__sticky {
    position: sticky;
    top: var(--obp-top);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
/* The frame shrinks on short screens so the rail (also before it sticks, ~160 px from the top) always ends above
   the chat / back-to-top buttons, which take the bottom ~140 px of the screen. */
.obp-slot--rail {
    height: min(600px, calc(100vh - 360px));
    min-height: 240px;
    aspect-ratio: 160 / 600;
    width: auto;
    max-width: 160px;
}
.obp-label {
    font-size: 11px;
    line-height: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--obp-muted);
}

/* ── a slot (rail, inline banner, P5, P6): size reserved by aspect-ratio, so nothing moves when ads arrive ── */
.obp-slot {
    position: relative;
    overflow: hidden;
    border-radius: var(--obp-radius);
    background: #f2f2f2;
    aspect-ratio: var(--obp-ar, 3 / 1);
}
@media (max-width: 767px) { .obp-slot--p5, .obp-slot--inline { aspect-ratio: var(--obp-ar-m, 2 / 1); } }
@media (max-width: 991px) { .obp-slot--p6 { aspect-ratio: var(--obp-ar-m, 2 / 1); } }
.obp-slot > .obp-house, .obp-slot > .obp-track { position: absolute; inset: 0; }
.obp-slot.is-live > .obp-house { visibility: hidden; }
.obp-slot .banner, .obp-slot .banner-media { height: 100%; margin: 0; }
.obp-slot .banner-media img { width: 100%; height: 100%; object-fit: cover; }
.obp-track { margin: 0; padding: 0; list-style: none; }
.obp-ad {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility 0s linear .45s;
}
.obp-ad.is-on { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.obp-ad__box, .obp-ad picture { display: block; width: 100%; height: 100%; }
.obp-ad img { width: 100%; height: 100%; object-fit: cover; display: block; }
.obp-ad a:focus-visible, .obp-house:focus-visible, .obp-ev__card:focus-visible { outline: 3px solid var(--obp-orange); outline-offset: -3px; }

.obp-tag {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .78);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 600;
    pointer-events: none;
}
.obp-evbadge {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--obp-orange);
    color: #111;
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    text-transform: uppercase;
    pointer-events: none;
}
.obp-evbadge small { display: block; font-size: 11px; font-weight: 500; text-transform: none; }
.obp-period {
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 10px;
    padding: 2px 10px;
    border-radius: 4px;
    background: #fff;
    color: #222;
    font-size: 12px;
    line-height: 20px;
    pointer-events: none;
}
.obp-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}
.obp-arrow:hover, .obp-arrow:focus-visible { background: rgba(0, 0, 0, .8); outline: none; }
.obp-arrow--prev { left: 8px; }
.obp-arrow--next { right: 8px; }
.obp-dots { display: flex; justify-content: center; gap: 6px; min-height: 10px; }
.obp-slot .obp-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 10px; }
.obp-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .25);
    cursor: pointer;
}
.obp-slot .obp-dots button { background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.obp-dots button.is-on { background: var(--obp-orange); }

/* house ad (empty slot: never an empty box) */
.obp-house--text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
    text-align: center;
    background: linear-gradient(160deg, #1d1d1d 0%, #000 100%);
    color: #fff;
    border-radius: var(--obp-radius);
    text-decoration: none;
}
.obp-house--text:hover { color: #fff; text-decoration: none; }
.obp-house__brand { font-size: 13px; font-weight: 700; color: var(--obp-orange); letter-spacing: .02em; }
.obp-house__title { font-size: 18px; font-weight: 700; line-height: 1.25; }
.obp-house__text { font-size: 12px; line-height: 1.45; color: #ddd; }
.obp-house__cta {
    display: inline-block;
    margin-top: 4px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--obp-orange);
    color: #111;
    font-size: 12px;
    font-weight: 700;
}
.obp-slot--inline .obp-house--text { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px; }
.obp-slot--inline .obp-house__title { font-size: 16px; }
@media (max-width: 575px) { .obp-slot--inline .obp-house__text { display: none; } }
.obp-house img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── P3 / P4 product rows (carousel) ── */
.obp-showcase { margin-top: 8px; margin-bottom: 28px; }
.obp-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--obp-line);
}
.obp-head__title { margin: 0; font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--obp-ink); }
.obp-head__link { margin-left: auto; font-size: 14px; font-weight: 600; color: #b25e00; white-space: nowrap; }
.obp-head__link:hover { color: #000; }
.obp-head__nav { display: flex; gap: 6px; }
.obp-head__nav button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--obp-line);
    border-radius: 50%;
    background: #fff;
    color: #222;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.obp-head__nav button:hover, .obp-head__nav button:focus-visible { border-color: #222; outline: none; }
/* The row also carries .odb-product-grid, so the product cards look exactly as on /shop and in the home grids. */
.obp-showcase .obp-row.odb-product-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 5 * 16px) / 6);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.obp-row::-webkit-scrollbar { display: none; }
@media (max-width: 1199px) { .obp-showcase .obp-row.odb-product-grid { grid-auto-columns: calc((100% - 3 * 16px) / 4); } }
@media (max-width: 991px) { .obp-showcase .obp-row.odb-product-grid { grid-auto-columns: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 575px) { .obp-showcase .obp-row.odb-product-grid { grid-auto-columns: calc((100% - 12px) / 2.2); gap: 12px; } .obp-head__nav { display: none; } }
.obp-pslide { position: relative; scroll-snap-align: start; min-width: 0; }
.obp-pslide > .odb-product-col, .obp-pslide .odb-product-card, .obp-pslide .product { height: 100%; margin: 0; max-width: none; width: 100%; padding: 0; }
.obp-rank, .obp-sponsored {
    position: absolute;
    z-index: 5;
    top: 8px;
    right: 8px;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 18px;
    font-weight: 700;
    pointer-events: none;
}
.obp-rank { background: #c62828; color: #fff; text-transform: uppercase; }
.obp-sponsored { background: rgba(0, 0, 0, .78); color: #fff; }

/* ── P1 below 1500 px: ONE inline banner between sections ── */
.obp-inline { margin-bottom: 28px; }
.obp-inline .obp-label { display: block; margin-bottom: 4px; }

/* ── P5 event slider + "Eventos e campanhas" cards, P6 tall banner ── */
.obp-banners { margin-top: 8px; margin-bottom: 24px; }
.obp-banners .obp-slot { margin-bottom: 0; }
.obp-events { margin-top: 18px; }
.obp-events[hidden] { display: none; }
.obp-events__track:empty { min-height: 200px; } /* reserved until the cards arrive */
.obp-events__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 16px) / 3);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.obp-events__track::-webkit-scrollbar { display: none; }
@media (max-width: 767px) { .obp-events__track { grid-auto-columns: 78%; } }
.obp-ev__card {
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    border: 1px solid var(--obp-line);
    border-radius: var(--obp-radius);
    background: var(--obp-card);
    overflow: hidden;
    color: var(--obp-ink);
    text-decoration: none;
}
.obp-ev__card:hover { color: var(--obp-ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); text-decoration: none; }
.obp-ev__top { display: flex; gap: 10px; align-items: center; padding: 10px; }
.obp-ev__date {
    flex: 0 0 auto;
    width: 56px;
    padding: 4px 0;
    border-radius: 6px;
    background: var(--obp-orange);
    color: #111;
    text-align: center;
    line-height: 1.1;
}
.obp-ev__date b { display: block; font-size: 20px; }
.obp-ev__date span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.obp-ev__title { display: block; font-weight: 700; font-size: 14px; line-height: 1.3; }
.obp-ev__meta { display: block; font-size: 12px; color: var(--obp-muted); }
.obp-ev__img { aspect-ratio: 2 / 1; background: #eee; }
.obp-ev__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.obp-dots--events { margin-top: 10px; }
.obp-static .banner { margin-bottom: 20px; }
.obp-static .banner-media img { width: 100%; height: 260px; object-fit: cover; }
/* phones: fewer overlays on the small slides (swipe or the dots change the slide; the period is on the event card) */
@media (max-width: 575px) {
    .obp-arrow, .obp-period { display: none; }
    .obp-tag { top: 6px; left: 6px; padding: 0 6px; font-size: 10px; line-height: 16px; }
    .obp-evbadge { top: 6px; right: 6px; padding: 3px 8px; font-size: 11px; line-height: 15px; }
    .obp-evbadge small { font-size: 10px; }
    .obp-slot .obp-dots { bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { .obp-ad, .obp-ad.is-on { transition: none; } .obp-row, .obp-events__track { scroll-behavior: auto; } }

/* ── DEV (Phase 3, g68 home on ob-design tokens): the same slots in the g68 card / promo-tile markup ── */
.obp-head.ob-section-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; }
.obp-head__title.ob-section-head__title { text-transform: none; }
.obp-showcase.obh-block, .obp-inline.obh-block, .obp-banners--ob { margin-bottom: 0; }
.obp-bgrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.obp-bgrid__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.obp-banners--ob .obp-events { margin-top: 0; }
.obp-banners--ob .obp-slot { border-radius: var(--ob-radius, 12px); }
.obp-slot > .obh-ptile { position: absolute; inset: 0; min-height: 0; }
.obp-promos-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
@media (max-width: 991px) { .obp-bgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) { .obp-promos-rest { grid-template-columns: minmax(0, 1fr); } }
/* with the ad rails the centre is narrower, so the g68 account rail slims down a little */
@media (min-width: 1500px) and (max-width: 1599px) { .obp-home.has-rails .obh-top { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; } }

/* ── g122 (client design 10-10): P1 rails = fixed full-height cards, 12 px from the window edges, top and bottom.
   Homepage only (body:has(.obp-home.has-rails)); the header, the content and the footer are inset by
   rail width + 2 × 12 px so nothing sits under a rail. Header markup and look are unchanged.
   Browsers without :has() keep the g90 layout above (rails in the grid, sticky). Below 1500 px (raised from 1280
   by g122 so the Portuguese header nav never wraps) the rails are hidden and the inline banner shows, as before. ── */
@media (min-width: 1500px) {
    body:has(.obp-home.has-rails) {
        --obp-rail-gap: 12px;
        --obp-rail-w: clamp(160px, calc((100vw - 1180px) / 2 - 24px), 200px);
        --obp-inset: calc(var(--obp-rail-w) + 2 * var(--obp-rail-gap));
    }
    body:has(.obp-home.has-rails) .page-wrapper { padding-left: var(--obp-inset); padding-right: var(--obp-inset); }
    /* the header parts that turn position:fixed on scroll keep the same inset */
    body:has(.obp-home.has-rails) .page-wrapper > .header .sticky-content.fixed,
    body:has(.obp-home.has-rails) .page-wrapper > .header .market-place-new-desktop-menu.scrolled { left: var(--obp-inset); right: var(--obp-inset); }
    /* chat bubble and back-to-top move inside the content edge so they never cover the right rail */
    body:has(.obp-home.has-rails) .ondjangobay-chatbot-container,
    body:has(.obp-home.has-rails) .ondjangobay-chatbot-container:has(#bay-panel-bubble) { right: calc(var(--obp-inset) + 12px); }
    body:has(.obp-home.has-rails) #scroll-top, body:has(.obp-home.has-rails) #scroll-top.show { right: calc(var(--obp-inset) + 13px) !important; }
    body:has(.obp-home.has-rails) .obp-home.has-rails { display: block; max-width: none; margin: 0; padding: 0; }
    body:has(.obp-home.has-rails) .obp-rail {
        position: fixed;
        z-index: 5;
        top: var(--obp-rail-gap);
        bottom: var(--obp-rail-gap);
        width: var(--obp-rail-w);
        padding: 0;
    }
    body:has(.obp-home.has-rails) .obp-rail--l { left: var(--obp-rail-gap); }
    body:has(.obp-home.has-rails) .obp-rail--r { right: var(--obp-rail-gap); }
    body:has(.obp-home.has-rails) .obp-rail__sticky {
        position: absolute;
        inset: 0;
        display: block;
        border-radius: 14px;
        overflow: hidden;
        background: #f2f2f2;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
    }
    /* the creative fills the card: 160×600 images are cropped evenly (object-fit: cover), never stretched */
    body:has(.obp-home.has-rails) .obp-slot--rail {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        min-height: 0;
        aspect-ratio: auto;
        border-radius: 0;
    }
    body:has(.obp-home.has-rails) .obp-slot--rail .obp-house--text { border-radius: 0; gap: 14px; padding: 24px 16px; }
    body:has(.obp-home.has-rails) .obp-slot--rail .obp-house__title { font-size: 22px; }
    body:has(.obp-home.has-rails) .obp-slot--rail .obp-house__text { font-size: 13px; }
    body:has(.obp-home.has-rails) .obp-slot--rail img { object-position: center; }
    /* ad disclosure label and slide dots stay, laid over the card */
    body:has(.obp-home.has-rails) .obp-rail .obp-label {
        position: absolute;
        z-index: 4;
        top: 8px;
        left: 8px;
        padding: 0 6px;
        border-radius: 4px;
        background: rgba(255, 255, 255, .85);
        color: #444;
        font-size: 10px;
        pointer-events: none;
    }
    body:has(.obp-home.has-rails) .obp-rail .obp-dots { position: absolute; z-index: 4; left: 0; right: 0; bottom: 12px; min-height: 0; }
    body:has(.obp-home.has-rails) .obp-rail .obp-dots button { background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
    body:has(.obp-home.has-rails) .obp-rail .obp-dots button.is-on { background: var(--obp-orange); }
}
/* 1280–1499 px now shows the inline banner instead of the rails: keep it at a sensible size (640×160 creative) */
@media (min-width: 1280px) and (max-width: 1499px) {
    .obp-inline .obp-slot--inline, .obp-inline > .obp-label { max-width: 960px; margin-left: auto; margin-right: auto; }
}