/* Valley Fest 2027 — xmas.css (christmas.html: the Christmas card shop, build 261)
   Loads after stylesheet.css and sponsor.css; scoped to body.sl.xm. The sponsor page's chassis with a festive palette:
   midnight navy, berry red, holly green, warm gold, cream card stock. */
body.sl.xm{
  --xm-red:#D7263D; --xm-red-2:#B3122E; --xm-green:#1FA463; --xm-holly:#0F6B3E; --xm-gold:#F6C453; --xm-cream:#FBF4E3;
  --sl-sunset:linear-gradient(90deg,#FF6B6B 0%,#F6C453 50%,#7CF29A 100%);
  background:#060B26;
}
.xm .sl-btn.primary{background:linear-gradient(90deg,#E8384F,#F6C453);color:#1A0A10;box-shadow:0 10px 30px rgba(232,56,79,.35)}
.xm .sl-btn.primary:hover{box-shadow:0 14px 36px rgba(232,56,79,.5)}
.xm .sl-eyebrow{color:var(--xm-gold)}
.xm .sl-logo span{color:var(--xm-gold)}
.xm .sl-chip i{background:var(--xm-red);box-shadow:0 0 0 4px rgba(215,38,61,.22)}

/* ---- snow + fairy lights ---- */
.xm-snow{position:fixed;inset:0;pointer-events:none;z-index:1}
.xm-lights{position:absolute;left:0;right:0;top:74px;height:46px;z-index:2;pointer-events:none;overflow:hidden}
.xm-lights svg{width:100%;height:100%;display:block}
.xm-lights .wire{fill:none;stroke:rgba(250,246,238,.28);stroke-width:1.4}
.xm-lights .bulb{animation:xm-twinkle 2.4s ease-in-out infinite;animation-delay:var(--d,0s);filter:drop-shadow(0 0 6px currentColor)}
@keyframes xm-twinkle{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- hero ---- */
.xm-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:150px 0 80px;overflow:hidden;
  background:radial-gradient(70% 60% at 80% 30%,rgba(215,38,61,.22),transparent 60%),radial-gradient(60% 60% at 10% 90%,rgba(31,164,99,.18),transparent 60%),linear-gradient(180deg,#0A1238 0%,#060B26 100%)}
.xm-hero .sl-wrap{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center;width:100%}
.xm-hero h1{font-weight:800;font-size:clamp(40px,4.9vw,68px);line-height:1;margin:16px 0 20px;text-shadow:none}
.xm-hero p.sub{font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:rgba(250,246,238,.88);max-width:560px;margin:0 0 28px}
.xm-hero .sl-hero-ctas{margin-bottom:26px}

/* ---- the card: a cover that opens on its left hinge to show the message and the ticket inside ---- */
.xm-cardwrap{--w:min(330px,38vw);display:flex;justify-content:center;perspective:1800px}
.xm-card{position:relative;width:calc(var(--w) * 2);height:var(--w);transform:translateX(calc(var(--w) / -2));transition:transform .9s cubic-bezier(.4,.1,.2,1);cursor:pointer;outline:none}
.xm-card.open{transform:none}
.xm-page{position:absolute;top:0;left:50%;width:var(--w);height:var(--w);border-radius:6px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.75)}
.xm-page img{width:100%;height:100%;object-fit:cover;display:block}
.xm-flap{position:absolute;top:0;left:50%;width:var(--w);height:var(--w);transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.4,.1,.2,1);z-index:2}
.xm-card.open .xm-flap{transform:rotateY(-180deg)}
.xm-face{position:absolute;inset:0;border-radius:6px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.75)}
.xm-face img{width:100%;height:100%;object-fit:cover;display:block}
.xm-face.back{transform:rotateY(180deg);background:var(--xm-cream);color:#3B2A1A;display:flex;flex-direction:column;justify-content:center;padding:9% 10%;text-align:center;
  background-image:radial-gradient(circle at 15% 12%,rgba(215,38,61,.08),transparent 30%),radial-gradient(circle at 85% 88%,rgba(31,164,99,.10),transparent 32%)}
.xm-face.back .to,.xm-face.back .from{font-weight:700;font-size:calc(var(--w) * .058);color:var(--xm-red-2)}
.xm-face.back .msg{font-size:calc(var(--w) * .062);line-height:1.35;margin:6% 0;font-style:italic;white-space:pre-line;overflow-wrap:anywhere;color:#3B2A1A}
.xm-face.back .inside{margin-top:7%;padding-top:6%;border-top:1px dashed rgba(59,42,26,.3);font-size:calc(var(--w) * .042);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--xm-holly)}
.xm-face.back .holly{width:22%;margin:0 auto 4%;display:block}
.xm-hint{display:block;text-align:center;margin-top:16px;font-size:14px;font-weight:700;color:var(--sl-muted)}
.xm-card:focus-visible .xm-flap .front{outline:3px solid var(--xm-gold);outline-offset:4px}

/* ---- sections ---- */
.xm-section{position:relative;z-index:2;padding:clamp(70px,8vw,110px) 0}
.xm-section.alt{background:#0A1238}
.xm-head{text-align:center;max-width:760px;margin:0 auto clamp(28px,4vw,48px)}
.xm-head .sl-lead{margin:0 auto}

/* builder: steps on the left, the live card on the right */
.xm-build{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:start}
.xm-steps{display:grid;gap:18px}
.xm-box{background:#0E1A4D;border:1px solid var(--sl-line);border-radius:24px;padding:clamp(20px,2.4vw,30px)}
.xm-box h3{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;margin:0 0 6px}
.xm-box h3 b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--xm-red),var(--xm-gold));color:#1A0A10;font-size:16px;flex:none}
.xm-box > p{color:var(--sl-muted);margin:0 0 16px;font-size:15.5px}
.xm-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--sl-line)}
.xm-row:first-of-type{border-top:0}
.xm-row b{display:block;font-size:17px}
.xm-row small{display:block;color:var(--sl-muted);font-size:14px;line-height:1.4}
.xm-row .price{color:var(--xm-gold);font-weight:800}
.xm-qty{display:inline-flex;align-items:center;gap:4px;background:#060B26;border:1px solid var(--sl-line);border-radius:999px;padding:4px}
.xm-qty button{width:38px;height:38px;border-radius:50%;border:0;background:rgba(250,246,238,.08);color:var(--sl-cream);font-size:20px;font-weight:800;cursor:pointer;line-height:1}
.xm-qty button:hover:not(:disabled){background:var(--xm-red)}
.xm-qty button:disabled{opacity:.3;cursor:default}
.xm-qty output{min-width:30px;text-align:center;font-weight:800;font-size:17px}

.xm-ways{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xm-way{position:relative;display:block;cursor:pointer}
.xm-way input{position:absolute;opacity:0;pointer-events:none}
.xm-way span{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px;border-radius:18px;border:1px solid var(--sl-line);background:#060B26;transition:border-color .15s,box-shadow .15s,transform .15s}
.xm-way svg{width:40px;height:40px}
.xm-way b{font-size:17px}.xm-way small{color:var(--sl-muted);font-size:14px;line-height:1.4}
.xm-way em{font-style:normal;font-weight:800;color:var(--xm-gold)}
.xm-way input:checked + span{border-color:var(--xm-gold);box-shadow:0 0 0 2px var(--xm-gold) inset,0 12px 30px -12px rgba(246,196,83,.4);transform:translateY(-2px)}
.xm-way input:focus-visible + span{outline:2px solid var(--xm-gold);outline-offset:3px}

.xm-field{display:grid;gap:6px;margin-bottom:12px}
.xm-field label{font-weight:700;font-size:14.5px}
.xm-field label small{font-weight:400;color:var(--sl-muted)}
.xm input[type=text],.xm input[type=email],.xm textarea{width:100%;background:#060B26;border:1px solid var(--sl-line);border-radius:14px;color:var(--sl-cream);font:inherit;font-size:16px;padding:12px 14px}
.xm input:focus,.xm textarea:focus{outline:none;border-color:var(--xm-gold);box-shadow:0 0 0 3px rgba(246,196,83,.2)}
.xm textarea{resize:vertical;min-height:96px}
.xm-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xm-ideas{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 4px}
.xm-ideas button{border:1px dashed rgba(246,196,83,.5);background:transparent;color:var(--xm-gold);font:inherit;font-size:13.5px;font-weight:700;padding:6px 12px;border-radius:999px;cursor:pointer}
.xm-ideas button:hover{background:rgba(246,196,83,.12)}
.xm-count{font-size:13px;color:var(--sl-muted);text-align:right}
.xm-preview{position:sticky;top:96px}
.xm-preview .xm-cardwrap{--w:min(250px,21vw)}
.xm-preview .xm-hint{margin-top:12px}

/* ---- extras: tiles you tap to add ---- */
.xm-extras{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.xm-ex{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:22px;background:#0E1A4D;border:1px solid var(--sl-line);cursor:pointer;text-align:left;color:inherit;font:inherit;transition:transform .18s,border-color .18s,box-shadow .18s}
.xm-ex:hover{transform:translateY(-3px);border-color:rgba(246,196,83,.45)}
.xm-ex .ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(215,38,61,.25),rgba(31,164,99,.25));margin-bottom:4px}
.xm-ex .ic svg{width:32px;height:32px;stroke:var(--xm-gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xm-ex b{font-size:17px;line-height:1.25}
.xm-ex small{color:var(--sl-muted);font-size:14px;line-height:1.4;flex:1}
.xm-ex .p{font-weight:800;color:var(--xm-gold);font-size:18px}
.xm-ex .tag{position:absolute;top:14px;right:14px;padding:4px 10px;border-radius:999px;background:var(--xm-green);color:#04140B;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:scale(.7);transition:opacity .2s,transform .2s}
.xm-ex .xm-qty{align-self:flex-start;display:none;margin-top:4px}
.xm-ex.on{border-color:var(--xm-gold);box-shadow:0 0 0 2px var(--xm-gold) inset,0 18px 40px -18px rgba(246,196,83,.45);background:linear-gradient(180deg,#152463,#0E1A4D)}
.xm-ex.on .tag{opacity:1;transform:none}
.xm-ex.on .xm-qty{display:inline-flex}
.xm-ex.pop{animation:xm-pop .35s ease}
@keyframes xm-pop{50%{transform:scale(1.04)}}

/* ---- checkout ---- */
.xm-checkout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start;max-width:1040px;margin:0 auto}
.xm-sum{background:var(--xm-cream);color:#2A1D12;border-radius:24px;padding:clamp(20px,2.4vw,30px);position:relative;overflow:hidden}
.xm-sum::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(90deg,var(--xm-red) 0 18px,var(--xm-cream) 18px 26px,var(--xm-green) 26px 44px,var(--xm-cream) 44px 52px)}
.xm-sum h3{font-size:22px;font-weight:800;margin:8px 0 12px;color:var(--xm-red-2)}
.xm-sum ul{list-style:none;margin:0;padding:0}
.xm-sum li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed rgba(42,29,18,.18);font-size:15.5px}
.xm-sum li span:last-child{font-weight:700;white-space:nowrap}
.xm-sum li.fee{color:#6B5A48;font-size:14px}
.xm-sum .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font-weight:800;font-size:24px;color:#2A1D12}
.xm-sum .empty{color:#6B5A48}
.xm-pay .xm-box{background:#0E1A4D}
.xm-pay .check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--sl-muted);margin:8px 0;line-height:1.45}
.xm-pay .check input{margin-top:3px;width:18px;height:18px;accent-color:var(--xm-red);flex:none}
.xm-pay .check a{color:var(--xm-gold)}
.xm-pay .sl-btn{width:100%;margin-top:12px}
.xm-err{color:#FF9AA5;font-weight:700;min-height:1.4em;margin:10px 0 0}
.xm-addr[hidden]{display:none}
.xm-small{font-size:13.5px;color:var(--sl-muted);margin:12px 0 0;line-height:1.5}

/* faq */
.xm-faq{max-width:820px;margin:0 auto;display:grid;gap:10px}
.xm-faq details{background:#0E1A4D;border:1px solid var(--sl-line);border-radius:18px;padding:16px 20px}
.xm-faq summary{cursor:pointer;font-weight:800;font-size:17px}
.xm-faq p{color:var(--sl-muted);margin:10px 0 0;line-height:1.6}

/* mobile bar */
.xm-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;background:rgba(6,11,38,.94);border:1px solid var(--sl-line);backdrop-filter:blur(12px);box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.xm-bar b{font-size:18px}.xm-bar small{display:block;color:var(--sl-muted);font-size:12px}
.xm-bar .sl-btn{min-height:44px;padding:0 20px}

@media (max-width:980px){
  .xm-hero .sl-wrap,.xm-build,.xm-checkout{grid-template-columns:1fr}
  .xm-hero{padding-top:120px;align-items:flex-start}
  .xm-cardwrap{--w:min(300px,44vw)}
  .xm-preview{position:relative;top:0;order:-1}
  .xm-preview .xm-cardwrap{--w:min(250px,42vw)}
  .sl-nav ul{display:none}
  .xm-bar{display:flex}
  .sl-foot{padding-bottom:120px}
}
@media (max-width:560px){
  .sl-wrap{padding:0 16px}
  .xm-ways,.xm-two{grid-template-columns:1fr}
  .xm-row{grid-template-columns:1fr}
  .xm-row .xm-qty{justify-self:start}
  .xm-cardwrap{--w:44vw}
  .xm-preview .xm-cardwrap{--w:42vw}
  .xm-face.back{padding:7% 8%}
  .xm-extras{grid-template-columns:1fr 1fr;gap:10px}
  .xm-ex{padding:14px;border-radius:18px;gap:6px}
  .xm-ex .ic{width:44px;height:44px;border-radius:14px}.xm-ex .ic svg{width:24px;height:24px}
  .xm-ex b{font-size:15px}.xm-ex small{font-size:12.5px}.xm-ex .p{font-size:16px}
  .xm-ex .tag{top:10px;right:10px;font-size:10.5px;padding:3px 8px}
  .xm-ex .xm-qty button{width:32px;height:32px;font-size:18px}
}
@media (prefers-reduced-motion:reduce){.xm-card,.xm-flap{transition:none}.xm-lights .bulb{animation:none}.xm-snow{display:none}}
.xm .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}