/* Brand Offers Feed 2.13.0: plugin glue only.
   The look of the page (rows, best card, tabs, buttons, code field, figure, logo tile, crumbs, facts)
   lives in deal-design-system/css/components.css under the body class ds2. This file only adds what is
   specific to this plugin: the sticky offset, the tab bar on narrow screens, the theme title moved into
   the brand header, the urgent expiry colour, panel corners while filtered, the empty state.
   Tokens only (var(--ds-*) and the .ds2 variables), Figtree via inherit, no dark mode, no gradients. */

.ds2 .bof-wrapper {
    max-width: none;
    margin: 0;
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--fs-2);
    line-height: var(--lh-2);
}

/* ---------- brand header: logo tile + the theme's own H1 (moved in) + site link ---------- */
.ds2 .bof-hero__tx { min-width: 0; }
.ds2 .bof-hero .dek a {
    color: var(--muted);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--hair);
}
.ds2 .bof-hero .dek a:hover { text-decoration-color: var(--muted); }
body.ds2 .bof-hero h1.entry-title,
body.ds2 .bof-hero h1.h1 {
    margin: 0;
    padding: 0;
    color: var(--ink);
    font-family: var(--font);
    font-weight: 700;
    font-size: var(--fs-4);
    line-height: var(--lh-4);
    letter-spacing: -.015em;
    text-wrap: balance;
    overflow-wrap: break-word;
}
@media (min-width: 768px) {
    body.ds2 .bof-hero h1.entry-title,
    body.ds2 .bof-hero h1.h1 { font-size: var(--fs-5); line-height: var(--lh-5); }
}
/* the theme title block is left empty once its H1 has moved into the header */
body.ds2.bof-brand-page .entry-header:not(:has(*)) { display: none; }

/* ---------- sticky tab bar ---------- */
.ds2 .bof-wrapper .tabbar--sticky { top: var(--bof-sticky-top, 0px); }
.ds2 .bof-wrapper .tabbar { flex-wrap: nowrap; column-gap: 12px; }
/* tabs scroll inside the bar (fade mask in components.css); the sort select stays at the right edge */
.ds2 .bof-wrapper .tabs {
    flex: 1 1 auto;
    min-width: 0;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 1px;
    margin-bottom: -1px;
    scrollbar-width: none;
}
.ds2 .bof-wrapper .tabs::-webkit-scrollbar { display: none; }
/* the sort select is styled once in components.css (.tabbar .select), same as the category page */
.ds2 .bof-wrapper .tabbar .select { margin-left: 0; }
@media (min-width: 768px) {
    .ds2 .bof-wrapper .tabs { gap: 24px; }
}

/* ---------- rows ---------- */
.ds2 .bof-wrapper .row__t { overflow-wrap: break-word; }
.ds2 .bof-wrapper .row__m .urgent { color: var(--ds-urgent-ink); }
.ds2 .bof-wrapper .code__w { overflow-x: auto; scrollbar-width: none; }
.ds2 .bof-wrapper .code__w::-webkit-scrollbar { display: none; }

/* while a filter hides rows, the visible ones carry the panel corners (set by bof-script.js) */
.ds2 .bof-active-container .row.bof-first:not(.row--top) {
    border-top-width: 1px;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}
.ds2 .bof-active-container .row.bof-last:not(.row--top) {
    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}
.ds2 .bof-active-container .row.bof-first.bof-last:not(.row--top) {
    border-radius: var(--radius-panel);
}

/* ---------- expired offers ---------- */
.ds2 .bof-wrapper .past > .rows { margin-top: var(--s1); }
.ds2 .bof-wrapper .bof-no-active {
    margin: 0;
    padding: var(--s2) 0;
    color: var(--muted);
    font-size: var(--fs-2);
    line-height: var(--lh-2);
}

/* ---------- empty state ---------- */
.ds2 .bof-empty-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: var(--s2);
}
.ds2 .bof-empty-links .lb {
    min-height: 44px;
    text-align: left;
}
.ds2 .bof-empty-links .lnk { font-size: var(--fs-2); }