:root { --ink:#111b23; --panel:#1a2730; --paper:#e1e5e6; --text:#ecece7; --muted:#a7b2b8; --accent:#d7bd92; }
html { scroll-padding-top:104px; }
body { margin:0; background:var(--ink); color:var(--text); }
[v-cloak] { display:none; }
.page-shell { width:calc(100% - 96px) !important; max-width:1120px; margin-inline:auto; padding-inline:0; min-width:0; }
header > .page-shell,.hero-copy > .page-shell,.hero-controls.page-shell { max-width:none; }
.mobile-nav,.mobile-catalog-search { display:none; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
header { background-color:rgba(17,27,35,.92) !important; }
/* A full-width image canvas with a fixed aspect ratio prevents letterboxing. */
.hero-section { padding-top:80px; width:100%; }
.hero-stage { position:relative; overflow:hidden; background:var(--ink); }
.hero-visual::before { content:''; display:block; aspect-ratio:2.6; }
.hero-visual { position:relative; }
.hero-slide { position:absolute; inset:0; }
.hero-picture { position:absolute; inset:0; display:block; }
.hero-art-image { display:block; width:100%; height:100%; object-fit:cover; object-position:center !important; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,23,31,.97) 0%,rgba(13,23,31,.78) 25%,rgba(13,23,31,.12) 54%,transparent 76%); }
.hero-copy { position:absolute; inset:0; pointer-events:none; z-index:2; }
.hero-copy > .page-shell { height:100%; display:flex; align-items:center; }
.hero-copy-content { pointer-events:auto; width:44%; max-width:560px; padding-block:28px; }
.hero-tag { display:inline-flex; align-items:center; gap:9px; padding:7px 12px; border:1px solid #ffffff26; border-radius:24px; color:#e2e6e6; background:#ffffff08; font-size:11px; }
.hero-tag > span { width:5px; height:5px; border-radius:50%; background:var(--accent); }
.hero-copy h1 { margin:24px 0 18px; font-family:'Noto Serif SC',serif; font-weight:600; font-size:clamp(36px,3.6vw,64px); line-height:1.25; text-wrap:balance; }
.hero-description { max-width:40ch; font-size:14px; line-height:1.8; color:#bec9ce; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-primary,.hero-secondary { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:18px; border-radius:26px; padding:12px 22px; font-size:12px; font-weight:500; }
.hero-primary { color:#17232a; background:#f1f0e9; }
.hero-secondary { border:1px solid #ffffff30; color:#e4e8e8; background:#ffffff08; }
.hero-controls { position:absolute; bottom:18px; left:0; right:0; height:44px; display:flex; align-items:center; justify-content:space-between; gap:16px; z-index:3; }
.hero-control-buttons { display:flex; align-items:center; gap:22px; }
.hero-counter { font-size:12px; letter-spacing:.08em; color:#83959f; }
.hero-counter strong { color:#f0eee7; }
.hero-counter > span { margin-inline:10px; }
.hero-dots { display:flex; align-items:center; gap:8px; }
.hero-dots button { width:20px; height:44px; }
.hero-dots button::after { content:''; display:block; height:2px; background:#c4cfd044; border-radius:2px; }
.hero-dots button.is-active { width:40px; }
.hero-dots button.is-active::after { background:#ede9df; }
.hero-pause { color:#e2e8ea !important; min-height:44px; padding:10px; font-size:11px; color:#a2b0b8; }
.hero-total { font-size:11px; color:#96a7af; }
/* The collection beneath the opening image is intentionally narrower. */
#lego-series { padding-block:64px; }
#lego-series .mb-12,#featured-sets .mb-12 { margin-bottom:30px; }
#lego-series h2,#featured-sets h2 { font-size:30px; line-height:1.4; }
.theme-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.theme-card { min-width:0; border-radius:12px; border-color:#dbe6eb16; background:var(--panel); }
.theme-picture { width:100%; aspect-ratio:3/4; }
.theme-picture img { width:100%; height:100%; object-fit:cover; }
.theme-picture h3 { font-size:19px; }
.theme-picture p { font-size:11px; }
.theme-picture img,.feature-card img,.category-picture img { transform:none !important; }
#featured-sets { padding-block:64px; background:#192731; border-color:#dbe6eb0e; }
.featured-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.feature-card { min-width:0; height:100%; background:#14212a; border-radius:12px; }
.feature-card img { object-fit:contain; }
.feature-card > div:last-child { padding:18px; gap:10px; }
.feature-card > div:last-child > div { min-width:0; }
.feature-card > div:last-child > span { flex-shrink:0; }
.feature-card h3 { font-size:15px; line-height:1.5; }
.feature-card .font-display { font-size:11px; }
/* A cool, quiet paper tone lets the different product settings breathe. */
.explore-section { padding-block:72px; background:var(--paper); color:#203039; }
.explore-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; margin-bottom:30px; }
.explore-eyebrow { margin-bottom:10px; font-size:11px; letter-spacing:.1em; color:#64757d; }
.explore-heading h2 { font-family:'Noto Serif SC',serif; font-size:30px; line-height:1.4; font-weight:600; }
.explore-all { display:inline-flex; align-items:center; gap:24px; min-height:44px; white-space:nowrap; font-size:12px; color:#314852; }
.category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 20px; }
.category-card { min-width:0; text-align:left; border-radius:10px; overflow:hidden; background:#f0f2f2; box-shadow:0 1px 0 #1b313316; transition:box-shadow .2s ease; }
.category-card:hover { box-shadow:0 7px 22px #142f3b14; }
.category-picture { position:relative; aspect-ratio:4/3; overflow:hidden; background:#cad2d6; }
.category-picture img { display:block; width:100%; height:100%; object-fit:cover; }
.category-info { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; }
.category-info h3 { color:#25343b; font-size:16px; font-weight:500; }
.category-info p { color:#6a7b82; font-size:11px; margin-top:4px; }
.category-info > span { color:#7b8d94; font-size:19px; }
.explore-note { margin-top:28px; font-size:12px; color:#6a7b82; line-height:1.7; }
.explore-note a { color:#29424e; margin-left:12px; text-decoration:underline; text-underline-offset:4px; }
/* No decorative product collage: the final section is typography and space. */
.about-section { padding-block:88px 64px; background:#17242d; }
.about-editorial { display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:center; }
.about-eyebrow { font-size:11px; letter-spacing:.16em; color:#91a5af; margin-bottom:24px; }
.about-editorial h2 { font-family:'Noto Serif SC',serif; font-size:clamp(40px,4vw,64px); line-height:1.32; font-weight:500; letter-spacing:-.04em; color:#edece5; }
.about-copy { padding-top:32px; }
.about-copy > p { max-width:43ch; font-size:14px; line-height:2; color:#acbbc3; margin-bottom:14px; }
.about-actions { display:flex; align-items:center; flex-wrap:wrap; gap:26px; margin-top:28px; }
.about-actions a { display:inline-flex; align-items:center; gap:24px; min-height:44px; padding-bottom:4px; font-size:13px; color:#e1c9a4; border-bottom:1px solid #b79d754d; }
.about-actions button { min-height:44px; font-size:12px; color:#aebfc8; }
.about-statline { margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding-top:28px; border-top:1px solid #b9cbd221; }
.about-statline > div { display:flex; align-items:baseline; gap:16px; }
.about-statline strong { font-family:'Space Grotesk',sans-serif; font-size:36px; font-weight:400; letter-spacing:-.04em; color:#dfe4e3; }
.about-statline span { font-size:11px; color:#8da2ae; }
footer { background:#111b23 !important; border-color:#b9cbd217 !important; padding-top:44px !important; padding-bottom:44px !important; }
.product-close { position:absolute; z-index:60; top:18px; right:18px; width:44px; height:44px; border:1px solid #ffffff30; border-radius:50%; background:#24323c; color:white; font-size:26px; }
.contact-widget { position:fixed; bottom:max(24px,env(safe-area-inset-bottom)); right:24px; z-index:40; }
.contact-toggle { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; margin-left:auto; padding:12px 18px; border-radius:999px; background:#fff; color:#16232b; font-size:12px; font-weight:500; box-shadow:0 8px 24px #0002; }
.contact-toggle svg { width:18px; height:18px; flex-shrink:0; }
.contact-panel { width:288px; max-width:calc(100vw - 48px); padding:16px; margin-bottom:12px; border:1px solid #ffffff26; border-radius:16px; background:#1a2730; box-shadow:0 16px 48px #0005; }
.contact-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.contact-panel-heading h2 { color:#f2f3ef; font-size:14px; font-weight:600; }
.contact-close { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; color:#bac6cc; font-size:23px; }
.contact-close:hover { background:#ffffff0d; color:#fff; }
.contact-whatsapp { display:flex; align-items:center; gap:12px; min-height:56px; padding:14px 16px; border-radius:10px; background:#168444; color:#fff; font-size:14px; font-weight:600; transition:background .2s; }
.contact-whatsapp:hover { background:#126d39; }
.contact-whatsapp svg { width:25px; height:25px; flex-shrink:0; }
.contact-whatsapp span:last-child { margin-left:auto; font-weight:400; }
@media (min-width:768px) and (max-width:1023px) {
  .hero-copy-content { width:46%; padding-block:12px; }
  .hero-copy h1 { font-size:30px; margin:14px 0 10px; }
  .hero-tag { font-size:10px; padding:5px 10px; }
  .hero-description { font-size:12px; }
  .hero-actions { margin-top:16px; gap:8px; }
  .hero-primary,.hero-secondary { font-size:11px; padding:10px 14px; }
}
@media (max-width:1023px) {
  .page-shell { width:calc(100% - 48px) !important; }
  header > div:first-child { height:64px !important; }
  .mobile-nav { display:flex; height:40px; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #ffffff0c; color:#a8b6be; font-size:12px; }
  .mobile-nav a { display:inline-flex; min-height:36px; align-items:center; }
  .hero-section { padding-top:104px; }
  .theme-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
  .theme-picture h3 { font-size:15px; }
  .theme-picture .inset-x-5 { left:12px; right:12px; }

  .about-editorial { gap:40px; }
  html { scroll-padding-top:120px; }
  main.flex-1 { padding-top:144px; }
}
@media (max-width:767px) {
  .contact-toggle { width:44px; height:44px; padding:0 !important; justify-content:center; }
  .contact-toggle span:last-child { display:none; }
  .page-shell { width:calc(100% - 40px) !important; }
  .hero-stage { padding-bottom:0; }
  .hero-visual::before { aspect-ratio:4/5; }
  .hero-slide { inset:0; height:auto; }
  .hero-picture { inset:0; }
  .hero-art-image { object-fit:cover; }
  .hero-shade { background:linear-gradient(to top,#111b23 0%,transparent 18%,transparent 100%); }
  .hero-copy { position:relative; inset:auto; }
  .hero-copy > .page-shell { height:auto; display:block; }
  .hero-copy-content { width:100%; padding:24px 0; }
  .hero-copy h1 { font-size:32px; margin:16px 0 12px; }
  .hero-tag { font-size:10px; padding:6px 10px; }
  .hero-description { font-size:12px; }
  .hero-actions { margin-top:20px; gap:10px; }
  .hero-primary,.hero-secondary { padding:10px 16px; font-size:11px; }
  .hero-controls { position:absolute; bottom:10px; height:44px; }
  .hero-total { display:none; }
  .hero-control-buttons { gap:18px; }
  .theme-grid,.featured-grid,.category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 14px; }
  .theme-picture h3 { font-size:15px; }
  .theme-picture p { font-size:10px; }
  .theme-picture .bottom-5 { bottom:12px; left:10px; right:10px; }
  .theme-picture .top-4 { top:10px; right:10px; font-size:9px; padding:3px 6px; }
  .feature-card > div:last-child { padding:12px; gap:6px; }
  .feature-card > div:last-child > span { display:none; }
  .feature-card h3 { font-size:13px; }
  .feature-card .font-display { font-size:9px; }
  .feature-card .absolute.bottom-3 { bottom:6px; right:6px; font-size:9px; padding:2px 5px; }
  #lego-series,#featured-sets { padding-block:44px; }
  #lego-series h2,#featured-sets h2,.explore-heading h2 { font-size:25px; }
  #lego-series .mb-12,#featured-sets .mb-12 { margin-bottom:24px; gap:16px; }
  .explore-section { padding-block:44px; }
  .explore-heading { display:block; margin-bottom:22px; }
  .explore-all { margin-top:10px; min-height:36px; }
  .category-card { border-radius:9px; }
  .category-info { padding:12px; gap:8px; }
  .category-info h3 { font-size:14px; }
  .category-info p { font-size:10px; }
  .category-info > span { font-size:15px; }
  .explore-note { font-size:11px; margin-top:24px; }
  .explore-note a { display:inline-block; margin-left:0; }
  .about-section { padding-block:52px 40px; }
  .about-editorial { grid-template-columns:1fr; gap:24px; }
  .about-eyebrow { margin-bottom:20px; font-size:10px; }
  .about-editorial h2 { font-size:40px; }
  .about-copy { padding-top:0; }
  .about-copy > p { font-size:13px; line-height:1.9; }
  .about-actions { margin-top:20px; }
  .about-statline { margin-top:32px; gap:14px; padding-top:22px; }
  .about-statline > div { display:block; }
  .about-statline strong { font-size:28px; display:block; }
  .about-statline span { font-size:10px; }
  .mobile-catalog-search { display:block; margin-top:24px; }
  .mobile-catalog-search input { width:100%; padding:13px 16px; color:#eee; font-size:14px; background:var(--panel); border:1px solid #ffffff30; border-radius:14px; }
  .product-dialog { max-height:calc(100dvh - 32px) !important; overflow-y:auto !important; display:block !important; }
  .product-dialog > div { overflow:visible; padding:18px; }
  .product-dialog > div:first-child > div:first-of-type { min-height:0; height:300px; flex:none; }
  .product-dialog > div:first-child > div:first-of-type > img { max-height:300px; max-width:100%; }
  .product-dialog h2,.product-dialog h3 { font-size:22px; }
  .product-dialog > div:first-child > button { position:sticky; top:0; float:right; }
  footer { padding-bottom:80px !important; }
}
@media (min-width:640px) { .mobile-catalog-search { display:none !important; } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* Shared branding, navigation and category filter for both pages. */
.brand-mark { display:block; width:40px; height:40px; object-fit:contain; flex-shrink:0; }
.site-brand { flex-shrink:0; }
.language-menu { z-index:60; }
.header-tools button { min-height:40px; }
.hero-control-buttons { padding:0 12px 0 0; border-radius:24px; text-shadow:0 1px 5px #000; }
.catalog-search { display:block; max-width:520px; margin-top:28px; }
.catalog-search input { width:100%; padding:13px 18px; color:var(--text); font-size:14px; background:var(--panel); border:1px solid #ffffff26; border-radius:24px; }
.catalog-filters { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; padding-bottom:24px; margin-bottom:28px; border-bottom:1px solid #ffffff1a; }
.catalog-filters button { min-height:44px; padding:8px 10px; white-space:normal; }
@media (min-width:768px) and (max-width:1023px) {
 .hero-copy h1 { font-size:26px; margin:10px 0; }
 .hero-actions { margin-top:10px; }
 .hero-copy-content { padding-bottom:52px; }
 .catalog-filters { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:767px) {
 .site-brand { gap:9px; }
 .site-brand .font-serif { font-size:14px; letter-spacing:0; }
 .brand-mark { width:32px; height:32px; }
 .header-tools { gap:8px; }
 .header-tools > button { padding:10px 12px; }
 .header-tools .relative > button { padding:10px; }
 .catalog-filters { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 .catalog-filters button { font-size:11px; padding:8px 6px; }
 .hero-shade { background:linear-gradient(to top,rgba(17,27,35,.9),transparent 32%); }
 .hero-controls { pointer-events:none; }
 .hero-control-buttons { pointer-events:auto; background:#111b2380; padding-left:12px; gap:14px; }
}

/* Thirteen category chips fill two rows without an empty final slot. */
.catalog-filters { display:flex; flex-wrap:wrap; }
.catalog-filters button { flex:1 0 calc((100% - 60px)/7); }
.catalog-secondary { display:flex; align-items:center; gap:16px; margin:0 0 28px; }
.catalog-secondary label { font-size:13px; color:var(--muted); }
.catalog-secondary select { min-height:44px; width:340px; max-width:100%; border:1px solid #ffffff26; border-radius:10px; background:var(--ink); color:var(--text); font-size:13px; padding:10px 36px 10px 14px; color-scheme:dark; }
.catalog-secondary select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.language-menu button { min-height:44px; }
@media (min-width:768px) and (max-width:1023px) { .catalog-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:767px) {
 .catalog-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
 .catalog-secondary { display:block; }
 .catalog-secondary label { display:block; margin-bottom:10px; }
 .catalog-secondary select { width:100%; }
 .hero-control-buttons { gap:12px; }
}
@media (max-width:380px) { html:not([lang="zh-CN"]) .site-brand .font-serif { font-size:12px; } }