/* ======================================================
   CHRISTMAS (temporary) — homepage only.
   To remove after Christmas: see the notes Claude gave you,
   or delete the <link> to this file + the Christmas blocks in index.html.
   ====================================================== */
:root{ --xmas-wine:#6e1f2b; }

/* ---------- announcement bar (reuses .promo-banner base styles) ---------- */
.promo-banner a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.promo-banner-sep{ opacity:.45; margin:0 8px; }

/* ---------- red christmas hero ---------- */
.xmas-hero{
  position:relative; overflow:hidden; container-type:size;
  height:clamp(380px,41.7vw,680px);
  background:#7d1d2b; color:#fbf3e4; text-align:center;
}
.xmas-stage{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background-repeat:no-repeat; background-size:100% 100%;
}
.xmas-stage-desktop{
  background-image:url("../assets/christmas/banner-desktop.webp");
  width:max(100cqw,240cqh); height:max(100cqh,calc(100cqw / 2.4));
}
.xmas-stage-mobile{
  display:none; background-image:url("../assets/christmas/banner-mobile.webp");
  width:max(100cqw,80cqh); height:max(100cqh,125cqw);
}
.xmas-hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 22%,rgba(60,8,16,.55) 0,rgba(60,8,16,.28) 38%,transparent 68%);
}

