/* Fonts: Anek Latin, Mukta and Kalam from Google Fonts (linked in index.html). */

/* The v1.7 look, built to stay light on phones: one short ink-registration entrance on the hero, no scroll-driven effects,
   no blend modes, no per-card animation, and blur only on two small or sticky pieces of UI. */
.dz{
  color-scheme: light;
  /* paper stocks */
  --stock-blush:#EEF0FB; --stock-mint:#E5F6E4; --stock-butter:#F8F6D6; --stock-sky:#F8E6EE;
  /* the reverse of each stock, used for the dotted photo placeholder */
  --back-blush:#C6CCF0; --back-mint:#B5E2B2; --back-butter:#E5DE8E; --back-sky:#EDBBD0;
  /* riso inks */
  --ink-blue:#1E2A78; --ink-blue-press:#141D57; --ink-pink:#E6407A; --ink-pink-deep:#B02558; --ink-yellow:#C5F04A;
  --page: var(--stock-blush);
  --rule: color-mix(in srgb, var(--ink-blue) 45%, transparent);
  --f-display: "Anek Latin", "Arial Narrow", "Liberation Sans Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Mukta", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --f-hand: "Kalam", "Segoe Print", "Bradley Hand", "Chalkboard SE", cursive;
  /* paper grain: a small inline SVG noise tile */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .2 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --gut: 16px;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-pop: cubic-bezier(.3,1.5,.5,1);
  --ctl-h: 48px;            /* one height for every control in the filter strip */
}

.dz .st-blush{ --stock: var(--stock-blush); --stock-back: var(--back-blush); }

.dz .st-mint{ --stock: var(--stock-mint); --stock-back: var(--back-mint); }

.dz .st-butter{ --stock: var(--stock-butter); --stock-back: var(--back-butter); }

.dz .st-sky{ --stock: var(--stock-sky); --stock-back: var(--back-sky); }


.dz [hidden]{ display:none !important; }

.dz a{ color: inherit; }

.dz button, .dz input, .dz select{ font: inherit; color: inherit; }

.dz :focus-visible{ outline: 3px solid var(--ink-blue); outline-offset: 3px; }

.dz .vh{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.dz .wrap{ width:100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gut); }

.dz .sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.dz mark, .dz .hl{ color: inherit; padding: 0 .25em; margin: 0 -.05em;
  background: linear-gradient(100deg, transparent .15em, var(--ink-yellow) .3em, var(--ink-yellow) calc(100% - .35em), transparent calc(100% - .1em)) 0 62% / 100% 74% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* controls need the script; without it every deal is simply listed. A media query, not an
   inline script, because the site CSP blocks inline scripts it has no hash for. */
@media (scripting: none){ .dz .controls, .dz .jump{ display:none !important; } }

/* paper with grain: one rule, so every sheet looks the same */
.dz .paper{ background-color: var(--stock); background-image: var(--grain); background-size: 260px 260px; }

/* ---------- riso two-plate type ----------
   blue plate: an outline under a paper-coloured fill; the pink plate prints over it, slightly off register */
.dz .riso{ display:inline-grid; position:relative; isolation:isolate; }

.dz .riso > span{ grid-area: 1 / 1; }

.dz .riso-b{ color: var(--stock, var(--page)); -webkit-text-stroke: calc(var(--stroke, 2px) * 2) var(--ink-blue); paint-order: stroke fill; translate: .8px .6px; }

.dz .riso-p{ position:relative; color: var(--ink-pink); }

@keyframes register{ from{ translate: -11px 7px; }
 to{ translate: .8px .6px; }
 }

/* notched ticket corners: four bites drawn as backgrounds in --tc (a mask would need an offscreen layer per ticket) */
.dz .ticket{ --r: 7px; --tc: var(--stock-sky);
  background:
    radial-gradient(circle var(--r) at 0 0, #0000 96%, var(--tc)) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--r) at 100% 0, #0000 96%, var(--tc)) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--r) at 0 100%, #0000 96%, var(--tc)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--r) at 100% 100%, #0000 96%, var(--tc)) bottom right / 51% 51% no-repeat; }

/* ---------- glass ----------
   A frosted look from a translucent fill and light edges. Real blur is used only on the phone "Filters" button
   and on the sticky filter bar of mouse-driven screens, never on cards or on anything that scrolls. */
.dz .glass{ position:relative; isolation:isolate; color: var(--ink-blue);
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.36));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.38),
              inset 0 -10px 18px -12px color-mix(in srgb, var(--ink-blue) 18%, transparent), 0 10px 20px -14px color-mix(in srgb, var(--ink-blue) 55%, transparent); }

.dz .glass::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background: radial-gradient(140px 70px at 28% 0%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%); opacity:.75; }

