/* Illustrated web themes. Classic and Christmas continue using collecto-seasons.css. */
html:is(
  [data-collecto-skin="easter"], [data-collecto-skin="valentine"], [data-collecto-skin="halloween"],
  [data-collecto-skin="western"], [data-collecto-skin="spring"], [data-collecto-skin="summer"],
  [data-collecto-skin="autumn"], [data-collecto-skin="winter"], [data-collecto-skin="cyber"]
) {
  --theme-navy: #081a31;
  --collecto-skin-art: none;
  --theme-text: #f6f4ed;
  --theme-muted: #c9d7e6;
  --theme-gutter: clamp(20px, 4.3vw, 70px);
  --theme-top-space: clamp(79px, 8vw, 122px);
  --theme-bottom: clamp(54px, 11vw, 104px);
  --theme-bottom-safe: calc(var(--theme-bottom) + env(safe-area-inset-bottom, 0px));
  --theme-panel: color-mix(in srgb, var(--theme-tone) 34%, #0c223c);
  --theme-panel-light: color-mix(in srgb, var(--theme-tone) 57%, #172f48);
  --theme-stroke: color-mix(in srgb, var(--theme-metal) 64%, var(--theme-tone));
  --theme-outline: color-mix(in srgb, var(--theme-metal) 35%, var(--theme-panel));
  --theme-metal-rim: linear-gradient(125deg, var(--theme-outline), var(--theme-metal) 24%, var(--theme-outline) 52%, var(--theme-metal) 81%, var(--theme-outline));
  --theme-button: linear-gradient(160deg, var(--theme-panel-light), var(--theme-panel) 45%, #091e36 90%);
  --theme-primary: linear-gradient(150deg, var(--theme-paint), var(--theme-tone) 54%, #101d33);
  --theme-panel-fill: linear-gradient(145deg, var(--theme-panel-light), var(--theme-panel) 58%, #0b1e35);
  color-scheme: dark;
  background: var(--theme-navy) !important;
  scrollbar-color: var(--theme-stroke) var(--theme-navy);
  scroll-padding-block-end: calc(var(--theme-bottom-safe) + 12px);

  & body {
    isolation: isolate;
    box-sizing: border-box;
    min-height: 100dvh;
    padding-inline: var(--theme-gutter);
    padding-bottom: calc(var(--theme-bottom-safe) + 14px);
    background: var(--theme-navy) !important;
    color: var(--theme-text);
  }

  & body::before {
    content: '';
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-inline: 1px solid var(--theme-outline);
    background:
      var(--theme-crown) center top / clamp(400px, 76vw, 1120px) var(--theme-top-space) no-repeat,
      var(--theme-left) left 24% / clamp(18px, 4vw, 57px) auto repeat-y,
      var(--theme-right) right 69% / clamp(18px, 4vw, 57px) auto repeat-y,
      var(--theme-faint) 12% 42% / 20px auto no-repeat,
      var(--theme-faint) 89% 72% / 24px auto no-repeat;
  }

  & body::after {
    content: '';
    display: block;
    position: fixed;
    inset: auto 0 0;
    z-index: 120;
    height: var(--theme-bottom-safe);
    border-top: 1px solid var(--theme-outline);
    background: var(--theme-foot) center bottom / min(100%, 1220px) 100% no-repeat, var(--theme-navy);
    pointer-events: auto;
  }

  & body > .stars { display: none !important; }

  & body :is(body > header, .site-header) {
    box-sizing: border-box;
    min-height: 68px;
    margin-top: var(--theme-top-space);
    padding: 12px clamp(10px, 2vw, 30px);
    border: 1px solid transparent !important;
    border-radius: var(--theme-panel-radius);
    background:
      var(--theme-emblem) center bottom 2px / 34px 25px no-repeat padding-box,
      var(--theme-button) padding-box,
      var(--theme-metal-rim) border-box !important;
    box-shadow: inset 0 0 0 3px var(--theme-navy), inset 0 0 0 4px var(--theme-outline), 0 7px 24px #02081183;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  & body .header-nav a {
    border-radius: var(--theme-control-radius);
    padding: 4px 5px;
    color: var(--theme-text);
    text-decoration-color: var(--theme-metal);
    text-underline-offset: 4px;
  }

  & body :is(.header-nav, .season-site-links) a:hover { color: var(--theme-metal); }

  & body .hero.section {
    background: none !important;
    border: 0 !important;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: grid;
    width: min(100%, 1320px);
    min-height: 0;
    gap: clamp(14px, 2vw, 27px);
    justify-items: stretch;
    align-content: center;
    padding: clamp(24px, 5vw, 70px) clamp(3px, 2vw, 26px);
    margin: 0 auto;
  }

  & .hero .hero-brand-image img {
    width: min(100%, 520px) !important;
    filter: drop-shadow(0 5px 17px #010a17b3) !important;
  }

  & .hero :is(.hero-feature-art, .collecto-quick-access, .how-intro) {
    width: 100%;
    min-width: 0;
    max-width: none !important;
    margin: 0 !important;
  }

  & .hero-feature-art img {
    border-color: var(--theme-stroke);
    border-radius: var(--theme-panel-radius);
  }

  & .hero .collecto-quick-access {
    padding: 13px 0;
    border-block: 1px solid var(--theme-outline);
    background: var(--theme-emblem) center top / 22px 16px no-repeat;
  }

  & :is(.hero-sub, .lead, .catalog-search-label) { color: var(--theme-muted); }

  & :is(.title, .season-shell h1, .season-shell h2, .panel h2, .feature h2) {
    color: var(--theme-text);
    font-family: var(--theme-display);
    letter-spacing: var(--theme-heading-tracking, -.018em);
    text-wrap: balance;
  }

  & :is(.eyebrow, .hero-tag, legend, .directory-world .eyebrow) { color: var(--theme-metal); }

  & body :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(--theme-text);
    background: var(--theme-panel-fill) !important;
    border: 1px solid var(--theme-stroke) !important;
    border-radius: var(--theme-panel-radius);
    box-shadow: inset 0 0 0 2px var(--theme-navy), inset 0 0 0 3px var(--theme-outline), 0 6px 18px #02081179 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  & body :is(.feature, .panel, .account-box, .profile-photo-panel, .season-site-links, #collectoNavPanel) {
    background:
      var(--theme-emblem) right 10px top 7px / 29px 23px no-repeat,
      var(--theme-panel-fill) !important;
  }

  & 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: 76px !important; }

  & body :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;
  }

  & body :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: -72px auto auto 50% !important;
    translate: -50% 0;
    width: min(172px, 56vw);
    height: 64px !important;
    background: var(--theme-profile) center / contain no-repeat;
    pointer-events: none;
  }

  & body :is(.feature, .panel, .account-box, .profile-photo-panel) > :is(h1, h2, h3) {
    padding-inline-end: 30px;
  }

  & .season-shell { min-width: 0; padding-top: var(--theme-top-space); }

  & .season-shell nav[aria-label] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  & .season-shell nav label.site-language { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
  & .season-shell fieldset label:has(input[type="checkbox"]) {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }
  & .season-shell input[type="checkbox"] { width: auto; margin: 0; }

  & body :is(.world-directory, .season-controls) { gap: clamp(8px, 1.7vw, 19px); }
  & body .directory-world {
    background: var(--theme-panel-fill) !important;
    border-color: var(--theme-stroke) !important;
    border-radius: var(--theme-panel-radius);
    box-shadow: inset 0 -3px var(--theme-outline), 0 6px 18px #02081177;
  }
  & body .directory-world:hover { border-color: var(--theme-metal) !important; }

  & body :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"], [role="switch"], .kids-world-icon) {
    min-height: 44px;
    color: var(--theme-text) !important;
    border: 1px solid transparent !important;
    border-radius: var(--theme-control-radius) !important;
    background:
      var(--theme-faint) left 3px top 2px / 22px 15px no-repeat padding-box,
      var(--theme-cta-fill, var(--theme-button)) padding-box,
      var(--theme-metal-rim) border-box !important;
    box-shadow: inset 0 0 0 2px var(--theme-navy), inset 0 0 0 3px var(--theme-outline), 0 3px 7px #02081196 !important;
    text-decoration: none;
    text-shadow: 0 1px 2px #020811bb;
  }

  & body :is(.btn.primary, .btn.gold, .btn-crimson, button[type="submit"], input[type="submit"], .collecto-quick-access > a:first-child) {
    --theme-cta-fill: var(--theme-primary);
  }

  & body :is(.hero .actions a, .collecto-quick-access > a, .season-controls button):not(.season-door) {
    padding-right: 34px !important;
    background:
      var(--theme-emblem) right 7px center / 23px 21px no-repeat padding-box,
      var(--theme-cta-fill, var(--theme-button)) padding-box,
      var(--theme-metal-rim) border-box !important;
  }

  & body :is(#collectoBack, #collectoMenuToggle, #collectoVoiceToggle) {
    background: var(--theme-button) padding-box, var(--theme-metal-rim) border-box !important;
  }

  & body :is(#collectoNavPanel, #collectoVoicePanel) {
    max-height: calc(100dvh - 124px - var(--theme-bottom-safe)) !important;
    overflow-y: auto;
  }

  & body :is(.btn, .collecto-quick-access > a, .season-skin, button:not(.season-door)):hover:not(:disabled) {
    border-color: var(--theme-metal) !important;
  }

  & body :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(--theme-navy) !important;
    color: var(--theme-text) !important;
    border: 1px solid var(--theme-stroke) !important;
    border-radius: var(--theme-control-radius);
    box-shadow: inset 0 2px 5px #030b1880;
  }

  & body :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--theme-metal); }
  & input::file-selector-button {
    min-height: 34px;
    background: var(--theme-panel-light);
    color: var(--theme-text);
    border: 1px solid var(--theme-stroke);
    border-radius: var(--theme-control-radius);
  }

  & :is(a, button, input, textarea, select, summary):focus-visible {
    outline: 2px solid var(--theme-metal) !important;
    outline-offset: 3px;
  }
  & .season-calendar-art .season-door:focus-visible { outline-offset: -3px; }
  & .season-shortcut-emoji { display: none; }

  & body :is(body > footer, .site-footer) {
    margin-top: 24px;
    border-top: 1px solid var(--theme-stroke) !important;
    background: var(--theme-navy) !important;
  }

  @media (min-width: 1080px) {
    & body .hero.section {
      grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
      grid-template-areas: "copy artwork" "links artwork" "help artwork" "counts counts";
      align-items: center;
      column-gap: clamp(24px, 4vw, 62px);
    }
    & .hero.section > div:first-child { grid-area: copy; }
    & .hero .hero-feature-art { grid-area: artwork; }
    & .hero .collecto-quick-access { grid-area: links; }
    & .hero .how-intro { grid-area: help; }
    & .hero .collecto-counter-strip { grid-area: counts; }
  }

  @media (min-width: 1200px) {
    & body > header:has(> .header-nav):has(> .top-actions) {
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
    }
    & body > header > .header-nav {
      justify-content: flex-end;
      margin: 0;
      gap: clamp(6px, 1vw, 14px);
    }
  }

  @media (max-width: 700px) {
    --theme-top-space: 67px;
    --theme-bottom: clamp(50px, 17vw, 86px);
    & body::before {
      background-size: 100% 67px, clamp(13px, 4.1vw, 26px) auto, clamp(13px, 4.1vw, 26px) auto, 15px auto, 18px auto;
    }
    & body :is(body > header, .site-header) { padding-block: 10px 15px; }
    & .season-shell { padding-top: 104px; }
    & .hero .actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
      gap: 8px;
    }
    & :is(.hero .actions, .season-controls) .btn { white-space: normal; }
    & body :is(.hero .actions a, .collecto-quick-access > a, .season-controls button):not(.season-door) {
      padding-right: 26px !important;
      background-size: 16px 15px, auto, auto !important;
      background-position: right 5px center, center, center !important;
    }
    & body .collecto-nav-controls { top: 75px !important; }
    & body:not(:has(> header, .site-header)) .collecto-nav-controls { top: 38px !important; }
    & body #collectoVoice { position: absolute; inset: 75px 116px auto auto; }
    & body:not(:has(> header, .site-header)) #collectoVoice { top: 38px; }
    & body #collectoVoiceToggle { width: 42px; height: 42px; min-height: 42px; }
    & body #collectoVoicePanel {
      inset: 50px -100px auto auto;
      width: min(350px, calc(100vw - 32px));
    }
  }

  @media (forced-colors: active), print {
    & body::before, & body::after { display: none; }
  }
}