/* clickable bags inside the picture */
.xmas-hot{
  position:absolute; z-index:2; display:block; border-radius:14px;
  outline:2px solid transparent; outline-offset:2px;
  transition:outline-color .2s ease, background .2s ease;
}
.xmas-hot:hover,.xmas-hot:focus-visible{ outline-color:rgba(243,219,168,.9); background:rgba(255,255,255,.06); }
.xmas-hot span{
  position:absolute; left:50%; bottom:100%; transform:translate(-50%,-6px);
  background:rgba(43,36,32,.92); color:#fbf3e4; font-size:12px; letter-spacing:.04em; white-space:nowrap;
  padding:5px 10px; border-radius:4px; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.xmas-hot:hover span,.xmas-hot:focus-visible span{ opacity:1; }

/* text on top */
.xmas-panel{
  position:absolute; z-index:4; left:50%; top:0; transform:translateX(-50%);
  width:100%; max-width:560px; padding:34px 22px 0; pointer-events:none;
  text-shadow:0 2px 14px rgba(40,5,12,.55);
}
.xmas-panel .btn-primary{ pointer-events:auto; text-shadow:none; }
.xmas-rule{ width:44px; height:1px; background:#e6c689; margin:0 auto 12px; }
.xmas-eyebrow{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:#f0d79f; margin-bottom:10px; }
.xmas-panel h1{ font-family:var(--font-serif); font-weight:400; font-size:38px; line-height:1.15; margin:0 0 8px; color:#fbf3e4; }
.xmas-panel p.xmas-sub{ margin:0 auto 16px; color:#f7e8dc; line-height:1.55; max-width:430px; }
.xmas-panel .btn-primary{ background:rgba(80,10,20,.35); border:1px solid #f1e3c4; color:#fbf3e4; }
.xmas-panel .btn-primary:hover{ background:#fbf3e4; color:var(--xmas-wine); }

/* falling snow (flakes are created by js/christmas.js) */
.xmas-snow{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.xmas-snow i{
  position:absolute; top:-16px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(255,255,255,.55) 45%,rgba(255,255,255,0) 72%);
  animation:xmas-fall linear infinite, xmas-sway ease-in-out infinite alternate;
  will-change:transform,translate;
}
@keyframes xmas-fall{ from{ translate:0 0; } to{ translate:0 var(--fall,600px); } }
@keyframes xmas-sway{ from{ transform:translateX(-14px); } to{ transform:translateX(14px); } }

/* trust strip */
.xmas-strip{
  display:flex; justify-content:center; gap:10px 28px; flex-wrap:wrap; padding:16px 24px;
  border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-soft); background:var(--paper);
}
.xmas-strip span:before{ content:"✦ "; color:var(--gold); }

/* gift guide */
.xmas-guide{ max-width:1180px; margin:0 auto; padding:64px 28px 24px; text-align:center; }
.xmas-guide .eyebrow{ color:var(--gold-deep); }
.xmas-guide h2{ font-family:var(--font-serif); font-weight:400; font-size:clamp(26px,3.4vw,34px); margin:0 0 8px; }
.xmas-guide .xmas-lead{ color:var(--ink-soft); max-width:520px; margin:0 auto 22px; line-height:1.55; }
.xmas-pills{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.xmas-pill{
  border:1px solid rgba(43,36,32,.25); background:transparent; color:var(--ink); padding:10px 20px;
  font:inherit; font-size:13px; letter-spacing:.04em; cursor:pointer; border-radius:999px; transition:all .2s ease;
}
.xmas-pill:hover{ border-color:var(--gold-deep); }
.xmas-pill.on{ background:var(--xmas-wine); border-color:var(--xmas-wine); color:#fff; }
.xmas-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:left; }
.xmas-grid .product-card .product-photo{ aspect-ratio:3/4; }
.xmas-more{ margin-top:30px; }
.xmas-empty{ color:var(--ink-soft); padding:20px 0; }

/* last order dates */
.xmas-dates{ max-width:760px; margin:0 auto; padding:48px 28px 72px; text-align:center; scroll-margin-top:90px; }
.xmas-dates h2{ font-family:var(--font-serif); font-weight:400; font-size:clamp(24px,3vw,30px); margin:0 0 8px; }
.xmas-dates .xmas-lead{ color:var(--ink-soft); margin:0 auto 22px; line-height:1.55; max-width:560px; }
.xmas-dates-box{ background:var(--paper-alt); border:1px solid var(--line); border-radius:6px; padding:22px; display:grid; gap:14px; }
.xmas-dates-uk{ font-size:15px; }
.xmas-dates select{
  font:inherit; font-size:15px; padding:12px 14px; border:1px solid rgba(43,36,32,.3); background:#fff; color:var(--ink);
  border-radius:4px; width:100%; max-width:340px; margin:0 auto;
}
.xmas-dates-result{ font-family:var(--font-serif); font-size:20px; min-height:30px; color:var(--xmas-wine); }
.xmas-dates-fine{ font-size:12.5px; color:var(--ink-soft); }

@media (max-width:900px){ .xmas-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){
  .xmas-hero{ height:min(125vw,620px); }
  .xmas-stage-desktop{ display:none; }
  .xmas-stage-mobile{ display:block; }
  .xmas-panel{ padding-top:22px; }
  .xmas-panel h1{ font-size:27px; }
  .xmas-panel p.xmas-sub{ font-size:13.5px; margin-bottom:14px; }
  .xmas-panel .btn-primary{ padding:11px 24px; font-size:11px; }
  .xmas-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .xmas-guide{ padding-top:48px; }
  .xmas-hot span{ display:none; }
}

/* "popular" flame next to the £61–£70 range */
.hot-flame{ width:1em; height:1em; vertical-align:-.12em; color:#e0662a; }
.hot-tag{ display:inline-flex; align-items:center; gap:3px; margin-left:6px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#c2511c; }
.xmas-pill.on .hot-tag{ color:#ffd9b8; }
.xmas-pill.on .hot-flame{ color:#ffb36b; }

/* ---------- Christmas on/off (switches itself off from 28 Dec 2026) ---------- */
html:not(.xmas-over) .xmas-original{ display:none; }
html.xmas-over .xmas-only{ display:none !important; }

/* "made to order" card inside the banner */
.xmas-made-link{
  position:absolute; z-index:5; left:16px; right:16px; margin:0 auto; width:max-content; bottom:12px;
  display:flex; align-items:center; gap:12px; max-width:calc(100% - 32px);
  padding:8px 18px 8px 10px; border:1px solid rgba(243,219,168,.85); border-radius:999px;
  background:rgba(43,16,20,.66); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  color:#fbf3e4; text-decoration:none; text-align:left;
  transition:background .2s ease, transform .2s ease;
}
.xmas-made-link:hover{ background:rgba(43,16,20,.88); transform:translateY(-2px); }
.xmas-made-thumbs{ display:flex; flex:none; }
.xmas-made-thumbs img{
  width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid #f3dba8; background:#f1e9dc;
}
.xmas-made-thumbs img + img{ margin-left:-12px; }
.xmas-made-text{ display:flex; flex-direction:column; line-height:1.25; }
.xmas-made-text strong{ font-family:var(--font-serif); font-weight:400; font-size:16px; letter-spacing:.02em; }
.xmas-made-text small{ font-size:11.5px; letter-spacing:.05em; color:#f0d79f; }
.xmas-made-link b{ color:#f0d79f; font-weight:400; font-size:18px; }
.xmas-m-short{ display:none; }
@media (max-width:700px){
  .xmas-made-link{ gap:9px; padding:7px 14px 7px 8px; }
  .xmas-made-thumbs img{ width:34px; height:34px; }
  .xmas-made-text strong{ font-size:14.5px; }
  .xmas-made-text small{ font-size:10.5px; letter-spacing:.03em; }
  .xmas-m-long{ display:none; }
  .xmas-m-short{ display:inline; }
}

/* red Clearance pill in the gift guide */
.xmas-pill-clear{ color:#b3202a; border-color:rgba(179,32,42,.6); background:#fbeeee; font-weight:600; }
.xmas-pill-clear:hover{ border-color:#b3202a; }
.xmas-pill-clear.on{ background:#b3202a; border-color:#b3202a; color:#fff; }
.xmas-pill[hidden]{ display:none; }
a.xmas-pill{ text-decoration:none; display:inline-flex; align-items:center; }

/* performance: lighter snow (no filters), paused when off screen */
.xmas-snow i{ will-change:auto; }
.xmas-snow.paused i{ animation-play-state:paused; }

/* "Made to order" feature card inside the gift guide */
.xmas-mto-card{
  display:flex; align-items:center; gap:18px; margin:26px auto 0; max-width:640px; padding:12px 22px 12px 12px;
  background:var(--paper-alt); border:1px solid var(--line); border-radius:6px; text-decoration:none; color:var(--ink); text-align:left;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.xmas-mto-card:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:0 12px 26px rgba(43,36,32,.12); }
.xmas-mto-card img{ width:96px; height:96px; flex:none; object-fit:cover; border-radius:4px; }
.xmas-mto-text{ display:flex; flex-direction:column; gap:3px; line-height:1.4; font-size:13.5px; color:var(--ink-soft); }
.xmas-mto-eyebrow{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--gold-deep); }
.xmas-mto-text strong{ font-family:var(--font-serif); font-weight:400; font-size:20px; color:var(--ink); }
.xmas-mto-card b{ margin-left:auto; color:var(--gold-deep); font-weight:400; font-size:22px; }
@media (max-width:700px){
  .xmas-mto-card{ gap:12px; padding:10px 14px 10px 10px; }
  .xmas-mto-card img{ width:76px; height:76px; }
  .xmas-mto-text{ font-size:12.5px; }
  .xmas-mto-text strong{ font-size:17px; }
}

/* "Made to order" tile inside the "All gifts" shortlist */
.xmas-mto-tile .product-photo{ position:relative; }
.xmas-mto-tile .product-photo::after{
  content:"Made to order"; position:absolute; top:10px; left:10px; z-index:2;
  background:rgba(43,36,32,.88); color:#faf7f2; border:1px solid rgba(243,219,168,.8); border-radius:999px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:5px 11px;
}