.dz .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (max-width: 720px){

  .dz .jump{ bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

}
@media (prefers-reduced-motion: no-preference){

  .dz ::view-transition-old(root), .dz ::view-transition-new(root){ animation-duration: .18s; }

}

/* ---------- hero: one compact riso poster ----------
   One band: the deal count on the left, "Deals by" beside it with the hand note and the store logo underneath,
   then the stamp and the cut-out photo. The h1 shares the copy's grid (subgrid), so the note
   and logos line up under "Deals" while staying outside the heading. Sizes follow the hero's own width (cqi). */
.dz .dz-hero{ padding-top: 48px; container: hero / inline-size; overflow-x: clip; }

/* the first line of the page: what this list is, before the poster */
.dz .dz-kicker{ display:flex; flex-wrap:wrap; align-items:baseline; gap: 4px 14px; margin: 0 0 14px; color: var(--ink-blue); }
.dz .dz-kicker .hl{ font: 800 clamp(20px, 2.6cqi, 34px)/1.1 var(--f-display); font-stretch: 80%; text-transform: uppercase; letter-spacing: .01em; }
.dz .dz-kicker-sub{ font: 400 clamp(15px, 1.6cqi, 20px)/1.2 var(--f-hand); color: var(--ink-pink-deep); }

.dz .poster{ position:relative; isolation:isolate; display:grid; grid-template-columns: minmax(0,1fr) 38cqi; min-height: 17.5cqi;
  box-shadow: 0 30px 44px -30px color-mix(in srgb, var(--ink-blue) 60%, transparent), 0 2px 0 color-mix(in srgb, var(--ink-blue) 8%, transparent); }

.dz .hp-copy{ position:relative; z-index:2; display:grid; grid-template-columns: auto minmax(0,1fr); grid-template-rows: auto auto auto; column-gap: 1.6cqi;
  align-content:center; padding: 2cqi 0 2cqi 2.8cqi; }

.dz .hp-h{ grid-column: 1 / 3; grid-row: 1 / 4; display:grid; grid-template-columns: subgrid; grid-template-rows: subgrid; justify-items:start; margin:0;
  font-family: var(--f-display); font-weight: 800; line-height:.8; text-transform: uppercase; }

.dz .hp-top{ grid-column: 1; grid-row: 1; align-self:end; font-size: 3.6cqi; font-stretch: 80%; letter-spacing: .02em; }

.dz .hp-num{ grid-column: 1; grid-row: 2 / 4; align-self:end; --stroke: 2.5px; font-size: 12.6cqi; font-stretch: 75%; letter-spacing: -.015em; line-height: .78; margin: .5cqi 0 0 -.3cqi; font-variant-numeric: lining-nums; }

.dz .hp-deals{ grid-column: 2; grid-row: 1 / 3; align-self:end; font-size: 4.7cqi; font-stretch: 80%; line-height: .92; letter-spacing: .01em; }

.dz .hp-deals b{ display:block; color: var(--ink-pink); font-weight: 800; }

.dz .hp-meta{ grid-column: 2; grid-row: 3; align-self:end; display:flex; flex-wrap:wrap; align-items:center; gap: 1cqi 1.4cqi; margin-top: 1.1cqi; }

.dz .hp-sub{ margin: 0; display:inline-flex; align-items:center; gap: .5cqi; font: 400 2cqi/1 var(--f-hand); color: var(--ink-pink-deep); rotate: -2deg; transform-origin: left; white-space: nowrap; }

.dz .hp-sub svg{ width: 2.6cqi; height: auto; aspect-ratio: 40 / 24; }

.dz .hp-logos{ display:flex; align-items:center; gap: .9cqi; }

.dz .hp-lg{ display:inline-grid; place-items:center; border-radius: 10px; padding: .8cqi 1.1cqi .6cqi; }

.dz .hp-lg img{ display:block; height: 2.1cqi; width:auto; }

.dz .hp-lg.f img{ height: 2.25cqi; }

/* the cut-out photo on a warm glow; it stands up out of the poster. */
.dz .hp-photo{ position:relative; overflow:hidden; }

.dz .hp-photo::before{ content:""; position:absolute; right: 2cqi; top: 50%; translate: 0 -50%; width: 26cqi; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--ink-yellow), var(--ink-pink) 55%, transparent); opacity: .55; }

.dz .hp-dots{ position:absolute; inset: 20% -2% 0 30%; pointer-events:none; opacity:.45; background: radial-gradient(circle, var(--ink-blue) 1.3px, transparent 1.7px) 0 0 / 8px 8px; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }

/* riso shopping bag with a price tag: two inks slightly off register, like the rank numbers. */
.dz .hp-art{ position:absolute; inset: 2% 3cqi 2% auto; height: 96%; width:auto; max-width:100%; overflow:visible; pointer-events:none; }
.dz .hp-art .art-reg{ fill: none; stroke: var(--ink-blue); stroke-width: 3; opacity: .55; mix-blend-mode: multiply; }
.dz .hp-art .art-bag{ fill: var(--ink-pink); }
.dz .hp-art .art-fold{ fill: var(--ink-pink-deep); }
.dz .hp-art .art-line{ fill:none; stroke: var(--ink-blue); stroke-width: 7; stroke-linecap: round; }
.dz .hp-art .art-eye{ fill: var(--stock-butter); stroke: var(--ink-blue); stroke-width: 2.5; }
.dz .hp-art .art-pct{ font: 800 78px/1 var(--f-display); font-stretch: 75%; fill: var(--stock-butter); }
.dz .hp-art .art-string{ fill:none; stroke: var(--ink-blue); stroke-width: 2; stroke-dasharray: 4 4; }
.dz .hp-art .art-tag{ transform-box: view-box; transform-origin: 218px 128px; rotate: 6deg; }
.dz .hp-art .art-tag path{ fill: var(--ink-yellow); stroke: var(--ink-blue); stroke-width: 3; stroke-linejoin: round; }
.dz .hp-art .art-tag circle{ fill: var(--stock-butter); stroke: var(--ink-blue); stroke-width: 2.5; }
.dz .hp-art .art-tag text{ font: 800 15px/1 var(--f-display); letter-spacing: .06em; fill: var(--ink-blue); }
.dz .hp-art .art-spark{ fill: var(--ink-blue); }
.dz .hp-art .art-spark.s2{ fill: var(--ink-pink); }
.dz .hp-art .art-dot{ fill: var(--ink-yellow); stroke: var(--ink-blue); stroke-width: 2; }