html[data-collecto-skin="easter"] {
  --theme-tone: #214f4b;
  --theme-paint: #34745e;
  --theme-metal: #f1d395;
  --theme-panel-radius: 24px 24px 18px 18px;
  --theme-control-radius: 22px;
  --theme-display: Georgia, serif;
  --theme-crown: url('/assets/skins/easter-crown.webp');
  --theme-left: url('/assets/skins/easter-left.webp');
  --theme-emblem: url('/assets/skins/easter-emblem.webp');
  --theme-profile: url('/assets/skins/easter-profile.webp');
  --theme-faint: url('/assets/skins/easter-faint.webp');
  --theme-right: url('/assets/skins/easter-right.webp');
  --theme-foot: url('/assets/skins/easter-foot.webp');
}

html[data-collecto-skin="valentine"] {
  --theme-tone: #582137;
  --theme-paint: #954060;
  --theme-metal: #f4b9c9;
  --theme-panel-radius: 30px 15px 30px 15px;
  --theme-control-radius: 26px;
  --theme-display: Georgia, serif;
  --theme-crown: url('/assets/skins/valentine-crown.webp');
  --theme-left: url('/assets/skins/valentine-left.webp');
  --theme-emblem: url('/assets/skins/valentine-emblem.webp');
  --theme-profile: url('/assets/skins/valentine-profile.webp');
  --theme-faint: url('/assets/skins/valentine-faint.webp');
  --theme-right: url('/assets/skins/valentine-right.webp');
  --theme-foot: url('/assets/skins/valentine-foot.webp');
}

