/* ==========================================================================
   Homepage refresh — 18 September 2026 (Tom: more colour, rounder product
   photos, 2026 rail first, shorter scroll on mobile, Sodor Mail newsletter).
   Loaded only by the homepages (root + 10 languages), after every other
   stylesheet, and scoped to homepage sections so no other page changes.
   ========================================================================== */

:root {
  --hr-ink: #13233c;
  --hr-muted: #56657d;
  --hr-blue: #0a5bd3;
  --hr-blue-deep: #083f8f;
  --hr-red: #ee0024;
  --hr-red-deep: #c4001d;
  --hr-yellow: #ffcd00;
  --hr-green: #19a45a;
  --hr-card-radius: 24px;
  --hr-photo-radius: 18px;
  --hr-card-shadow: 0 22px 44px -26px rgba(11, 31, 63, 0.42), 0 6px 16px -8px rgba(11, 31, 63, 0.14);
  --hr-card-shadow-hover: 0 30px 60px -26px rgba(11, 31, 63, 0.5), 0 10px 22px -10px rgba(11, 31, 63, 0.18);
  --hr-tricolour: linear-gradient(90deg, #0a5bd3 0 36%, #ffcd00 36% 64%, #ee0024 64% 100%);
}

/* Five friendly tints that rotate across every product grid on the homepage. */
:is(#featured, #new-arrivals) .product-card,
.home-2026-rail__item {
  --hr-tint-a: #eaf4ff;
  --hr-tint-b: #cfe6ff;
  --hr-tint-dot: rgba(10, 91, 211, 0.16);
}
:is(#featured, #new-arrivals) .product-card:nth-child(5n + 2),
.home-2026-rail__item:nth-child(5n + 2) {
  --hr-tint-a: #fff8dc;
  --hr-tint-b: #ffe79a;
  --hr-tint-dot: rgba(214, 150, 0, 0.2);
}
:is(#featured, #new-arrivals) .product-card:nth-child(5n + 3),
.home-2026-rail__item:nth-child(5n + 3) {
  --hr-tint-a: #fff0f1;
  --hr-tint-b: #ffd3d9;
  --hr-tint-dot: rgba(238, 0, 36, 0.14);
}
:is(#featured, #new-arrivals) .product-card:nth-child(5n + 4),
.home-2026-rail__item:nth-child(5n + 4) {
  --hr-tint-a: #eafaf0;
  --hr-tint-b: #c9efd8;
  --hr-tint-dot: rgba(25, 164, 90, 0.18);
}
:is(#featured, #new-arrivals) .product-card:nth-child(5n + 5),
.home-2026-rail__item:nth-child(5n + 5) {
  --hr-tint-a: #f3efff;
  --hr-tint-b: #ddd3ff;
  --hr-tint-dot: rgba(109, 76, 214, 0.16);
}

/* Section titles: bolder, with the blue / yellow / red Thomas underline. */
:is(#featured, #categories, #new-arrivals) .section-title {
  color: var(--hr-ink);
  font-weight: 900;
  letter-spacing: -0.03em;
}
:is(#featured, #categories, #new-arrivals) .section-title::after {
  width: 96px !important;
  height: 6px !important;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--hr-tricolour) !important;
  opacity: 1 !important;
}
:is(#featured, #categories, #new-arrivals) .section-subtitle {
  color: var(--hr-muted);
}

/* --------------------------------------------------------------------------
   1. The 2026 rail — now directly under the hero
   -------------------------------------------------------------------------- */
.home-2026-rail {
  padding: clamp(40px, 4.2vw, 64px) 0 clamp(58px, 5.4vw, 80px);
  background:
    radial-gradient(38% 60% at 6% 0%, rgba(10, 91, 211, 0.2), transparent 70%),
    radial-gradient(30% 55% at 96% 6%, rgba(255, 205, 0, 0.34), transparent 70%),
    radial-gradient(34% 60% at 72% 104%, rgba(238, 0, 36, 0.14), transparent 70%),
    radial-gradient(30% 50% at 18% 100%, rgba(25, 164, 90, 0.14), transparent 70%),
    linear-gradient(180deg, #eef7ff 0%, #f8fbff 48%, #fff8ea 100%);
  border-bottom: 0;
}
.home-2026-rail::before { opacity: 0.28; }

.home-2026-rail__copy h2 {
  color: #0d1f3c;
  font-size: clamp(2.05rem, 3.4vw, 3.3rem);
}
.home-2026-rail__copy h2::after {
  content: '';
  display: block;
  width: 92px;
  height: 6px;
  margin-top: 16px;
  border-radius: 999px;
  background: var(--hr-tricolour);
}
.home-2026-rail__copy p { color: var(--hr-muted); }

.home-2026-rail__all {
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #0a5bd3 0%, #0748a8 100%);
  box-shadow: 0 16px 30px -14px rgba(10, 91, 211, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.home-2026-rail__all:hover,
.home-2026-rail__all:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #ee0024 0%, #c4001d 100%);
  box-shadow: 0 18px 34px -14px rgba(238, 0, 36, 0.7);
}

.home-2026-rail__viewport { padding: 14px 0 26px; }

.home-2026-card {
  border: 1px solid rgba(11, 31, 63, 0.07);
  border-radius: var(--hr-card-radius);
  background: #fff;
  box-shadow: var(--hr-card-shadow);
}
.home-2026-card::after {
  inset: auto 18px 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: var(--hr-tricolour);
}
.home-2026-card:hover,
.home-2026-card:focus-visible {
  border-color: rgba(10, 91, 211, 0.22);
  box-shadow: var(--hr-card-shadow-hover);
}
.home-2026-card__media {
  height: clamp(204px, 16.5vw, 240px);
  margin: 8px 8px 0;
  border: 0;
  border-radius: var(--hr-photo-radius);
  background:
    radial-gradient(var(--hr-tint-dot) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(160deg, var(--hr-tint-a) 0%, var(--hr-tint-b) 100%);
}
.home-2026-card__media img {
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  margin: 7px;
  padding: 3px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 26px -16px rgba(11, 31, 63, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.9);
}
.home-2026-card__type {
  top: 16px;
  left: 16px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 8px 16px -8px rgba(11, 31, 63, 0.45);
}
.home-2026-card__body { padding: 14px 16px 20px; }
.home-2026-card__name { color: #13233c; }
.home-2026-card__price {
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ee0024, #c4001d);
  box-shadow: 0 8px 16px -10px rgba(238, 0, 36, 0.8);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   2. Product cards in Featured and New Arrivals
   -------------------------------------------------------------------------- */
#featured.home-featured-section {
  background:
    radial-gradient(34% 26% at 4% 8%, rgba(10, 91, 211, 0.16), transparent 72%),
    radial-gradient(30% 24% at 98% 14%, rgba(255, 205, 0, 0.28), transparent 72%),
    radial-gradient(32% 26% at 92% 92%, rgba(238, 0, 36, 0.11), transparent 72%),
    radial-gradient(30% 24% at 6% 96%, rgba(25, 164, 90, 0.13), transparent 72%),
    linear-gradient(180deg, #f5faff 0%, #fffdf7 52%, #f7fbff 100%) !important;
}
#new-arrivals {
  background:
    radial-gradient(30% 40% at 96% 10%, rgba(10, 91, 211, 0.13), transparent 72%),
    radial-gradient(30% 40% at 4% 90%, rgba(255, 205, 0, 0.24), transparent 72%),
    linear-gradient(180deg, #fffaf0 0%, #f4f9ff 100%);
}

:is(#featured, #new-arrivals) .products-grid {
  gap: clamp(18px, 2vw, 28px);
}

:is(#featured, #new-arrivals) .product-card {
  border: 1px solid rgba(11, 31, 63, 0.07) !important;
  border-radius: var(--hr-card-radius) !important;
  background: #fff !important;
  box-shadow: var(--hr-card-shadow) !important;
  overflow: hidden;
}
:is(#featured, #new-arrivals) .product-card::before { display: none !important; }
:is(#featured, #new-arrivals) .product-card:hover,
:is(#featured, #new-arrivals) .product-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--hr-card-shadow-hover) !important;
}

:is(#featured, #new-arrivals) .product-image {
  aspect-ratio: 1 / 0.97 !important;
  margin: 8px 8px 0;
  border-radius: var(--hr-photo-radius) !important;
  overflow: hidden;
  background:
    radial-gradient(var(--hr-tint-dot) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(160deg, var(--hr-tint-a) 0%, var(--hr-tint-b) 100%) !important;
}
:is(#featured, #new-arrivals) .product-image::after { display: none !important; }
:is(#featured, #new-arrivals) .product-image.has-image img,
:is(#featured, #new-arrivals) .product-image img {
  box-sizing: border-box;
  width: calc(100% - 14px) !important;
  height: calc(100% - 14px) !important;
  margin: 7px;
  padding: 3px !important;
  object-fit: contain;
  border-radius: 14px;
  background: #fff !important;
  filter: none !important;
  box-shadow: 0 16px 28px -18px rgba(11, 31, 63, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.95);
}
:is(#featured, #new-arrivals) .product-card:hover .product-image img { transform: scale(1.03); }

:is(#featured, #new-arrivals) .product-badge {
  border-radius: 999px !important;
  border: 2px solid #fff;
  box-shadow: 0 8px 16px -8px rgba(11, 31, 63, 0.45);
}
:is(#featured, #new-arrivals) .product-image .wishlist-btn,
:is(#featured, #new-arrivals) .product-image [class*="wishlist"] {
  border-radius: 999px !important;
}

:is(#featured, #new-arrivals) .product-info {
  background: transparent !important;
  padding: 16px 16px 18px;
}
:is(#featured, #new-arrivals) .product-name { color: #13233c; }
:is(#featured, #new-arrivals) .product-price { color: var(--hr-red); }
:is(#featured, #new-arrivals) .product-cart-btn {
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ff1a3c 0%, #d8001f 100%) !important;
  box-shadow: 0 14px 24px -14px rgba(238, 0, 36, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
:is(#featured, #new-arrivals) .product-cart-btn:hover { filter: brightness(1.06); }
:is(#featured, #new-arrivals) .product-cart-btn-preorder {
  background: linear-gradient(135deg, #1f6fe5 0%, #0a4fb8 100%) !important;
  box-shadow: 0 14px 24px -14px rgba(10, 91, 211, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* The "shop all" buttons under the grids follow the rounder language. */
#featured .text-center > a[href="shop"],
#new-arrivals .text-center > a[href^="shop"] {
  border-radius: 999px !important;
}

/* --------------------------------------------------------------------------
   3. Categories
   -------------------------------------------------------------------------- */
#categories.categories-section {
  background:
    radial-gradient(30% 36% at 8% 20%, rgba(255, 205, 0, 0.22), transparent 72%),
    radial-gradient(30% 36% at 92% 30%, rgba(10, 91, 211, 0.14), transparent 72%),
    radial-gradient(34% 40% at 50% 110%, rgba(238, 0, 36, 0.1), transparent 72%),
    linear-gradient(180deg, #f7fbff 0%, #fffdf6 100%);
}
.categories-view-all-link { border-radius: 999px; }

.category-card.home-category-card {
  border-radius: var(--hr-card-radius) !important;
  border: 1px solid rgba(11, 31, 63, 0.07);
  box-shadow: var(--hr-card-shadow);
}
.category-card.home-category-card:hover,
.category-card.home-category-card:focus-visible { box-shadow: var(--hr-card-shadow-hover); }
.home-category-media {
  height: 164px;
  margin: 10px 10px 0;
  border: 0;
  border-radius: var(--hr-photo-radius);
  background:
    radial-gradient(color-mix(in srgb, var(--cat-accent) 22%, transparent) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(150deg, color-mix(in srgb, var(--cat-accent) 26%, white) 0%, color-mix(in srgb, var(--cat-accent-2) 30%, white) 100%);
}
.home-category-media::before { display: none; }
.home-category-main-img {
  box-sizing: border-box;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  margin: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 28px -18px rgba(11, 31, 63, 0.55);
}
.home-category-thumb {
  border-radius: 12px;
  border: 2px solid #fff;
}
.home-category-meta {
  color: #fff;
  background: linear-gradient(135deg, var(--cat-accent), color-mix(in srgb, var(--cat-accent) 70%, #0b1f3f));
}
.home-category-cta { color: color-mix(in srgb, var(--cat-accent) 86%, #0b1f3f); }

/* --------------------------------------------------------------------------
   4. Banners between the grids
   -------------------------------------------------------------------------- */
.home-compat-guide__card,
#new-2026 .new-arrivals-banner {
  border-radius: 28px !important;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   4b. Shopping-entry blocks on the Dutch (/nl/) and UK (/en/) search homepages.
       Same texts and links (search engines see exactly the same content);
       only the presentation changes: colourful panel, photo cards, pill buttons.
   -------------------------------------------------------------------------- */
section#thomas-speelgoed-kiezen {
  padding: clamp(34px, 4vw, 60px) 0 clamp(40px, 4.6vw, 68px);
  background: linear-gradient(180deg, #fffaf0 0%, #f6faff 100%);
}
section#thomas-speelgoed-kiezen > .container,
section#uk-shop-discovery {
  position: relative;
  isolation: isolate;
  border-radius: 34px;
  padding: clamp(28px, 4vw, 54px);
  background:
    radial-gradient(34% 46% at 2% 8%, rgba(255, 205, 0, 0.3), transparent 72%),
    radial-gradient(30% 44% at 98% 12%, rgba(10, 91, 211, 0.16), transparent 72%),
    radial-gradient(34% 40% at 70% 106%, rgba(238, 0, 36, 0.1), transparent 72%),
    linear-gradient(160deg, #eef7ff 0%, #fffdf6 60%, #fff5e6 100%);
  box-shadow: 0 34px 70px -46px rgba(11, 31, 63, 0.5), inset 0 0 0 1px rgba(11, 31, 63, 0.05);
}
section#uk-shop-discovery {
  max-width: 1240px;
  margin: clamp(30px, 4vw, 56px) auto;
  color: var(--hr-ink);
}

/* Heading: centred, bold, with the Thomas tricolour underline. */
section#thomas-speelgoed-kiezen .nl-shopping-entry__heading {
  display: block;
  margin: 0 0 clamp(24px, 2.6vw, 34px);
  text-align: center;
}
section#thomas-speelgoed-kiezen h2,
section#uk-shop-discovery h2 {
  margin: 0;
  color: #0d1f3c;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-align: center;
}
section#thomas-speelgoed-kiezen h2::after,
section#uk-shop-discovery h2::after {
  content: '';
  display: block;
  width: 92px;
  height: 6px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: var(--hr-tricolour);
}
section#uk-shop-discovery h2 { margin-bottom: clamp(24px, 2.6vw, 34px); }
section#thomas-speelgoed-kiezen .nl-shopping-entry__heading p {
  max-width: 620px;
  margin: 16px auto 0;
  color: var(--hr-muted);
  font-size: 1.02rem;
}

/* Choice cards. */
section#thomas-speelgoed-kiezen .nl-shopping-entry__choices,
section#uk-shop-discovery .uk-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
section#thomas-speelgoed-kiezen .nl-shopping-entry__choices > a,
section#uk-shop-discovery .uk-choice-grid > a {
  --kz-a: #eaf4ff; --kz-b: #cfe6ff; --kz-acc: #0a5bd3; --kz-acc2: #0748a8; --kz-ink: #0a3f8f;
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 18px;
  border: 0;
  border-radius: var(--hr-card-radius);
  color: var(--hr-ink);
  background: linear-gradient(180deg, var(--kz-a) 0, var(--kz-b) 178px, #fff 178px);
  box-shadow: var(--hr-card-shadow);
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
section#thomas-speelgoed-kiezen .nl-shopping-entry__choices > a::before,
section#uk-shop-discovery .uk-choice-grid > a::before {
  content: '';
  display: block;
  box-sizing: border-box;
  height: 154px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #fff center / contain no-repeat;
  background-origin: content-box;
  box-shadow: 0 16px 28px -18px rgba(11, 31, 63, 0.55);
}
section#thomas-speelgoed-kiezen .nl-shopping-entry__choices > a:hover,
section#thomas-speelgoed-kiezen .nl-shopping-entry__choices > a:focus-visible,
section#uk-shop-discovery .uk-choice-grid > a:hover,
section#uk-shop-discovery .uk-choice-grid > a:focus-visible {
  color: var(--hr-ink);
  text-decoration: none;
  transform: translateY(-6px);
  box-shadow: var(--hr-card-shadow-hover);
}
section#thomas-speelgoed-kiezen .nl-shopping-entry__choices > a strong,
section#uk-shop-discovery .uk-choice-grid > a h3 {
  margin: 0 4px;
  color: var(--kz-ink);
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.25;
}
section#thomas-speelgoed-kiezen .nl-shopping-entry__choices > a > span:not(.nl-shopping-entry__action),
section#uk-shop-discovery .uk-choice-grid > a p {
  margin: 0 4px;
  color: var(--hr-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
section#thomas-speelgoed-kiezen .nl-shopping-entry__choices .nl-shopping-entry__action {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin: auto 4px 0;
  padding: 10px 16px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--kz-acc), var(--kz-acc2));
  box-shadow: 0 12px 22px -14px var(--kz-acc);
  font-size: 0.9rem;
  font-weight: 850;
}
section#thomas-speelgoed-kiezen .nl-shopping-entry__action span { color: inherit; font-size: inherit; line-height: inherit; }
section#thomas-speelgoed-kiezen .nl-shopping-entry__choices > a:hover .nl-shopping-entry__action { filter: brightness(1.08); }
/* UK cards have no action label: a round arrow button in the card colour instead. */
section#uk-shop-discovery .uk-choice-grid > a::after {
  content: '';
  align-self: flex-end;
  width: 40px;
  height: 40px;
  margin: auto 4px 0;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat, linear-gradient(135deg, var(--kz-acc), var(--kz-acc2));
  box-shadow: 0 12px 22px -14px var(--kz-acc);
}

/* One colour and one real product photo per kind of toy. */
:is(section#thomas-speelgoed-kiezen .nl-shopping-entry__choices, section#uk-shop-discovery .uk-choice-grid) > a[href*="/trains-engines/"]::before { background-image: url("assets/images/products/JLW25-1.jpg"); }
:is(section#thomas-speelgoed-kiezen .nl-shopping-entry__choices, section#uk-shop-discovery .uk-choice-grid) > a[href*="/track-sets/"] {
  --kz-a: #eafaf0; --kz-b: #c9efd8; --kz-acc: #17964f; --kz-acc2: #0f6f3a; --kz-ink: #0f5f33;
}
:is(section#thomas-speelgoed-kiezen .nl-shopping-entry__choices, section#uk-shop-discovery .uk-choice-grid) > a[href*="/track-sets/"]::before { background-image: url("assets/images/products/BMN-24028.jpg"); }
:is(section#thomas-speelgoed-kiezen .nl-shopping-entry__choices, section#uk-shop-discovery .uk-choice-grid) > a[href*="/playsets/"] {
  --kz-a: #fff4e2; --kz-b: #ffdcae; --kz-acc: #f28c00; --kz-acc2: #d86a00; --kz-ink: #a34f00;
}
:is(section#thomas-speelgoed-kiezen .nl-shopping-entry__choices, section#uk-shop-discovery .uk-choice-grid) > a[href*="/playsets/"]::before { background-image: url("assets/images/products/JLL36-1.jpg"); }
:is(section#thomas-speelgoed-kiezen .nl-shopping-entry__choices, section#uk-shop-discovery .uk-choice-grid) > a[href*="/bachmann/"] {
  --kz-a: #f3efff; --kz-b: #ddd3ff; --kz-acc: #6d4cd6; --kz-acc2: #4f2fb3; --kz-ink: #43289c;
}
:is(section#thomas-speelgoed-kiezen .nl-shopping-entry__choices, section#uk-shop-discovery .uk-choice-grid) > a[href*="/bachmann/"]::before { background-image: url("assets/images/products/BMN-58741BE-2.jpg"); }
:is(section#thomas-speelgoed-kiezen .nl-shopping-entry__choices, section#uk-shop-discovery .uk-choice-grid) > a[href*="/motorized/"] {
  --kz-a: #fff0f1; --kz-b: #ffd3d9; --kz-acc: #ee0024; --kz-acc2: #c4001d; --kz-ink: #a30018;
}
:is(section#thomas-speelgoed-kiezen .nl-shopping-entry__choices, section#uk-shop-discovery .uk-choice-grid) > a[href*="/motorized/"]::before { background-image: url("assets/images/products/JLL45-1.jpg"); }
:is(section#thomas-speelgoed-kiezen .nl-shopping-entry__choices, section#uk-shop-discovery .uk-choice-grid) > a[href*="/push-along/"] {
  --kz-a: #fff8dc; --kz-b: #ffe79a; --kz-acc: #e0a800; --kz-acc2: #b88600; --kz-ink: #7a5a00;
}
:is(section#thomas-speelgoed-kiezen .nl-shopping-entry__choices, section#uk-shop-discovery .uk-choice-grid) > a[href*="/push-along/"]::before { background-image: url("assets/images/products/JPL67-thomas.jpg"); }

/* Help links as friendly pills. */
section#thomas-speelgoed-kiezen .nl-shopping-entry__help {
  justify-content: center;
  gap: 10px 12px;
  margin-top: clamp(22px, 2.4vw, 30px);
  padding-top: 0;
  border-top: 0;
}
section#thomas-speelgoed-kiezen .nl-shopping-entry__help a,
section#uk-shop-discovery > p:last-child a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  color: #0a3f8f;
  background: #fff;
  box-shadow: 0 10px 22px -16px rgba(11, 31, 63, 0.55), inset 0 0 0 1px rgba(10, 91, 211, 0.12);
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
}
section#thomas-speelgoed-kiezen .nl-shopping-entry__help a::before {
  content: '';
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--hr-yellow);
  box-shadow: 0 0 0 3px rgba(255, 205, 0, 0.25);
}
section#thomas-speelgoed-kiezen .nl-shopping-entry__help a:nth-child(2)::before { background: var(--hr-blue); box-shadow: 0 0 0 3px rgba(10, 91, 211, 0.18); }
section#thomas-speelgoed-kiezen .nl-shopping-entry__help a:nth-child(3)::before { background: var(--hr-red); box-shadow: 0 0 0 3px rgba(238, 0, 36, 0.16); }
section#thomas-speelgoed-kiezen .nl-shopping-entry__help a:hover,
section#uk-shop-discovery > p:last-child a:hover {
  color: #fff;
  background: var(--hr-blue);
  text-decoration: none;
}
section#uk-shop-discovery > p {
  margin: clamp(20px, 2.2vw, 28px) 0 0;
  color: var(--hr-muted);
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.8;
}
section#uk-shop-discovery > p a { color: #0a3f8f; font-weight: 800; text-underline-offset: 4px; }
section#uk-shop-discovery > p:last-child { margin-top: 14px; }

@media (max-width: 1024px) {
  section#thomas-speelgoed-kiezen .nl-shopping-entry__choices,
  section#uk-shop-discovery .uk-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  section#thomas-speelgoed-kiezen { padding: 26px 0 34px; }
  section#thomas-speelgoed-kiezen > .container,
  section#uk-shop-discovery { margin-inline: 12px; padding: 24px 14px 22px; border-radius: 26px; }
  section#uk-shop-discovery { margin-block: 26px; }
  section#thomas-speelgoed-kiezen h2,
  section#uk-shop-discovery h2 { font-size: clamp(1.65rem, 7.4vw, 2rem); }
  section#thomas-speelgoed-kiezen .nl-shopping-entry__heading p { font-size: 0.95rem; }
  section#thomas-speelgoed-kiezen .nl-shopping-entry__choices,
  section#uk-shop-discovery .uk-choice-grid { grid-template-columns: 1fr; gap: 12px; }
  /* Compact horizontal cards: photo tile left, text right. */
  section#thomas-speelgoed-kiezen .nl-shopping-entry__choices > a,
  section#uk-shop-discovery .uk-choice-grid > a {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    padding: 10px 12px 10px 10px;
    background: linear-gradient(90deg, var(--kz-a) 0, var(--kz-b) 116px, #fff 116px);
  }
  section#thomas-speelgoed-kiezen .nl-shopping-entry__choices > a::before,
  section#uk-shop-discovery .uk-choice-grid > a::before {
    grid-row: 1 / span 3;
    grid-column: 1;
    width: 96px;
    height: 96px;
    margin: 0;
    padding: 8px;
    border-radius: 14px;
  }
  section#thomas-speelgoed-kiezen .nl-shopping-entry__choices > a > *,
  section#uk-shop-discovery .uk-choice-grid > a > * { grid-column: 2; }
  section#thomas-speelgoed-kiezen .nl-shopping-entry__choices > a strong,
  section#uk-shop-discovery .uk-choice-grid > a h3 { margin: 0; font-size: 1.05rem; }
  section#thomas-speelgoed-kiezen .nl-shopping-entry__choices > a > span:not(.nl-shopping-entry__action),
  section#uk-shop-discovery .uk-choice-grid > a p { margin: 0; font-size: 0.86rem; line-height: 1.45; }
  section#thomas-speelgoed-kiezen .nl-shopping-entry__choices .nl-shopping-entry__action { margin: 4px 0 0; padding: 7px 12px; font-size: 0.82rem; }
  section#uk-shop-discovery .uk-choice-grid > a::after { display: none; }
  section#thomas-speelgoed-kiezen .nl-shopping-entry__help { flex-direction: column; align-items: stretch; }
  section#thomas-speelgoed-kiezen .nl-shopping-entry__help a { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   5. Sodor Mail newsletter
   -------------------------------------------------------------------------- */
#newsletter.newsletter--sodor-mail {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 8vw, 116px);
  color: var(--hr-ink);
  background:
    radial-gradient(40% 50% at 12% 18%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(30% 40% at 88% 14%, rgba(255, 236, 153, 0.7), transparent 72%),
    linear-gradient(180deg, #4db3ff 0%, #2a8ff0 46%, #1566d6 100%) !important;
}
#newsletter.newsletter--sodor-mail::before,
#newsletter.newsletter--sodor-mail::after { content: none !important; }

.sodor-mail__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Fluffy clouds: one round puff plus four shadow puffs, softly shaded underneath. */
.sodor-mail__sky span {
  position: absolute;
  display: block;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff 0 58%, #eaf5ff 100%);
  box-shadow:
    62px 18px 0 -8px #fff,
    118px 26px 0 -20px #f4faff,
    -48px 26px 0 -16px #f4faff,
    28px 34px 0 -4px #fff,
    84px 40px 0 -14px #eef7ff;
  opacity: 0.9;
}
.sodor-mail__sky span:nth-child(1) { top: 7%; left: 5%; }
.sodor-mail__sky span:nth-child(2) { top: 12%; right: 12%; transform: scale(0.7); opacity: 0.8; }
.sodor-mail__sky span:nth-child(3) { bottom: 6%; left: 58%; transform: scale(0.55); opacity: 0.65; }

.sodor-mail__postcard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(34px, 4vw, 58px);
  border-radius: 34px;
  color: var(--hr-ink);
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(255, 205, 0, 0.14), transparent 70%),
    linear-gradient(180deg, #fffdf6 0%, #fff8ea 100%);
  box-shadow: 0 50px 90px -40px rgba(4, 30, 74, 0.7), 0 18px 36px -18px rgba(4, 30, 74, 0.35);
}
/* Air-mail border: red, white and blue stripes all the way round. */
.sodor-mail__postcard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 12px;
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, #ee0024 0 16px, #fffdf6 16px 30px, #0a5bd3 30px 46px, #fffdf6 46px 60px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* Dashed middle line, like the back of a real postcard. */
.sodor-mail__postcard::after {
  content: '';
  position: absolute;
  top: 58px;
  bottom: 58px;
  left: calc(52% + 6px);
  width: 0;
  border-left: 2px dashed rgba(19, 35, 60, 0.14);
  pointer-events: none;
}

.sodor-mail__photos {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 10px 26px 44px 6px;
}
.sodor-mail__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 10px solid #fff;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 50px -28px rgba(11, 31, 63, 0.65), 0 2px 8px rgba(11, 31, 63, 0.12);
}
.sodor-mail__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.sodor-mail__photo--main {
  aspect-ratio: 1000 / 671;
  transform: rotate(-2.2deg);
}
/* The Tom Tipper still has a black film frame: crop it away without editing the file. */
.sodor-mail__photo--main img { transform: scale(1.055); }
.sodor-mail__photo--second {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 3 / 2;
  border-width: 7px;
  border-radius: 18px;
  transform: rotate(4deg);
}
.sodor-mail__photo--second img { border-radius: 10px; }

.sodor-mail__postmark {
  position: absolute;
  z-index: 3;
  top: -18px;
  right: 6px;
  width: 112px;
  height: 112px;
  color: rgba(196, 0, 29, 0.78);
  transform: rotate(12deg);
  pointer-events: none;
}
.sodor-mail__postmark svg { width: 100%; height: 100%; overflow: visible; }
.sodor-mail__credit {
  position: absolute;
  left: 12px;
  bottom: 9px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: rgba(8, 20, 40, 0.5);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.sodor-mail__message {
  position: relative;
  z-index: 1;
}
/* The stamp floats top-right, so kicker and title flow around it in every language. */
.sodor-mail__stamp {
  position: relative;
  float: right;
  margin: -10px -6px 14px 22px;
  width: 84px;
  padding: 9px;
  background: transparent;
  transform: rotate(5deg);
  filter: drop-shadow(0 10px 14px rgba(11, 31, 63, 0.25));
}
/* Perforated edge: a solid centre plus a ring of half-holes along the four sides. */
.sodor-mail__stamp::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  -webkit-mask:
    linear-gradient(#000 0 0) 50% 50% / calc(100% - 10px) calc(100% - 10px) no-repeat,
    radial-gradient(circle 3.4px at 5px 5px, #0000 96%, #000) -5px -5px / 10px 10px round;
  mask:
    linear-gradient(#000 0 0) 50% 50% / calc(100% - 10px) calc(100% - 10px) no-repeat,
    radial-gradient(circle 3.4px at 5px 5px, #0000 96%, #000) -5px -5px / 10px 10px round;
}
.sodor-mail__stamp img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}
.sodor-mail__stamp b {
  display: block;
  padding-top: 5px;
  color: var(--hr-red);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-align: center;
}

#newsletter .sodor-mail__kicker {
  margin: 0 0 14px;
  color: var(--hr-red);
  opacity: 1;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#newsletter .sodor-mail__title {
  margin: 0;
  color: #0d1f3c;
  text-shadow: none;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 2.9vw, 3.05rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
#newsletter .sodor-mail__title::after { content: none !important; display: none !important; }
#newsletter .sodor-mail__subtitle {
  max-width: 560px;
  margin: 18px 0 0;
  color: #4b5b74;
  opacity: 1;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.04rem;
  line-height: 1.62;
}

#newsletter .newsletter-inline-form {
  clear: both;
  max-width: none;
  margin-top: 26px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#newsletter .newsletter-inline-form input[type="email"] {
  min-height: 56px;
  padding: 0 20px;
  border: 2px solid rgba(19, 35, 60, 0.14);
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(11, 31, 63, 0.05);
}
#newsletter .newsletter-inline-form input[type="email"]:focus {
  outline: none;
  border-color: var(--hr-blue);
  box-shadow: 0 0 0 5px rgba(10, 91, 211, 0.16);
}
#newsletter .newsletter-inline-form .btn {
  min-height: 56px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ff1a3c 0%, #c4001d 100%);
  box-shadow: 0 18px 30px -16px rgba(238, 0, 36, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-weight: 900;
}
#newsletter .newsletter-inline-form .btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
#newsletter .newsletter-inline-form label[for="newsletter-inline-email"] { color: #13233c !important; }
#newsletter .newsletter-inline-form .newsletter-inline-badges span::before { background: var(--hr-green); }

.sodor-mail__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.sodor-mail__perks span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #13233c;
  background: #fff;
  box-shadow: 0 8px 18px -12px rgba(11, 31, 63, 0.45);
  font-size: 0.78rem;
  font-weight: 800;
}
.sodor-mail__perks span::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hr-yellow);
  box-shadow: 0 0 0 3px rgba(255, 205, 0, 0.25);
}
.sodor-mail__perks span + span::before {
  background: var(--hr-blue);
  box-shadow: 0 0 0 3px rgba(10, 91, 211, 0.18);
}

/* --------------------------------------------------------------------------
   5b. Homepage slideshow: lower and more compact, less text, richer visuals
   -------------------------------------------------------------------------- */
#classic-cgi-feature .home-cgi-slideshow { min-height: 520px; }
#classic-cgi-feature .home-cgi-feature-inner {
  min-height: 520px;
  grid-template-columns: minmax(0, 0.8fr) minmax(520px, 1.2fr);
  gap: clamp(22px, 3vw, 44px);
  padding: 46px 24px 84px;
}
#classic-cgi-feature .home-cgi-copy > p,
#classic-cgi-feature .home-cgi-note { display: none; }
#classic-cgi-feature .home-cgi-copy h2 {
  margin-bottom: 22px;
  font-size: clamp(2.1rem, 3.1vw, 2.75rem);
  line-height: 1.04;
}
#classic-cgi-feature .home-cgi-kicker { margin-bottom: 14px; }
#classic-cgi-feature .home-cgi-actions .btn { border-radius: 999px; }

/* Bigger, rounded photo with a soft glow ring. */
#classic-cgi-feature .home-cgi-photo-shell--feature {
  border-radius: 26px !important;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75), 0 0 0 6px rgba(255, 255, 255, 0.12), 0 0 60px -10px rgba(255, 205, 0, 0.25) !important;
}
#classic-cgi-feature .home-cgi-photo-shell--feature img { border-radius: 0 !important; }

/* Product mini cards: white rounded photo tiles that overlap the bottom of the photo. */
#classic-cgi-feature .home-feature-mini-rail {
  position: relative;
  z-index: 3;
  width: calc(100% - 36px);
  margin: -58px auto 0;
  gap: 12px;
}
#classic-cgi-feature .home-feature-mini-card {
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #13233c;
  box-shadow: 0 22px 40px -22px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
#classic-cgi-feature .home-feature-mini-card:hover,
#classic-cgi-feature .home-feature-mini-card:focus-visible { transform: translateY(-4px); }
#classic-cgi-feature .home-feature-mini-card img {
  margin: 8px 8px 0;
  width: calc(100% - 16px);
  border-radius: 12px;
  background: #fff;
}
#classic-cgi-feature .home-feature-mini-card span { color: #13233c; }
#classic-cgi-feature .home-feature-controls { bottom: 22px; }
#classic-cgi-feature .home-cgi-art { width: min(660px, 100%); }
/* Less text on the photos; the rights credit moves to the free sky at the top. */
#classic-cgi-feature .home-feature-image-label { display: none !important; }
#classic-cgi-feature .series-media-credit { top: 10px; bottom: auto; right: 12px; }

@media (max-width: 1100px) {
  #classic-cgi-feature .home-cgi-feature-inner { grid-template-columns: 1fr; padding: 40px 24px 84px; }
  #classic-cgi-feature .home-cgi-art { justify-self: stretch; width: 100%; }
}

@media (max-width: 640px) {
  #classic-cgi-feature .home-cgi-slideshow,
  #classic-cgi-feature .home-cgi-feature-inner { min-height: 0; }
  #classic-cgi-feature .home-cgi-feature-inner { gap: 18px; padding: 30px 18px 76px; }
  #classic-cgi-feature .home-cgi-copy h2 { margin-bottom: 16px; font-size: clamp(1.75rem, 7.6vw, 2.1rem); }
  #classic-cgi-feature .home-cgi-kicker { margin-bottom: 10px; }
  #classic-cgi-feature .home-cgi-actions { display: flex; gap: 10px; }
  #classic-cgi-feature .home-cgi-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 10px 12px;
    font-size: 0.92rem;
    text-align: center;
    white-space: normal;
  }
  #classic-cgi-feature .home-feature-link-row { display: none !important; }
  #classic-cgi-feature .home-cgi-photo-shell--feature { border-radius: 20px !important; }
  #classic-cgi-feature .home-feature-mini-rail { width: calc(100% - 20px); margin-top: -40px; gap: 8px; }
  #classic-cgi-feature .home-feature-mini-card { border-radius: 14px; }
  #classic-cgi-feature .home-feature-mini-card img { margin: 6px 6px 0; width: calc(100% - 12px); border-radius: 10px; }
}

/* --------------------------------------------------------------------------
   6. Phones: products sooner, compact hero, stacked postcard
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .sodor-mail__postcard {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 30px 26px 30px;
  }
  .sodor-mail__postcard::after { display: none; }
  .sodor-mail__photos { max-width: 560px; margin: 0 auto; padding: 8px 18px 40px 6px; }
  .sodor-mail__message { padding-right: 0; }
}

@media (max-width: 640px) {
  .hero { padding-top: 26px !important; padding-bottom: 34px !important; min-height: 0 !important; }
  .hero .hero-text > img[alt="Thomas & Friends"] { max-width: 150px !important; margin-bottom: 10px !important; }
  .hero .hero-brand-lockup { gap: 12px !important; margin-bottom: 16px !important; }
  .hero .hero-brand-medallion { width: 46px !important; height: 46px !important; border-width: 2px !important; }
  .hero .hero-brand-name { font-size: 1.35rem !important; }
  .hero .hero-brand-sub { font-size: 0.72rem !important; letter-spacing: 2.6px !important; }
  .hero h1 { margin-bottom: 12px !important; }
  .hero .hero-text > p { margin-bottom: 18px !important; font-size: 0.95rem !important; line-height: 1.55 !important; }
  .hero .hero-buttons { gap: 10px !important; margin-bottom: 16px !important; }
  .hero .hero-stats { gap: 10px !important; margin-top: 0 !important; }
  .hero .hero-stat { padding: 10px 12px !important; }
  .hero .hero-youtube-feature { gap: 10px !important; margin-top: 14px !important; }
  .hero .hero-scroll-indicator { display: none !important; }

  /* YouTube card as one compact row: channel identity left, red play button right. */
  .hero .hero-youtube-card {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 18px;
  }
  .hero .hero-youtube-topline,
  .hero .hero-youtube-action-copy,
  .hero .hero-youtube-action-arrow { display: none; }
  .hero .hero-youtube-identity { flex: 1; min-width: 0; gap: 11px; }
  .hero .hero-youtube-avatar { width: 48px; height: 48px; }
  .hero .hero-youtube-avatar-badge { width: 22px; height: 22px; right: -6px; bottom: -5px; }
  .hero .hero-youtube-name strong { font-size: 1.08rem; }
  .hero .hero-youtube-action {
    flex: 0 0 auto;
    min-height: 0;
    padding: 9px 12px;
    border-radius: 999px;
  }

  /* All delivery countries in two tidy rows of flags. */
  .hero .hero-shipping-card { gap: 9px; padding: 11px 12px; border-radius: 16px; }
  .hero .hero-shipping-flags { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
  .hero .hero-shipping-country { height: 32px; padding: 0; border-radius: 9px; }
  .hero .hero-shipping-country > span { font-size: 1.25rem; }
  .hero .hero-shipping-country small { display: none; }
  .hero .hero-shipping-coming-soon { min-height: 22px; }

  /* 2026 rail: title, then the products, then the "whole collection" button. */
  .home-2026-rail { display: flex; flex-direction: column; padding-top: 30px; padding-bottom: 50px; }
  .home-2026-rail__header { display: contents; }
  .home-2026-rail__copy { order: 1; margin-bottom: 12px; padding-inline: 20px; }
  .home-2026-rail__viewport { order: 2; padding-top: 6px; }
  .home-2026-rail__all { order: 3; align-self: center; width: auto; margin: 2px 20px 0; }
  .home-2026-rail__copy h2 { font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .home-2026-rail__copy h2::after { margin-top: 12px; }
  .home-2026-rail__copy p { font-size: 0.95rem; }

  :is(#featured, #new-arrivals) .product-image { margin: 6px 6px 0; }
  :is(#featured, #new-arrivals) .product-image.has-image img,
  :is(#featured, #new-arrivals) .product-image img {
    width: calc(100% - 10px) !important;
    height: calc(100% - 10px) !important;
    margin: 5px;
    padding: 2px !important;
    border-radius: 11px;
  }
  :is(#featured, #new-arrivals) .product-card { border-radius: 20px !important; }
  :is(#featured, #new-arrivals) .product-info { padding: 12px 12px 14px; }

  #newsletter.newsletter--sodor-mail { padding: 44px 0 56px; }
  .sodor-mail__postcard { border-radius: 26px; padding: 26px 18px 24px; }
  .sodor-mail__postcard::before { padding: 9px; }
  .sodor-mail__photos { padding: 4px 12px 34px 2px; }
  .sodor-mail__postmark { width: 84px; height: 84px; top: -14px; right: 0; }
  .sodor-mail__stamp { width: 64px; margin: -6px -4px 10px 14px; padding: 7px; }
  .sodor-mail__credit { top: 8px; bottom: auto; left: 8px; font-size: 0.56rem; }
  #newsletter .sodor-mail__title { font-size: clamp(2rem, 9vw, 2.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  :is(#featured, #new-arrivals) .product-card:hover .product-image img { transform: none; }
}

/* Dutch gift-set discovery — 21 September 2026. Plain links also work without JavaScript. */
section#thomas-speelgoed-kiezen .nl-shopping-entry__bundles { margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(10,91,211,.15); text-align: center; }
section#thomas-speelgoed-kiezen .nl-shopping-entry__bundles h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.35; color: #0a3f8f; }
section#thomas-speelgoed-kiezen .nl-shopping-entry__bundles .nl-shopping-entry__help { margin-top: 16px; }
section#thomas-speelgoed-kiezen .nl-shopping-entry__bundles a { padding-top: 10px; padding-bottom: 10px; text-align: left; }

/* Tom Westerman — homepage founder introduction, 21 September 2026. */
.home-tom-story{padding:72px 0;background:#eef5fa;color:#153954}
.home-tom-story-inner{display:grid;grid-template-columns:280px minmax(0,700px);justify-content:center;gap:56px;align-items:center}
.home-tom-portrait{display:block;border-radius:24px;overflow:hidden;box-shadow:0 12px 36px #15395418}
.home-tom-portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.home-tom-story h2{font-size:clamp(28px,3vw,42px);line-height:1.18;letter-spacing:-.6px;color:#153954;margin:8px 0 18px}
.home-tom-story p{font-size:18px;line-height:1.75;color:#344b60}
.home-tom-story .home-tom-kicker{font-size:13px;letter-spacing:1.8px;text-transform:uppercase;font-weight:800;color:#00609a;margin:0}
.home-tom-link{display:inline-flex;align-items:center;min-height:48px;font-size:17px;font-weight:800;color:#0057a9;text-decoration:underline;text-underline-offset:5px;margin-top:12px}
.home-tom-story a:focus-visible{outline:3px solid #cc9310;outline-offset:6px}
@media(max-width:700px){.home-tom-story{padding:44px 0}.home-tom-story-inner{grid-template-columns:1fr;gap:26px}.home-tom-portrait{width:190px}.home-tom-story p{font-size:17px}}

/* --------------------------------------------------------------------------
   7. Homepage slideshow on phones: compact card — 4 October 2026
   Applies only up to 768px; desktop and tablet (769px and wider) keep every
   rule above unchanged. Phones get a stacked card, landscape phones and small
   tablets (600–768px) two columns. Layout and styling only: no text, links,
   products or images change. The secondary button becomes a text link in the
   bottom row next to the slide dots, so it no longer costs a row of its own.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* A rounded card with a crisp edge instead of the tall fade. */
  #classic-cgi-feature.home-cgi-feature {
    margin: 8px 12px 10px;
    border-radius: 26px;
    clip-path: inset(0 round 26px);
  }
  #classic-cgi-feature.home-cgi-feature::after { display: none !important; }
  #classic-cgi-feature .home-cgi-slideshow,
  #classic-cgi-feature .home-cgi-feature-inner { min-height: 0 !important; }
  #classic-cgi-feature .home-cgi-slide { display: flex; flex-direction: column; }
  #classic-cgi-feature .home-cgi-feature-inner {
    flex: 1 1 auto;
    gap: 14px;
    padding: 20px 16px 56px !important;
  }

  /* Copy: small kicker, a two-line title and one clear button. */
  #classic-cgi-feature .home-cgi-copy { position: static; }
  #classic-cgi-feature .home-cgi-kicker {
    gap: 7px;
    margin-bottom: 7px !important;
    font-size: 0.64rem !important;
    line-height: 1.3;
  }
  #classic-cgi-feature .home-cgi-copy h2 {
    max-width: none;
    margin: 0 0 13px !important;
    font-size: clamp(1.3rem, 5.8vw, 1.6rem) !important;
    line-height: 1.12 !important;
    text-wrap: balance;
  }
  #classic-cgi-feature .home-cgi-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center !important;
    gap: 8px !important;
  }
  #classic-cgi-feature .home-cgi-actions .btn-yellow {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    min-height: 42px;
    padding: 9px 18px !important;
    gap: 7px;
    font-size: 0.86rem;
    line-height: 1.2;
    white-space: normal;
    text-align: left;
    box-shadow: 0 10px 22px -12px rgba(255, 205, 0, 0.6);
  }
  #classic-cgi-feature .home-cgi-actions .btn-yellow svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
  }
  /* As on phones up to 640px already: the extra link chips stay hidden. */
  #classic-cgi-feature .home-feature-link-row { display: none !important; }

  /* Secondary button: a light text link at the right of the bottom row. */
  #classic-cgi-feature .home-cgi-actions .home-cgi-secondary {
    position: absolute;
    right: 14px;
    bottom: 10px;
    z-index: 5;
    width: auto;
    max-width: calc(100% - 182px);
    min-height: 36px;
    padding: 0 2px !important;
    gap: 7px;
    border: 0 !important;
    border-radius: 8px;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff !important;
    font-size: 0.8rem;
    font-weight: 800;
    justify-content: flex-end;
  }
  #classic-cgi-feature .home-cgi-actions .home-cgi-secondary:hover,
  #classic-cgi-feature .home-cgi-actions .home-cgi-secondary:focus-visible { transform: none; }
  #classic-cgi-feature .home-cgi-actions .home-cgi-secondary:focus-visible {
    outline: 2px solid #ffcd00;
    outline-offset: 2px;
  }
  #classic-cgi-feature .home-cgi-secondary span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(255, 205, 0, 0.7);
    text-underline-offset: 4px;
  }
  #classic-cgi-feature .home-cgi-secondary::after {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin: 0 3px 0 -1px;
    border-top: 2px solid #ffcd00;
    border-right: 2px solid #ffcd00;
    transform: rotate(45deg);
  }

  /* Photo with the product tiles over its lower edge, anchored above the bottom row
     so the tiles stay in the same place on every slide. */
  #classic-cgi-feature .home-cgi-art {
    width: 100% !important;
    margin: auto 0 0 !important;
    overflow: visible !important;
    gap: 0;
  }
  #classic-cgi-feature .home-cgi-photo-shell--feature {
    aspect-ratio: 16 / 9 !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.85), 0 0 0 4px rgba(255, 255, 255, 0.1) !important;
  }
  /* The kicker already says "new series"; keep the small photo calm. */
  #classic-cgi-feature .home-rs-badge { display: none; }
  #classic-cgi-feature .home-cgi-slide .home-feature-mini-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    justify-content: stretch;
    overflow: visible;
    scroll-snap-type: none;
    width: calc(100% - 20px);
    margin: -28px auto 0;
    padding: 0;
    gap: 7px;
  }
  #classic-cgi-feature .home-cgi-slide--railway-stories .home-feature-mini-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #classic-cgi-feature .home-feature-mini-card {
    border-radius: 14px;
    box-shadow: 0 14px 24px -14px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.6);
  }
  #classic-cgi-feature .home-feature-mini-card img {
    display: block;
    margin: 5px 5px 0;
    width: calc(100% - 10px);
    border-radius: 10px;
  }
  #classic-cgi-feature .home-cgi-slide--railway-stories .home-feature-mini-card img {
    aspect-ratio: 1 / 1;
    padding: 3px;
  }
  #classic-cgi-feature .home-feature-mini-card span {
    padding: 6px 7px 7px;
    font-size: 0.66rem;
  }
  #classic-cgi-feature .home-feature-mini-card--anniversary span { padding-right: 7px; }
  #classic-cgi-feature .home-feature-mini-card--anniversary .home-feature-product-arrow {
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
  }

  /* Bottom row: compact dots on the left, spaced so each has a thumb-sized tap area. */
  #classic-cgi-feature .home-feature-controls {
    left: 14px;
    right: auto;
    bottom: 12px;
    width: auto;
    transform: none;
    justify-content: flex-start;
  }
  #classic-cgi-feature .home-feature-dots-wrap {
    min-height: 32px;
    padding: 0 11px;
    gap: 9px;
    border-radius: 999px;
    background: rgba(4, 17, 32, 0.4);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
  }
  #classic-cgi-feature .home-feature-dots { gap: 14px; }
  #classic-cgi-feature .home-feature-dot {
    position: relative;
    width: 7px;
    height: 7px;
  }
  #classic-cgi-feature .home-feature-dot.is-active {
    width: 20px;
    transform: none;
  }
  #classic-cgi-feature .home-feature-dot::before {
    content: '';
    position: absolute;
    inset: -12px -7px;
  }
  #classic-cgi-feature .home-feature-progress { width: 30px; }
}

