/* ===========================================================
   Shiny Nails Croydon – The Christmas Collection (/christmas)
   Holiday campaign palette: emerald, bordeaux and onyx velvet with champagne gold.
   Loaded only on christmas.php (page_header 'head' option).
   =========================================================== */
.xmas-page{
  --xm-emerald:#0c3a2d;--xm-emerald-d:#05170f;--xm-bordeaux:#4b1022;--xm-onyx:#0a0807;
  --xm-ivory:#f7efdf;--xm-champ:#ecd49a;--xm-champ-soft:rgba(236,212,154,.72);--xm-hair:rgba(236,212,154,.28);
  --xm-card:#fffdf8;--xm-card-line:var(--line);
  --xm-v-emerald:radial-gradient(120% 90% at 50% 22%,#1f5c47 0%,#0b2d22 52%,#04120c 100%);
  --xm-v-onyx:radial-gradient(120% 90% at 50% 22%,#3a2d1d 0%,#16110b 52%,#060504 100%);
  --xm-v-burgundy:radial-gradient(120% 90% at 50% 22%,#651d31 0%,#2e0b16 52%,#110308 100%);
}
html[data-theme=dark] .xmas-page{--xm-card:#140f0a;--xm-card-line:#2f2416}
.xmas-page .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- shared bits ---------- */
.xm-eyebrow{display:inline-flex;align-items:center;gap:.7em;font:500 .74rem/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-2);margin:0 0 .9rem}
.xm-eyebrow .ico-svg{width:1.05em;height:1.05em}
.xm-head{text-align:center;max-width:680px;margin:0 auto 56px}
.xm-head .xm-eyebrow::before,.xm-head .xm-eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.xm-head h2{font-size:clamp(2.4rem,5vw,3.8rem);margin:0 0 .3em}
.xm-head h2 em,.xm-final h2 em{font-style:italic;font-weight:500;background:var(--foil);background-size:260% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:xmFoil 7s linear infinite;padding-right:.06em}
.xmas-page .xm-head h2 em{background:linear-gradient(100deg,#7d5a22 0%,#b8924a 22%,#d9b46c 42%,#e9cf8f 52%,#c9a45c 66%,#8f6a2c 100%);background-size:260% auto;-webkit-background-clip:text;background-clip:text}
html[data-theme=dark] .xmas-page .xm-head h2 em{background-image:var(--foil)}
.xm-sub{color:var(--muted);margin:0 auto;max-width:56ch}
.xm-link{display:inline-flex;align-items:center;gap:.5em;font-weight:500;letter-spacing:.04em;text-decoration:none;color:inherit;border-bottom:1px solid currentColor;padding-bottom:2px;align-self:flex-start}
.xm-link .ico-svg{transition:transform .3s var(--ease)}
a:hover > .xm-link .ico-svg,.xm-link:hover .ico-svg{transform:translateX(4px)}
.xm-star{display:block;margin:0 auto 18px;width:34px;height:34px}
/* page CSS loads before style.css, so overrides of shared .btn rules are scoped to the page body */
.xmas-page .xm-btn-line{background:rgba(10,8,7,.18);color:var(--xm-ivory);border:1px solid var(--xm-champ-soft)}
.xmas-page .xm-btn-line:hover{background:rgba(236,212,154,.12);border-color:var(--xm-champ);color:#fff}
@keyframes xmFoil{to{background-position:260% center}}

/* ---------- hero: always a dark campaign image ---------- */
.xm-hero{position:relative;isolation:isolate;overflow:hidden;color:var(--xm-ivory);padding:56px 0 88px;
  background:
    radial-gradient(900px 520px at 88% 8%,rgba(122,24,52,.55),transparent 62%),
    radial-gradient(700px 520px at 0% 100%,rgba(17,84,63,.55),transparent 60%),
    radial-gradient(600px 300px at 60% 48%,rgba(201,164,92,.10),transparent 70%),
    linear-gradient(165deg,#07130f 0%,#0a0807 48%,#140509 100%)}
.xm-hero::before,.xm-hero::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--foil);opacity:.65;z-index:1}
.xm-hero::before{top:0}.xm-hero::after{bottom:0}
.xm-snow{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.xm-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}
.xm-crumbs{display:flex;gap:.6em;font-size:.8rem;letter-spacing:.06em;color:rgba(247,239,223,.55);margin-bottom:34px}
.xm-crumbs a{color:rgba(247,239,223,.8);text-decoration:none}.xm-crumbs a:hover{color:#fff;text-decoration:underline}
.xm-kicker{display:flex;align-items:center;gap:14px;font:500 .72rem var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--xm-champ);margin:0 0 22px}
.xm-kicker-rule{width:44px;height:1px;background:var(--foil)}
.xm-title{margin:0 0 26px;color:var(--xm-ivory);font-weight:500;line-height:.9;letter-spacing:-.015em;font-size:clamp(3.5rem,8.4vw,7.4rem)}
.xm-title > span,.xm-title > em{display:block}
.xm-t1{font:500 clamp(.8rem,1.3vw,1rem)/1 var(--sans);letter-spacing:.5em;text-transform:uppercase;color:var(--xm-champ);margin:0 0 .5rem .2em}
.xm-t2{font-style:italic;font-weight:500;background:linear-gradient(100deg,#9f7a36 0%,#e8cd8c 20%,#fff6dc 38%,#d9b46c 55%,#f4e2b0 72%,#a17a35 100%);background-size:240% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:xmFoil 9s linear infinite;padding:0 .08em .06em 0;margin-left:-.04em}
.xm-t3{font-size:.52em;font-weight:500;color:var(--xm-ivory);margin-top:.12em;letter-spacing:.005em}
.xm-year{font-style:italic;color:var(--xm-champ)}
.xm-lead{font-size:1.12rem;font-weight:300;line-height:1.7;color:rgba(247,239,223,.82);max-width:50ch;margin:0 0 26px}
.xm-limited{display:inline-flex;align-items:center;gap:12px;font:500 .8rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--xm-champ);margin:0 0 26px;
  padding:9px 18px 9px 14px;border:1px solid var(--xm-hair);border-radius:999px;background:rgba(10,8,7,.35);backdrop-filter:blur(4px)}
.xm-pulse{width:8px;height:8px;border-radius:50%;background:#e3c27a;box-shadow:0 0 0 0 rgba(227,194,122,.6);animation:xmPulse 2.4s var(--ease) infinite;flex:none}
@keyframes xmPulse{0%{box-shadow:0 0 0 0 rgba(227,194,122,.55)}70%{box-shadow:0 0 0 12px rgba(227,194,122,0)}100%{box-shadow:0 0 0 0 rgba(227,194,122,0)}}
.xm-count{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:0 0 34px;min-height:96px}
.xm-unit{min-width:92px;padding:14px 10px 10px;text-align:center;border:1px solid var(--xm-hair);border-radius:14px;
  background:linear-gradient(170deg,rgba(255,240,205,.07),rgba(255,240,205,.015));box-shadow:inset 0 1px 0 rgba(255,240,205,.08)}
.xm-unit b{display:block;font:500 2.7rem/1 var(--serif);color:#fff6dc;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.xm-unit span{display:block;margin-top:6px;font:500 .64rem var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--xm-champ-soft)}
.xm-count-note{flex-basis:100%;margin:2px 0 0;font:italic 500 1.05rem var(--serif);color:rgba(247,239,223,.66)}
.xm-merry{font:italic 500 1.6rem var(--serif);color:var(--xm-champ);margin:0}
.xm-ctas{display:flex;flex-wrap:wrap;gap:14px}
.xm-ctas.center{justify-content:center}

/* hero art: the whole collection on one hand, framed in the brand's arch */
.xm-hero-art{position:relative;margin:0;justify-self:center;width:min(100%,440px)}
.xm-arch{position:relative;aspect-ratio:300/372;border-radius:999px 999px 26px 26px;overflow:hidden;background:var(--xm-v-onyx);
  border:1px solid rgba(236,212,154,.5);box-shadow:0 0 0 7px rgba(10,8,7,.55),0 0 0 8px rgba(236,212,154,.22),0 40px 90px rgba(0,0,0,.6)}
.xm-arch canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.xm-arch-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 60px rgba(0,0,0,.55);background:linear-gradient(180deg,rgba(255,240,205,.07),transparent 30%)}
.xm-hero-cap{display:flex;justify-content:space-between;gap:12px;margin-top:22px;font:500 .68rem var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--xm-champ-soft)}
.xm-ornament{position:absolute;top:-58px;left:-34px;width:96px;height:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.5));transform-origin:50% 0;animation:xmSwing 7s ease-in-out infinite}
@keyframes xmSwing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* ---------- intro statement ---------- */
.xm-intro{padding:72px 0 8px;background:var(--cream)}
.xm-intro-in{max-width:760px;text-align:center}
.xm-intro p{font:italic 500 clamp(1.3rem,2.4vw,1.75rem)/1.45 var(--serif);color:var(--plum);margin:0}
.xm-intro strong{font-style:normal;font-weight:600;color:var(--gold-2)}
html[data-theme=dark] .xm-intro strong{color:var(--xm-champ)}

/* ---------- the collection ---------- */
.xm-collection{padding:72px 0 104px;background:var(--cream)}
.xm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.xm-card > article{height:100%;display:flex;flex-direction:column;background:var(--xm-card);border:1px solid var(--xm-card-line);border-radius:24px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,var(--shadow-sm);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.xm-card > article:hover,.xm-card > article:focus-within{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(201,164,92,.55)}
.xm-stage{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--xm-v-onyx);touch-action:pan-y}
.xm-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s var(--ease)}
.xm-stage.is-drawn canvas{opacity:1}
.xm-v-emerald{background:var(--xm-v-emerald)}.xm-v-onyx{background:var(--xm-v-onyx)}.xm-v-burgundy{background:var(--xm-v-burgundy)}
.xm-stage::after{content:"";position:absolute;inset:10px;border:1px solid rgba(236,212,154,.22);border-radius:16px;pointer-events:none}
.xm-no{position:absolute;z-index:1;top:22px;left:24px;font:500 .66rem var(--sans);letter-spacing:.32em;text-transform:uppercase;color:rgba(247,239,223,.78)}
.xm-body{display:flex;flex-direction:column;flex:1;padding:26px 26px 28px}
.xm-body h3{font-size:clamp(1.65rem,2.2vw,1.95rem);font-weight:600;margin:0 0 .35em;color:var(--plum)}
.xm-desc{color:var(--muted);font-size:.98rem;line-height:1.6;margin:0 0 18px}
.xm-spec{margin:0 0 20px;padding:14px 0 0;border-top:1px solid var(--xm-card-line);display:grid;gap:8px;font-size:.86rem}
.xm-spec div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px}
.xm-spec dt{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);padding-top:.25em}
html[data-theme=dark] .xm-spec dt{color:var(--plum-3)}
.xm-spec dd{margin:0;color:var(--ink)}
.xm-plus{color:var(--muted)}
.xm-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:auto 0 18px}
.xm-from{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.xm-price strong{font:600 2.3rem/1 var(--serif);color:var(--plum);font-feature-settings:"lnum" 1}
.xm-price .dur{margin-left:auto;display:inline-flex;align-items:center;gap:.35em;font-size:.82rem;color:var(--muted)}
.xm-actions{display:flex;flex-wrap:wrap;gap:10px}
.xm-actions .btn{flex:1 1 auto;padding-inline:1.05em}
.xm-fine{text-align:center;color:var(--muted);font-size:.86rem;max-width:70ch;margin:40px auto 0}

/* ---------- gift + festive hours ---------- */
.xm-extras{padding:0 0 104px;background:var(--cream)}
.xm-extras-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:30px}
.xm-gift,.xm-hours{position:relative;display:flex;flex-direction:column;border-radius:24px;padding:40px 40px 38px;overflow:hidden}
.xm-gift{isolation:isolate;color:var(--xm-ivory);text-decoration:none;min-height:300px;justify-content:flex-end;
  background:radial-gradient(500px 300px at 85% 0%,rgba(201,164,92,.25),transparent 60%),var(--xm-v-burgundy);border:1px solid rgba(236,212,154,.35);
  box-shadow:var(--shadow);transition:transform .45s var(--ease),box-shadow .45s}
.xm-gift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.xm-gift .xm-eyebrow{color:var(--xm-champ)}
.xm-gift::before,.xm-gift::after{content:"";position:absolute;z-index:-1;background:linear-gradient(90deg,#7d5a22,#e9cf8f 30%,#fff3cf 46%,#c9a45c 60%,#8f6a2c);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.xm-gift::before{left:0;right:0;top:64px;height:14px}
.xm-gift::after{top:0;bottom:0;right:84px;width:14px;background:linear-gradient(180deg,#7d5a22,#e9cf8f 30%,#fff3cf 46%,#c9a45c 60%,#8f6a2c)}
.xm-gift-art{position:absolute;z-index:-1;right:11px;top:22px;width:160px;height:auto;filter:drop-shadow(0 14px 20px rgba(0,0,0,.5));transition:transform .6s var(--ease)}
.xm-gift:hover .xm-gift-art{transform:rotate(-4deg) scale(1.04)}
.xm-gift-t{font:500 clamp(1.9rem,3vw,2.5rem)/1.05 var(--serif);margin-bottom:12px;max-width:16ch}
.xm-gift-p{color:rgba(247,239,223,.78);max-width:42ch;margin-bottom:22px}
.xm-gift .xm-link{color:var(--xm-champ)}
.xm-hours{background:var(--xm-card);border:1px solid var(--xm-card-line);box-shadow:var(--shadow-sm)}
.xm-hours-t{font:600 1.5rem/1.2 var(--serif);color:var(--plum);margin-bottom:10px}
.xm-hours p{color:var(--muted);margin:0 0 16px;font-size:.95rem}
.xm-hours-list{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px;font-size:.84rem}
.xm-hours-list li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--line-2);padding:3px 0}
.xm-hours-list li span:first-child{color:var(--muted)}
.xm-hours .xm-link{color:var(--gold-2);margin-top:auto}
html[data-theme=dark] .xm-hours .xm-link{color:var(--xm-champ)}

/* ---------- FAQ ---------- */
.xm-faq{padding:96px 0;background:var(--ivory);border-top:1px solid var(--line)}
.xm-faq .xm-head{margin-bottom:40px}
html[data-theme=dark] .xm-faq{background:#0e0a07}

/* ---------- final call to action ---------- */
.xm-final{position:relative;padding:104px 0;text-align:center;color:var(--xm-ivory);overflow:hidden;
  background:radial-gradient(700px 360px at 50% 0%,rgba(201,164,92,.18),transparent 60%),var(--xm-v-emerald)}
.xm-final::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--foil);opacity:.6}
.xm-final-in{max-width:720px}
.xm-final h2{color:var(--xm-ivory);font-weight:500;font-size:clamp(2.3rem,5vw,3.6rem)}
.xm-final p{color:rgba(247,239,223,.78);font-size:1.08rem;max-width:52ch;margin:0 auto 32px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .xm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xm-hero-grid{gap:36px}
}
@media (max-width:860px){
  .xm-hero{padding:34px 0 64px}
  .xm-hero-grid{grid-template-columns:1fr}
  .xm-hero-art{width:min(80%,340px);margin-top:44px}
  .xm-crumbs{margin-bottom:22px}
  .xm-extras-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .xm-grid{grid-template-columns:1fr;gap:24px}
  .xm-head{margin-bottom:40px}
  .xm-intro{padding:56px 0 0}
  .xm-collection{padding:56px 0 80px}
  .xm-extras{padding-bottom:80px}
  .xm-gift,.xm-hours{padding:30px 24px}
  .xm-gift{min-height:320px}
  .xm-faq,.xm-final{padding:76px 0}
  .xm-ornament{width:72px;top:-40px;left:-22px}
  .xm-count{gap:8px}
  .xm-unit{min-width:0;flex:1 1 0;padding:12px 6px 9px}
  .xm-unit b{font-size:2.25rem}
  .xm-kicker{font-size:.62rem;letter-spacing:.2em;gap:10px;white-space:nowrap}
  .xm-kicker-rule{width:26px}
  .xm-limited{letter-spacing:.07em;font-size:.68rem;padding:8px 14px 8px 12px;gap:10px}
  .xm-hero-cap{font-size:.58rem;letter-spacing:.18em;white-space:nowrap}
  .xm-gift{padding-top:118px}
  .xm-gift::after{display:none}
  .xm-gift-art{right:16px;top:33px;width:120px}
  .xm-ctas .btn{flex:1 1 100%}
  .xm-body{padding:22px 20px 24px}
}
@media (max-width:380px){
  .xm-title{font-size:3.1rem}
  .xm-actions .btn{flex-basis:100%}
  .xm-hours-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .xm-t2,.xm-head h2 em,.xm-final h2 em,.xm-pulse,.xm-ornament{animation:none}
  .xm-card > article,.xm-gift{transition:none}
  .xm-card > article:hover,.xm-gift:hover{transform:none}
}