/* Brand Offers Feed 2.24.0: brand page v2 (approved concept 22.10.2026). Loaded only when the v2 page is on (option bof_v2 or ?bof_v2=1).
   Every value is a design token (design/tokens.json); the colours come from the .ds2 variables with the token value as fallback.
   Everything is scoped under .bv2 (the page block) or body.bof-v2 (the quieter look of the other blocks); the old page is untouched. */

.bv2 {
  --v-ink: var(--ink, #16201B);
  --v-muted: var(--muted, #56635B);
  --v-hair: var(--hair, #D9E0DC);
  --v-subtle: var(--subtle, #E8EDEA);
  --v-g50: var(--g50, #F0F8F3);
  --v-g100: var(--g100, #E2F1E7);
  --v-g200: var(--g200, #C4E3D0);
  --v-g400: var(--ds-g400, #5FB07D);
  --v-g600: var(--g600, #1F7A46);
  --v-g700: var(--g700, #17643A);
  --v-deal: var(--ds-deal, #C2410C);
  --v-r: var(--radius-panel, 12px);
  --v-rb: var(--radius-btn, 10px);
  color: var(--v-ink);
  font-family: var(--font, inherit);
  font-size: 15px;
  line-height: 22px;
  font-variant-numeric: lining-nums tabular-nums;
}
.bv2 *, .bv2 *::before, .bv2 *::after { box-sizing: border-box; }
.bv2 :is(h1, h2, h3, p, ul, ol) { margin: 0; }
.bv2 :is(ul, ol) { padding: 0; list-style: none; }
.bv2 button { font-family: inherit; color: inherit; }
.bv2 img, .bv2 svg { max-width: 100%; }
.bv2 svg { flex: none; }
.bv2 :focus-visible { outline: 3px solid var(--v-g600); outline-offset: 2px; }
.bv2 [hidden] { display: none !important; }
body.bof-v2 .bv-sr, .bv2 .bv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- brand header ---------- */
.bv2 .bv-head { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.bv2 .bv-head__tx { min-width: 0; }
body.bof-v2 .bv-head h1, body.bof-v2 .bv-head h1.entry-title {
  margin: 0; padding: 0; color: var(--v-ink, #16201B); font-family: var(--font, inherit);
  font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; text-wrap: balance;
}
body.bof-v2 h1 .bv-s { display: block; font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: 0; color: var(--muted, #56635B); }
.bv2 .bv-dom { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; color: var(--v-muted); font-size: 15px; line-height: 22px; text-decoration: none; }
.bv2 .bv-dom:hover { color: var(--v-ink); text-decoration: underline; text-underline-offset: 3px; }
.bv2 .bv-dom svg { width: 14px; height: 14px; }
.bv2 .facts { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--v-muted); }
.bv2 .bv-tile { position: relative; flex: none; width: 64px; height: 64px; border-radius: var(--v-r); overflow: hidden; box-shadow: inset 0 0 0 1px var(--v-hair); background: #fff; }
.bv2 .bv-tile--lo { display: flex; align-items: center; justify-content: center; }
.bv2 .bv-tile--lo .lo { width: 100%; height: 100%; }
@media (min-width: 768px) { .bv2 .bv-head { gap: 20px; } }

/* ---------- logo tile (style A): the fill is the shop's own artwork colour, drawn as a graphic ---------- */
.bv2 .vt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bv2 .vt__f { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.bv2 .vt img { position: relative; display: block; flex: none; height: auto; max-width: none; max-height: none; padding: 0; border-radius: 0; }
.bv2 .vt--w img { width: 75%; max-height: 46%; object-fit: contain; }
.bv2 .vt--k img { width: 55%; max-height: 55%; object-fit: contain; }
.bv2 .vt--wh img { filter: brightness(0) invert(1); }
.bv2 .vt--ink img { filter: brightness(0); }
.bv2 .vt.is-bad { background: var(--v-g50); }
.bv2 .vt.is-bad img, .bv2 .vt.is-bad .vt__f { display: none; }
.bv2 .vt.is-bad::after { content: attr(data-initial); position: relative; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--v-hair); color: var(--v-ink); font-size: 28px; line-height: 1; font-weight: 600; }
.bv2 .bv-tile .vt.is-bad::after, .bv2 .bv-c .vt.is-bad::after { width: 100%; height: 100%; border-radius: 0; box-shadow: none; background: var(--v-subtle); }
.bv2 .bv-tile .vt.is-bad::after { font-size: 24px; }

/* ---------- tab row ---------- */
.bv2 .bv-tabbar { display: flex; align-items: center; margin: 16px calc(-1 * var(--gutter, 16px)) 0; padding: 0 var(--gutter, 16px); background: #fff; border-bottom: 1px solid var(--v-hair); position: sticky; top: var(--bof-sticky-top, 0px); z-index: 20; }
.bv2 .bv-tabs { display: flex; gap: 24px; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
.bv2 .bv-tabs::-webkit-scrollbar { display: none; }
.bv2 .bv-tab { position: relative; flex: none; min-height: 48px; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--v-muted); cursor: pointer; white-space: nowrap; font-size: 15px; font-weight: 600; }
.bv2 .bv-tab .n { font-size: 13px; font-weight: 400; }
.bv2 .bv-tab[aria-selected=true] { color: var(--v-ink); }
.bv2 .bv-tab[aria-selected=true]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--v-g700); }
.bv2 .bv-tab:hover { color: var(--v-ink); }
@media (max-width: 420px) { .bv2 .bv-tabs { gap: 16px; } }
@media (min-width: 768px) { .bv2 .bv-tabbar { border-radius: var(--v-r) var(--v-r) 0 0; margin-inline: 0; padding-inline: var(--pad, 20px); } }
.bv2 .bv-sech { margin-top: 24px; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.008em; }

/* ---------- the card: photo on top, frame quiet ---------- */
.bv2 .bv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin-top: 16px; }
.bv2 .bv-list:not(:has(.bv-card:not([hidden]))) { display: none; }
@media (min-width: 768px) { .bv2 .bv-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px 16px; } }
.bv2 .bv-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border-radius: var(--v-r); overflow: hidden; }
.bv2 .bv-card:hover { box-shadow: 0 1px 3px rgba(22, 32, 27, .14); }
.bv2 .bv-m { position: relative; flex: none; aspect-ratio: 4 / 5; width: 100%; background: var(--v-subtle); }
.bv2 .bv-m.has-ph { background: var(--v-subtle); }
.bv2 .bv-m img.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.bv2 .bv-b { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 12px; }
.bv2 .bv-shl { position: relative; display: flex; align-items: center; gap: 4px; min-height: 18px; }
.bv2 .bv-sh { flex: 1; min-width: 0; padding-right: 22px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--v-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv2 .bv-info { position: absolute; z-index: 2; right: -14px; top: -13px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--v-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bv2 .bv-info svg { width: 18px; height: 18px; }
.bv2 .bv-info:hover { color: var(--v-ink); }
.bv2 .bv-ti { margin: 4px 0 0; min-height: 40px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--v-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; hyphens: manual; }
.bv2 .bv-vl { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-top: 8px; min-height: 22px; }
.bv2 .bv-vl .fg { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; font-size: 17px; line-height: 22px; font-weight: 700; color: var(--v-deal); }
.bv2 .bv-vl .fg small { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--v-muted); }
.bv2 .bv-vl .fg .v::before { content: "-"; }
.bv2 .bv-vl .fg .u { font-size: 17px; }
.bv2 .mk { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .03em; color: var(--v-ink); }
.bv2 .mt { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--v-muted); }
.bv2 .bv-cond { margin-top: 4px; padding-right: 3px; font-size: 13px; line-height: 18px; color: var(--v-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bv2 .bv-dsc { display: none; margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--v-ink); }
.bv2 .bv-ra { margin-top: auto; padding-top: 8px; }
.bv2 .bv-rt { display: none; }
.bv2 .bv-card.is-open .mk { display: none; }

/* code: masked in the button label, revealed in place, then the shop link appears */
.bv2 .bv-code { display: block; height: 44px; }
.bv2 .bv-btn { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--v-ink); font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: none; }
.bv2 .bv-btn::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; bottom: 4px; border: 1px solid var(--v-ink); border-radius: 8px; z-index: -1; }
.bv2 .bv-btn:hover::before { background: var(--v-g50); }
.bv2 .bv-btn .cd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; letter-spacing: .04em; }
.bv2 .bv-btn svg { width: 16px; height: 16px; color: var(--v-g700); }
.bv2 .bv-btn .ok { display: none; }
.bv2 .bv-btn.is-copied .ok { display: block; }
.bv2 .bv-shoplink { display: none; align-items: center; gap: 6px; min-height: 44px; color: var(--v-g700); font-size: 13px; line-height: 18px; font-weight: 600; text-decoration: none; }
.bv2 .bv-shoplink svg { width: 14px; height: 14px; }
.bv2 .bv-shoplink:hover { text-decoration: underline; text-underline-offset: 3px; }
.bv2 .bv-card.is-open .bv-shoplink { display: inline-flex; }

/* sale: one link, the whole card is its hit area */
.bv2 .bv-lnk { display: flex; align-items: center; justify-content: stretch; gap: 6px; height: 44px; color: var(--v-g700); font-size: 15px; font-weight: 600; text-decoration: none; }
.bv2 .bv-lnk::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bv2 .bv-lnk:focus-visible { outline: 0; }
.bv2 .bv-card:has(.bv-lnk:focus-visible) { outline: 3px solid var(--v-g600); outline-offset: 2px; }
.bv2 .bv-pl { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 8px; background: var(--v-g100); }
.bv2 .bv-card:hover .bv-pl { background: var(--v-g200); }

/* ---------- compact rows (no usable photo, and tested cards) ---------- */
.bv2 .bv-list--c { margin-top: 12px; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .bv2 .bv-list--c { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bv2 .bv-list--t { grid-template-columns: 1fr; } }
.bv2 .bv-c { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 12px; }
.bv2 .bv-c .bv-m { width: 48px; height: 48px; aspect-ratio: auto; border-radius: 12px; overflow: hidden; }
.bv2 .bv-c .bv-b { display: block; padding: 0; }
.bv2 .bv-c .bv-shl { position: static; min-height: 0; height: 0; }
.bv2 .bv-c .bv-sh { display: none; }
.bv2 .bv-c .bv-info { top: 0; right: 0; }
.bv2 .bv-c .bv-ti { margin-top: 0; min-height: 0; padding-right: 32px; }
.bv2 .bv-c .bv-vl { margin-top: 4px; }
.bv2 .bv-c .bv-ra { margin-top: 8px; padding-top: 0; }

/* ---------- the picked offer (?o=): full width, larger, one solid action ---------- */
.bv2 .bv-list--pick { grid-template-columns: 1fr; margin-top: 16px; }
.bv2 .bv-pk { display: grid; grid-template-columns: 128px minmax(0, 1fr); padding: 0; align-items: start; }
.bv2 .bv-pk::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--v-g600); border-radius: var(--v-r); pointer-events: none; }
.bv2 .bv-pk .bv-m { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 0; }
.bv2 .bv-pk .bv-b { display: flex; padding: 12px 12px 12px 16px; }
.bv2 .bv-pk .bv-sh { color: var(--v-g700); font-weight: 600; }
.bv2 .bv-pk .bv-ti { display: block; -webkit-line-clamp: unset; min-height: 0; overflow: visible; font-size: 17px; line-height: 24px; }
.bv2 .bv-pk .bv-dsc { display: block; }
.bv2 .bv-pk .bv-ra { padding-top: 12px; }
.bv2 .bv-pk .bv-btn, .bv2 .bv-pk .bv-btn .cd { color: #fff; }
.bv2 .bv-pk .bv-btn { background: var(--v-g600); border-radius: var(--v-rb); }
.bv2 .bv-pk .bv-btn::before { display: none; }
.bv2 .bv-pk .bv-btn:hover { background: var(--v-g700); }
.bv2 .bv-pk .bv-btn svg { color: #fff; }
.bv2 .bv-pk .bv-pl { background: var(--v-g600); color: #fff; }
.bv2 .bv-pk:hover .bv-pl { background: var(--v-g700); }
@media (min-width: 768px) {
  .bv2 .bv-pk { grid-template-columns: 220px minmax(0, 1fr); }
  .bv2 .bv-pk .bv-b { padding: 16px 20px; }
  .bv2 .bv-pk .bv-ra { max-width: 240px; }
  .bv2 .bv-pk .bv-ti { font-size: 18px; line-height: 24px; }
}
@media (max-width: 599px) {
  .bv2 .bv-pk { display: block; position: relative; }
  .bv2 .bv-pk .bv-m { width: 100%; aspect-ratio: 4 / 3; height: auto; }
  .bv2 .bv-pk .bv-b { display: flex; padding: 12px; }
  .bv2 .bv-pk .bv-ti { font-size: 18px; line-height: 24px; margin-top: 8px; }
  .bv2 .bv-pk .bv-dsc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-right: 3px; }
  .bv2 .bv-pk.is-more .bv-dsc { display: block; -webkit-line-clamp: unset; }
  .bv2 .bv-pk .bv-rt { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; padding: 0; background: none; border: 0; color: var(--v-g700); font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--v-g200); }
  .bv2 .bv-pk .bv-ra { padding-top: 0; }
  .bv2 .bv-pk:not(:has(.ph)) .bv-m { position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; aspect-ratio: auto; border-radius: 12px; overflow: hidden; }
  .bv2 .bv-pk:not(:has(.ph)) .bv-shl { padding-left: 52px; min-height: 40px; }
  .bv2 .bv-pk:not(:has(.ph)) .bv-info { top: -2px; }
  .bv2 .bv-pk:not(:has(.ph)) .vt.is-bad::after { width: 100%; height: 100%; border-radius: 0; box-shadow: none; font-size: 20px; }
}

/* ---------- panels: expired offers ---------- */
.bv2 .bv-panel { margin-top: 24px; background: #fff; border-radius: var(--v-r); padding: var(--pad, 16px); }
.bv2 .bv-acc { padding: 0; }
.bv2 .bv-acc__h { margin: 0; font-size: inherit; }
.bv2 .bv-acc__b { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 0 var(--pad, 16px); background: none; border: 0; text-align: left; cursor: pointer; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.008em; color: var(--v-ink); }
.bv2 .bv-acc__b .c { font-size: 13px; font-weight: 400; color: var(--v-muted); letter-spacing: 0; }
.bv2 .bv-acc__b .chev { margin-left: auto; width: 18px; height: 18px; color: var(--v-muted); transition: transform .15s ease; }
.bv2 .bv-acc__b[aria-expanded=true] .chev { transform: rotate(180deg); }
.bv2 .bv-in { padding: 0 var(--pad, 16px) var(--pad, 16px); }
.bv2 .bv-xl { border-top: 1px solid var(--v-hair); }
.bv2 .bv-xr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--v-hair); }
.bv2 .bv-xr:first-child { border-top: 0; }
.bv2 .bv-xd { font-size: 13px; line-height: 18px; color: var(--v-muted); }
.bv2 .bv-xd .mk { margin-left: 8px; }
.bv2 .bv-xs { margin-top: 2px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--v-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bv2 .bv-xf { font-size: 17px; line-height: 22px; font-weight: 700; color: var(--v-ink); white-space: nowrap; text-align: right; }
.bv2 .bv-xf .v::before { content: "-"; }
.bv2 .bv-more { display: flex; justify-content: center; margin-top: 8px; }
.bv2 .bv-more button { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; background: #fff; border: 1px solid var(--v-g600); border-radius: var(--v-rb); color: var(--v-g700); font-size: 15px; font-weight: 600; cursor: pointer; }
.bv2 .bv-more button:hover { background: var(--v-g50); }
.bv2 .bv-note { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--v-muted); }

/* ---------- more info: bottom sheet on phones, small dialog on desktop ---------- */
.bv2 dialog#bv-info { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--v-ink); }
.bv2 dialog#bv-info:not([open]) { display: none; }
.bv2 dialog#bv-info::backdrop { background: color-mix(in srgb, var(--v-ink) 45%, transparent); }
.bv2 .bv-dg { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow: auto; background: #fff; border-radius: var(--v-r) var(--v-r) 0 0; padding: 0 var(--pad, 16px) var(--pad, 16px); }
.bv2 .bv-dg__hd { position: sticky; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: #fff; padding: 12px 0 8px; }
.bv2 .bv-dg__hd h2 { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.008em; padding-top: 10px; }
.bv2 .bv-dg__x { flex: none; width: 44px; height: 44px; margin-right: -12px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--v-ink); cursor: pointer; }
.bv2 .bv-dg__bd p { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--v-ink); }
.bv2 .bv-dg__bd p.t { margin-top: 0; font-size: 13px; line-height: 18px; color: var(--v-muted); }
.bv2 .bv-dg__bd p.m { font-size: 13px; line-height: 18px; color: var(--v-muted); }
.bv2 .bv-dg__ft { margin-top: 16px; }
.bv2 .bv-pbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; padding: 0 20px; border: 1px solid var(--v-g600); border-radius: var(--v-rb); background: var(--v-g600); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.bv2 .bv-pbtn:hover { background: var(--v-g700); border-color: var(--v-g700); }
.bv2 .bv-pbtn svg { width: 16px; height: 16px; }
.bv2 .bv-pbtn--line { background: #fff; color: var(--v-g700); }
.bv2 .bv-pbtn--line:hover { background: var(--v-g50); color: var(--v-g700); }
.bv2 .bv-pbtn .cd { font-weight: 700; letter-spacing: .04em; }
@media (min-width: 768px) { .bv2 .bv-dg { left: 50%; top: 50%; bottom: auto; right: auto; width: min(480px, calc(100% - 48px)); transform: translate(-50%, -50%); border-radius: var(--v-r); } }

@media (prefers-reduced-motion: reduce) { .bv2 * { transition: none !important; } }

/* ---------- the other blocks on the page, quieter (spacing and headings only; scoped to v2; ads are never hidden or resized) ---------- */
body.bof-v2 .entry-content > .sec { margin-top: 24px; }
body.bof-v2 .entry-content .bhi-kv-panel,
body.bof-v2 .entry-content .sb-container { border-radius: 12px; }
body.bof-v2 .entry-content .bhi-kv-panel > h2,
body.bof-v2 .entry-content .sb-container > h2 { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.008em; }
body.bof-v2 .entry-content .deal-ad-slot { margin-top: 24px; }
body.bof-v2 .entry-content > p { max-width: 72ch; color: var(--ink, #16201B); }