html[data-collecto-skin="halloween"] {
  --theme-tone: #402659;
  --theme-paint: #743b66;
  --theme-metal: #ffc27a;
  --theme-panel-radius: 9px 22px 9px 22px;
  --theme-control-radius: 8px 16px;
  --theme-display: Georgia, serif;
  --theme-crown: url('/assets/skins/halloween-crown.webp');
  --theme-left: url('/assets/skins/halloween-left.webp');
  --theme-emblem: url('/assets/skins/halloween-emblem.webp');
  --theme-profile: url('/assets/skins/halloween-profile.webp');
  --theme-faint: url('/assets/skins/halloween-faint.webp');
  --theme-right: url('/assets/skins/halloween-right.webp');
  --theme-foot: url('/assets/skins/halloween-foot.webp');
}

html[data-collecto-skin="western"] {
  --theme-tone: #513225;
  --theme-paint: #8b552f;
  --theme-metal: #f3cd86;
  --theme-panel-radius: 9px;
  --theme-control-radius: 7px;
  --theme-display: Rockwell, Georgia, serif;
  --theme-crown: url('/assets/skins/western-crown.webp');
  --theme-left: url('/assets/skins/western-left.webp');
  --theme-emblem: url('/assets/skins/western-emblem.webp');
  --theme-profile: url('/assets/skins/western-profile.webp');
  --theme-faint: url('/assets/skins/western-faint.webp');
  --theme-right: url('/assets/skins/western-right.webp');
  --theme-foot: url('/assets/skins/western-foot.webp');
}

