/* "Bir teklif" (another ad on every visit) under the home hero's folded corner (frontend/src/components/home/WeekOffer.tsx). */

/* The fold's distance from the hero's top-right corner along both edges; registered so it can be transitioned. */
@property --wo-d {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
/* Where the light runs round the top card's edge. */
@property --wo-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.week-zone {
  --wo-idle: 84px;
  --wo-hover: 168px;
  --wo-d: var(--wo-idle);
  --wo-red: #d6215f;
  --wo-red-deep: #a9134a;
  --wo-f1: #b9b3ac;
  --wo-f2: #e9e5e0;
  --wo-f3: #ffffff;
  --wo-f4: #f2efeb;
  --wo-f5: #d3cdc6;
  position: relative;
  isolation: isolate;
  --wo-gap: 24px;
  /* Edge to edge of the window, the hero where it was: the corner is the screen's. */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  /* Lifted and let go, the corner springs a little past where it goes and settles. */
  transition: --wo-d .7s cubic-bezier(.34, 1.56, .64, 1);
}
:root[data-theme=dark] .week-zone {
  --wo-f1: #1b1414;
  --wo-f2: #4b3a3b;
  --wo-f3: #70585a;
  --wo-f4: #5a4647;
  --wo-f5: #3c2f30;
}
.week-zone + .section-head { background: none; padding-top: 0; margin-top: 0; }
/* A tapped corner stays :hover on a touch screen: only a mouse lifts it, and never once it is off. */
@media (hover: hover) {
  .week-zone:not(.is-open):has(.week-corner:hover) { --wo-d: var(--wo-hover); }
  .week-corner:hover { width: var(--wo-hover); height: var(--wo-hover); }
}
.week-zone:not(.is-open):has(.week-corner:focus-visible) { --wo-d: var(--wo-hover); }

/* Until someone has touched it, the corner flicks now and then: lifts, falls back, settles. */
.week-zone.is-ready:not(.is-open, .is-peeling, [data-touched]) { animation: week-flick 5.5s ease-in-out 1.8s infinite; }
@keyframes week-flick {
  0%, 82%, 100% { --wo-d: var(--wo-idle); }
  87% { --wo-d: calc(var(--wo-idle) + 26px); }
  92% { --wo-d: calc(var(--wo-idle) - 4px); }
  96% { --wo-d: calc(var(--wo-idle) + 5px); }
}
.week-zone.is-open { --wo-d: calc(var(--w) + var(--h) + 80px); }
.week-zone.is-peeling { transition: --wo-d 1.15s cubic-bezier(.6, .04, .28, 1); }

.week-zone > .hero-zone { z-index: 1; }
/* The sheet: everything of the hero on the far side of the fold line (a half-plane, drawn as a large square), in
   the hero's own coordinates (--wo-x: where it starts in the zone). Its two shadows are the paper of the zone's
   margins beside it. */
.week-zone.is-peeling > .hero-zone,
.week-zone.is-open > .hero-zone {
  background: var(--paper);
  box-shadow: calc(-1 * var(--wo-x)) 0 0 var(--paper), var(--wo-x) 0 0 var(--paper);
  clip-path: polygon(
    calc(var(--w) - var(--wo-x) - var(--wo-d) - 5000px) -5000px,
    calc(var(--w) - var(--wo-x) - var(--wo-d) + 5000px) 5000px,
    calc(var(--w) - var(--wo-x) - var(--wo-d) - 5000px) 15000px,
    calc(var(--w) - var(--wo-x) - var(--wo-d) - 15000px) 5000px
  );
}

/* The corner at rest: the offer's red, over the hero rather than under a clipped one. */
.week-peek {
  position: absolute; top: 0; right: 0; z-index: 2;
  width: var(--wo-d); height: var(--wo-d);
  background: var(--wo-red-deep);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}
/* Along the fold, between it and the corner at rest; it stays put while the fold moves. */
.week-peek b {
  position: absolute; top: 27px; right: 27px;
  translate: 50% -50%; rotate: 45deg;
  white-space: nowrap; text-transform: uppercase;
  color: #fff; font-size: 8px; font-weight: 800; line-height: 1; letter-spacing: .12em;
  text-shadow: 0 1px 2px rgba(60, 0, 20, .35);
  z-index: 2;
}
/* Lifted far enough, the ad shows through: its photo under the red, its price on the diagonal. */
.week-peek-photo {
  position: absolute; top: 0; right: 0; z-index: 0;
  width: 240px; height: 240px; object-fit: cover;
  opacity: 0; scale: 1.15; transition: opacity .35s, scale .6s cubic-bezier(.2, .8, .2, 1);
}
.week-peek::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(225deg, var(--wo-red-deep) 0, var(--wo-red-deep) 30px, rgba(169, 19, 74, .55) 70px, rgba(169, 19, 74, .12) 150px);
}
.week-peek-price {
  position: absolute; top: 60px; right: 60px; z-index: 2;
  translate: 50% -50%; rotate: 45deg;
  padding: 5px 11px; border-radius: 100px; white-space: nowrap;
  background: #fff; color: var(--wo-red-deep); box-shadow: 0 4px 12px rgba(60, 0, 20, .3);
  font-size: 12px; font-weight: 700; line-height: 1;
  opacity: 0; scale: .6;
  transition: opacity .2s, scale .45s cubic-bezier(.34, 1.56, .64, 1);
}
.week-zone:has(.week-corner:hover) .week-peek-photo { opacity: 1; scale: 1; transition-delay: .1s; }
.week-zone:has(.week-corner:hover) .week-peek-price { opacity: 1; scale: 1; transition-delay: .25s; }
.week-zone.is-peeling .week-peek,
.week-zone.is-open .week-peek { visibility: hidden; }

