@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap");

.story-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
  min-height: 76px !important;
  padding: 14px clamp(18px, 6vw, 84px) !important;
  color: #fff5df !important;
  background: rgba(5, 2, 8, .76) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(244, 213, 141, .24) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) !important;
}

.story-header .story-brand {
  display: grid !important;
  gap: 1px !important;
  margin: 0 !important;
  color: #f4d58d !important;
  text-decoration: none !important;
}

.story-header .story-brand span {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(1.45rem, 4vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: .9 !important;
}

.story-header .story-brand small {
  color: rgba(255, 245, 223, .62) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  line-height: normal !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
}

.story-header .story-nav {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(12px, 2vw, 24px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.story-header .story-nav a {
  position: relative !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: rgba(255, 245, 223, .78) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: .98rem !important;
  font-weight: 800 !important;
  line-height: normal !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  text-shadow: 0 0 18px rgba(201, 154, 70, .08) !important;
  transition: color .22s ease, text-shadow .22s ease !important;
}

.story-header .story-nav a::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  right: 50% !important;
  bottom: -8px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #c99a46, transparent) !important;
  opacity: 0 !important;
  transition: left .28s ease, right .28s ease, opacity .28s ease !important;
}

.story-header .story-nav a:hover,
.story-header .story-nav a:focus-visible {
  color: #f4d58d !important;
  text-shadow: 0 0 18px rgba(244, 213, 141, .34) !important;
  outline: 0 !important;
}

.story-header .story-nav a:hover::after,
.story-header .story-nav a:focus-visible::after {
  left: 8% !important;
  right: 8% !important;
  opacity: 1 !important;
}

.story-header .story-nav .nav-order {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  border: 1px solid rgba(244, 213, 141, .46) !important;
  border-radius: 999px !important;
  color: #f4d58d !important;
  background: rgba(244, 213, 141, .08) !important;
  box-shadow: inset 0 0 18px rgba(244, 213, 141, .08) !important;
}

.story-header .story-menu-button {
  display: none !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 1px solid rgba(244, 213, 141, .32) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .06) !important;
  cursor: pointer !important;
}

.story-header .story-menu-button span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  margin: 4px auto !important;
  border-radius: 999px !important;
  background: #f4d58d !important;
}

@media (min-width: 1101px) and (max-width: 1400px) {
  .story-header {
    gap: 16px !important;
    padding-inline: clamp(18px, 3vw, 42px) !important;
  }

  .story-header .story-nav {
    gap: clamp(9px, 1.25vw, 17px) !important;
  }

  .story-header .story-nav a {
    font-size: .9rem !important;
  }

  .story-header .story-nav .nav-order {
    padding-inline: 12px !important;
  }
}