html[data-collecto-skin="spring"] {
  --theme-tone: #224f3f;
  --theme-paint: #387953;
  --theme-metal: #e7e9af;
  --theme-panel-radius: 19px 34px 19px 34px;
  --theme-control-radius: 22px 8px;
  --theme-display: Georgia, serif;
  --theme-crown: url('/assets/skins/spring-crown.webp');
  --theme-left: url('/assets/skins/spring-left.webp');
  --theme-emblem: url('/assets/skins/spring-emblem.webp');
  --theme-profile: url('/assets/skins/spring-profile.webp');
  --theme-faint: url('/assets/skins/spring-faint.webp');
  --theme-right: url('/assets/skins/spring-right.webp');
  --theme-foot: url('/assets/skins/spring-foot.webp');
}

html[data-collecto-skin="summer"] {
  --theme-tone: #124b63;
  --theme-paint: #176c86;
  --theme-metal: #ffe097;
  --theme-panel-radius: 26px 26px 12px 12px;
  --theme-control-radius: 16px 22px;
  --theme-display: system-ui, sans-serif;
  --theme-crown: url('/assets/skins/summer-crown.webp');
  --theme-left: url('/assets/skins/summer-left.webp');
  --theme-emblem: url('/assets/skins/summer-emblem.webp');
  --theme-profile: url('/assets/skins/summer-profile.webp');
  --theme-faint: url('/assets/skins/summer-faint.webp');
  --theme-right: url('/assets/skins/summer-right.webp');
  --theme-foot: url('/assets/skins/summer-foot.webp');
}

html[data-collecto-skin="autumn"] {
  --theme-tone: #593524;
  --theme-paint: #884a2c;
  --theme-metal: #ffc184;
  --theme-panel-radius: 14px 28px 14px 28px;
  --theme-control-radius: 8px 20px;
  --theme-display: Georgia, serif;
  --theme-crown: url('/assets/skins/autumn-crown.webp');
  --theme-left: url('/assets/skins/autumn-left.webp');
  --theme-emblem: url('/assets/skins/autumn-emblem.webp');
  --theme-profile: url('/assets/skins/autumn-profile.webp');
  --theme-faint: url('/assets/skins/autumn-faint.webp');
  --theme-right: url('/assets/skins/autumn-right.webp');
  --theme-foot: url('/assets/skins/autumn-foot.webp');
}