/* Phones: tiles show only the product photo; names stay available to screen readers. */
@media (max-width: 480px) {
  #classic-cgi-feature .home-feature-mini-card img { margin: 5px; }
  #classic-cgi-feature .home-feature-mini-card span {
    position: absolute !important;
    width: 1px;
    height: 1px;
    min-height: 0 !important;
    margin: -1px;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Small phones: a little more room for the text. */
@media (max-width: 374px) {
  #classic-cgi-feature.home-cgi-feature { margin-inline: 8px; }
  #classic-cgi-feature .home-cgi-feature-inner { padding-inline: 14px !important; }
  #classic-cgi-feature .home-cgi-actions .btn-yellow { padding-inline: 16px !important; }
  #classic-cgi-feature .home-feature-progress { display: none; }
  #classic-cgi-feature .home-cgi-actions .home-cgi-secondary { max-width: calc(100% - 146px); }
}

/* Landscape phones and small tablets: copy beside the photo. */
@media (min-width: 600px) and (max-width: 768px) {
  #classic-cgi-feature.home-cgi-feature { margin: 10px 18px 12px; }
  #classic-cgi-feature .home-cgi-feature-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 0 22px;
    padding: 22px 20px 58px !important;
  }
  #classic-cgi-feature .home-cgi-copy h2 { font-size: clamp(1.4rem, 3.6vw, 1.75rem) !important; }
  #classic-cgi-feature .home-cgi-art { margin: 0 !important; }
  #classic-cgi-feature .home-feature-mini-card img { margin: 5px; }
  #classic-cgi-feature .home-feature-mini-card span {
    position: absolute !important;
    width: 1px;
    height: 1px;
    min-height: 0 !important;
    margin: -1px;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* --------------------------------------------------------------------------
   8. Homepage hero on phones: compact intro — 4 October 2026
   Applies only up to 768px; desktop and tablet (769px and wider) keep every
   rule above unchanged. Phones: logo and store name share one row, then the
   title, a short intro, two slim buttons, the stats as pills, a compact
   YouTube row and one slim delivery row ("Delivery to 16 countries").
   600–768px: text on the left, the two rows on the right. Layout and styling
   only: no text, links or images change; the country list stays in the page.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  section.hero {
    min-height: 0 !important;
    padding: 16px 0 22px !important;
  }
  section.hero .hero-scroll-indicator { display: none !important; }
  section.hero .hero-content {
    gap: 14px !important;
    text-align: left;
  }

  /* Logo and store name on one row; title, intro, buttons and stats below.
     The logo is picked by position: its alt text is translated per language. */
  section.hero .hero-text {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    text-align: left;
  }
  section.hero .hero-text > * { grid-column: 1 / -1; }
  section.hero .hero-text > img:first-child {
    grid-column: 1;
    width: 108px !important;
    max-width: 108px !important;
    height: auto !important;
    margin: 0 !important;
  }
  section.hero .hero-brand-lockup {
    grid-column: 2;
    justify-content: flex-start !important;
    gap: 9px !important;
    min-width: 0;
    margin: 0 !important;
  }
  section.hero .hero-brand-medallion {
    width: 34px !important;
    height: 34px !important;
    border-width: 2px !important;
  }
  section.hero .hero-brand-name {
    max-width: none;
    font-size: 1.02rem !important;
    line-height: 1.12 !important;
  }
  section.hero .hero-brand-sub {
    margin-top: 3px !important;
    font-size: 0.56rem !important;
    letter-spacing: 2px !important;
  }
  section.hero .hero-brand-sub::before {
    width: 14px;
    height: 4px;
    margin-right: 6px;
  }
  section.hero .hero-text h1 {
    margin: 14px 0 8px !important;
    font-size: clamp(1.45rem, 6.6vw, 1.95rem) !important;
    line-height: 1.08 !important;
    text-align: left;
    text-wrap: balance;
  }
  section.hero .hero-text > p {
    max-width: 36em;
    margin: 0 0 14px !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    text-align: left;
  }

  /* Two slim buttons. */
  section.hero .hero-buttons {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px !important;
    margin: 0 0 12px !important;
  }
  section.hero .hero-buttons .btn {
    width: 100%;
    margin: 0 !important;
    justify-content: center;
  }
  section.hero .hero-buttons .hero-cta-primary {
    min-height: 48px;
    padding: 11px 18px !important;
    font-size: 1rem !important;
  }
  section.hero .hero-buttons .hero-cta-2026 {
    min-height: 44px;
    padding: 7px 12px !important;
    font-size: 0.95rem !important;
  }
  section.hero .hero-cta-2026-badge {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 0.62rem;
  }

  /* Stats as two slim pills: number and label on one line. */
  section.hero .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  section.hero .hero-stat {
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
  }
  section.hero .hero-stat-number {
    font-size: 1.05rem !important;
    line-height: 1.1 !important;
  }
  section.hero .hero-stat-label {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }

  /* YouTube row and delivery card. */
  section.hero .hero-youtube-feature {
    gap: 8px !important;
    margin: 0 !important;
  }
  /* The YouTube card as one row: channel left, red play button right. */
  section.hero .hero-youtube-card {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
  }
  section.hero .hero-youtube-topline,
  section.hero .hero-youtube-action-copy,
  section.hero .hero-youtube-action-arrow { display: none !important; }
  section.hero .hero-youtube-identity {
    flex: 1 1 auto !important;
    min-width: 0;
    gap: 10px !important;
  }
  section.hero .hero-youtube-avatar {
    width: 40px !important;
    height: 40px !important;
  }
  section.hero .hero-youtube-avatar-badge {
    right: -5px !important;
    bottom: -4px !important;
    width: 18px !important;
    height: 18px !important;
  }
  section.hero .hero-youtube-name strong { font-size: 0.98rem !important; }
  section.hero .hero-youtube-name small { font-size: 0.54rem !important; }
  section.hero .hero-youtube-action {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
  }
  /* Delivery: one slim row that only says "Delivery to 16 countries" (live count). */
  section.hero .hero-shipping-card {
    gap: 0 !important;
    min-height: 0 !important;
    padding: 7px 8px 7px 7px !important;
    border-radius: 999px !important;
  }
  section.hero .hero-shipping-heading {
    align-items: center !important;
    gap: 10px !important;
  }
  section.hero .hero-shipping-icon {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
    border-radius: 50% !important;
  }
  section.hero .hero-shipping-copy {
    flex: 1 1 auto !important;
    min-width: 0;
  }
  section.hero .hero-shipping-copy strong {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
  }
  section.hero .hero-shipping-arrow {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }
  section.hero .hero-shipping-copy small,
  section.hero .hero-shipping-flags,
  section.hero .hero-shipping-coming-soon { display: none !important; }
}