/* The flap: the hero's box mirrored across the fold (a 45-degree mirror swaps width and height); the paper in it is
   turned so that its top edge is the fold, its shading running out to the tip. */
.week-flaps {
  position: absolute; inset: 0; z-index: 3;
  overflow: hidden; pointer-events: none;
  filter: drop-shadow(-6px 8px 8px rgba(27, 25, 22, .26)) drop-shadow(-1px 1px 1px rgba(27, 25, 22, .16));
}
.week-flap {
  position: absolute;
  left: calc(var(--w) - var(--wo-d));
  top: calc(var(--wo-d) - var(--w));
  width: var(--h);
  height: var(--w);
  overflow: hidden;
}
.week-flap-paper {
  position: absolute; left: 0; top: calc(var(--w) - var(--wo-d));
  width: calc((var(--w) + var(--h)) * 2);
  height: calc(var(--w) + var(--h));
  transform-origin: 0 0;
  transform: rotate(45deg) translateX(-50%);
  background: linear-gradient(180deg,
    var(--wo-f1) 0,
    var(--wo-f2) calc(var(--wo-d) * .09),
    var(--wo-f3) calc(var(--wo-d) * .3),
    var(--wo-f4) calc(var(--wo-d) * .55),
    var(--wo-f5) calc(var(--wo-d) * .72));
}