.dz .hp-stamp{ position:absolute; z-index:3; display:block; width: 9.5cqi; height:auto; aspect-ratio: 1; top: 1.4cqi; left: 61%; rotate: -12deg; color: var(--ink-pink); --st-fill: var(--stock-butter); }

@media (prefers-reduced-motion: no-preference){
  .dz .hp-num .riso-b{ animation: register 1.1s .3s var(--ease-pop) backwards; }
  .dz .hp-art .art-tag{ animation: tag-swing 3.2s ease-in-out infinite alternate; }

}

@keyframes tag-swing{ from{ rotate: 2deg; } to{ rotate: 12deg; } }

@media (max-width: 720px){ .dz .dz-hero{ padding-top: 30px; }
 }

/* phones: the count and "Deals by" side by side, the note and logos on one line under both, photo on the right */
@container hero (max-width: 640px){
  .dz .poster{ grid-template-columns: minmax(0,1fr) 34cqi; }
  .dz .hp-copy{ padding: 5cqi 0 5cqi 5cqi; column-gap: 2.6cqi; }

  .dz .hp-top{ font-size: max(15px, 6.2cqi); }

  .dz .hp-num{ grid-row: 2; font-size: 25cqi; --stroke: 1.8px; margin: .4cqi 0 0 -.3cqi; }

  .dz .hp-deals{ font-size: max(17px, 7cqi); line-height: .95; }

  .dz .hp-meta{ grid-column: 1 / 3; grid-row: 3; flex-wrap: wrap; gap: 2.4cqi 3cqi; margin-top: 3.4cqi; }

  .dz .hp-sub{ font-size: max(14px, 4.6cqi); white-space: normal; line-height: 1.15; }

  .dz .hp-sub svg{ width: max(18px, 5cqi); flex: none; }

  .dz .hp-photo{ margin-left: 0; }

  .dz .hp-photo::before{ width: 40cqi; right: -6cqi; }

  .dz .hp-dots{ inset: 20% -10% -6% 0; }

  .dz .hp-art{ inset: 4% -2cqi 4% auto; height: 92%; }

  .dz .hp-stamp{ display: none; }

}

/* ---------- filter strip ---------- */
.dz .stick-sentinel{ height:1px; margin-top: 14px; }

.dz .controls{ position:relative; z-index:30; }

.dz .strip{ position:relative; padding: 8px 0 16px;
  /* scalloped lower edge drawn with backgrounds, so nothing needs a mask */
  background:
    radial-gradient(circle 4.5px at 50% 100%, #0000 96%, var(--page)) left bottom / 13px 5px repeat-x,
    linear-gradient(var(--page), var(--page)) left top / 100% calc(100% - 4.5px) no-repeat,
    var(--grain); }

.dz .strip::after{ content:""; position:absolute; left:0; right:0; bottom: 9px; border-top: 1.5px dashed var(--rule); }

.dz .c-row{ display:flex; flex-wrap:wrap; align-items:center; gap: 12px 18px; }

.dz .c-label{ font: 800 14px/1 var(--f-display); font-stretch: 88%; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }

/* the pressed ticket is plain ink */


.dz .chip:focus-visible, .dz .chip-more:focus-visible{ outline: 3px solid var(--ink-pink-deep); outline-offset: -6px; }

.dz .sort{ display:flex; align-items:center; gap: 10px; }

.dz .sort select{ appearance:none; -webkit-appearance:none; border:0; border-radius:0; height: var(--ctl-h); padding: 2px 40px 0 14px; cursor:pointer;
  font-size: 16px; font-weight: 600; color: var(--ink-blue); border-bottom: 2px solid var(--ink-blue);
  background: linear-gradient(45deg, transparent 50%, var(--ink-blue) 50%) right 21px center / 7px 7px no-repeat, linear-gradient(135deg, var(--ink-blue) 50%, transparent 50%) right 14px center / 7px 7px no-repeat, var(--grain), var(--stock-mint); }

.dz .count{ margin: 0 0 0 auto; font: 400 19px/1.1 var(--f-hand); white-space:nowrap; }

.dz .count b{ font-weight: 400; color: var(--ink-pink-deep); }

.dz .chips-wrap{ position:relative; margin-top: 10px; }

.dz .chips{ display:flex; gap: 8px; overflow-x:auto; scrollbar-width:none; padding: 3px 2px 4px; scroll-padding: 0 60px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent calc(100% - 6px)); mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent calc(100% - 6px)); }

