/* Category Latest Offers 2.17.0: category page v2, the homepage V26C look ("the photo speaks, the frame is quiet").
   Loaded only when the v2 list is on (option clo_v2 or ?clo_v2=1). Every value is a design token (design/tokens.json): the colours come
   from the deal-design-system variables under body.ds2 with the token value as fallback; page feed #E9EEEB and deal #C2410C are the two
   V26C homepage values (owner decision 18.10.2026). Neutrals plus ONE accent per card (the discount figure, or the "ends today" text).
   Everything is scoped under .cv2 (the offer block) or body.clo-v2 (the page around it); the old list is untouched. */

body.clo-v2 { --page: #E9EEEB; --deal: #C2410C; }
body.clo-v2, body.clo-v2 #page, body.clo-v2 #content, body.clo-v2 .site-content { background-color: var(--page) !important; }
body.clo-v2 .site-content .ast-container { background: transparent; }

.cv2 {
  --c-ink: var(--ink, #16201B);
  --c-muted: var(--muted, #56635B);
  --c-hair: var(--hair, #D9E0DC);
  --c-subtle: var(--subtle, #E8EDEA);
  --c-g50: var(--g50, #F0F8F3);
  --c-g100: var(--g100, #E2F1E7);
  --c-g200: var(--g200, #C4E3D0);
  --c-g600: var(--g600, #1F7A46);
  --c-g700: var(--g700, #17643A);
  --c-deal: var(--deal, #C2410C);
  --c-r: var(--radius-panel, 12px);
  --c-rb: var(--radius-btn, 10px);
  margin-top: 16px;
  color: var(--c-ink);
  font-family: var(--font, inherit);
  font-size: 15px;
  line-height: 22px;
  font-variant-numeric: lining-nums tabular-nums;
}
.cv2 *, .cv2 *::before, .cv2 *::after { box-sizing: border-box; }
.cv2 :is(h2, h3, p, ul) { margin: 0; }
.cv2 ul { padding: 0; list-style: none; }
.cv2 button { font-family: inherit; color: inherit; }
.cv2 svg { flex: none; }
.cv2 :focus-visible { outline: 3px solid var(--c-g600); outline-offset: 2px; }
.cv2 [hidden] { display: none !important; }
.cv2 .cv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cv2 .cv-sech { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.008em; }

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

/* ---------- the card grid: 2 columns on a phone, image frame 4:5 reserved, title 2 lines reserved, meta line reserved ---------- */
.cv2 .cv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin-top: 16px; }
@media (min-width: 768px) { .cv2 .cv-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px 16px; } }
@media (max-width: 767px) { .cv2 .cv-list > .cv-card:nth-child(n+9) { content-visibility: auto; contain-intrinsic-size: auto 400px; } }
.cv2 .cv-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border-radius: var(--c-r); overflow: hidden; }
.cv2 .cv-card:hover { box-shadow: 0 1px 3px rgba(22, 32, 27, .14); }
.cv2 .cv-m { position: relative; flex: none; aspect-ratio: 4 / 5; width: 100%; background: var(--c-g50); }
.cv2 .cv-m .vp { position: absolute; inset: 0; display: block; }
.cv2 .cv-m .vp img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.cv2 .cv-m > .lo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; padding: 10px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--c-hair); }
.cv2 .cv-m > .lo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.cv2 .cv-m > .lo.lo--m { display: flex; align-items: center; justify-content: center; padding: 0; color: var(--c-ink); font-size: 28px; line-height: 1; font-weight: 600; }

/* a card with a photo shows the photo only (the tile or monogram stays for a picture that fails to load) */
.cv2 .cv-card.has-ph .cv-m > .lo, .cv2 .cv-card.has-ph .cv-m > .lo.lo--m, .cv2 .cv-card.has-ph .cv-m > .vt { display: none; }

/* logo tile (style A): the fill is the shop's own artwork colour, drawn as a graphic */
.cv2 .vt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cv2 .vt__f { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.cv2 .vt img { position: relative; display: block; flex: none; height: auto; max-width: none; max-height: none; padding: 0; border-radius: 0; }
.cv2 .vt--w img { width: 75%; max-height: 46%; object-fit: contain; }
.cv2 .vt--k img { width: 55%; max-height: 55%; object-fit: contain; }
.cv2 .vt--wh img { filter: brightness(0) invert(1); }
.cv2 .vt--ink img { filter: brightness(0); }
.cv2 .vt.is-bad { background: var(--c-g50); }
.cv2 .vt.is-bad img, .cv2 .vt.is-bad .vt__f { display: none; }
.cv2 .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(--c-hair); color: var(--c-ink); font-size: 28px; line-height: 1; font-weight: 600; }

/* body: shop, one text line pair, ONE line with the figure and the meta */
.cv2 .cv-b { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 12px; }
.cv2 .cv-sh { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv2 .cv-sh a { color: var(--c-muted); text-decoration: none; }
.cv2 .cv-sh a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cv2 .cv-sh a:focus-visible { outline: 0; }
.cv2 .cv-card:has(.cv-sh a:focus-visible) { outline: 3px solid var(--c-g600); outline-offset: 2px; }
.cv2 .cv-ti { margin: 4px 1px 0 0; min-height: 40px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--c-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; hyphens: manual; }
.cv2 .cv-vl { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-top: 8px; min-height: 22px; }
.cv2 .cv-vl .fg { display: inline-flex; align-items: baseline; flex: none; gap: 4px; white-space: nowrap; font-size: 17px; line-height: 22px; font-weight: 700; color: var(--c-deal); }
.cv2 .cv-vl .fg small { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--c-muted); }
.cv2 .cv-vl .fg .v::before { content: "-"; }
.cv2 .cv-vl .fg .u { font-size: 17px; }
.cv2 .cv-vl .mt { flex: 1; min-width: 0; min-height: 18px; margin-right: 1px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv2 .cv-vl .mt .acc { color: var(--c-deal); font-weight: 600; }

/* codes: ONE slim outline button, 36px drawn inside a 44px tap area; sales have none, the whole card is the link */
.cv2 .cv-a { margin-top: auto; padding-top: 8px; }
.cv2 .cv-btn { position: relative; z-index: 3; 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(--c-ink); font-size: 15px; line-height: 22px; font-weight: 600; cursor: pointer; box-shadow: none; }
.cv2 .cv-btn::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; bottom: 4px; border: 1px solid var(--c-ink); border-radius: 8px; z-index: -1; }
.cv2 .cv-btn:hover::before { background: var(--c-g50); }
.cv2 .cv-btn .cd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv2 .cv-btn.is-copied .cd { font-weight: 700; letter-spacing: .04em; }
.cv2 .cv-btn svg { width: 16px; height: 16px; color: var(--c-g700); }
.cv2 .cv-btn .ok { display: none; }
.cv2 .cv-btn.is-copied .ok { display: block; }

/* show more */
.cv2 .cv-more { display: flex; justify-content: center; margin-top: 16px; }
.cv2 .cv-mbtn { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 320px; height: 44px; padding: 0 20px; background: #fff; border: 1px solid var(--c-g600); border-radius: var(--c-rb); color: var(--c-g700); font-size: 15px; line-height: 22px; font-weight: 600; cursor: pointer; }
.cv2 .cv-mbtn:hover { background: var(--c-g50); }

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

/* ---------- the rest of the category page, quieter (spacing and panels only; ads are never hidden or resized) ---------- */
body.clo-v2 .cfo-page .cfo-hero .h1 { font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -.015em; }
body.clo-v2 .cfo-page > .sec,
body.clo-v2 .cfo-page > nav.sec { margin-top: 32px; }