.week-corner {
  position: absolute; top: 0; right: 0; z-index: 4;
  /* The corner as drawn at rest; lifted, it grows with the fold so the pointer stays on it. */
  width: var(--wo-idle); height: var(--wo-idle);
  padding: 0; border: 0; background: none; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.week-corner:focus-visible { outline: none; }
.week-zone.is-open .week-corner { visibility: hidden; }
.week-zone:not(.is-ready) :is(.week-peek, .week-flaps, .week-corner) { display: none; }

/* Under the sheet: the site's red, lit like the hero (a glow at the left, deep at the corner the sheet leaves). */
/* A little shorter than the hero: the paper shows under it, before the sections below. */
.week-offer {
  position: absolute; inset: 0 0 var(--wo-gap); z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(60% 120% at 18% 60%, rgba(255, 255, 255, .16) 0, transparent 60%),
    radial-gradient(50% 90% at 70% 110%, rgba(255, 120, 160, .35) 0, transparent 70%),
    linear-gradient(115deg, #c81c56 0%, var(--wo-red) 45%, var(--wo-red-deep) 100%);
  visibility: hidden;
}
.week-zone.is-peeling .week-offer,
.week-zone.is-open .week-offer { visibility: visible; }
/* Light drifting over the red while it is open. */
.week-offer::before {
  content: ''; position: absolute; inset: -30%; pointer-events: none;
  background:
    radial-gradient(22% 30% at 30% 35%, rgba(255, 190, 212, .32) 0, transparent 70%),
    radial-gradient(26% 34% at 72% 68%, rgba(110, 0, 45, .38) 0, transparent 70%),
    radial-gradient(16% 22% at 58% 26%, rgba(255, 255, 255, .16) 0, transparent 70%);
  animation: week-drift 22s ease-in-out infinite alternate;
}
.week-zone:not(.is-open) .week-offer::before { animation-play-state: paused; }
@keyframes week-drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(6%, -4%) rotate(8deg); }
  100% { transform: translate(-5%, 5%) rotate(-6deg); }
}

.week-band {
  position: absolute; left: 0; right: 0; display: flex; overflow: hidden; white-space: pre;
  color: rgba(255, 255, 255, .32); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .34em;
  text-transform: uppercase;
  opacity: 0; transition: opacity .5s;
}
.week-band span { flex: none; animation: week-run 60s linear infinite; }
.week-band--top { top: 12px; }
.week-band--bottom { bottom: 12px; }
.week-band--bottom span { animation-direction: reverse; }
.week-zone:not(.is-open) .week-band span { animation-play-state: paused; }
.week-zone.is-open .week-band { opacity: 1; transition-delay: .7s; }
@keyframes week-run { to { transform: translateX(-50%); } }

/* The hero's own measure and type: a kicker, a Playfair line with its italic word, then the ad as a card. */
.week-body {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 40px 40px 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
}

.week-intro {
  flex: 1 1 auto; min-width: 0; color: #fff;
  opacity: 0; translate: -24px 0;
  transition: opacity .5s, translate .8s cubic-bezier(.2, .8, .2, 1);
}
.week-zone.is-open .week-intro { opacity: 1; translate: 0 0; transition-delay: .55s; }
.week-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
  color: rgba(255, 255, 255, .85);
}
.week-title { margin: 0; color: #fff; font-size: 64px; font-weight: 700; line-height: 1.02; letter-spacing: -.025em; }
.week-title em { color: #ffd3e1; font-weight: 500; }

.week-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 22px; }
.week-dealer { display: flex; align-items: center; gap: 16px; }
.week-count { display: inline-flex; align-items: baseline; gap: 6px; color: #fff; font-variant-numeric: tabular-nums; }
.week-count b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; animation: week-tick .32s cubic-bezier(.22, 1, .36, 1); }
.week-of { color: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 600; }
.week-dots { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; align-self: center; }
.week-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); transition: width .35s cubic-bezier(.22, 1, .36, 1), background .3s; }
.week-dots i.is-on { width: 18px; background: #fff; }
@keyframes week-tick { from { opacity: 0; translate: 0 5px; } }
.week-deal {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px 0 14px;
  border: 0; border-radius: 100px; background: #fff; color: var(--wo-red-deep);
  box-shadow: 0 10px 24px -10px rgba(70, 0, 25, .6);
  font: 700 14px/1 Inter, 'Inter Fallback', system-ui, sans-serif; cursor: pointer;
  transition: translate .2s, box-shadow .2s;
}
.week-deal i { font-size: 17px; transition: rotate .6s cubic-bezier(.34, 1.56, .64, 1); }
.week-deal:hover { translate: 0 -1px; box-shadow: 0 14px 28px -10px rgba(70, 0, 25, .7); }
.week-deal:hover i { rotate: 180deg; }
.week-promote {
  display: flex; align-items: center; gap: 12px; max-width: 330px; padding: 10px 14px 10px 12px;
  border: 1px dashed rgba(255, 255, 255, .45); border-radius: 16px; color: #fff; text-decoration: none;
  transition: background .2s, border-color .2s;
}
.week-promote > i:first-child {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255, 255, 255, .16); font-size: 18px;
}
.week-promote > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.week-promote b { font-size: 14px; font-weight: 700; line-height: 1.2; }
.week-promote small { color: rgba(255, 255, 255, .78); font-size: 12px; line-height: 1.3; }
.week-promote > i:last-child { flex: none; margin-left: auto; transition: translate .2s; }
.week-promote:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .7); }
.week-promote:hover > i:last-child { translate: 3px 0; }