.dz .chips::-webkit-scrollbar{ display:none; }

.dz .chips.at-end{ -webkit-mask-image:none; mask-image:none; }

.dz .chips.not-start{ -webkit-mask-image: linear-gradient(90deg, transparent 6px, #000 70px, #000 calc(100% - 70px), transparent calc(100% - 6px)); mask-image: linear-gradient(90deg, transparent 6px, #000 70px, #000 calc(100% - 70px), transparent calc(100% - 6px)); }

.dz .chips.not-start.at-end{ -webkit-mask-image: linear-gradient(90deg, transparent 6px, #000 70px); mask-image: linear-gradient(90deg, transparent 6px, #000 70px); }

.dz .chip{ --r: 5px; --tc: var(--stock); appearance:none; border:0; cursor:pointer; flex: 0 0 auto; display:inline-flex; align-items:center; gap: 7px; height: 38px; padding: 1px 14px 0 31px; position:relative;
  color: var(--ink-blue); font-size: 15px; font-weight: 600; line-height: 1; white-space:nowrap; }

.dz .chip::before{ content:""; position:absolute; left: 11px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--page); box-shadow: inset 1px 1.5px 1.5px color-mix(in srgb, var(--ink-blue) 40%, transparent); }

.dz .chip::after{ content:""; position:absolute; left: 25px; top: 7px; bottom: 7px; border-left: 1.5px dashed color-mix(in srgb, var(--ink-blue) 30%, transparent); }

.dz .chip .n{ font: 800 15px/1 var(--f-display); font-stretch: 85%; font-variant-numeric: tabular-nums; }

.dz .chip[aria-pressed="true"]{ --tc: var(--ink-blue); color: var(--stock); }

.dz .chip[aria-pressed="true"]::after{ border-color: rgba(255,255,255,.35); }

.dz .chip:hover:not([aria-pressed="true"]){ --tc: color-mix(in srgb, var(--stock) 82%, var(--ink-blue)); }

.dz .chip.zero{ opacity: .55; }

.dz .chip-more{ --r: 5px; --tc: var(--stock-butter); position:absolute; top: 3px; height: 38px; width: 44px; border:0; cursor:pointer; display:none; place-items:center; padding:0; color: var(--ink-blue); }

.dz .chip-more svg{ width: 14px; height: 14px; }

.dz .chip-more.next{ right: 0; }
 .dz .chip-more.prev{ left: 0; }

.dz .chip-more.prev svg{ transform: scaleX(-1); }

@media (hover:hover) and (pointer:fine){ .dz .chips-wrap.can-next .chip-more.next, .dz .chips-wrap.can-prev .chip-more.prev{ display:grid; }
 }

/* ---------- deals: upright coupons on one grid ----------
   As many columns as fit at 214 px or wider (five on a laptop, four or three on tablets), two on phones. Each coupon:
   the photo on a dotted band with the rank and the % burst, then name, previous low and why; a perforation; then the
   stub with price, was-price, best buy and the button on the bottom edge. */
.dz .deals-sec{ padding-top: 16px; }

.dz .deals{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 214px), 1fr)); gap: 4px 18px; align-items: stretch; }

/* until the script has counted the matches, show only the first page, so nothing flashes */
@media (scripting: enabled){ .dz .deals:not(.go) > .coupon:nth-child(n+25){ display:none; } }

/* a deal that arrived while the page was open fades in, so the change is easy to spot */
@media (prefers-reduced-motion: no-preference){ .dz .coupon.fresh{ animation: fresh-in .5s var(--ease-pop, ease-out) both; } }
@keyframes fresh-in{ from{ opacity: 0; translate: 0 10px; } }

/* Offscreen coupons are skipped by the browser. The padding keeps the lift and shadow of a hovered coupon inside the box that is clipped. */
.dz .coupon{ position:relative; display:flex; min-width:0; content-visibility: auto; contain-intrinsic-size: auto 420px; padding: 6px 0 14px; }

.dz .cp{ position:relative; isolation:isolate; flex: 1 1 auto; min-width:0; display:flex; flex-direction:column; }

.dz .cp > .body, .dz .cp > .stub{ background-color: var(--stock); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink-blue) 14%, transparent), 0 6px 8px -8px color-mix(in srgb, var(--ink-blue) 45%, transparent); }

.dz .cp > .body{ background-image: var(--grain); background-size: 260px 260px; }

.dz .cp > .stub{
  background-image: var(--grain), linear-gradient(180deg, var(--stock) 38%, transparent 100%), radial-gradient(circle, color-mix(in srgb, var(--ink-pink) 42%, transparent) 0 1.05px, transparent 1.5px);
  background-size: 260px 260px, auto, 7px 7px; }

/* the body: photo band, name, previous low, why. It takes up any spare height so stubs line up across a row */
.dz .body{ position:relative; flex: 1 1 auto; min-width:0; display:flex; flex-direction:column; padding: 0 16px 12px; }