@media (max-width: 1100px) {
  .story-header .story-menu-button { display: block !important; }

  .story-header .story-nav {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 18px !important;
    right: 18px !important;
    display: none !important;
    padding: 16px !important;
    border: 1px solid rgba(244, 213, 141, .24) !important;
    border-radius: 22px !important;
    background: rgba(13, 6, 18, .96) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38) !important;
  }

  .story-header .story-nav.is-open { display: grid !important; }

  .story-header .story-nav a {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Continuous scenic collection backdrops.
   Each page keeps its approved artwork; the fixed layer stays behind the entire
   document so products, navigation and the footer never fall onto a flat fill. */
body.hero-animal-friends { --scenic-desktop:url('../images/animal-friends-background-board-free.png'); --scenic-tablet-landscape:var(--scenic-desktop); --scenic-tablet-portrait:url('../images/responsive-scenes/animal-friends-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/animal-friends-phone-portrait.jpg'); --scenic-position:50% 48%; }
body.hero-birds-sky { --scenic-desktop:url('../images/birds-of-the-sky-background.jpg'); --scenic-tablet-landscape:var(--scenic-desktop); --scenic-tablet-portrait:url('../images/responsive-scenes/birds-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/birds-phone-portrait.jpg'); --scenic-position:50% 34%; }
body.world-butterflies { --scenic-desktop:url('../images/butterfly-garden-background.jpeg'); --scenic-tablet-landscape:var(--scenic-desktop); --scenic-tablet-portrait:url('../images/responsive-scenes/butterflies-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/butterflies-phone-portrait.jpg'); --scenic-position:50% 35%; }
body.hero-flower-garden { --scenic-desktop:url('../images/flower-garden-background.jpg'); --scenic-tablet-landscape:url('../images/responsive-scenes/flowers-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/flowers-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/flowers-phone-portrait.jpg'); --scenic-position:50% 36%; }
body.hero-ocean-friends { --scenic-desktop:url('../images/ocean-friends-background.jpg'); --scenic-tablet-landscape:var(--scenic-desktop); --scenic-tablet-portrait:url('../images/responsive-scenes/ocean-friends-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/ocean-friends-phone-portrait.jpg'); --scenic-position:50% 32%; }
body.hero-sandy-beaches { --scenic-desktop:url('../images/sandy-beaches-background.png'); --scenic-tablet-landscape:url('../images/responsive-scenes/sandy-beaches-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/sandy-beaches-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/sandy-beaches-phone-portrait.jpg'); --scenic-position:50% 34%; }
body.world-flags { --scenic-desktop:url('../images/flags-of-the-world-background.jpg'); --scenic-tablet-landscape:url('../images/responsive-scenes/flags-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/flags-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/flags-phone-portrait.jpg'); --scenic-position:50% 42%; }
body.world-enchanted { --scenic-desktop:url('../images/enchanted-beings-background.jpg'); --scenic-tablet-landscape:url('../images/responsive-scenes/enchanted-beings-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/enchanted-beings-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/enchanted-beings-phone-portrait.jpg'); --scenic-position:50% 40%; }
body.world-bugs { --scenic-desktop:url('../images/tiny-garden-friends-background.jpg'); --scenic-tablet-landscape:var(--scenic-desktop); --scenic-tablet-portrait:url('../images/responsive-scenes/tiny-garden-friends-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/tiny-garden-friends-phone-portrait.jpg'); --scenic-position:50% 38%; }
body.scenic-sweets { --scenic-desktop:url('../images/sweet-treats-background.jpg'); --scenic-tablet-landscape:var(--scenic-desktop); --scenic-tablet-portrait:url('../images/responsive-scenes/sweet-treats-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/sweet-treats-phone-portrait.jpg'); --scenic-position:50% 40%; }
body.world-sports { --scenic-desktop:url('../images/sports-collection-background.jpg'); --scenic-tablet-landscape:var(--scenic-desktop); --scenic-tablet-portrait:url('../images/responsive-scenes/sports-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/sports-phone-portrait.jpg'); --scenic-position:50% 42%; }
body.world-favourites { --scenic-desktop:url('../images/my-favourites-collection-scene-v3.png'); --scenic-tablet-landscape:url('../images/responsive-scenes/my-favourites-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/my-favourites-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/my-favourites-phone-portrait.jpg'); --scenic-position:50% 42%; }
body.scenic-exclusive { --scenic-desktop:url('../images/monthly-exclusive-autumn-background.png'); --scenic-tablet-landscape:url('../images/responsive-scenes/monthly-exclusive-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/monthly-exclusive-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/monthly-exclusive-phone-portrait.jpg'); --scenic-position:50% 38%; }
body.world-faith { --scenic-desktop:url('../images/faith-garden-clean.png'); --scenic-tablet-landscape:url('../images/responsive-scenes/faith-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/faith-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/faith-phone-portrait.jpg'); --scenic-position:50% 42%; }
body.world-accessories { --scenic-desktop:url('../images/collection-scenes/accessories-scene.png'); --scenic-tablet-landscape:url('../images/responsive-scenes/accessories-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/accessories-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/accessories-phone-portrait.jpg'); --scenic-position:50% 42%; }
body.collection-back-to-school { --scenic-desktop:url('../images/collection-scenes/back-to-school-scene.png'); --scenic-tablet-landscape:url('../images/responsive-scenes/back-to-school-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/back-to-school-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/back-to-school-phone-portrait.jpg'); --scenic-position:58% 40%; }
body.scenic-fall { --scenic-desktop:url('../images/collection-scenes/fall-collection-scene.png'); --scenic-tablet-landscape:url('../images/responsive-scenes/fall-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/fall-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/fall-phone-portrait.jpg'); --scenic-position:50% 42%; }
body.world-space { --scenic-desktop:url('../images/collection-scenes/outer-space-scene.png'); --scenic-tablet-landscape:url('../images/responsive-scenes/outer-space-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/outer-space-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/outer-space-phone-portrait.jpg'); --scenic-position:50% 42%; }
body.world-valentines { --scenic-desktop:url('../images/valentines-collection-scene-text-free.png'); --scenic-tablet-landscape:url('../images/responsive-scenes/valentines-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/valentines-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/valentines-phone-portrait.jpg'); --scenic-position:50% 42%; }
body.world-mothers-day { --scenic-desktop:url('../images/mothers-day-background-approved-exact.jpg?v=20260917'); --scenic-tablet-landscape:url('../images/responsive-scenes/mothers-day-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/mothers-day-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/mothers-day-phone-portrait.jpg'); --scenic-position:50% 42%; }
body.world-fathers-day { --scenic-desktop:url('../images/fathers-day-collection-background.jpg'); --scenic-tablet-landscape:url('../images/responsive-scenes/fathers-day-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/fathers-day-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/fathers-day-phone-portrait.jpg'); --scenic-position:50% 45%; }
body.scenic-collections { --scenic-desktop:url('../images/collections-scenery-background.jpeg'); --scenic-tablet-landscape:url('../images/responsive-scenes/collections-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/collections-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/collections-phone-portrait.jpg'); --scenic-position:50% 38%; }
body.world-create { --scenic-desktop:url('../images/a_cozy_warm_sunlit_artist_craft_studio_scene_view.png'); --scenic-tablet-landscape:url('../images/responsive-scenes/create-tablet-landscape.jpg'); --scenic-tablet-portrait:url('../images/responsive-scenes/create-tablet-portrait.jpg'); --scenic-phone-portrait:url('../images/responsive-scenes/create-phone-portrait.jpg'); --scenic-position:50% 42%; }
body.hero-superhero-collection { --scenic-art:url('../images/superhero-collection-background.jpg'); --scenic-position:50% 38%; --scenic-mobile-fill:linear-gradient(#172c5a,#08142f); }

body:is(
  .hero-animal-friends,.hero-birds-sky,.world-butterflies,.hero-flower-garden,
  .hero-ocean-friends,.hero-sandy-beaches,.world-flags,.world-enchanted,
  .world-bugs,.scenic-sweets,.world-sports,.world-favourites,.scenic-exclusive,
  .world-faith,.world-accessories,.collection-back-to-school,.scenic-fall,
  .world-space,.world-valentines,.world-mothers-day,.world-fathers-day,.scenic-collections,.world-create,
  .hero-superhero-collection
){
  position:relative;
  isolation:isolate;
  background-color:transparent!important;
  background-image:none!important;
  background-attachment:scroll!important;
}

body:is(
  .hero-animal-friends,.hero-birds-sky,.world-butterflies,.hero-flower-garden,
  .hero-ocean-friends,.hero-sandy-beaches,.world-flags,.world-enchanted,
  .world-bugs,.scenic-sweets,.world-sports,.world-favourites,.scenic-exclusive,
  .world-faith,.world-accessories,.collection-back-to-school,.scenic-fall,
  .world-space,.world-valentines,.world-mothers-day,.world-fathers-day,.scenic-collections,.world-create,
  .hero-superhero-collection
)::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background-image:var(--scenic-active,var(--scenic-desktop))!important;
  background-size:cover!important;
  background-position:var(--scenic-position,50% 50%)!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
}

body:is(
  .hero-animal-friends,.hero-birds-sky,.world-butterflies,.hero-flower-garden,
  .hero-ocean-friends,.hero-sandy-beaches,.world-flags,.world-enchanted,
  .world-bugs,.scenic-sweets,.world-sports,.world-favourites,.scenic-exclusive,
  .world-faith,.world-accessories,.collection-back-to-school,.scenic-fall,
  .world-space,.world-valentines,.world-mothers-day,.world-fathers-day,.scenic-collections,.world-create,
  .hero-superhero-collection
) > :is(main,.page-scroll){
  position:relative;
  z-index:3;
}

body:is(
  .hero-animal-friends,.hero-birds-sky,.world-butterflies,.hero-flower-garden,
  .hero-ocean-friends,.hero-sandy-beaches,.world-flags,.world-enchanted,
  .world-bugs,.scenic-sweets,.world-sports,.world-favourites,.scenic-exclusive,
  .world-faith,.world-accessories,.collection-back-to-school,.scenic-fall,
  .world-space,.world-valentines,.world-mothers-day,.world-fathers-day,.scenic-collections,.world-create,
  .hero-superhero-collection
) > .chapter-navigation{
  position:relative;
  z-index:4;
}

@media (orientation:portrait) and (min-width:700px) and (max-width:1100px){
  body{--scenic-active:var(--scenic-tablet-portrait);--scenic-position:50% 50%}
}

@media (orientation:portrait) and (max-width:699px){
  body{--scenic-active:var(--scenic-phone-portrait);--scenic-position:50% 50%}
  body.scenic-collections{--scenic-position:100% 50%}
}

@media (orientation:landscape) and (max-width:1100px) and (min-width:700px){
  body{--scenic-active:var(--scenic-tablet-landscape,var(--scenic-desktop));--scenic-position:50% 50%}
}

@media (orientation:landscape) and (max-width:699px){
  body{--scenic-active:var(--scenic-desktop);--scenic-position:50% 50%}
  body:is(
    .hero-animal-friends,.hero-birds-sky,.world-butterflies,.hero-flower-garden,
    .hero-ocean-friends,.hero-sandy-beaches,.world-flags,.world-enchanted,
    .world-bugs,.scenic-sweets,.world-sports,.world-favourites,.scenic-exclusive,
    .world-faith,.world-accessories,.collection-back-to-school,.scenic-fall,
    .world-space,.world-valentines,.world-mothers-day,.world-fathers-day,.scenic-collections,.world-create
  )::before{
    background-image:var(--scenic-active),var(--scenic-active)!important;
    background-size:contain,cover!important;
    background-position:center,center!important;
  }
}

/* One storybook title treatment across every scenic collection world. */
html body[class]:is(
  .hero-animal-friends,.hero-birds-sky,.world-butterflies,.hero-flower-garden,
  .hero-ocean-friends,.hero-sandy-beaches,.world-flags,.world-enchanted,
  .world-bugs,.scenic-sweets,.world-sports,.world-favourites,.scenic-exclusive,
  .world-faith,.world-accessories,.collection-back-to-school,.scenic-fall,
  .world-space,.world-valentines,.world-mothers-day,.world-fathers-day,
  .scenic-collections,.world-create,.hero-superhero-collection
) :is(.page-heading,.world-hero,.section-heading) h1 {
  color:#fff8e8!important;
  text-shadow:
    0 2px 5px rgba(45,20,38,.92),
    0 0 14px rgba(45,20,38,.58)!important;
}

@media (max-width:840px) {
  .story-header {
    min-height:64px!important;
    padding:9px 12px!important;
  }

  .story-header .story-brand span { font-size:1.45rem!important; }
  .story-header .story-brand small { font-size:.58rem!important; }
}

/* Shared responsive product grid: two comfortable cards on phones, then
   progressively three and four columns as space becomes available. */
body[class] .product-grid {
  display:grid!important;
  width:min(1180px,calc(100% - 24px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  grid-template-columns:repeat(auto-fit,minmax(250px,280px))!important;
  gap:clamp(14px,2vw,24px)!important;
  align-items:stretch!important;
  justify-content:center!important;
}

body[class] .product-grid > .product-card {
  width:100%!important;
  min-width:0!important;
  max-width:280px!important;
  justify-self:center!important;
}

body[class] .product-grid .product-card img {
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
}

@media (max-width:1024px) {
  body[class] .product-grid {
    grid-template-columns:repeat(auto-fit,minmax(220px,280px))!important;
  }
}

@media (max-width:560px) {
  body[class] .product-grid {
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important;
    gap:12px!important;
  }

  body[class] .product-grid > .product-card {
    max-width:180px!important;
  }
}