/* Fa's Roses: kop (sections/fas-header.liquid). Rustig en symmetrisch: menu links, logo midden, drie dunne iconen rechts.
   Kleuren lopen via vier variabelen, zodat de kop boven het rozenveld doorzichtig kan zijn (zie fas-rozenveld.css). */

.fas-section-header { position: sticky; top: 0; z-index: 30; transition: top 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
/* Naar beneden scrollen: de kop schuift weg. Een klein stukje omhoog en hij is er weer. */
html.fas-header-away .fas-section-header { top: calc(-1 * var(--fas-header-h, 6.4rem) - 2px); }

.fas-header {
  --hd: var(--fas-ink);
  --hd-bg: color-mix(in srgb, var(--fas-cream) 88%, transparent);
  --hd-line: transparent;
  --hd-blur: 10px;
  --hd-logo: none;
  position: relative; z-index: 2;
  color: var(--hd); background: var(--hd-bg);
  -webkit-backdrop-filter: blur(var(--hd-blur)); backdrop-filter: blur(var(--hd-blur));
  box-shadow: 0 1px 0 var(--hd-line);
  transition: background-color 0.6s ease, box-shadow 0.6s ease, color 0.6s ease;
}
html.fas-scrolled .fas-header { --hd-line: var(--fas-line); }
html.fas-menu-open .fas-header { --hd: var(--fas-ink); --hd-bg: var(--fas-cream); --hd-line: transparent; --hd-logo: none; }

.fas-header__inner { height: var(--fas-header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2.4rem; }
.fas-header__left { display: flex; align-items: center; min-width: 0; }

/* Menu op desktop: kleine kapitalen, ruim gespatieerd */
.fas-header__nav { display: flex; gap: clamp(1.6rem, 1.6vw, 2.8rem); }
.fas .fas-header__nav a {
  position: relative; padding: 1rem 0;
  font: var(--fas-label); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--hd);
  transition: opacity 0.5s ease, color 0.6s ease;
}
/* De lijn wordt onder het woord getrokken, van links naar rechts, en loopt rechts weer weg */
.fas-header__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.5rem; height: 1px; background: currentColor;
  scale: 0 1; transform-origin: right; transition: scale 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.fas-header__nav a:hover::after, .fas-header__nav a:focus-visible::after, .fas-header__nav a[aria-current="page"]::after { scale: 1 1; transform-origin: left; }
/* Wijs je er één aan, dan treden de andere terug */
.fas-header__nav:has(a:hover) a:not(:hover) { opacity: 0.45; }

/* Logo: bij hover trekt er één keer een glans overheen, als goudfolie die het licht vangt */
.fas-header__logo { justify-self: center; display: block; text-decoration: none; }
.fas-header__logo img {
  display: block; height: 2.6rem; width: auto; filter: var(--hd-logo); transition: filter 0.6s ease;
  -webkit-mask: linear-gradient(105deg, #000 42%, rgba(0, 0, 0, 0.45) 50%, #000 58%) 100% 0 / 300% 100% no-repeat;
  mask: linear-gradient(105deg, #000 42%, rgba(0, 0, 0, 0.45) 50%, #000 58%) 100% 0 / 300% 100% no-repeat;
}
.fas-header__logo:hover img { animation: fas-logo-glans 1.3s cubic-bezier(0.65, 0, 0.35, 1); }
@keyframes fas-logo-glans { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }

/* Iconen rechts: dunne lijn, alle drie even groot */
.fas-header__actions { justify-self: end; display: flex; align-items: center; gap: 0.4rem; margin-right: -1rem; }
.fas .fas-header__icon {
  position: relative; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%;
  color: var(--hd); text-decoration: none; transition: color 0.6s ease;
}
.fas-header__icon svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; overflow: visible; transition: translate 0.6s cubic-bezier(0.16, 1, 0.3, 1), rotate 0.6s cubic-bezier(0.16, 1, 0.3, 1), scale 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.fas-header__icon::before { content: ""; position: absolute; inset: 0.4rem; border-radius: 50%; background: currentColor; opacity: 0; scale: 0.6; transition: opacity 0.4s ease, scale 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.fas-header__icon:hover::before, .fas-header__icon:focus-visible::before { opacity: 0.08; scale: 1; }
/* Elk icoon heeft zijn eigen kleine beweging */
.fas-header__icon--search:hover svg { rotate: -12deg; scale: 1.06; }
.fas-header__icon--account:hover svg { translate: 0 -0.15rem; }
.fas-header__bag-handle { transition: translate 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.fas-header__icon--bag:hover .fas-header__bag-handle { translate: 0 -0.2rem; }      /* het hengsel wordt opgetild */
.fas-header__icon--bag:hover svg { translate: 0 -0.1rem; }
.fas-header__count {
  position: absolute; top: 0.5rem; right: 0.3rem; min-width: 1.7rem; height: 1.7rem; padding: 0 0.4rem; border-radius: 999px;
  display: grid; place-items: center; background: var(--fas-brand); color: var(--fas-cream);
  font: 500 1rem/1 var(--fas-body); font-variant-numeric: tabular-nums;
  animation: fas-count-pop 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}
@keyframes fas-count-pop { from { scale: 0; } 60% { scale: 1.15; } to { scale: 1; } }

/* Twee lijntjes: worden een kruis als het menu open is */
.fas .fas-header__burger { display: none; width: 4.4rem; height: 4.4rem; margin-left: -1rem; place-items: center; color: var(--hd); }
.fas-header__burger-lines { position: relative; display: block; width: 2.4rem; height: 0.9rem; }
.fas-header__burger-lines i { position: absolute; left: 0; right: 0; height: 1.25px; background: currentColor; transition: translate 0.5s cubic-bezier(0.65, 0, 0.35, 1), rotate 0.5s cubic-bezier(0.65, 0, 0.35, 1), scale 0.5s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.6s ease; }
.fas-header__burger-lines i:first-child { top: 0; }
.fas-header__burger-lines i:last-child { bottom: 0; scale: 0.6 1; transform-origin: left; }
.fas-header__burger:hover .fas-header__burger-lines i:last-child { scale: 1 1; }
html.fas-menu-open .fas-header__burger-lines i { transform-origin: center; }
html.fas-menu-open .fas-header__burger-lines i:first-child { translate: 0 0.39rem; rotate: 45deg; }
html.fas-menu-open .fas-header__burger-lines i:last-child { translate: 0 -0.39rem; rotate: -45deg; scale: 1 1; }
.fas .fas-header__burger:hover, .fas .fas-header__burger:focus, .fas .fas-header__icon:hover { color: var(--hd); }

.fas-header a:focus-visible { outline: 2px solid var(--fas-brand); outline-offset: 2px; }

/* ------------------------------------------------------------------ Menu-paneel (onder 1400 px: daaronder past het volledige menu niet naast het logo)
   Een vel crème papier dat van boven openvalt; de links komen één voor één op. */
.fas-menu {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 3.2rem;
  padding: calc(var(--fas-header-h, 6.4rem) + 6rem) var(--fas-gutter) 3.2rem;
  background: var(--fas-cream); color: var(--fas-ink);
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s 0.8s;
}
html.fas-menu-open .fas-menu, .fas-menu:target { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 0.9s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s; }
html.fas-menu-open { overflow: hidden; }
.fas-menu__nav { display: flex; flex-direction: column; }
.fas .fas-menu__link {
  display: flex; align-items: center; gap: 0; padding: 0.6rem 0;
  font-family: var(--fas-display); font-weight: 500; font-size: clamp(3.6rem, 9vw, 6.4rem); line-height: 1.1;
  color: var(--fas-ink); text-decoration: none;
  opacity: 0; translate: 0 2.4rem;
  transition: opacity 0.4s ease, translate 0.4s ease, color 0.4s ease;
}
html.fas-menu-open .fas-menu__link, .fas-menu:target .fas-menu__link {
  opacity: 1; translate: 0 0;
  transition: opacity 0.8s ease calc(0.25s + var(--i) * 70ms), translate 1.1s cubic-bezier(0.16, 1, 0.3, 1) calc(0.25s + var(--i) * 70ms), color 0.4s ease;
}
/* De roos uit het logo schuift voor het woord dat je aanwijst */
.fas-menu__rose { width: 0; height: 0.62em; object-fit: contain; opacity: 0; margin-right: 0; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, margin-right 0.6s cubic-bezier(0.16, 1, 0.3, 1), rotate 0.9s cubic-bezier(0.16, 1, 0.3, 1); rotate: -40deg; }
.fas-menu__link:hover, .fas-menu__link:focus-visible, .fas-menu__link[aria-current="page"] { color: var(--fas-brand); }
.fas-menu__link:hover .fas-menu__rose, .fas-menu__link:focus-visible .fas-menu__rose, .fas-menu__link[aria-current="page"] .fas-menu__rose { width: 0.62em; opacity: 1; margin-right: 0.28em; rotate: 0deg; }
.fas-menu__nav:has(.fas-menu__link:hover) .fas-menu__link:not(:hover) { color: color-mix(in srgb, var(--fas-ink) 40%, transparent); }
.fas-menu__foot {
  display: flex; flex-wrap: wrap; gap: 1.2rem 3.2rem; padding-top: 2.4rem; border-top: 1px solid var(--fas-line);
  opacity: 0; transition: opacity 0.4s ease;
}
html.fas-menu-open .fas-menu__foot, .fas-menu:target .fas-menu__foot { opacity: 1; transition: opacity 0.9s ease calc(0.3s + var(--i) * 70ms); }
.fas .fas-menu__foot a { font: var(--fas-label); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; color: var(--fas-ink); }
.fas .fas-menu__foot a:hover { color: var(--fas-brand); }

@media (max-width: 1399px) {
  .fas-header__nav { display: none; }
  .fas .fas-header__burger { display: grid; }
}
@media (min-width: 1400px) { .fas-menu { display: none; } }
@media (max-width: 749px) {
  .fas-header__logo img { height: 2.1rem; }
  .fas .fas-header__icon--account { display: none; }
  .fas-header__inner { gap: 0.8rem; }
  .fas .fas-header__icon { width: 4rem; height: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fas-section-header, .fas-header *, .fas-menu, .fas-menu * { transition: none !important; animation: none !important; }
}

/* De filterbalk op de categoriepagina schuift mee omhoog als de kop weg is */
.fas-col__bar { transition: top 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
html.fas-header-away .fas-col__bar { top: 0; }