/* Small phones: the store name keeps its room next to the logo. */
@media (max-width: 374px) {
  section.hero .hero-text > img:first-child {
    width: 92px !important;
    max-width: 92px !important;
  }
  section.hero .hero-brand-medallion { display: none !important; }
}

/* Landscape phones and small tablets: text on the left, cards on the right. */
@media (min-width: 600px) and (max-width: 768px) {
  section.hero .hero-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
    align-items: center !important;
    gap: 24px !important;
  }
  section.hero .hero-youtube-feature {
    align-self: center !important;
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   9. Homepage slideshow and hero on tablets: compact — 5 October 2026
   Tom: everything that became compact on phones (blocks 7 and 8) should be
   compact on iPad and other tablets too. Portrait tablets (769–1024px) and
   touch tablets in landscape (1025–1400px with hover: none and pointer:
   coarse) get the phone design in two columns: the slideshow as a rounded
   card with the copy beside the photo, the hero with the text on the left
   and the YouTube and delivery rows on the right. Phones keep blocks 7 and
   8; computers with a mouse or trackpad from 1025px keep every rule above
   unchanged. Layout and styling only: no text, links, products or images
   change.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px), (min-width: 1025px) and (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  /* Slideshow: a rounded card instead of the tall full-width band with its fade. */
  #classic-cgi-feature.home-cgi-feature {
    margin: 16px 24px 18px;
    border-radius: 30px;
    clip-path: inset(0 round 30px);
  }
  #classic-cgi-feature.home-cgi-feature::after { display: none !important; }
  #classic-cgi-feature .home-cgi-slideshow,
  #classic-cgi-feature .home-cgi-feature-inner { min-height: 0 !important; }
  #classic-cgi-feature .home-cgi-slide { display: flex; flex-direction: column; }
  #classic-cgi-feature .home-cgi-feature-inner {
    display: grid !important;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    align-items: center;
    gap: 0 clamp(26px, 3.4vw, 46px);
    width: 100%;
    max-width: none;
    padding: clamp(28px, 3.4vw, 40px) clamp(26px, 3.4vw, 40px) 74px !important;
  }

  /* Copy: kicker, title and one clear button. No slide-up transform (as on phones in mobile.css),
     so the secondary link below positions against the card, not against the copy; it still fades in. */
  #classic-cgi-feature .home-cgi-copy {
    position: static;
    max-width: none;
    transform: none;
  }
  #classic-cgi-feature .home-cgi-kicker {
    gap: 8px;
    margin-bottom: 10px !important;
    font-size: 0.7rem !important;
    line-height: 1.3;
  }
  #classic-cgi-feature .home-cgi-copy h2 {
    max-width: none;
    margin: 0 0 20px !important;
    font-size: clamp(1.6rem, 3vw, 2.35rem) !important;
    line-height: 1.08 !important;
    text-wrap: balance;
  }
  #classic-cgi-feature .home-cgi-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center !important;
    gap: 10px !important;
  }
  #classic-cgi-feature .home-cgi-actions .btn-yellow {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    min-height: 48px;
    padding: 11px 22px !important;
    gap: 8px;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: normal;
    text-align: left;
    box-shadow: 0 12px 26px -14px rgba(255, 205, 0, 0.65);
  }
  #classic-cgi-feature .home-cgi-actions .btn-yellow svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }
  #classic-cgi-feature .home-feature-link-row { display: none !important; }

  /* Secondary button: a light text link at the right of the bottom row, as on phones. */
  #classic-cgi-feature .home-cgi-actions .home-cgi-secondary {
    position: absolute;
    right: clamp(26px, 3.4vw, 40px);
    bottom: 17px;
    z-index: 5;
    width: auto;
    max-width: 44%;
    min-height: 40px;
    padding: 0 2px !important;
    gap: 8px;
    border: 0 !important;
    border-radius: 8px;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff !important;
    font-size: 0.9rem;
    font-weight: 800;
    justify-content: flex-end;
  }
  #classic-cgi-feature .home-cgi-actions .home-cgi-secondary:hover,
  #classic-cgi-feature .home-cgi-actions .home-cgi-secondary:focus-visible { transform: none; }
  #classic-cgi-feature .home-cgi-actions .home-cgi-secondary:focus-visible {
    outline: 2px solid #ffcd00;
    outline-offset: 2px;
  }
  #classic-cgi-feature .home-cgi-secondary span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(255, 205, 0, 0.7);
    text-underline-offset: 5px;
  }
  #classic-cgi-feature .home-cgi-secondary::after {
    content: '';
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin: 0 3px 0 -1px;
    border-top: 2px solid #ffcd00;
    border-right: 2px solid #ffcd00;
    transform: rotate(45deg);
  }

  /* Photo with the product tiles over its lower edge. */
  #classic-cgi-feature .home-cgi-art {
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    gap: 0;
  }
  #classic-cgi-feature .home-cgi-photo-shell--feature {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 20px !important;
    box-shadow: 0 22px 40px -22px rgba(0, 0, 0, 0.85), 0 0 0 4px rgba(255, 255, 255, 0.1) !important;
  }
  /* The kicker already says "new series"; keep the photo calm. */
  #classic-cgi-feature .home-rs-badge { display: none; }
  #classic-cgi-feature .home-cgi-slide .home-feature-mini-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    justify-content: stretch;
    overflow: visible;
    scroll-snap-type: none;
    width: calc(100% - 28px);
    margin: -34px auto 0;
    padding: 0;
    gap: 10px;
  }
  #classic-cgi-feature .home-cgi-slide--railway-stories .home-feature-mini-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #classic-cgi-feature .home-feature-mini-card {
    border-radius: 16px;
    box-shadow: 0 16px 28px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.6);
  }
  #classic-cgi-feature .home-feature-mini-card img {
    display: block;
    margin: 6px;
    width: calc(100% - 12px);
    border-radius: 11px;
  }
  #classic-cgi-feature .home-cgi-slide--railway-stories .home-feature-mini-card img {
    aspect-ratio: 1 / 1;
    padding: 4px;
  }
  /* Tiles show the product photo; names stay available to screen readers. */
  #classic-cgi-feature .home-feature-mini-card span {
    position: absolute !important;
    width: 1px;
    height: 1px;
    min-height: 0 !important;
    margin: -1px;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  #classic-cgi-feature .home-feature-mini-card--anniversary .home-feature-product-arrow {
    top: 5px;
    right: 5px;
    width: 14px;
    height: 14px;
  }

  /* Bottom row: the arrows and dots on the left (tablets cannot swipe this slideshow). */
  #classic-cgi-feature .home-feature-controls {
    left: clamp(26px, 3.4vw, 40px);
    right: auto;
    bottom: 17px;
    width: auto;
    gap: 8px;
    transform: none;
    justify-content: flex-start;
  }
  #classic-cgi-feature .home-feature-arrows {
    display: flex;
    position: static;
    gap: 8px;
  }
  #classic-cgi-feature .home-feature-arrow {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: rgba(4, 17, 32, 0.4);
    box-shadow: none;
    color: #fff;
  }
  #classic-cgi-feature .home-feature-arrow svg {
    width: 18px;
    height: 18px;
  }
  #classic-cgi-feature .home-feature-dots-wrap {
    min-height: 40px;
    padding: 0 14px;
    gap: 10px;
    border-radius: 999px;
    background: rgba(4, 17, 32, 0.4);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
  }
  #classic-cgi-feature .home-feature-dots { gap: 14px; }
  #classic-cgi-feature .home-feature-dot {
    position: relative;
    width: 8px;
    height: 8px;
  }
  #classic-cgi-feature .home-feature-dot.is-active {
    width: 22px;
    transform: none;
  }
  #classic-cgi-feature .home-feature-dot::before {
    content: '';
    position: absolute;
    inset: -16px -7px;
  }
  #classic-cgi-feature .home-feature-progress { width: 34px; }

  /* Hero: text on the left, the YouTube and delivery rows on the right. */
  section.hero {
    min-height: 0 !important;
    padding: clamp(22px, 3vw, 34px) 0 clamp(26px, 3.4vw, 38px) !important;
  }
  section.hero .hero-scroll-indicator { display: none !important; }
  section.hero .hero-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr) !important;
    align-items: center !important;
    gap: clamp(24px, 4vw, 56px) !important;
    text-align: left !important;
  }

  /* Logo and store name on one row; title, intro, buttons and stats below.
     The logo is picked by position: its alt text is translated per language. */
  section.hero .hero-text {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    text-align: left !important;
  }
  section.hero .hero-text > * { grid-column: 1 / -1; }
  section.hero .hero-text > img:first-child {
    grid-column: 1;
    width: clamp(108px, 14vw, 132px) !important;
    max-width: clamp(108px, 14vw, 132px) !important;
    height: auto !important;
    margin: 0 !important;
  }
  section.hero .hero-brand-lockup {
    grid-column: 2;
    justify-content: flex-start !important;
    gap: 11px !important;
    min-width: 0;
    margin: 0 !important;
  }
  section.hero .hero-brand-medallion {
    width: 42px !important;
    height: 42px !important;
    border-width: 2px !important;
  }
  section.hero .hero-brand-name {
    max-width: none;
    font-size: clamp(1.12rem, 1.6vw, 1.25rem) !important;
    line-height: 1.12 !important;
    white-space: nowrap;
  }
  section.hero .hero-brand-sub {
    margin-top: 4px !important;
    font-size: 0.64rem !important;
    letter-spacing: 2.4px !important;
  }
  section.hero .hero-brand-sub::before {
    width: 16px;
    height: 4px;
    margin-right: 7px;
  }
  section.hero .hero-text h1 {
    margin: 18px 0 10px !important;
    font-size: clamp(1.9rem, 3.7vw, 2.75rem) !important;
    line-height: 1.06 !important;
    text-align: left;
    text-wrap: balance;
  }
  section.hero .hero-text > p {
    max-width: 34em;
    margin: 0 0 18px !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    text-align: left;
  }

  /* Buttons side by side where they fit, otherwise one above the other. */
  section.hero .hero-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
  }
  section.hero .hero-buttons .btn {
    flex: 1 1 auto;
    margin: 0 !important;
    justify-content: center;
  }
  section.hero .hero-buttons .hero-cta-primary {
    min-height: 50px;
    padding: 12px 22px !important;
    font-size: 1rem !important;
  }
  section.hero .hero-buttons .hero-cta-2026 {
    min-height: 50px;
    padding: 8px 14px !important;
    font-size: 0.98rem !important;
  }
  section.hero .hero-cta-2026-badge {
    min-height: 26px;
    padding: 4px 9px;
    font-size: 0.66rem;
  }

  /* Stats as two slim pills: number and label on one line. */
  section.hero .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  section.hero .hero-stat {
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding: 9px 12px !important;
    text-align: center !important;
  }
  section.hero .hero-stat-number {
    font-size: 1.15rem !important;
    line-height: 1.1 !important;
  }
  section.hero .hero-stat-label {
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
  }

  /* Right column: the YouTube row and the delivery row. */
  section.hero .hero-youtube-feature {
    align-self: center !important;
    justify-self: end;
    width: min(100%, 420px) !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  section.hero .hero-youtube-card {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
  }
  section.hero .hero-youtube-topline,
  section.hero .hero-youtube-action-copy,
  section.hero .hero-youtube-action-arrow { display: none !important; }
  section.hero .hero-youtube-identity {
    flex: 1 1 auto !important;
    min-width: 0;
    gap: 12px !important;
  }
  section.hero .hero-youtube-avatar {
    width: 46px !important;
    height: 46px !important;
  }
  section.hero .hero-youtube-avatar-badge {
    right: -5px !important;
    bottom: -4px !important;
    width: 20px !important;
    height: 20px !important;
  }
  section.hero .hero-youtube-name strong { font-size: 1.05rem !important; }
  section.hero .hero-youtube-name small { font-size: 0.58rem !important; }
  section.hero .hero-youtube-action {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
  }
  /* Delivery: one slim row that only says "Delivery to 16 countries" (live count). */
  section.hero .hero-shipping-card {
    gap: 0 !important;
    min-height: 0 !important;
    padding: 8px 10px 8px 8px !important;
    border-radius: 999px !important;
  }
  section.hero .hero-shipping-heading {
    align-items: center !important;
    gap: 11px !important;
  }
  section.hero .hero-shipping-icon {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    border-radius: 50% !important;
  }
  section.hero .hero-shipping-copy {
    flex: 1 1 auto !important;
    min-width: 0;
  }
  section.hero .hero-shipping-copy strong {
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }
  section.hero .hero-shipping-arrow {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
  }
  section.hero .hero-shipping-copy small,
  section.hero .hero-shipping-flags,
  section.hero .hero-shipping-coming-soon { display: none !important; }
}