/* The deck: the card on top, the next one fanned out under it, the one tossed away flying off. */
.week-deck { position: relative; flex: none; width: 624px; height: 100%; max-height: 248px; margin-right: 40px; }
/* The cards further down: frosted glass on the red, no content. */
.week-deck::before {
  content: ''; position: absolute; inset: 0; border-radius: 24px;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  translate: -36px 30px; rotate: -6deg; scale: .88;
  opacity: 0; transition: opacity .6s;
}
.week-zone.is-open .week-deck::before { opacity: 1; transition-delay: 1.2s; }
.week-card {
  position: absolute; inset: 0;
  --wo-card: var(--white);
  display: flex; gap: 24px; padding: 10px; overflow: hidden;
  border: 1.5px solid transparent; border-radius: 24px; background: var(--wo-card); color: var(--ink); text-decoration: none;
  box-shadow: 0 34px 60px -24px rgba(60, 0, 22, .7), 0 2px 6px rgba(60, 0, 22, .18);
  opacity: 0; translate: 0 22px; scale: .97;
  /* Tilted toward the mouse (--tx, --ty: -.5 to .5 across the card, WeekOffer.tsx). */
  transform: perspective(1000px) rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 7deg));
  transition: opacity .5s, translate .8s cubic-bezier(.2, .8, .2, 1), rotate .8s cubic-bezier(.2, .8, .2, 1), scale .8s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, background-color .5s;
}
:root[data-theme=dark] .week-card { --wo-card: #24201c; }
.week-zone.is-open .week-card.is-top {
  background:
    linear-gradient(var(--wo-card), var(--wo-card)) padding-box,
    conic-gradient(from var(--wo-a), rgba(255, 255, 255, .14), rgba(255, 255, 255, .14) 18%, #ffd27a 30%, #ff8fb4 40%, rgba(255, 255, 255, .14) 54%, rgba(255, 255, 255, .14)) border-box;
  animation: week-ring 7s linear infinite;
}
@keyframes week-ring { to { --wo-a: 360deg; } }
.week-card.is-top:hover { transition-duration: .5s, .8s, .8s, .8s, .15s, .3s, .5s; }
/* The light under the mouse. */
.week-card::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--white-rgb), .18), transparent 65%);
  opacity: 0; transition: opacity .3s;
}
.week-card.is-top:hover::before { opacity: 1; }
.week-card > * { transition: opacity .45s .15s; }
.week-card.is-under {
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), 0 24px 40px -24px rgba(70, 0, 25, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.week-card.is-under > * { opacity: 0; transition-delay: 0s; }
.week-card.is-top { z-index: 2; }
.week-card.is-under { z-index: 1; }
.week-card.is-gone { z-index: 3; }
.week-card.is-rest { display: none; }
.week-zone.is-open .week-card.is-top { opacity: 1; translate: 0 0; scale: 1; transition-delay: .7s; }
.week-zone.is-open .week-card.is-under { opacity: 1; translate: -20px 16px; rotate: -3deg; scale: .94; transition-delay: 1.05s; }
.week-deck.is-dealt .week-card { transition-delay: 0s !important; }
@starting-style {
  .week-zone.is-open .week-deck.is-dealt .week-card.is-under { opacity: 0; translate: -12px 10px; rotate: -2deg; scale: .9; }
}
/* A deal: the top card slides a little aside and melts away over the next one, which is already solid under it;
   that one comes forward, its words a beat later, and the card after it settles in underneath last. Where the slide
   ends is where a tossed card of a two-card deck slides back in under the other from. */
.week-zone.is-open .week-card.is-gone {
  opacity: 0; translate: 56px -8px; rotate: 2deg; scale: .97; pointer-events: none;
  animation: week-toss .42s cubic-bezier(.4, 0, .2, 1);
}
@keyframes week-toss {
  from { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; }
  to { translate: 56px -8px; rotate: 2deg; scale: .97; opacity: 0; }
}
.week-zone.is-open .week-deck.is-dealt .week-card.is-top {
  transition-duration: .4s, .55s, .55s, .55s, .6s, .3s, .3s;
  transition-timing-function: ease, cubic-bezier(.22, 1, .36, 1), cubic-bezier(.22, 1, .36, 1), cubic-bezier(.22, 1, .36, 1), cubic-bezier(.2, .8, .2, 1), ease, ease;
}
.week-deck.is-dealt .week-card.is-top > * { transition: opacity .3s ease .12s; }
.week-zone.is-open .week-deck.is-dealt .week-card.is-under { transition-delay: .18s !important; transition-duration: .5s; transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
.week-card.is-top:hover { box-shadow: 0 44px 74px -24px rgba(60, 0, 22, .75), 0 2px 6px rgba(60, 0, 22, .2), inset 0 0 0 1px rgba(255, 255, 255, .2); }

/* The photo on the left, drifting slowly closer and back while its card is on top. */
.week-photo { position: relative; flex: none; width: 46%; border-radius: 16px; overflow: hidden; background: rgba(var(--ink-rgb), .06); }
.week-photo img { display: block; width: 100%; height: 100%; object-fit: cover; scale: 1.02; }
.week-zone.is-open .week-card.is-top .week-photo img { animation: week-ken 16s ease-in-out infinite alternate; }
@keyframes week-ken { to { scale: 1.06; translate: -1% -.75%; } }
.week-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, .22), transparent 30%, transparent 70%, rgba(0, 0, 0, .18));
}
.week-tag, .week-premium { position: absolute; z-index: 1; }
.week-tag {
  top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 9px; border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(20, 10, 14, .35); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 12px; font-weight: 600;
}
.week-premium {
  bottom: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 9px; border-radius: 100px;
  background: linear-gradient(135deg, #f8d06a, #e3a022); color: #3d2600;
  box-shadow: 0 4px 14px rgba(120, 70, 0, .35);
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
}

/* The right side set like a magazine page: where and when, the ad's own line in the serif, its numbers large,
   the price at the foot beside a round arrow; the card's number in the deck large and faint behind. */
.week-info {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 11px; padding: 10px 16px 10px 0;
}
.week-no {
  position: absolute; top: -18px; right: 4px; z-index: -1;
  font: italic 700 128px/1 'Playfair Display', Georgia, serif; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(var(--ink-rgb), .08);
  pointer-events: none;
}
.week-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-3); font-size: 13px; }
.week-loc { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--ink-2); font-weight: 500; }
.week-loc i { color: var(--accent); }
.week-date { flex: none; }
.week-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
}
.week-facts { display: flex; flex-wrap: wrap; gap: 0; }
.week-facts > span { display: flex; flex-direction: column; gap: 2px; padding: 0 18px; border-left: 1px solid rgba(var(--ink-rgb), .1); }
.week-facts > span:first-child { padding-left: 0; border-left: 0; }
.week-facts b { font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.week-facts small { color: var(--ink-3); font-size: 12px; }
.week-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 0; padding-top: 11px; border-top: 1px dashed rgba(var(--ink-rgb), .14);
}
.week-price { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; font-size: 26px; font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.week-cur { font-size: 20px; color: var(--accent); }
.week-period { color: var(--ink-3); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.week-m2 { flex-basis: 100%; margin-top: 4px; color: var(--ink-3); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.week-cta {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 20px;
  box-shadow: 0 10px 22px -8px rgba(214, 33, 95, .7);
  transition: rotate .4s cubic-bezier(.34, 1.56, .64, 1), scale .3s;
}
.week-card:hover .week-cta { rotate: 45deg; scale: 1.06; }

.week-close {
  position: absolute; top: 34px; right: 24px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 11px;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 100px;
  background: rgba(255, 255, 255, .14); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 13px/1 Inter, 'Inter Fallback', system-ui, sans-serif; cursor: pointer;
  opacity: 0; transition: opacity .3s, background .2s;
}
.week-close:hover { background: rgba(255, 255, 255, .24); }
.week-zone.is-open .week-close { opacity: 1; transition-delay: .8s; }

@media (min-width: 768px) and (max-width: 1279px) {
  .week-body { padding-top: 68px; }
}

@media (max-width: 1100px) {
  .week-title { font-size: 50px; }
  .week-deck { width: 540px; }
  .week-photo { width: 42%; }
  .week-name { font-size: 18px; }
  .week-no { font-size: 120px; }
}

@media (max-width: 767px) {
  .week-zone { --wo-idle: 72px; --wo-hover: 72px; --wo-gap: 16px; }
  .week-peek b { top: 23px; right: 23px; font-size: 7px; }
  .week-band { font-size: 8px; letter-spacing: .26em; }
  .week-band--top { top: 10px; }
  .week-band--bottom { bottom: 10px; }
  .week-body { flex-direction: column; align-items: stretch; justify-content: center; gap: 16px; padding: 34px 16px 40px; }
  .week-intro { flex: none; }
  .week-kicker { margin-bottom: 8px; font-size: 10px; }
  .week-title { font-size: 34px; }
  .week-actions { flex-direction: row; align-items: center; gap: 8px; margin-top: 12px; }
  .week-dealer { flex: none; gap: 8px; }
  .week-deal { flex: none; height: 36px; padding: 0 14px 0 11px; font-size: 13px; }
  .week-count b { font-size: 18px; }
  .week-of { font-size: 11px; }
  .week-dots { display: none; }
  .week-promote { flex: 1 1 auto; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 12px; }
  .week-promote > i:first-child { width: 24px; height: 24px; border-radius: 7px; font-size: 14px; }
  .week-promote b { font-size: 12px; }
  .week-promote small { display: none; }
  .week-deck { flex: none; width: auto; height: 118px; margin: 0; }
  .week-card { border-radius: 16px; }
  .week-zone.is-open .week-card.is-under { translate: 10px -8px; rotate: 2deg; scale: .96; }
  .week-deck::before { border-radius: 16px; translate: -10px 10px; rotate: -3deg; scale: .94; }
  .week-card { gap: 10px; padding: 5px; }
  .week-photo { width: 36%; border-radius: 11px; }
  .week-tag { top: 6px; left: 6px; padding: 3px 7px 3px 5px; font-size: 10px; }
  .week-premium { bottom: 6px; left: 6px; padding: 3px 7px 3px 5px; font-size: 9px; }
  .week-info { gap: 5px; padding: 1px 4px 1px 0; }
  .week-no, .week-date, .week-name { display: none; }
  .week-meta { font-size: 11px; }
  .week-facts { flex-wrap: nowrap; overflow: hidden; }
  .week-facts > span { flex: none; padding: 0 10px; }
  .week-facts b { font-size: 13px; }
  .week-facts small { font-size: 10px; }
  .week-foot { padding-top: 5px; }
  .week-price { font-size: 17px; }
  .week-cur { font-size: 13px; }
  .week-m2 { display: none; }
  .week-cta { width: 28px; height: 28px; font-size: 12px; }
  .week-close { top: 26px; right: 14px; height: 30px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .week-zone, .week-zone.is-peeling { transition: none; animation: none !important; }
  .week-band span, .week-offer::before, .week-count b, .week-card, .week-photo img { animation: none !important; }
  .week-card { transform: none !important; }
}