.dz .b-main{ display:flex; flex-direction:column; gap: 12px; }

.dz .pic-wrap{ position:relative; margin: 0 -16px; padding: 22px 0 14px; display:grid; place-items:center;
  background: radial-gradient(circle, var(--stock-back) 0 1.6px, transparent 2px) 0 0 / 7px 7px; }

.dz .pic{ position:relative; margin:0; width: 120px; aspect-ratio: 1; display:grid; place-items:center; background: var(--stock); border-radius: 2px; }

.dz .pic.has-img{ background: #fff; rotate: -1.6deg; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink-blue) 12%, transparent), 0 6px 8px -6px color-mix(in srgb, var(--ink-blue) 50%, transparent); }

.dz .pic.has-img::before{ content:""; position:absolute; z-index:1; top: -7px; left: 50%; width: 44px; height: 15px; margin-left: -22px;
  background: color-mix(in srgb, var(--ink-yellow) 62%, transparent); rotate: 4deg; box-shadow: 0 1px 1px color-mix(in srgb, var(--ink-blue) 12%, transparent); }

.dz .pic img{ display:block; width: 86%; height: 86%; object-fit: contain; }

.dz .pic-ico{ width: 62%; height: 62%; overflow: visible; }

.dz .pic-ico .ip{ color: var(--ink-pink); translate: 1.3px 1px; }

.dz .pic-ico .ib{ color: var(--ink-blue); }

.dz .rank{ position:absolute; z-index:4; left: 10px; top: 9px; pointer-events:none; }

.dz .rank .riso{ --stroke: 1.4px; font: 800 42px/.78 var(--f-display); font-stretch: 75%; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }

.dz .name{ margin: 0; font: 800 18.5px/1.08 var(--f-display); font-stretch: 86%; letter-spacing: .004em; text-wrap: pretty; overflow-wrap: break-word; hyphens: manual; }

.dz .prev{ margin: 5px 0 0; font-size: 14px; line-height:1.35; }
.dz .trend{ display:inline-block; margin: 0 0 5px; padding: 2px 8px 1px; border-radius: 4px; background: var(--ink-pink); color:#fff; font: 700 12px/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; rotate: -2deg; box-shadow: 0 2px 0 var(--ink-blue); }

.dz .prev b{ font-weight: 700; }

.dz .why{ margin-top: auto; padding-top: 8px; }

.dz .why summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap: 8px; padding: 3px 0; font-size: 14px; font-weight: 600; line-height: 1.2;
  text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

.dz .why summary::-webkit-details-marker{ display:none; }

.dz .why summary::before{ content:""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }

.dz .why[open] summary::before{ transform: rotate(90deg); }

.dz .notes{ margin: 6px 0 2px; padding: 8px 10px 8px 24px; font-size: 13.5px; line-height: 1.4; background: rgba(255,255,255,.38); border-left: 2px solid var(--ink-blue); }

.dz .notes li + li{ margin-top: 5px; }

.dz .notes li::marker{ color: var(--ink-blue); }

/* perforation with two punched notches */
.dz .perf-wrap{ position:relative; flex: 0 0 auto; height: 2px; background-color: var(--stock); }

.dz .perf-wrap::before, .dz .perf-wrap::after{ content:""; position:absolute; top: -10px; width: 22px; height: 22px; border-radius: 50%; background: var(--page); box-shadow: inset 0 2px 3px color-mix(in srgb, var(--ink-blue) 18%, transparent); z-index:2; }

.dz .perf-wrap::before{ left: -11px; }
 .dz .perf-wrap::after{ right: -11px; }

.dz .perf{ position:absolute; left: 14px; right: 14px; top:0; height: 2px; background: repeating-linear-gradient(90deg, var(--ink-blue) 0 7px, transparent 7px 12px); opacity:.55; }

/* the stub: price first with the was-price beside it (they wrap on narrow coupons). The best-buy line is always
   reserved so prices line up across a row; the button sits on the bottom edge. "Usually" is kept for screen readers,
   the struck-through price says it on screen. */
.dz .stub{ flex: 0 0 auto; display:flex; flex-wrap:wrap; align-items:baseline; gap: 2px 10px; padding: 12px 16px 16px; }

.dz .usual{ margin:0; font-size: 0; letter-spacing: 0; }

.dz .strike{ position:relative; display:inline-block; font: 800 17px/1 var(--f-display); font-stretch: 85%; letter-spacing:0; text-transform:none; font-variant-numeric: tabular-nums; }

.dz .strike s{ text-decoration:none; }

/* one straight pink line through the was-price, thin enough that every digit stays readable */
.dz .scrib{ position:absolute; left: -3px; right: -3px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; pointer-events:none; background: var(--ink-pink); }

.dz .price{ order: -1; margin: 0; font: 800 34px/.95 var(--f-display); font-stretch: 80%; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.005em; white-space:nowrap; }

.dz .price.long{ font-size: 30px; }

.dz .price .cur{ font-size: .56em; vertical-align: .55em; margin-right: .04em; }

.dz .best{ flex: 1 1 100%; display:flex; align-items:flex-end; height: 22px; margin: 0; font-size: 13.5px; line-height: 1.3; }

.dz .best .hl{ font-weight: 700; white-space: nowrap; }

.dz .cta{ flex: 1 1 100%; display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-top: 8px; padding: 12px 12px 10px 14px; text-decoration:none;
  background: var(--ink-blue); color: var(--stock); font: 800 14.5px/1 var(--f-display); font-stretch: 90%; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }

.dz .cta::after{ content:""; flex:none; width: 13px; height: 13px; background: currentColor;
  clip-path: polygon(31.2% 11.9%,88.1% 11.9%,88.1% 68.8%,74.4% 68.8%,74.4% 35.4%,23.6% 86.1%,13.9% 76.4%,64.6% 25.6%,31.2% 25.6%); }

.dz .cta:hover{ background: var(--ink-blue-press); }

/* the % off starburst sits on the photo band's top-right corner; text set in the star's own coordinates, so it is always centred */
.dz .burst{ position:absolute; z-index:5; top: 8px; right: 8px; display:block; width: 62px; height: 62px; margin: 0; rotate: -8deg; }

.dz .burst svg{ display:block; width:100%; height:100%; overflow:visible; }

.dz .burst .bp{ fill: var(--ink-yellow); }

.dz .burst .bb{ fill: none; stroke: var(--ink-pink); stroke-width: 2.6; translate: 1.2px .9px; }

.dz .burst text{ fill: var(--ink-blue); font-family: var(--f-display); font-weight: 800; text-anchor: middle; }

.dz .burst .bn{ font-size: 36px; font-stretch: 80%; letter-spacing: -.5px; }

.dz .burst .bpct{ font-size: 19px; }

.dz .burst .bo{ font-size: 11.5px; letter-spacing: 1.6px; font-stretch: 100%; }

/* phones: two coupons across */
@media (max-width: 559px){
  .dz .deals{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 12px; }

  .dz .coupon{ contain-intrinsic-size: auto 350px; padding: 5px 0 12px; }

  .dz .body{ padding: 0 10px 10px; }

  .dz .b-main{ gap: 8px; }

  .dz .pic-wrap{ margin: 0 -10px; padding: 18px 0 10px; }

  .dz .pic{ width: 96px; }

  .dz .rank{ left: 7px; top: 7px; }

  .dz .rank .riso{ font-size: 34px; }

  .dz .burst{ width: 48px; height: 48px; top: 5px; right: 5px; }

  .dz .name{ font-size: 16px; }

  .dz .prev, .dz .why summary{ font-size: 12.5px; }

  .dz .why summary{ gap: 6px; }

  .dz .why summary::before{ border-width: 4px 0 4px 6px; }

  .dz .notes{ font-size: 12.5px; padding: 6px 8px 6px 20px; }

  .dz .perf-wrap::before, .dz .perf-wrap::after{ width: 16px; height: 16px; top: -7px; }

  .dz .perf-wrap::before{ left: -8px; }
 .dz .perf-wrap::after{ right: -8px; }

  .dz .perf{ left: 10px; right: 10px; }

  .dz .stub{ padding: 9px 10px 12px; gap: 0 8px; }

  .dz .price{ font-size: 26px; }
 .dz .price.long{ font-size: 22px; }

  .dz .strike{ font-size: 14px; }

  .dz .best{ height: 18px; font-size: 12px; }

  .dz .cta{ margin-top: 7px; padding: 11px 9px 9px 10px; font-size: 12.5px; letter-spacing: .04em; gap: 6px; }

  .dz .cta::after{ width: 11px; height: 11px; }

}

/* hover, only where there is a mouse: the coupon lifts, its corner curls, the plates slip a little */
@media (hover:hover) and (pointer:fine){
  .dz .cp{ transition: transform .25s var(--ease-out); }

  .dz .cp::before{ content:""; position:absolute; inset: 10px 6px -2px; z-index:-1; pointer-events:none; box-shadow: 0 18px 22px -14px color-mix(in srgb, var(--ink-blue) 50%, transparent); opacity:0; transition: opacity .3s; }

  .dz .cp::after{ content:""; position:absolute; right:0; bottom:0; width: 46px; height: 46px; z-index: 4; pointer-events:none; visibility:hidden;
    border-top-left-radius: 14px 10px;
    background: linear-gradient(to bottom right, var(--stock-back) 0%, color-mix(in srgb, var(--stock-back) 55%, #fff) 44%, var(--stock-back) 49.4%, var(--page) 50%);
    filter: drop-shadow(-3px -3px 4px color-mix(in srgb, var(--ink-blue) 28%, transparent)); transform: scale(0); transform-origin: 100% 100%; transition: transform .3s var(--ease-out), visibility 0s .3s; }

  .dz .cp:hover{ transform: translateY(-4px); }

  .dz .cp:hover::before{ opacity:1; }

  .dz .cp:hover::after{ visibility:visible; transform: scale(1); transition: transform .3s var(--ease-out), visibility 0s; }

  .dz .rank .riso-b{ transition: translate .35s var(--ease-pop); }

  .dz .cp:hover .rank .riso-b{ translate: 3.2px 2.4px; }

  .dz .burst svg{ transition: transform .45s var(--ease-pop); }

  .dz .cp:hover .burst svg{ transform: rotate(24deg) scale(1.06); }

}

/* cut here, between pages (still: the scissors rest where the cut ended) */
.dz .cut{ grid-column: 1 / -1; position:relative; height: 56px; margin: 6px 0 0; }

.dz .cut-line{ position:absolute; left:0; right:0; top: 50%; border-top: 2px dashed var(--rule); }

.dz .cut-sc{ position:absolute; left: 48%; top: 50%; width: 54px; height: 32px; margin-top: -16px; padding: 0 6px; background-color: var(--page); color: var(--ink-blue); }

.dz .cut-sc svg{ display:block; width:100%; height:100%; overflow:visible; }

.dz .cut-txt{ position:absolute; right: 0; top: 50%; transform: translateY(-58%); padding-left: 12px; background-color: var(--page); font: 400 18px/1 var(--f-hand); white-space:nowrap; }

.dz .cut-txt span{ font: 600 12px/1 var(--f-body); letter-spacing: .14em; text-transform:uppercase; margin-left: 8px; }

.dz .more-row{ display:flex; align-items:center; justify-content:center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }

.dz .more{ --r: 8px; --tc: var(--ink-blue); appearance:none; border:0; cursor:pointer; display:inline-flex; align-items:baseline; justify-content:center; gap: 12px; min-width: min(440px, 100%); padding: 17px 26px 15px; min-height: 54px;
  color: var(--stock-butter); font: 800 20px/1 var(--f-display); font-stretch: 88%; letter-spacing:.06em; text-transform:uppercase; }

.dz .more small{ font: 600 14px/1 var(--f-body); letter-spacing: .02em; text-transform:none; }

.dz .more:hover{ --tc: var(--ink-blue-press); }

.dz .more:focus-visible{ outline: 3px solid var(--ink-pink-deep); outline-offset: -7px; }

.dz .empty{ --stock: var(--stock-butter); padding: 34px 28px 30px; max-width: 640px; position:relative; }

.dz .empty h3{ margin:0; font: 800 34px/.95 var(--f-display); font-stretch: 80%; text-transform:uppercase; }

.dz .empty p{ margin: 10px 0 0; font: 400 19px/1.3 var(--f-hand); }

.dz .empty button{ margin-top: 18px; appearance:none; border:0; cursor:pointer; padding: 12px 18px 10px; background: var(--ink-blue); color: var(--stock-butter); font: 800 16px/1 var(--f-display); letter-spacing:.08em; text-transform:uppercase; }

.dz .fine{ margin: 0; padding-bottom: 32px; font-size: 13.5px; line-height: 1.5; max-width: 72ch; }

.dz .stale{ color: var(--ink-pink-deep); font-weight: 600; }

/* "rechecked every 6 hours" only shows once the updater is really running */


/* a ticket back to the filters on phones; the one place on a phone with real blur (a small fixed pill) */
.dz .jump{ position:fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 32; display:inline-flex; align-items:center; gap: 8px; padding: 12px 18px 11px 15px;
  border-radius: 999px; text-decoration:none; font: 800 16px/1 var(--f-display); font-stretch: 88%; letter-spacing: .08em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6); }

.dz .jump svg{ width: 13px; height: 13px; flex:none; }

.dz .jump:focus-visible{ outline: 3px solid var(--ink-pink-deep); outline-offset: 3px; }

/* ---------- wide screens: the filters stick and turn to glass ---------- */
@media (min-width: 900px){
  .dz .controls{ position: sticky; top: 8px; }
  .dz .jump{ display:none !important; }

  .dz .controls.stuck{ padding-top: 10px; margin-bottom: -10px; }

  .dz .controls.stuck .strip{ width: calc(100% - 2 * var(--gut)); max-width: calc(1360px - 2 * var(--gut)); margin: 0 auto; padding: 12px 0; border-radius: 24px; background: color-mix(in srgb, var(--page) 70%, #fff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.5), 0 18px 30px -20px color-mix(in srgb, var(--ink-blue) 60%, transparent); }

  .dz .controls.stuck .strip::after{ display:none; }

  .dz .controls.stuck .strip > .wrap{ max-width:none; padding: 0 18px; position:relative; }

  .dz .controls.stuck .sort select{ background: linear-gradient(45deg, transparent 50%, var(--ink-blue) 50%) right 21px center / 7px 7px no-repeat, linear-gradient(135deg, var(--ink-blue) 50%, transparent 50%) right 14px center / 7px 7px no-repeat, color-mix(in srgb, var(--page) 30%, #fff); }

  .dz .controls.stuck .chip:not([aria-pressed="true"]){ --tc: color-mix(in srgb, var(--stock) 60%, color-mix(in srgb, var(--page) 70%, #fff)); }

  .dz .controls.stuck .chip[aria-pressed="true"]{ --tc: var(--ink-blue); }

  .dz .controls.stuck .chip::before{ background: color-mix(in srgb, var(--page) 30%, #fff); }

  .dz .controls.stuck .chip-more{ --tc: color-mix(in srgb, var(--page) 30%, #fff); }

  .dz .controls.stuck .chips{ -webkit-mask-image: none; mask-image: none; }

}

/* wide screens: the stuck bar is one row (search, store, sort, then the category chips), so it covers less of each screen */
@media (min-width: 1200px){
  .dz .controls.stuck .strip{ padding: 10px 0; }

  .dz .controls.stuck .strip > .wrap{ display:flex; align-items:center; gap: 14px; }

  .dz .controls.stuck .c-row{ flex: none; flex-wrap: nowrap; gap: 12px; }

  .dz .controls.stuck .sort .c-label, .dz .controls.stuck .count{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  .dz .controls.stuck .chips-wrap{ flex: 1 1 0; min-width: 0; margin-top: 0; }

}

/* blur behind the sticky bar only with a mouse (desktops, laptops); touch tablets get the solid version above */
@media (min-width: 900px) and (hover:hover) and (pointer:fine){
  .dz .controls.stuck .strip{ background: linear-gradient(180deg, rgba(255,255,255,.62), color-mix(in srgb, var(--page) 42%, transparent));
    -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }

}

/* ---------- phones ---------- */
@media (max-width: 759px){
  .dz .stick-sentinel{ margin-top: 12px; }

  .dz .strip{ padding: 6px 0 14px; }

  .dz .c-row{ gap: 8px 10px; }

  /* store toggle and sort share one row; on the narrowest phones they wrap to two */

  .dz .sort{ flex: 1 1 120px; min-width: 0; }

  .dz .sort .c-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  .dz .sort select{ flex: 1; min-width: 0; height: 46px; padding: 2px 30px 0 10px; font-size: 14px; background-position: right 17px center, right 10px center, 0 0, 0 0; }

  /* the count stays for screen readers (it is a live region); on screen, "Show more deals" says how many are left */
  .dz .count{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  .dz .chips-wrap{ margin-top: 8px; }

  .dz .chip{ height: 36px; font-size: 14px; }

  .dz .chips-wrap{ margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); }

  .dz .chips{ padding-left: var(--gut); padding-right: var(--gut); scroll-padding: 0 var(--gut); }

}

/* ---------- no motion at all ---------- */

@media print{
  .dz .controls, .dz .more-row, .dz .jump{ display:none !important; }

  .dz .coupon{ content-visibility: visible; break-inside: avoid; }

  .dz .deals:not(.go) > .coupon:nth-child(n+25){ display:flex; }

}

/* store badge in text, no logo files: solid ink with a yellow smile so it reads on any paper */
.dz .hp-lg{ background: var(--ink-blue); color: #fff; padding: .55em .8em .5em; border-radius: 8px; box-shadow: 0 3px 0 var(--ink-pink-deep); rotate: -2deg; }
.dz .hp-lt{ position:relative; display:block; padding-bottom: .34em; font: 800 max(15px, 2.3cqi)/1 var(--f-display); font-stretch: 88%; letter-spacing: .01em; color: #fff; text-transform: lowercase; }
.dz .hp-lt::after{ content:""; position:absolute; left: 10%; right: 6%; bottom: 0; height: .4em; border-bottom: .13em solid var(--ink-yellow); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
@container hero (max-width: 640px){
  .dz .hp-lg{ font-size: 13px; padding: .5em .75em .45em; }
  .dz .hp-lt{ font-size: 15px; }
}

/* ---------- fit inside the portfolio page ---------- */
.dz{ background: var(--page) var(--grain) 0 0/260px 260px; color: var(--ink-blue); font: 400 16px/1.5 var(--f-body);
  width: min(1200px, 100vw - 32px); margin-inline: calc(50% - min(600px, 50vw - 16px)); padding: 8px 20px 4px; border-radius: 4px; box-sizing: border-box; }
.dz *, .dz *::before, .dz *::after{ box-sizing: border-box; }
.dz img{ max-width: 100%; }
.dz h3{ letter-spacing: normal; }
.dz .wrap{ max-width: none; padding: 0; }
.dz .dz-hero{ padding-top: 24px; }
.dz .find{ display:flex; align-items:center; gap:10px; flex: 1 1 220px; min-width:0; }
.dz .find input{ appearance:none; -webkit-appearance:none; border:0; border-radius:0; height: var(--ctl-h); width:100%; min-width:0; padding: 2px 14px 0;
  font: 600 16px/1 var(--f-body); color: var(--ink-blue); border-bottom: 2px solid var(--ink-blue); background: var(--grain), var(--stock-sky); }
.dz .find input::placeholder{ color: var(--ink-blue); opacity: .55; }
.dz .find input:focus-visible{ outline: 3px solid var(--ink-pink); outline-offset: 2px; }
.dz .deals{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.dz .note{ margin: 8px 0 20px; font-size: 14px; opacity: .85; }
.dz .note a{ color: var(--ink-pink-deep); }
@media (max-width: 600px){
  .dz{ padding: 4px 12px; }
  .dz .find{ flex-basis: 100%; }
  .dz .find .c-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .dz .find input{ height: 46px; }