/* Landscape tablets: a photo of at most 500px keeps the slideshow card compact on wide screens. */
@media (min-width: 1025px) and (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  #classic-cgi-feature .home-cgi-feature-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); }
}

/* --------------------------------------------------------------------------
   10. Homepage hero: app download card — 13 October 2026
   Tom: instead of "302 products / 4 premium brands", "download our app!"
   with a beautiful App Store and Google Play design. The card replaces
   .hero-stats as the last child of .hero-text on all 11 homepages.
   - Official badges, unaltered and upright, at the same visible height, App
     Store first. The Google Play PNG keeps its built-in clear space; a
     negative margin of exactly that padding lines it up.
   - The real app icon and a real app screen (resized only, no AI).
   - The layout follows the card's own width (container queries): compact
     on phones, icon beside the copy from 380px, larger from 500px, the
     phone with the app from 520px and sparkles from 570px. Without
     container-query support the compact version shows. No motion.
   -------------------------------------------------------------------------- */
section.hero .hero-app-card {
  container: hero-app / inline-size;
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 22px 0 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  background:
    radial-gradient(120% 130% at 0% 100%, rgba(255, 205, 0, 0.2) 0%, rgba(255, 205, 0, 0) 54%),
    radial-gradient(95% 140% at 100% 0%, rgba(84, 156, 255, 0.26) 0%, rgba(84, 156, 255, 0) 60%),
    linear-gradient(145deg, rgba(3, 45, 88, 0.84) 0%, rgba(3, 22, 50, 0.95) 68%);
  box-shadow: 0 26px 60px rgba(0, 18, 48, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  text-align: left;
}

section.hero .hero-app-inner {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "icon head" "badges badges";
  align-items: center;
  gap: 10px 12px;
  padding: 12px;
}

section.hero .hero-app-icon {
  grid-area: icon;
  position: relative;
  z-index: 2;
  display: block;
  width: 44px;
  height: 44px;
  max-width: none;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45), 0 8px 18px rgba(0, 10, 30, 0.45);
}

