html[data-collecto-skin] body{background:radial-gradient(ellipse at top,var(--season-panel),var(--season-bg) 70%);color:#f8f4ee}
html[data-collecto-skin] :is(.feature,.directory-world,.catalog-card,.product,.panel,.world-card,dialog,.site-header,.profile-photo-panel,.section > .card){background-color:var(--season-panel);border-color:var(--season-edge);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--season-edge),transparent 55%)}
html[data-collecto-skin] :is(.btn,.icon-btn,.collecto-kids-picker-toggle){background:var(--season-panel);color:var(--season-edge);border-color:var(--season-edge)}
html[data-collecto-skin] :is(.btn.primary,.btn.gold){background:var(--season-edge);color:#111}
html[data-collecto-skin] :is(.eyebrow,.hero-tag){color:var(--season-edge)}
html[data-collecto-skin] :is(header,main,footer){border-color:var(--season-edge)}
html[data-collecto-skin] .hero{border:1px solid var(--season-edge);border-radius:20px;box-shadow:inset 0 0 24px color-mix(in srgb,var(--season-edge),transparent 84%)}
.season-shell{width:min(100% - 24px,960px);margin:1rem auto 5rem;color:#f7e9c9}
.season-shell [hidden],.season-intro [hidden]{display:none!important}
.season-shell :is(button,input,select,textarea){font:inherit}
.season-shell :is(button,.btn){min-height:44px}
.season-shell fieldset{border:1px solid #9d8254;border-radius:12px;padding:12px;margin:12px 0}
.season-shell label:not(.season-check){display:grid;gap:5px;margin:10px 0}
.season-shell :is(input:not([type=checkbox]),select,textarea){max-width:100%;background:#102644;color:#fff7df;border:1px solid #9d8254;border-radius:6px;padding:8px}
.season-shell .season-controls{display:flex;gap:8px;flex-wrap:wrap}
.season-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:10px}
.season-skin{display:grid;gap:5px;background:#142843;border:1px solid #9d8254;border-radius:9px;color:#f7e9c9;padding:8px;cursor:pointer}
.season-skin img{width:100%;height:125px;object-fit:contain}
.season-skin[aria-pressed=true]{outline:2px solid #f2d581}
.season-art{display:block;width:min(100%,680px);max-height:58dvh;object-fit:contain;margin:1rem auto;border-radius:12px}
.season-action-image{display:block;width:min(100%,270px);height:auto;border-radius:10px}
.season-doors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;width:min(100%,760px);margin:1rem auto;padding:clamp(5px,2vw,15px);border:2px solid #b8995c;border-radius:14px;background:#0b2541}
.season-door{min-height:52px;border:1px solid #b8995c;border-radius:7px;background:#172f4e;color:#ffe7af}
.season-door:disabled{opacity:.65}
.season-door[data-open=true]{background:#225b4b}
.season-calendar-actions{margin:1rem 0;display:flex;gap:8px;flex-wrap:wrap}
.season-card-list img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.season-card-list a{display:grid;gap:5px;text-align:center}
.season-intro{position:fixed;inset:0;max-width:none;width:100%;max-height:none;height:100dvh;margin:0;padding:12px;background:#050c1a;color:#ffe6a8;border:0;text-align:center;overflow:auto}
.season-intro .brandmark{width:50px;height:50px;object-fit:contain}
.season-intro-stage{position:relative;width:min(90%,490px);margin:auto}
.season-intro-stage img{display:block;max-height:67dvh;width:100%;object-fit:contain;margin:auto}
.season-intro-stage.play img{animation:season-reveal 7s both}
.season-lights{position:absolute;inset:15% 23% 12%;pointer-events:none}
.season-lights i{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffe190;box-shadow:0 0 8px 2px #ffd363;opacity:0}
.season-intro-stage.play i{animation:season-light .5s var(--delay) both}
.season-intro-close{position:sticky;bottom:8px;z-index:1}
@keyframes season-light{to{opacity:1}}
@keyframes season-reveal{0%,14%{opacity:0}to{opacity:1}}
.season-opened{animation:season-light .4s both}
.season-wreath{display:flex;justify-content:center;gap:12px;padding:20px;border:5px double #67794d;border-radius:40%;background:#1d3428}
.season-wreath span{font-size:2rem;filter:grayscale(1);opacity:.5}
.season-wreath .lit{filter:none;opacity:1}
@media(max-width:460px){.season-doors{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.season-intro-stage.play img,.season-intro-stage.play i,.season-opened{animation:none}}
html[data-season-reduce] .season-intro-stage.play img,html[data-season-reduce] .season-intro-stage.play i,html[data-season-reduce] .season-opened{animation:none}
.season-guide{max-width:620px;margin:1rem auto;padding:12px;border:1px solid #9d8254;border-radius:12px;background:#102644;color:#ffebbc}
.season-guide a{color:#ffdb8d}

.season-site-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:12px}.season-site-links[hidden]{display:none}

/* Extended cinematic tree lighting: staged glow, not a three-second flash. */
.season-intro-stage.play img{animation:season-reveal 15s both}
.season-intro-stage.play i{animation:season-light .8s var(--delay) both}
.season-intro-stage{min-height:40vh;display:grid;place-items:center}
@keyframes season-reveal{0%,8%{opacity:0;filter:brightness(0)}20%{opacity:.3;filter:brightness(.12)}45%{opacity:.65;filter:brightness(.3)}75%{opacity:1;filter:brightness(.65)}100%{opacity:1;filter:brightness(1)}}

/* Advent: festive door cards and approved visual header. */
.season-advent-presentation{padding:clamp(14px,4vw,36px);border:2px solid #c99d52;border-radius:24px;background:radial-gradient(ellipse at 50% 0%,#224d66 0%,#0a1d39 52%,#071124 100%);box-shadow:0 14px 38px #0006,inset 0 0 0 4px #d7b36b33;text-align:center}
.season-advent-banner{display:block;width:min(100%,500px);max-height:190px;object-fit:contain;margin:0 auto 18px;filter:drop-shadow(0 5px 12px #0007)}
.season-advent-presentation h2{color:#f6d996}
.season-advent-presentation .season-doors{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(7px,2vw,16px);background:transparent;border:0;padding:8px}
.season-advent-presentation .season-door{aspect-ratio:1/1.12;min-height:66px;border:2px solid #d6a75c;border-radius:12px;background:linear-gradient(145deg,#245278,#102846 65%,#091c35);color:#ffe6aa;font-size:clamp(1.3rem,4vw,2rem);font-weight:800;box-shadow:inset 0 0 0 3px #d5ad6133,0 5px 12px #0007;text-shadow:0 2px 5px #0009}
.season-advent-presentation .season-door:not(:disabled):hover,.season-advent-presentation .season-door:not(:disabled):focus-visible{outline:2px solid #fff1bf;transform:translateY(-2px)}
.season-advent-presentation .season-door[data-open=true]{background:linear-gradient(145deg,#47775e,#163e36);border-color:#e2c783}
.season-advent-presentation .season-door:disabled{opacity:.8}
@media(max-width:400px){.season-advent-presentation{padding:12px}.season-advent-presentation .season-doors{gap:7px}.season-advent-presentation .season-door{min-height:55px}}

/* Approved 1024x1536 Christmas calendar artwork; the artwork itself contains the door numbers. */
.season-calendar-only .season-advent-approved{padding:0;border:0;background:transparent;box-shadow:none;max-width:768px;margin:auto}
.season-calendar-only .season-advent-approved .season-calendar-note{font-size:.9rem;text-align:center;margin:.5rem auto;color:#f5dfb3}
.season-calendar-only .season-calendar-art{position:relative;width:100%;aspect-ratio:2/3;background:#071a38 url('/assets/christmas/calendar-classic.png') center/100% 100% no-repeat;border-radius:12px;overflow:hidden}
.season-calendar-only .season-advent-kids .season-calendar-art{background-image:url('/assets/christmas/calendar-kids.png')}
.season-calendar-only .season-calendar-art .season-doors{position:absolute;left:5%;top:24.4%;width:90%;height:42%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:1.15%;margin:0;padding:0;border:0;background:none;border-radius:0}
.season-calendar-only .season-advent-kids .season-calendar-art .season-doors{left:4.7%;top:27.3%;width:90.6%;height:39.2%}
.season-calendar-only .season-calendar-art .season-door{display:block;min-width:0;min-height:0;aspect-ratio:auto;padding:0;margin:0;background:transparent!important;border:0!important;border-radius:8px;color:transparent!important;font-size:0;opacity:1!important;box-shadow:none!important;transform:none!important;cursor:pointer;position:relative}
.season-calendar-only .season-calendar-art .season-door:disabled{cursor:default}
.season-calendar-only .season-calendar-art .season-door:focus-visible{outline:3px solid #fff1a7;outline-offset:-3px;background:#fff3!important}
.season-calendar-only .season-calendar-art .season-door[data-open=true]::after{content:'✓';position:absolute;right:4%;bottom:3%;display:grid;place-items:center;width:clamp(12px,3vw,24px);aspect-ratio:1;border-radius:50%;background:#164f39;color:#fff;font-size:clamp(9px,2vw,16px);border:1px solid #e6c980}
.season-calendar-only .season-calendar-art .season-door:not(:disabled):hover{box-shadow:inset 0 0 0 2px #fff7ad!important}
@media(max-width:460px){.season-calendar-only .season-advent-approved{padding:0}.season-calendar-only .season-calendar-art .season-doors{grid-template-columns:repeat(6,minmax(0,1fr));gap:1.15%}.season-calendar-only .season-calendar-art .season-door{min-height:0}}

/* Active skins must visibly override legacy page-specific backgrounds. */
html[data-collecto-skin] body{background:radial-gradient(ellipse at 50% 0%,var(--season-panel),var(--season-bg) 78%) fixed!important;color:#f8f4ee}
html[data-collecto-skin] :is(main,.season-shell,.app-shell,.site-shell){border-color:var(--season-edge)}
html[data-collecto-skin] :is(.hero,.site-header,.feature,.directory-world,.catalog-card,.product,.panel,.world-card,.section > .card){border-color:var(--season-edge)!important}
html[data-collecto-skin] :is(.btn,.icon-btn,.collecto-kids-picker-toggle){border-color:var(--season-edge)!important}

/* 2026-11-10: distinct, immediately visible skin identity on all legacy layouts. */
html[data-collecto-skin] {color-scheme:dark; background:var(--season-bg)!important}
html[data-collecto-skin] body {min-height:100vh;background-color:var(--season-bg)!important}
html[data-collecto-skin] :is(header,footer,nav,.site-header,.site-footer,.season-site-links,.app-shell,.site-shell) {border-color:var(--season-edge)!important}
html[data-collecto-skin] :is(.feature,.directory-world,.catalog-card,.product,.panel,.world-card,.section>.card,.account-box,.final-card) {background-color:var(--season-panel)!important;border-color:var(--season-edge)!important}
html[data-collecto-skin] :is(h1,h2,h3,.eyebrow,.hero-tag) {text-decoration-color:var(--season-edge)}
html[data-collecto-skin] :is(a,button,input,select):focus-visible {outline:3px solid var(--season-edge)!important;outline-offset:3px}
html[data-collecto-skin] .season-site-links {border-top:2px solid var(--season-edge);margin-top:16px}
html[data-collecto-skin] .season-site-links::before {content:'Vzhled Collecto: ' attr(data-active-skin);display:block;width:100%;text-align:center;color:var(--season-edge);font-weight:700}
html[data-collecto-skin="easter"] body {background-image:radial-gradient(ellipse at 20% 0%,#6cba8440,transparent 55%),linear-gradient(140deg,#1e5138,var(--season-bg))!important}
html[data-collecto-skin="valentine"] body {background-image:radial-gradient(ellipse at 80% 5%,#e78aa055,transparent 60%),linear-gradient(150deg,#49162c,var(--season-bg))!important}
html[data-collecto-skin="halloween"] body {background-image:radial-gradient(ellipse at 90% 0%,#f59d3944,transparent 55%),linear-gradient(160deg,#3b1b46,var(--season-bg))!important}
html[data-collecto-skin="western"] body {background-image:linear-gradient(150deg,#694126,var(--season-bg) 80%)!important}
html[data-collecto-skin="spring"] body {background-image:radial-gradient(ellipse at 10% 0%,#9dd6a755,transparent 60%),linear-gradient(150deg,#295b42,var(--season-bg))!important}
html[data-collecto-skin="summer"] body {background-image:linear-gradient(150deg,#1774a2,var(--season-bg) 80%)!important}
html[data-collecto-skin="autumn"] body {background-image:linear-gradient(150deg,#995126,var(--season-bg) 80%)!important}
html[data-collecto-skin="winter"] body {background-image:linear-gradient(150deg,#376c91,var(--season-bg) 80%)!important}
html[data-collecto-skin="cyber"] body {background-image:linear-gradient(135deg,#293a73,var(--season-bg) 65%)!important}

/* Collecto Christmas 2026: rich mobile Advent arrangement, four dated candles. */
.season-wreath{position:relative;isolation:isolate;display:flex;align-items:flex-start;justify-content:space-evenly;gap:clamp(4px,2vw,18px);min-height:205px;padding:22px 12px 65px;border:0;border-radius:22px;background:radial-gradient(ellipse at 50% 95%,#38623b 0 17%,#183f2b 18% 30%,transparent 58%),linear-gradient(180deg,#0c2240,#0a1931);box-shadow:inset 0 0 0 1px #d4ac6533,0 10px 26px #0006;overflow:hidden}
.season-wreath::before{content:'';position:absolute;z-index:-1;left:3%;right:3%;bottom:6px;height:95px;border-radius:50%;background:repeating-conic-gradient(from 15deg at 50% 55%,#1a522f 0deg 9deg,#387c40 10deg 17deg,#0b392b 18deg 26deg,#4e833b 27deg 31deg);mask-image:radial-gradient(ellipse,transparent 0 17%,#000 27% 74%,transparent 88%);filter:drop-shadow(0 5px 4px #0009)}
.season-wreath::after{content:'🎀  🌲  🔴  ✨  🌲  🎀';position:absolute;bottom:18px;left:0;width:100%;text-align:center;font-size:clamp(16px,4vw,29px);letter-spacing:clamp(2px,1.5vw,12px);text-shadow:0 3px 5px #000}
.season-wreath .season-candle{position:relative;display:block;flex:0 1 76px;height:125px;min-width:0;filter:none;opacity:1}
.season-wreath .season-candle-body{position:absolute;bottom:0;left:13%;width:74%;height:93px;border-radius:9px 9px 5px 5px;background:linear-gradient(90deg,#690b17,#ed2934 28%,#c90c24 68%,#6b0718);border:1px solid #f4a65b;box-shadow:inset 3px 0 9px #ffffff36,0 8px 12px #0009}
.season-wreath .season-candle-body::after{content:'';position:absolute;left:-12%;right:-12%;bottom:-5px;height:11px;border-radius:50%;background:linear-gradient(#ffde8e,#97621c);box-shadow:0 2px 7px #000}
.season-wreath .season-wick{position:absolute;z-index:2;left:calc(50% - 2px);top:18px;width:4px;height:18px;background:#f3d7b6;border-radius:3px}
.season-wreath .season-flame{display:none;position:absolute;z-index:3;left:calc(50% - 9px);top:-14px;width:18px;height:37px;border-radius:70% 15% 65% 50%;transform:rotate(4deg);background:radial-gradient(ellipse at 50% 75%,#fff9c7 0 20%,#ffcf40 38%,#ff7a14 75%,transparent 80%);box-shadow:0 0 17px 6px #ffb63280,0 0 30px 12px #ffad2633}
.season-wreath .season-candle.lit .season-flame{display:block;animation:collecto-flame 2.4s ease-in-out infinite alternate}
.season-wreath .season-candle-number{position:absolute;z-index:4;left:0;right:0;bottom:27px;color:#ffdf91;font:700 clamp(22px,5vw,34px) Georgia,serif;text-align:center;text-shadow:1px 2px 2px #4b0707}
@keyframes collecto-flame{from{transform:rotate(-5deg) scale(.94);opacity:.9}to{transform:rotate(6deg) scale(1.06);opacity:1}}
@media(max-width:420px){.season-wreath{min-height:178px;padding:25px 6px 55px}.season-wreath .season-candle{height:111px}.season-wreath .season-candle-body{height:81px}.season-wreath::before{height:78px}.season-wreath::after{bottom:10px}}
@media(prefers-reduced-motion:reduce){.season-wreath .season-candle.lit .season-flame{animation:none}}
html[data-season-reduce] .season-wreath .season-candle.lit .season-flame{animation:none}

/* Full illustrated skin art: approved source files already ship in site-source/assets/christmas.
   This is not a color-only theme. Keep all original controls and text interactive. */
html[data-collecto-skin]:where(:not([data-collecto-skin="christmas"])) {--collecto-skin-art:none}
html[data-collecto-skin]:where(:not([data-collecto-skin="christmas"])) body {
 background-image:linear-gradient(180deg,rgba(4,13,30,.20),rgba(4,13,30,.30)),var(--collecto-skin-art)!important;
 background-position:center top!important;background-repeat:no-repeat!important;
 background-size:100% auto!important;background-attachment:scroll!important;
}
html[data-collecto-skin]:where(:not([data-collecto-skin="christmas"])) body :is(header,main,footer) {position:relative}
html[data-collecto-skin]:where(:not([data-collecto-skin="christmas"])) body :is(.hero,.site-header,.panel,.feature,.account-box,.season-site-links) {
 backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
html[data-collecto-skin]:where(:not([data-collecto-skin="christmas"])) body .hero {background-color:rgba(5,18,38,.76)!important}
html[data-collecto-skin]:where(:not([data-collecto-skin="christmas"])) body :is(.btn,.icon-btn,button) {box-shadow:0 0 0 1px var(--season-edge),0 4px 12px #0007!important}
@media(min-width:800px){html[data-collecto-skin]:where(:not([data-collecto-skin="christmas"])) body{background-size:cover!important;background-attachment:fixed!important}}
@media(max-width:799px){html[data-collecto-skin]:where(:not([data-collecto-skin="christmas"])) body{background-size:100% auto!important}}
html[data-collecto-skin="easter"]{--collecto-skin-art:url('/assets/christmas/skin-easter-web.webp')}
html[data-collecto-skin="valentine"]{--collecto-skin-art:url('/assets/christmas/skin-valentine-web.webp')}
html[data-collecto-skin="halloween"]{--collecto-skin-art:url('/assets/christmas/skin-halloween-web.webp')}
html[data-collecto-skin="western"]{--collecto-skin-art:url('/assets/christmas/skin-western-web.webp')}
html[data-collecto-skin="spring"]{--collecto-skin-art:url('/assets/christmas/skin-spring-web.webp')}
html[data-collecto-skin="summer"]{--collecto-skin-art:url('/assets/christmas/skin-summer-web.webp')}
html[data-collecto-skin="autumn"]{--collecto-skin-art:url('/assets/christmas/skin-autumn-web.webp')}
html[data-collecto-skin="winter"]{--collecto-skin-art:url('/assets/christmas/skin-winter-web.webp')}
html[data-collecto-skin="cyber"]{--collecto-skin-art:url('/assets/christmas/skin-cyber-web.webp')}

/* Christmas uses four proportional crops of the approved web artwork. */
html[data-collecto-skin="christmas"] {
  --christmas-navy: #061932;
  --christmas-ink: #0b213c;
  --christmas-panel: #102b48;
  --christmas-gold: #efd28e;
  --christmas-border: #927449;
  --christmas-pine: #183f36;
  --christmas-green-enamel: linear-gradient(158deg, #306153, #154337 43%, #0e312a 48%, #123d32);
  --christmas-berry: #641c31;
  --christmas-gold-rim: linear-gradient(135deg, #7a5428, #fff0bc 22%, #bd8d42 42%, #67451f 58%, #eac57a 80%, #a87536);
  --christmas-snow: url('/assets/christmas/frame-snow-cap.webp');
  --christmas-flourish: url('/assets/christmas/frame-flourish.webp');
  --christmas-text: #f9eed7;
  --christmas-muted: #cad5e2;
  --christmas-gutter: clamp(17px, 4vw, 74px);
  --christmas-art: url('/assets/christmas/skin-christmas-web.png');
  --christmas-display: Georgia, 'Times New Roman', serif;
  background: var(--christmas-navy) !important;
  scrollbar-color: var(--christmas-border) var(--christmas-navy);
}

html[data-collecto-skin="christmas"] body {
  min-height: 100dvh;
  isolation: isolate;
  box-sizing: border-box;
  padding-inline: var(--christmas-gutter);
  padding-bottom: max(64px, env(safe-area-inset-bottom));
  background: var(--christmas-navy) !important;
  color: var(--christmas-text);
}

html[data-collecto-skin="christmas"] body::before,
html[data-collecto-skin="christmas"] body::after,
html[data-collecto-skin="christmas"] .stars {
  display: none !important;
}

.christmas-frame {
  position: fixed;
  z-index: -1;
  --garland-height: clamp(50px, 5.2vw, 78px);
  --rail-width: clamp(13px, 3vw, 43px);
  --bells-width: clamp(48px, 6vw, 83px);
  --ice-width: clamp(74px, 9vw, 128px);
  inset: 0;
  pointer-events: none;
  border-inline: 1px solid #cfa36575;
  background:
    url('/assets/christmas/frame-side-left.webp') left top / var(--rail-width) auto repeat-y,
    url('/assets/christmas/frame-side-right.webp') right 38% / var(--rail-width) auto repeat-y,
    url('/assets/christmas/frame-snowflake.webp') 15% 23% / 25px auto no-repeat,
    url('/assets/christmas/frame-snowflake.webp') 48% 36% / 16px auto no-repeat,
    url('/assets/christmas/frame-snowflake.webp') 80% 25% / 22px auto no-repeat,
    url('/assets/christmas/frame-snowflake.webp') 89% 69% / 16px auto no-repeat,
    url('/assets/christmas/frame-snowflake.webp') 10% 79% / 19px auto no-repeat;
}

.christmas-frame::before,
.christmas-frame::after {
  content: '';
  position: absolute;
  inset-inline: 0;
}

.christmas-frame::before {
  bottom: 0;
  height: calc(var(--garland-height) * .58);
  background: url('/assets/christmas/frame-garland.webp') center top / auto 100% repeat-x;
  transform: rotate(180deg);
}

.christmas-frame::after {
  top: 0;
  height: calc(var(--garland-height) + 8px);
  background:
    url('/assets/christmas/frame-bells.webp') center 3px / var(--bells-width) auto no-repeat,
    url('/assets/christmas/frame-ice.webp') 28% 65% / var(--ice-width) auto no-repeat,
    url('/assets/christmas/frame-ice.webp') 72% 65% / var(--ice-width) auto no-repeat,
    url('/assets/christmas/frame-garland.webp') center top / auto var(--garland-height) repeat-x;
}

.christmas-frame span {
  position: absolute;
  width: clamp(100px, 19vw, 295px);
  aspect-ratio: 1 / .86;
  background: var(--christmas-art) no-repeat;
  background-size: 225% auto;
}

.christmas-frame span:nth-child(1) {
  inset: 0 auto auto 0;
  background-position: left top;
  mask-image: linear-gradient(to bottom, #000 65%, transparent), linear-gradient(to right, #000 76%, transparent);
  mask-composite: intersect;
}

.christmas-frame span:nth-child(2) {
  inset: 0 0 auto auto;
  background-position: right top;
  mask-image: linear-gradient(to bottom, #000 65%, transparent), linear-gradient(to left, #000 76%, transparent);
  mask-composite: intersect;
}

.christmas-frame span:nth-child(3) {
  inset: auto auto 0 0;
  background-position: left bottom;
  mask-image: linear-gradient(to top, #000 65%, transparent), linear-gradient(to right, #000 76%, transparent);
  mask-composite: intersect;
}

.christmas-frame span:nth-child(4) {
  inset: auto 0 0 auto;
  background-position: right bottom;
  mask-image: linear-gradient(to top, #000 65%, transparent), linear-gradient(to left, #000 76%, transparent);
  mask-composite: intersect;
}

html[data-collecto-skin="christmas"] :is(body > header, .site-header) {
  min-height: 64px;
  margin: clamp(66px, 7vw, 115px) auto 0;
  padding: 9px clamp(10px, 2vw, 28px);
  border: 1px solid var(--christmas-border) !important;
  border-radius: 16px;
  background:
    var(--christmas-snow) center top / min(100%, 390px) 20px no-repeat,
    var(--christmas-flourish) center bottom 1px / clamp(65px, 10vw, 126px) auto no-repeat,
    radial-gradient(ellipse at top, #1b3650, var(--christmas-ink) 77%) !important;
  box-shadow: inset 0 0 0 2px #0b1628, inset 0 0 0 3px #ba914740, 0 6px 22px #0004;
}

html[data-collecto-skin="christmas"] :is(.header-nav, .top-actions, .season-controls) {
  gap: 8px;
  flex-wrap: wrap;
}

html[data-collecto-skin="christmas"] :is(.header-nav, .season-site-links) a {
  text-underline-offset: 4px;
}

html[data-collecto-skin="christmas"] .header-nav a:hover {
  color: var(--christmas-gold);
  text-decoration: underline;
}

html[data-collecto-skin="christmas"] .hero.section {
  display: grid;
  width: min(100%, 1310px);
  min-height: 0;
  gap: 18px;
  justify-items: stretch;
  align-content: center;
  padding: clamp(24px, 5vw, 78px) clamp(6px, 2.4vw, 34px);
  margin: 0 auto;
  background: transparent !important;
  border: 0;
  box-shadow: none;
}

html[data-collecto-skin="christmas"] .hero .hero-brand-image img {
  width: min(100%, 515px) !important;
  filter: drop-shadow(0 6px 19px #0009) !important;
}

html[data-collecto-skin="christmas"] .hero :is(.hero-feature-art, .collecto-quick-access, .how-intro) {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0;
}

html[data-collecto-skin="christmas"] .hero-feature-art img {
  border: 1px solid var(--christmas-border);
  border-radius: 16px;
}

html[data-collecto-skin="christmas"] .hero .collecto-quick-access {
  padding: 12px 0;
  border-block: 1px solid var(--christmas-border);
  background: var(--christmas-flourish) center top 1px / 82px auto no-repeat;
}

html[data-collecto-skin="christmas"] :is(
  #collecto-menu-metal, #collecto-back-metal
) stop:first-child { stop-color: #fff2c7; }

html[data-collecto-skin="christmas"] :is(
  #collecto-menu-metal, #collecto-back-metal
) stop { stop-color: #d5ab63; }

html[data-collecto-skin="christmas"] :is(
  #collecto-menu-metal, #collecto-back-metal
) stop:last-child { stop-color: #87643d; }

html[data-collecto-skin="christmas"] #collectoNavPanel a {
  color: var(--christmas-text);
  border-color: var(--christmas-border);
  background-color: var(--christmas-panel);
}

html[data-collecto-skin="christmas"] #collectoNavPanel a:hover {
  color: var(--christmas-gold);
  border-color: var(--christmas-gold);
}

html[data-collecto-skin="christmas"] :is(.hero-sub, .lead, .catalog-search-label) {
  color: var(--christmas-muted);
}

html[data-collecto-skin="christmas"] :is(.title, .season-shell h1, .season-shell h2, .panel h2, .feature h2) {
  color: var(--christmas-text);
  font-family: var(--christmas-display);
  letter-spacing: -.02em;
  text-wrap: balance;
}

html[data-collecto-skin="christmas"] :is(.eyebrow, .hero-tag, legend, .directory-world .eyebrow) {
  color: var(--christmas-gold);
}

html[data-collecto-skin="christmas"] :is(
  .feature, .panel, .world-card, .account-box, .profile-photo-panel,
  .section > .card, .stat, .statsbar, .v7-pack, .qr-card, .modal-box,
  .mini-cta, .feature-item, .personal-photo, .season-site-links,
  .season-gifts, .product, fieldset, details, dialog, [role="menu"], [role="listbox"],
  #collectoNavPanel, #collectoVoicePanel
) {
  color: var(--christmas-text);
  background:
    var(--christmas-snow) center top / min(100%, 310px) 17px no-repeat,
    linear-gradient(160deg, #19334c, var(--christmas-ink) 62%) !important;
  border: 1px solid var(--christmas-border) !important;
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px #0a192e, inset 0 0 0 3px #c29b5440, 0 6px 18px #0004 !important;
}

html[data-collecto-skin="christmas"] .season-shell {
  min-width: 0;
  padding-top: clamp(75px, 11vw, 160px);
}

html[data-collecto-skin="christmas"] .season-shell nav[aria-label] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

html[data-collecto-skin="christmas"] .season-shell nav label.site-language {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

html[data-collecto-skin="christmas"] .season-shell fieldset label:has(input[type="checkbox"]) {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

html[data-collecto-skin="christmas"] .season-shell input[type="checkbox"] {
  width: auto;
  margin: 0;
}

html[data-collecto-skin="christmas"] .world-directory {
  gap: clamp(10px, 2vw, 22px);
}

html[data-collecto-skin="christmas"] .directory-world {
  background: var(--christmas-ink) !important;
  border-color: var(--christmas-border) !important;
  border-radius: 12px 12px 20px 20px;
  box-shadow: inset 0 -3px var(--christmas-pine), 0 6px 18px #0004;
}

html[data-collecto-skin="christmas"] .directory-world:hover {
  border-color: var(--christmas-gold) !important;
}

html[data-collecto-skin="christmas"] :is(.catalog-card, .product) {
  border-color: var(--christmas-border);
  box-shadow: 0 6px 18px #0004;
}

html[data-collecto-skin="christmas"] :is(
  .btn, .icon-btn, .season-skin, .collecto-quick-access > a, .top-actions > a,
  button:not(.season-door), input[type="submit"], input[type="button"]
):not(.season-door, .social-icon, [aria-label*="QR"]) {
  min-height: 44px;
  color: var(--christmas-text) !important;
  background:
    var(--christmas-snow) center top / 100% 18px no-repeat padding-box,
    var(--christmas-enamel, var(--christmas-green-enamel)) padding-box,
    var(--christmas-gold-rim) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 2px #091d18, inset 0 0 0 3px #e3bd6952, 0 3px 7px #0007 !important;
  text-shadow: 0 1px 2px #0008;
  text-decoration: none;
}

html[data-collecto-skin="christmas"] :is(
  .btn.primary, .btn.gold, .btn-crimson, .collecto-quick-access > a:first-child,
  button[type="submit"], input[type="submit"]
) {
  --christmas-enamel: linear-gradient(158deg, #9b3e54, #7b253b 43%, #59162b 48%, var(--christmas-berry));
}

html[data-collecto-skin="christmas"] :is(.btn, .collecto-quick-access > a, .season-skin, button:not(.season-door)):hover:not(:disabled) {
  border-color: var(--christmas-gold) !important;
}

html[data-collecto-skin="christmas"] :is(button, input):disabled {
  cursor: default;
}

html[data-collecto-skin="christmas"] :is(input:not([type]), input[type="text"], input[type="email"],
  input[type="password"], input[type="search"], input[type="url"], input[type="number"],
  input[type="tel"], input[type="date"], input[type="file"], select, textarea) {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 44px;
  background-color: var(--christmas-ink) !important;
  color: var(--christmas-text) !important;
  border: 1px solid var(--christmas-border) !important;
  border-radius: 8px;
}

html[data-collecto-skin="christmas"] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--christmas-gold);
}

html[data-collecto-skin="christmas"] input::file-selector-button {
  min-height: 36px;
  background: var(--christmas-pine);
  color: var(--christmas-text);
  border: 1px solid var(--christmas-border);
  border-radius: 6px;
}

html[data-collecto-skin="christmas"] :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--christmas-gold) !important;
  outline-offset: 3px;
}

html[data-collecto-skin="christmas"] .season-calendar-art .season-door:focus-visible {
  outline-offset: -3px;
}

html[data-collecto-skin="christmas"] :is(body > footer, .site-footer) {
  margin: 24px auto 0;
  border-top: 1px solid var(--christmas-border) !important;
  background: var(--christmas-navy) !important;
}

html[data-collecto-skin="christmas"] body :is(
  header .top-actions:has(> a [data-login-name][data-no-translate]),
  .collecto-market-account:has(> [data-login-name][data-no-translate])
) {
  padding-top: 102px !important;
}

html[data-collecto-skin="christmas"] :is(
  header .top-actions > a:has([data-login-name][data-no-translate]),
  .collecto-market-account [data-login-name][data-no-translate]
) {
  position: relative;
  overflow: visible !important;
}

html[data-collecto-skin="christmas"] :is(
  header .top-actions > a:has([data-login-name][data-no-translate]),
  .collecto-market-account [data-login-name][data-no-translate]
)::after {
  content: '';
  position: absolute;
  inset: -88px auto auto 50% !important;
  translate: -50% 0;
  rotate: 9deg;
  width: 168px;
  height: 70px !important;
  box-sizing: border-box;
  background: url('/assets/christmas/frame-profile-cutout.webp') center / contain no-repeat;
  pointer-events: none;
}

html[data-collecto-skin="christmas"] .season-shortcut-emoji {
  display: none;
}

html[data-collecto-skin="christmas"] .season-wreath::after {
  display: none;
}

@media (min-width: 1050px) {
  html[data-collecto-skin="christmas"] .hero.section {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
    grid-template-areas:
      "copy artwork"
      "shortcuts artwork"
      "help artwork"
      "counts counts";
    align-items: center;
    column-gap: clamp(20px, 4vw, 58px);
  }
  html[data-collecto-skin="christmas"] .hero.section > div:first-child { grid-area: copy; }
  html[data-collecto-skin="christmas"] .hero .hero-feature-art { grid-area: artwork; }
  html[data-collecto-skin="christmas"] .hero .collecto-quick-access { grid-area: shortcuts; }
  html[data-collecto-skin="christmas"] .hero .how-intro { grid-area: help; }
  html[data-collecto-skin="christmas"] .hero .collecto-counter-strip { grid-area: counts; }
}

@media (max-width: 650px) {
  html[data-collecto-skin="christmas"] {
    --christmas-gutter: clamp(19px, 4.6vw, 31px);
    --christmas-bottom: clamp(52px, 17vw, 86px);
    --christmas-bottom-safe: calc(var(--christmas-bottom) + env(safe-area-inset-bottom, 0px));
    scroll-padding-block-end: calc(var(--christmas-bottom-safe) + 12px);
  }
  html[data-collecto-skin="christmas"] body {
    padding-bottom: calc(var(--christmas-bottom-safe) + 14px);
  }
  html[data-collecto-skin="christmas"] body::after {
    content: '' !important;
    display: block !important;
    position: fixed;
    z-index: 120;
    inset: auto 0 0;
    height: var(--christmas-bottom-safe);
    border-top: 1px solid #8e713c;
    background:
      url('/assets/christmas/frame-mobile-base.webp') center bottom / 100% 100% no-repeat,
      var(--christmas-navy);
    pointer-events: auto;
  }
  html[data-collecto-skin="christmas"] .christmas-frame::before,
  html[data-collecto-skin="christmas"] .christmas-frame span:nth-child(n+3) {
    display: none;
  }
  html[data-collecto-skin="christmas"] .collecto-nav-controls {
    top: 66px !important;
  }
  html[data-collecto-skin="christmas"] .collecto-voice {
    position: absolute;
    inset: 66px 116px auto auto;
  }
  html[data-collecto-skin="christmas"] .season-shell {
    padding-top: 119px;
  }
  html[data-collecto-skin="christmas"] #collectoVoiceToggle {
    width: 42px;
    height: 42px;
    min-height: 42px;
  }
  html[data-collecto-skin="christmas"] #collectoVoicePanel {
    inset: 50px -100px auto auto;
    width: min(350px, calc(100vw - 32px));
  }
  html[data-collecto-skin="christmas"] :is(#collectoNavPanel, #collectoVoicePanel) {
    max-height: calc(100dvh - 128px - var(--christmas-bottom-safe)) !important;
    overflow-y: auto;
  }
  html[data-collecto-skin="christmas"] :is(body > header, .site-header) {
    margin-top: 59px;
  }
  html[data-collecto-skin="christmas"] .christmas-frame {
    --garland-height: 42px;
    --rail-width: clamp(14px, 4.3vw, 27px);
    --ice-width: 68px;
  }
  html[data-collecto-skin="christmas"] .christmas-frame span {
    width: clamp(92px, 26vw, 160px);
    aspect-ratio: 1 / .77;
  }
  html[data-collecto-skin="christmas"] .hero .actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
    gap: 8px;
  }
  html[data-collecto-skin="christmas"] :is(.hero .actions, .season-controls) .btn {
    white-space: normal;
  }
}

@media (forced-colors: active), print {
  .christmas-frame,
  html[data-collecto-skin="christmas"] body::after { display: none !important; }
}