html[data-collecto-skin="winter"] {
  --theme-tone: #254c72;
  --theme-paint: #3273a0;
  --theme-metal: #cceeff;
  --theme-panel-radius: 13px 13px 24px 24px;
  --theme-control-radius: 14px;
  --theme-display: system-ui, sans-serif;
  --theme-crown: url('/assets/skins/winter-crown.webp');
  --theme-left: url('/assets/skins/winter-left.webp');
  --theme-emblem: url('/assets/skins/winter-emblem.webp');
  --theme-profile: url('/assets/skins/winter-profile.webp');
  --theme-faint: url('/assets/skins/winter-faint.webp');
  --theme-right: url('/assets/skins/winter-right.webp');
  --theme-foot: url('/assets/skins/winter-foot.webp');
}

html[data-collecto-skin="cyber"] {
  --theme-tone: #283665;
  --theme-paint: #563c7c;
  --theme-metal: #8bf6f7;
  --theme-panel-radius: 5px 20px 5px 20px;
  --theme-control-radius: 4px 12px;
  --theme-display: ui-monospace, monospace;
  --theme-heading-tracking: .025em;
  --theme-crown: url('/assets/skins/cyber-crown.webp');
  --theme-left: url('/assets/skins/cyber-left.webp');
  --theme-emblem: url('/assets/skins/cyber-emblem.webp');
  --theme-profile: url('/assets/skins/cyber-profile.webp');
  --theme-faint: url('/assets/skins/cyber-faint.webp');
  --theme-right: url('/assets/skins/cyber-right.webp');
  --theme-foot: url('/assets/skins/cyber-foot.webp');
}

html[data-collecto-skin="easter"] {
  --theme-panel-fill: radial-gradient(ellipse at 85% 0%, #31575d, var(--theme-panel) 60%, #0a2039);
  --theme-button: linear-gradient(155deg, #244e55, #0f3340 49%, #0a2038);
}
html[data-collecto-skin="valentine"] {
  --theme-metal-rim: linear-gradient(135deg, #85415f, #ffd7df 24%, #7b405b 55%, #ffc0cf 84%, #6a3552);
  --theme-panel-fill: radial-gradient(ellipse at 50% 0%, #4f283f, var(--theme-panel) 60%, #101d35);
}
html[data-collecto-skin="halloween"] {
  --theme-panel-fill: linear-gradient(152deg, #432851, #22213d 53%, #111e35);
  --theme-metal-rim: linear-gradient(120deg, #652d50, #ffaf62 22%, #733c58 57%, #d98449 85%, #542444);
}
html[data-collecto-skin="western"] {
  --theme-panel-fill: repeating-linear-gradient(115deg, #ddb48306 0 1px, transparent 1px 5px),
    linear-gradient(150deg, #4a342b, #282639 53%, #141f31);
}
html[data-collecto-skin="spring"] {
  --theme-panel-fill: radial-gradient(ellipse at 100% 0%, #3e5c49, #153d3d 42%, #0c2439 83%);
  --theme-metal-rim: linear-gradient(120deg, #5a815f, #f4deab 24%, #6c916e 55%, #f3d4ca 85%, #527660);
}
html[data-collecto-skin="summer"] {
  --theme-panel-fill: linear-gradient(165deg, #28677b, #143a58 46%, #092842);
  --theme-button: linear-gradient(170deg, #29778c, #124a67 43%, #102c4b 75%);
}
html[data-collecto-skin="autumn"] {
  --theme-panel-fill: radial-gradient(ellipse at 0% 0%, #62422d, #303042 55%, #13243a);
  --theme-metal-rim: linear-gradient(115deg, #6a392b, #ffc58e 22%, #9e552f 55%, #eda66e 80%, #613337);
}
html[data-collecto-skin="winter"] {
  --theme-panel-fill: radial-gradient(ellipse at 65% 0%, #3b6389, #1b3d61 47%, #0b243c);
  --theme-metal-rim: linear-gradient(125deg, #557eaa, #eff9ff 24%, #6f9ec1 53%, #ddf2ff 84%, #47759b);
}
html[data-collecto-skin="cyber"] {
  --theme-panel-fill: repeating-linear-gradient(0deg, #a8dfff08 0 1px, transparent 1px 5px),
    linear-gradient(155deg, #303357, #142744 49%, #0a1e35);
  --theme-metal-rim: linear-gradient(126deg, #8d56ae, #8af6ff 18%, #25466d 44%, #be67dd 72%, #56d9eb 92%);
}