section.hero .hero-app-head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
section.hero .hero-app-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-transform: uppercase;
}
section.hero .hero-app-kicker i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ffcd00;
  box-shadow: 0 0 0 4px rgba(255, 205, 0, 0.18), 0 0 14px rgba(255, 205, 0, 0.7);
}
section.hero .hero-app-title {
  display: block;
  margin: 0;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
  text-wrap: balance;
}
section.hero .hero-app-title em {
  font-style: normal;
  color: #ffcd00;
  text-shadow: 0 0 26px rgba(255, 205, 0, 0.35), 0 2px 14px rgba(0, 0, 0, 0.2);
}

/* Badges: same visible height; the Play PNG's own 41/168 padding is cancelled by a negative margin. */
section.hero .hero-app-badges {
  --hero-app-badge-h: 40px;
  grid-area: badges;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
section.hero .hero-app-badge {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 8px;
  line-height: 0;
}
section.hero .hero-app-badge img {
  display: block;
  width: auto;
  max-width: none;
  height: var(--hero-app-badge-h);
}
section.hero .hero-app-badge--google img {
  height: calc(var(--hero-app-badge-h) * 250 / 168);
  margin: calc(var(--hero-app-badge-h) * -41 / 168);
}
section.hero .hero-app-badge:hover {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.42));
}
section.hero .hero-app-badge:focus-visible {
  outline: 3px solid #ffcd00;
  outline-offset: 3px;
}

