/* Shared header row keeps navigation and the catalogue button aligned. */
.site-header{height:156px;padding:10px 3% 42px;background:#fff;border:0;display:grid;grid-template-columns:minmax(0,1fr) 246px minmax(0,1fr);column-gap:24px;position:relative;isolation:isolate;align-items:center;z-index:20}
.site-header .header-brand{grid-column:2;grid-row:1;justify-self:center;display:block;position:relative;z-index:2;letter-spacing:normal;font-size:inherit;line-height:1}
.site-header .brand-mark{display:block;position:relative;width:230px;height:98px;overflow:hidden;writing-mode:horizontal-tb}
.brand-mark img{position:absolute;width:326px;height:auto;max-width:none;left:-31px;top:-13px;display:block;clip-path:polygon(0 0,80% 0,80% 75%,50% 75%,50% 70%,0 70%)}
.site-header nav{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:flex-start;gap:clamp(16px,2vw,32px);position:static;z-index:2}
.site-header .header-link{font-family:'Montauk Pro',Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(17px,1.55vw,23px);letter-spacing:-.4px;line-height:1.35;white-space:nowrap;position:relative}
.site-header .products-link{order:0}.site-header .tips-link{order:1}.site-header .universe-link{order:2}
.site-header .nav-cta{display:inline-flex;align-items:center;gap:9px;border:1px solid #24254935;border-radius:30px;padding:9px 15px}
.site-header .nav-cta span{margin:0}
.site-header .desktop-cta{position:relative;top:auto;right:auto;grid-column:3;grid-row:1;justify-self:end;align-self:center;z-index:2}
.site-header .mobile-cta{display:none}
.site-header .header-ribbon{position:absolute;left:0;bottom:0;width:100%;height:53px;z-index:0;pointer-events:none}
.site-header .menu{display:none;z-index:5}.site-header nav a::after{display:none}
.site-header .header-link:not(.nav-cta){transition:color .25s}.site-header .header-link:not(.nav-cta):hover{color:var(--pink)}.site-header .nav-cta:hover{background:#fceef3;border-color:#F890A5}
@media(max-width:1199px){
.site-header{height:122px;padding:5px 6% 30px;grid-template-columns:40px minmax(0,1fr) 40px;gap:8px}
.site-header .brand-mark{width:180px;height:78px}.brand-mark img{width:255px;left:-24px;top:-10px}
.site-header .menu{display:block;grid-column:1;grid-row:1;justify-self:start;background:#fff;border:1px solid var(--line);border-radius:50%;width:38px;height:38px;font-size:18px}
.site-header .header-ribbon{height:34px}.site-header .desktop-cta{display:none}
.site-header nav{display:none;position:absolute;top:122px;left:0;right:0;background:#fff;padding:26px 6% 30px;z-index:10;box-shadow:0 10px 16px #24254912}
.site-header nav.open{display:flex;flex-direction:column;align-items:stretch;gap:23px}
.site-header .header-link{font-size:24px;align-self:flex-start}
.site-header .mobile-cta{display:inline-flex;position:static;order:3;padding:10px 18px}
}

/* A travelling brand-colour highlight around the catalogue button. */
@property --border-beam-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.site-header .nav-cta{isolation:isolate;border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(#d8d4df,#d8d4df) border-box}
.site-header .nav-cta::before{content:"";position:absolute;inset:-1px;border:2px solid transparent;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--border-beam-angle),transparent 0deg,transparent 240deg,#fbc2ce 278deg,#F890A5 310deg,#f9a8b9 337deg,transparent 360deg) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:catalogue-border-beam 4s linear infinite}
.site-header .nav-cta:hover::before,.site-header .nav-cta:focus-visible::before{animation-duration:2.5s}
@keyframes catalogue-border-beam{to{--border-beam-angle:360deg}}
@media(prefers-reduced-motion:reduce){.site-header .nav-cta::before{animation:none;--border-beam-angle:30deg}}

/* Alsa pink header with navy navigation. */
.site-header{--header-pink:#F890A5;background:var(--header-pink)}
.site-header .header-brand{mix-blend-mode:multiply}
.site-header .nav-cta{background:linear-gradient(#fce6ed,#fce6ed) padding-box,linear-gradient(#d77b99,#d77b99) border-box}
.site-header .nav-cta:hover{background:linear-gradient(#fff1f6,#fff1f6) padding-box,linear-gradient(#d77b99,#d77b99) border-box}
@media(max-width:1199px){.site-header nav{background:var(--header-pink)}.site-header .menu{background:#fce6ed;border-color:#24254950}}
/* Transparent logo retains its true white outline and illustration details. */
.site-header .header-brand{mix-blend-mode:normal}
.site-header .brand-mark img{position:static;left:auto;top:auto;display:block;width:100%;height:100%;object-fit:contain;clip-path:none}
/* Keep links legible against the brand pink and strengthen the travelling beam. */
.site-header .header-link:not(.nav-cta):hover,.site-header .header-link:not(.nav-cta):focus-visible{color:var(--ink);text-decoration:underline;text-decoration-color:#fff1f5;text-decoration-thickness:2px;text-underline-offset:6px}
.site-header .nav-cta{border:2px solid transparent;background:linear-gradient(#fff0f4,#fff0f4) padding-box,linear-gradient(#e87594,#e87594) border-box;color:var(--ink)}
.site-header .nav-cta:hover,.site-header .nav-cta:focus-visible{color:var(--ink);background:linear-gradient(#fff7f9,#fff7f9) padding-box,linear-gradient(#e87594,#e87594) border-box}
.site-header .nav-cta::before{inset:-2px;border-width:3px;background:conic-gradient(from var(--border-beam-angle),transparent 0deg,transparent 215deg,#fff7fa 255deg,#d5376c 298deg,#b92558 326deg,#fff0f5 344deg,transparent 360deg) border-box;filter:drop-shadow(0 0 2px #cc346360);animation-duration:3.5s}

/* White hover lettering with a flowing double-wave inspired by the logo. */
.site-header .header-link:not(.nav-cta):hover,.site-header .header-link:not(.nav-cta):focus-visible{color:#fff;text-decoration:none}
.site-header nav .header-link:not(.nav-cta)::after{content:"";display:block;position:absolute;left:0;right:0;bottom:-10px;width:100%;height:10px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20180%2014%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%206%20C30%20-1%2060%2013%2090%206%20S150%20-1%20180%206%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M0%2011%20C30%204%2060%2018%2090%2011%20S150%204%20180%2011%22%20fill%3D%22none%22%20stroke%3D%22%23ffe1e9%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;opacity:0;transform:translateY(3px);transition:opacity .2s,transform .25s;pointer-events:none}
.site-header nav .header-link:not(.nav-cta):hover::after,.site-header nav .header-link:not(.nav-cta):focus-visible::after{opacity:1;transform:translateY(0)}
.site-header .nav-cta:hover,.site-header .nav-cta:focus-visible{color:#fff;background:linear-gradient(#e77996,#e77996) padding-box,linear-gradient(#e87594,#e87594) border-box}

/* Slightly larger menu lettering with the same aligned header row. */
.site-header .header-link{font-size:clamp(20px,1.85vw,28px)}
@media(max-width:1199px){.site-header .header-link{font-size:27px}}
/* A small ribbon continuation joins the heart to the unchanged full-width wave. */
.header-logo-bridge{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}

/* Let the heart’s lower tip flow into the ribbon rather than a separate connector. */
.site-header .header-brand{overflow:visible}
.header-logo-bridge path{stroke:#fff0f5;stroke-width:1.5;stroke-linejoin:round}
/* The joined ribbon is one continuous surface, with no outlined connector tab. */
.header-logo-bridge path:first-of-type{stroke:none}
.header-logo-bridge>path:last-child{stroke:#e9508c;stroke-width:1.1;fill:none}

/* Restore the original centred logo and full-width ribbon layout. */
.header-logo-bridge{display:none}
.site-header .header-ribbon{display:block;left:0;right:0;width:100%}
.site-header .header-ribbon path{visibility:visible}

/* A curved satin continuation, tucked under the unchanged logo artwork. */
.site-header .header-logo-bridge{display:block;z-index:1}
.site-header .header-logo-bridge path:first-of-type{fill:url(#header-bridge-pink);stroke:#fff7fa;stroke-width:1.1;stroke-linejoin:round}