@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

/* Homepage header foundations; the shared navigation and language sheets
   supply the same spacing, gold action and compact breakpoints. */
header.ww-site-header{display:block;position:sticky;top:0;z-index:30;height:auto;min-height:0;margin:0;padding:0;border:0;background:rgba(255,254,252,.94);backdrop-filter:blur(20px);font-family:'DM Sans',Arial,sans-serif;color:#252621}
:where(.ww-site-header) .nav-shell{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 64px);max-width:none;height:auto;margin:auto;gap:24px}
:where(.ww-site-header) a{color:inherit;text-decoration:none}
:where(.ww-site-header) .wordmark{display:flex;align-items:center;flex-shrink:0;line-height:1}
:where(.ww-site-header) .header-logo{display:block;width:150px;aspect-ratio:2048/764;background:url('/assets/wrap-wereld-logo-header-hd.png') center/contain no-repeat}
:where(.ww-site-header) .desktop-nav{width:auto;padding:0}
:where(.ww-site-header) .button{display:inline-flex;align-items:center;justify-content:center;line-height:1.4}
:where(.ww-site-header) .menu-toggle{display:none;cursor:pointer}
:where(.ww-site-header) #mobile-nav[hidden]{display:none}
:where(.ww-site-header) #mobile-nav a{display:flex;align-items:center;gap:18px}
:where(.ww-site-header) .ww-language span{font-size:inherit;line-height:inherit}
@media(max-width:900px){:where(.ww-site-header) .header-logo{width:140px}}

/* Homepage arrow artwork, preserving each action's direction. */
.stars-site .arrow{display:inline-block;width:23px;height:23px;flex-shrink:0;vertical-align:middle;stroke:currentColor;stroke-width:1.25;transition:transform .25s}
.stars-site a:hover .arrow{transform:translateX(4px)}
.stars-site .arrow-left{transform:rotate(180deg)}
.stars-site a:hover .arrow-left{transform:translateX(-4px) rotate(180deg)}
.stars-site .arrow-down{transform:rotate(90deg)}
.stars-site a:hover .arrow-down{transform:translateY(4px) rotate(90deg)}
.stars-site .dww-back{display:inline-flex;align-items:center;gap:10px}
.stars-site .text-link{align-items:center}
.stars-site .dww-bottom>a{display:inline-flex;align-items:center;gap:12px}
.stars-site .photo-tools button:has(.arrow){display:inline-flex;align-items:center;justify-content:center}

/* Leave room for the sticky header above the configurator preview. */
html{scroll-padding-top:calc(var(--ww-site-header-height,76px) + 20px)}
.stars-configurator .visual{top:calc(var(--ww-site-header-height,76px) + 15px)}
@media(min-width:1000px){.stars-configurator .visual{height:calc(100svh - var(--ww-site-header-height,76px) - 40px)}}
@media(max-width:700px){.stars-configurator .visual{top:var(--ww-site-header-height,76px)}}
@media(prefers-reduced-motion:reduce){.stars-site .arrow{transition:none}}