/* The phone with the app home screen only shows on wide cards (see below). */
section.hero .hero-app-phone { display: none; }

/* Icon beside the copy: kicker and title, badges below them. */
@container hero-app (min-width: 380px) {
  section.hero .hero-app-inner {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "icon head" "icon badges";
    gap: 9px 14px;
    padding: 14px 16px;
  }
  section.hero .hero-app-icon {
    width: 56px;
    height: 56px;
    border-radius: 13px;
  }
  section.hero .hero-app-kicker { font-size: 0.6rem; }
  section.hero .hero-app-title { font-size: 1.28rem; }
  section.hero .hero-app-badges { gap: 10px; }
}

/* Computers and wide tablets: larger icon, title and badges. */
@container hero-app (min-width: 500px) {
  section.hero .hero-app-inner {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 11px 18px;
    padding: 18px 20px;
  }
  section.hero .hero-app-icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
  }
  section.hero .hero-app-head { gap: 6px; }
  section.hero .hero-app-kicker {
    gap: 9px;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
  }
  section.hero .hero-app-kicker i {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 5px rgba(255, 205, 0, 0.18), 0 0 16px rgba(255, 205, 0, 0.7);
  }
  section.hero .hero-app-title { font-size: 1.55rem; }
  section.hero .hero-app-badges {
    --hero-app-badge-h: 44px;
    gap: 12px;
  }
}

/* Wide cards: a phone with the real app home screen rises from the bottom edge,
   the app icon floats beside it. */
@container hero-app (min-width: 520px) {
  section.hero .hero-app-inner {
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 11px 20px;
    min-height: 148px;
    padding: 20px 22px 20px 20px;
  }
  section.hero .hero-app-phone {
    position: absolute;
    left: 28px;
    bottom: -74px;
    z-index: 1;
    display: block;
    width: 92px;
    padding: 5px;
    border-radius: 20px;
    background: linear-gradient(155deg, #3a4357 0%, #151b27 46%, #090c14 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 22px 44px rgba(0, 8, 24, 0.55);
    transform: rotate(-6deg);
    transform-origin: 50% 100%;
  }
  section.hero .hero-app-phone img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    border-radius: 15px;
  }
  section.hero .hero-app-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    align-self: end;
    justify-self: end;
    margin: 0 -6px -4px 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 12px 26px rgba(0, 8, 24, 0.5);
  }
  section.hero .hero-app-title { font-size: 1.6rem; }
}

/* Full-width computer card: the copy and badges a little larger, three sparkles
   (like the star on the app icon) in the free corner. */
@container hero-app (min-width: 570px) {
  section.hero .hero-app-title { font-size: 1.75rem; }
  section.hero .hero-app-badges { --hero-app-badge-h: 46px; }
  section.hero .hero-app-inner::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 84px;
    height: 63px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'%3E%3Cpath transform='translate(70 44) scale(1.6)' fill='%23ffcd00' d='M0-10C1.2-3.2 3.2-1.2 10 0C3.2 1.2 1.2 3.2 0 10C-1.2 3.2-3.2 1.2-10 0C-3.2-1.2-1.2-3.2 0-10Z'/%3E%3Cpath transform='translate(102 20) scale(.72)' fill='%23ffffff' fill-opacity='.9' d='M0-10C1.2-3.2 3.2-1.2 10 0C3.2 1.2 1.2 3.2 0 10C-1.2 3.2-3.2 1.2-10 0C-3.2-1.2-1.2-3.2 0-10Z'/%3E%3Cpath transform='translate(100 72) scale(.56)' fill='%23ffcd00' fill-opacity='.8' d='M0-10C1.2-3.2 3.2-1.2 10 0C3.2 1.2 1.2 3.2 0 10C-1.2 3.2-3.2 1.2-10 0C-3.2-1.2-1.2-3.2 0-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 10px rgba(255, 205, 0, 0.45));
    pointer-events: none;
  }
}