/* ==========================================================================
   AVELLIQUE · pages.css
   Paginaspecifieke composities
   ========================================================================== */

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  position: relative;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 0.75rem;
}
.hero__media { aspect-ratio: 4 / 5; max-height: 74svh; width: 100%; }
.hero__detail { display: none; }
.hero__content {
  position: relative;
  z-index: 2;
  margin-top: -0.55em;
  font-size: var(--fs-display);
  padding-bottom: var(--space-xl);
}
.hero__title { font-size: 1em; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero__title .line > span { display: inline-block; }
.hero__sub { font-size: var(--fs-lead); margin-top: 1.25rem; max-width: 30ch; line-height: 1.5; }
.hero__cta { margin-top: 1.75rem; font-size: var(--fs-sm); }

@media (min-width: 40em) {
  .hero__media { aspect-ratio: 5 / 4; max-height: 70svh; }
}

@media (min-width: 64em) {
  .hero__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--gap);
    min-height: calc(100svh - var(--announce-h));
    padding-top: 0;
    padding-bottom: var(--space-lg);
  }
  .hero__media {
    grid-column: 6 / 13;
    grid-row: 1 / 3;
    aspect-ratio: auto;
    max-height: none;
    height: calc(100svh - var(--announce-h) - var(--header-h) - var(--space-lg));
    min-height: 34rem;
  }
  .hero__detail {
    display: block;
    grid-column: 2 / 5;
    grid-row: 1;
    align-self: start;
    aspect-ratio: 4 / 5;
    width: 72%;
    margin-top: var(--space-md);
  }
  .hero__content {
    grid-column: 1 / 10;
    grid-row: 2;
    align-self: end;
    margin-top: 0;
    padding-bottom: 0;
  }
  .hero__title .line { white-space: nowrap; }
  .hero__sub { margin-top: 1.75rem; }
}
@media (min-width: 64em) and (max-height: 44em) {
  .hero__detail { display: none; }
  .hero__inner { grid-template-rows: 1fr; }
  .hero__content { grid-row: 1; }
}

/* Laadmoment hero: één georkestreerde beweging */
.js .hero__media img { transform: scale(1.06); transition: transform 2.2s var(--ease-out); }
.js .hero__media { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease-out); }
.js .hero__detail { opacity: 0; transition: opacity 1.2s var(--ease) 0.7s; }
.js .hero__title .line > span { transform: translateY(105%); transition: transform 1.1s var(--ease-out); }
.js .hero__title .line:nth-child(2) > span { transition-delay: 0.12s; }
.js .hero__sub, .js .hero__cta { opacity: 0; transform: translateY(10px); transition: opacity 0.9s var(--ease) 0.5s, transform 0.9s var(--ease-out) 0.5s; }
.js .hero__cta { transition-delay: 0.62s; }
.hero.is-loaded .hero__media { clip-path: inset(0 0 0 0); }
.hero.is-loaded .hero__media img { transform: none; }
.hero.is-loaded .hero__detail { opacity: 1; }
.hero.is-loaded .hero__title .line > span { transform: none; }
.hero.is-loaded .hero__sub, .hero.is-loaded .hero__cta { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .hero__media, .js .hero__media img, .js .hero__detail, .js .hero__title .line > span, .js .hero__sub, .js .hero__cta {
    clip-path: none; transform: none; opacity: 1;
  }
}

/* ---------- Merkintroductie ---------- */
.intro { display: grid; gap: var(--space-md); }
.intro h2 { max-width: 12ch; }
.intro p { color: var(--color-muted); }
@media (min-width: 64em) {
  .intro { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .intro h2 { grid-column: 1 / 7; }
  .intro p { grid-column: 8 / 12; }
}

/* ---------- Collecties ---------- */
.collections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--gap);
  list-style: none; padding: 0;
}
.collection-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.collection-card:first-child { grid-column: 1 / -1; }
.collection-card .frame { aspect-ratio: 4 / 5; }
.collection-card .frame img { transition: transform 1.6s var(--ease-out); }
.collection-card__caption { display: grid; gap: 0.2rem; padding-top: 0.9rem; transition: transform var(--dur) var(--ease); }
.collection-card__title { font-size: var(--fs-h3); line-height: 1.1; }
.collection-card__title span {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size var(--dur) var(--ease);
  padding-bottom: 0.04em;
}
.collection-card__text { color: var(--color-muted); font-size: var(--fs-sm); }
.collection-card a::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) {
  .collection-card:hover .frame img { transform: scale(1.04); }
  .collection-card:hover .collection-card__caption { transform: translateX(6px); }
  .collection-card:hover .collection-card__title span { background-size: 100% 1px; }
}
.collection-card a:focus-visible { box-shadow: none; }
.collection-card:focus-within .frame { box-shadow: var(--focus); }

@media (max-width: 29.99em) {
  .collection-card:not(:first-child) .collection-card__text { display: none; }
  .collection-card:not(:first-child) .collection-card__title { font-size: var(--fs-h4); }
}

@media (min-width: 64em) {
  .collections { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--space-lg); }
  .collection-card:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
  .collection-card:nth-child(1) .frame { aspect-ratio: auto; flex: 1; min-height: 30rem; }
  .collection-card:nth-child(2) { grid-column: 9 / 13; grid-row: 1; }
  .collection-card:nth-child(3) { grid-column: 9 / 13; grid-row: 2; }
  .collection-card:nth-child(2) .frame, .collection-card:nth-child(3) .frame { aspect-ratio: 4 / 3; }
  .collection-card:nth-child(4) { grid-column: 1 / 6; grid-row: 3; }
  .collection-card:nth-child(5) { grid-column: 7 / 13; grid-row: 3; margin-top: var(--space-xl); }
  .collection-card:nth-child(5) .frame { aspect-ratio: 4 / 3; }
}

/* ---------- Storytelling ---------- */
.story { display: grid; gap: var(--space-lg); }
.story__media { aspect-ratio: 4 / 5; }
.story__content { display: grid; gap: var(--space-md); align-content: start; }
.story__content > p { color: var(--color-muted); }
.moments { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--color-border); }
.moments li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--color-border); }
.moments h3 { font-size: var(--fs-h4); line-height: 1.3; }
.moments p { color: var(--color-muted); font-size: var(--fs-sm); padding-top: 0.2rem; }
.story__aside { display: none; }
@media (min-width: 64em) {
  .story { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .story__media { grid-column: 1 / 7; }
  .story__content { grid-column: 8 / 13; align-self: center; }
  .story__aside { display: block; grid-column: 9 / 12; aspect-ratio: 4 / 5; margin-top: calc(var(--space-xl) * -1); }
  .story__content { padding-right: 8%; }
}

/* ---------- Grooming feature ---------- */
.feature { display: grid; gap: var(--space-lg); }
.feature__media { aspect-ratio: 4 / 5; background: var(--color-stone); }
.feature__content { display: grid; gap: var(--space-md); align-content: center; justify-items: start; }
.feature__content p { color: var(--color-on-deep-muted); max-width: 36ch; }
@media (min-width: 64em) {
  .feature { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .feature__content { grid-column: 2 / 6; grid-row: 1; }
  .feature__media { grid-column: 7 / 13; grid-row: 1; }
}

/* ---------- Waarden ---------- */
.values { display: grid; gap: var(--space-lg) var(--gap); list-style: none; padding: 0; }
@media (min-width: 48em) { .values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Reviews ---------- */
.reviews { list-style: none; padding: 0; }
@media (min-width: 64em) {
  .reviews.track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.reviews.track { grid-auto-columns: minmax(16rem, 82%); }

/* ---------- Nieuwsbrief ---------- */
.newsletter {
  display: grid; gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.newsletter__form { display: grid; gap: 0.75rem; align-content: start; }
.newsletter__form > p { color: var(--color-muted); }
.newsletter__note { font-size: var(--fs-xs); color: var(--color-muted); }
.newsletter__note a { text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 64em) {
  .newsletter { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .newsletter h2 { grid-column: 1 / 6; }
  .newsletter__form { grid-column: 7 / 13; }
}

/* ==========================================================================
   SHOP EN COLLECTIE
   ========================================================================== */
.shop-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 60px;
  margin-bottom: var(--space-md);
  background: var(--color-bg);
  border-block: 1px solid var(--color-border);
}
.shop-toolbar__left { display: flex; align-items: center; gap: 1.25rem; }
.shop-toolbar .select { min-height: 44px; border: 0; background-color: transparent; padding-left: 0.25rem; width: auto; font-size: var(--fs-sm); }
.filter-toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-size: var(--fs-sm); }
.filter-toggle svg { width: 18px; height: 18px; }
.result-count { font-size: var(--fs-sm); color: var(--color-muted); }

.shop-layout { display: grid; gap: var(--space-lg); }
.shop-main { min-width: 0; }
.active-filters { margin-bottom: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }

.filters .filter-group { border: 0; padding: 0; margin: 0 0 var(--space-md); min-width: 0; }
.filters .filter-group legend { font-family: var(--font-serif); font-size: var(--fs-h4); margin-bottom: 0.5rem; padding: 0; }
.filters .filter-colour { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(242, 235, 221, 0.24); }

.empty-state { display: grid; gap: 1rem; justify-items: start; padding-block: var(--space-lg); }
.empty-state p { color: var(--color-muted); }

@media (min-width: 64em) {
  .shop-layout { grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--space-lg); align-items: start; }
  .filter-toggle { display: none; }
  .filters.drawer {
    position: sticky; top: calc(var(--header-h) + 60px + var(--space-md));
    transform: none; visibility: visible;
    width: auto; background: transparent; z-index: auto;
    max-height: calc(100vh - var(--header-h) - 60px - var(--space-lg));
    transition: none;
  }
  .filters .drawer__head, .filters .drawer__foot { display: none; }
  .filters .drawer__body { padding: 0; overflow-y: auto; scrollbar-width: thin; }
}

.collection-hero { display: grid; gap: var(--space-md); padding-top: var(--space-md); padding-bottom: var(--space-xl); }
.collection-hero__media { aspect-ratio: 4 / 5; }
.collection-hero__text { display: grid; gap: var(--space-sm); }
.collection-hero__text p { color: var(--color-muted); }
@media (min-width: 48em) { .collection-hero__media { aspect-ratio: 16 / 9; } }
@media (min-width: 64em) {
  .collection-hero__media { aspect-ratio: 21 / 9; }
  .collection-hero__text { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .collection-hero__text h1 { grid-column: 1 / 7; }
  .collection-hero__text p { grid-column: 8 / 12; }
}

.collection-nav { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.collection-nav a { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.3; display: inline-block; }
.collection-nav a:hover { font-style: italic; }
.collection-nav a[aria-current="page"] { color: var(--color-muted); }

.sets { display: grid; gap: var(--gap); }

/* ==========================================================================
   PRODUCTPAGINA
   ========================================================================== */
.pdp { display: grid; gap: var(--space-lg); padding-top: var(--space-sm); }
.pdp__gallery { min-width: 0; }
.gallery-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
  list-style: none; padding: 0;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track li { scroll-snap-align: start; aspect-ratio: 4 / 5; background: var(--color-surface); }
.gallery-track img { width: 100%; height: 100%; object-fit: cover; }
.gallery-counter { display: flex; justify-content: center; gap: 0.4rem; padding-top: 0.9rem; }
.gallery-counter button { width: 28px; height: 28px; display: grid; place-items: center; }
.gallery-counter button span { width: 18px; height: 1px; background: var(--color-border); transition: background-color var(--dur) var(--ease); }
.gallery-counter button[aria-current="true"] span { background: var(--color-text); }

.pdp__info { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.pdp__header { display: grid; gap: 0.5rem; }
.pdp__category { font-size: var(--fs-sm); color: var(--color-muted); }
.pdp__category a:hover { color: var(--color-text); }
.pdp__title { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); line-height: 1.04; }
.pdp__subtitle { color: var(--color-muted); }
.pdp__price { font-size: var(--fs-lead); }
.pdp__price s { color: var(--color-muted); font-size: var(--fs-base); margin-left: 0.5rem; }
.pdp__description { max-width: 42ch; }
.pdp__form { display: grid; gap: var(--space-md); }
.pdp__buy { display: grid; gap: 0.75rem; grid-template-columns: auto minmax(0, 1fr); }
.pdp__buy .btn { min-width: 0; }
.pdp__meta { display: grid; gap: 0.5rem; font-size: var(--fs-sm); }
.pdp__meta p { display: flex; gap: 0.55rem; align-items: center; }
.pdp__meta svg { width: 16px; height: 16px; color: var(--color-muted); }
.pdp__share { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: center; font-size: var(--fs-sm); color: var(--color-muted); }

@media (min-width: 64em) {
  .pdp { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: clamp(2rem, 4vw, 5rem); align-items: start; }
  .gallery-track {
    grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto;
    gap: var(--gap); overflow: visible; margin-inline: 0;
  }
  .gallery-track li:first-child { grid-column: 1 / -1; }
  .gallery-counter { display: none; }
  .pdp__info { position: sticky; top: calc(var(--header-h) + 2rem); padding-bottom: var(--space-lg); }
}

.product-story { display: grid; gap: var(--space-lg); }
.product-story__media { aspect-ratio: 4 / 5; }
.product-story__text { display: grid; gap: var(--space-sm); align-content: center; }
.product-story__text p { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.3; max-width: 26ch; }
@media (min-width: 64em) {
  .product-story { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .product-story__media { grid-column: 1 / 6; }
  .product-story__text { grid-column: 7 / 12; }
}

/* ==========================================================================
   WINKELMAND
   ========================================================================== */
.cart-page { display: grid; gap: var(--space-lg); padding-bottom: var(--space-section); }
.cart-summary { background: var(--color-surface); padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem); display: grid; gap: 1rem; align-content: start; }
.cart-summary h2 { font-size: var(--fs-h3); }
.cart-page .cart-item { grid-template-columns: 7rem minmax(0, 1fr); }
@media (min-width: 64em) {
  .cart-page { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--space-lg); align-items: start; }
  .cart-summary { position: sticky; top: calc(var(--header-h) + 2rem); }
  .cart-page .cart-item { grid-template-columns: 9rem minmax(0, 1fr); }
}
.checkout-notice { display: grid; gap: 0.5rem; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { display: grid; gap: var(--space-xl); padding-bottom: var(--space-section); }
.contact__info { display: grid; gap: var(--space-lg); align-content: start; }
.contact__phone { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1.1; display: inline-block; white-space: nowrap; }
.contact__phone:hover { font-style: italic; }
.details-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1.5rem; font-size: var(--fs-sm); }
.details-list dt { color: var(--color-muted); }
.details-list a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--color-border); }
.contact-form { display: grid; gap: 1.25rem; }
.contact-form .row { display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .contact-form .row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) {
  .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .contact__info { grid-column: 1 / 6; }
  .contact-form { grid-column: 7 / 13; }
}
@media (max-width: 23.99em) { .contact__phone { font-size: 1.875rem; } }

/* ==========================================================================
   JURIDISCH EN FAQ
   ========================================================================== */
.legal { display: grid; gap: var(--space-lg); padding-bottom: var(--space-section); }
.legal__aside { font-size: var(--fs-sm); display: grid; gap: 1rem; align-content: start; }
.legal__aside .details-list { grid-template-columns: max-content minmax(0, 1fr); }
.legal__nav { list-style: none; padding: 0; display: grid; gap: 0.1rem; }
.legal__nav a { color: var(--color-muted); display: inline-flex; min-height: 36px; align-items: center; }
.legal__nav a:hover, .legal__nav a[aria-current="page"] { color: var(--color-text); }
@media (min-width: 64em) {
  .legal { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .legal__aside { grid-column: 1 / 4; position: sticky; top: calc(var(--header-h) + 2rem); }
  .legal__body { grid-column: 5 / 12; }
}

.faq { display: grid; gap: var(--space-lg); padding-bottom: var(--space-section); }
.faq-group { display: grid; gap: var(--space-sm); }
.faq-group h2 { font-size: var(--fs-h3); }
@media (min-width: 64em) {
  .faq-group { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .faq-group h2 { grid-column: 1 / 5; }
  .faq-group .accordion { grid-column: 5 / 13; }
}

/* ==========================================================================
   JOURNAL
   ========================================================================== */
.journal-feature { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.journal-feature .frame { aspect-ratio: 4 / 3; }
.journal-feature__text { display: grid; gap: var(--space-sm); align-content: center; justify-items: start; }
.journal-feature__text p { color: var(--color-muted); }
@media (min-width: 64em) {
  .journal-feature { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .journal-feature .frame { grid-column: 1 / 8; }
  .journal-feature__text { grid-column: 9 / 13; }
}
.journal-grid { list-style: none; padding: 0; display: grid; gap: var(--space-lg) var(--gap); }
@media (min-width: 48em) { .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 90em) { .journal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.teaser { position: relative; display: grid; gap: 0.75rem; align-content: start; }
.teaser .frame { aspect-ratio: 4 / 3; }
.teaser .frame img { transition: transform 1.4s var(--ease-out); }
.teaser h3 { font-size: var(--fs-h4); }
.teaser p { color: var(--color-muted); font-size: var(--fs-sm); }
.teaser a::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) { .teaser:hover .frame img { transform: scale(1.04); } }

.article { padding-bottom: var(--space-section); }
.article__head { display: grid; gap: var(--space-sm); padding-block: var(--space-lg); }
.article__head h1 { font-size: var(--fs-h1); max-width: 16ch; }
.article__media { aspect-ratio: 16 / 10; margin-bottom: var(--space-xl); }
.article__body { font-size: var(--fs-lead); line-height: 1.7; }
.article__body p + p { margin-top: 1.2em; }
.article__body h2 { font-size: var(--fs-h3); margin: 2em 0 0.6em; }

/* ==========================================================================
   OVER AVELLIQUE
   ========================================================================== */
.about-hero__media { aspect-ratio: 4 / 5; }
@media (min-width: 48em) { .about-hero__media { aspect-ratio: 16 / 9; } }
.about-block { display: grid; gap: var(--space-lg); }
.about-block__media { aspect-ratio: 4 / 5; }
.about-block__text { display: grid; gap: var(--space-sm); align-content: center; }
.about-block__text p { color: var(--color-muted); }
@media (min-width: 64em) {
  .about-block { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .about-block__media { grid-column: 1 / 6; }
  .about-block__text { grid-column: 7 / 12; }
  .about-block--reverse .about-block__media { grid-column: 8 / 13; grid-row: 1; }
  .about-block--reverse .about-block__text { grid-column: 2 / 7; grid-row: 1; }
}
.materials { list-style: none; padding: 0; display: grid; gap: 0 var(--gap); border-top: 1px solid var(--color-border); }
@media (min-width: 48em) { .materials { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .materials { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.materials li { padding-block: 1.5rem; border-bottom: 1px solid var(--color-border); display: grid; gap: 0.4rem; align-content: start; }
.materials h3 { font-size: var(--fs-h4); }
.materials p { color: var(--color-muted); font-size: var(--fs-sm); }

.cta-band { display: grid; gap: var(--space-md); justify-items: start; }
@media (min-width: 48em) { .cta-band { grid-template-columns: 1fr auto; align-items: end; } }

.account-card { max-width: 34rem; display: grid; gap: var(--space-sm); padding-bottom: var(--space-section); }
.account-card p { color: var(--color-muted); }

/* ==========================================================================
   AANVULLINGEN: homepage-grid, productpagina, winkelmand, journal
   ========================================================================== */
@media (min-width: 64em) {
  .product-grid--home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .journal-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 90em) {
  .journal-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card[aria-hidden="true"] .skeleton { width: 100%; }

.shop-toolbar__sort { display: flex; align-items: center; }

/* Productpagina */
.pdp__breadcrumbs { padding-top: var(--space-md); margin-bottom: var(--space-sm); }
.pdp__share .link { min-height: 36px; }
.pdp__share > span { margin-right: 0.25rem; }
.product-story__text .meta { font-family: var(--font-sans); font-size: var(--fs-sm); }

.lifestyle-band { display: grid; gap: var(--space-sm); }
.lifestyle-band__media { aspect-ratio: 4 / 5; }
.lifestyle-band__media img { transition: transform 1.6s var(--ease-out); }
.lifestyle-band__text { display: grid; gap: 0.35rem; }
@media (min-width: 48em) { .lifestyle-band__media { aspect-ratio: 21 / 9; } }
@media (hover: hover) { .lifestyle-band:hover .lifestyle-band__media img { transform: scale(1.03); } }

/* Winkelmand */
.cart-drawer__list { margin-top: 1.25rem; }
.cart-drawer__empty { margin-top: 1.5rem; }
.cart-page__empty { padding-bottom: var(--space-lg); }
.cart-item__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.notice p + p { margin-top: 0.4rem; }
.notice a { text-decoration: underline; text-underline-offset: 0.2em; }

/* Journal */
.journal-feature__text h2 { font-size: var(--fs-h2); }
.journal-feature__text h2 a:hover, .teaser h3 a:hover { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.article__body > * { max-width: 62ch; }
.article__products { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-border); display: grid; gap: 0.5rem; }
.article__products ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }

/* Juridisch */
.legal__body ol { padding-left: 1.2em; }
.legal__body li + li { margin-top: 0.4em; }
.legal__body .notice { margin-top: 0; }
.legal__body h2:first-child, .legal__body .notice + h2 { margin-top: 1.2em; }
.legal__body > h2:first-child { margin-top: 0; }

/* Hero op desktop: titel binnen het scherm houden, ook op lage schermen */
@media (min-width: 64em) {
  .hero__content { font-size: min(clamp(3.5rem, 0.9rem + 5vw, 7.25rem), 11.5vh); padding-bottom: 0.25rem; }
  .hero__detail { grid-column: 2 / 5; width: 64%; }
}
@media (min-width: 64em) {
  /* Eén rij: beeld rechts over de volle hoogte, detailbeeld boven, titel onderaan */
  .hero__inner {
    grid-template-rows: minmax(0, 1fr);
    height: calc(100svh - var(--announce-h) - var(--header-h));
    min-height: 38rem;
    max-height: 62rem;
    padding-bottom: var(--space-lg);
  }
  .hero__media { grid-row: 1; height: 100%; min-height: 0; }
  .hero__detail { grid-row: 1; }
  .hero__content { grid-row: 1; align-self: end; }
}
@media (min-width: 64em) and (max-height: 44em) {
  .hero__content { grid-row: 1; }
}
@media (min-width: 64em) and (max-width: 79.99em) {
  .hero__content { font-size: min(3.75rem, 11.5vh); }
}
/* Mobiel: eerst de tekst, daarna navigatie en bedrijfsgegevens */
@media (max-width: 63.99em) {
  .legal__aside { order: 2; padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
}

/* ==========================================================================
   ACCOUNT, CHECKOUT EN BESTELLING (databaseversie)
   ========================================================================== */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.account-auth, .account-grid { display: grid; gap: var(--gap); padding-bottom: var(--space-section); }
@media (min-width: 64em) {
  .account-auth { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .account-panel--wide { grid-column: 1 / -1; }
}
.account-col { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
.account-panel { background: var(--color-ivory); border: 1px solid var(--color-border); padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem); display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.account-panel h2 { font-size: var(--fs-h3); }
.account-panel--narrow { max-width: 30rem; margin-bottom: var(--space-section); }
.account-form { display: grid; gap: 1rem; }
.account-form .row { display: grid; gap: 1rem; }
@media (min-width: 40em) { .account-form .row { grid-template-columns: 1fr 1fr; } }
.account-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; }
.account-orders { list-style: none; padding: 0; border-top: 1px solid var(--color-border); }
.account-orders li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 1.25rem; padding: 0.9rem 0; border-bottom: 1px solid var(--color-border); }
.account-orders__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; font-size: var(--fs-sm); }
.account-orders__number { font-family: var(--font-serif); font-size: 1.125rem; }
.account-orders__invoice { font-size: var(--fs-xs); white-space: nowrap; }
@media (max-width: 29.99em) { .account-orders li { grid-template-columns: 1fr; } }
@media (min-width: 48em) { .account-orders__link { grid-template-columns: 1.2fr 1fr 1fr auto; align-items: center; } }
.account-head__title { display: flex; align-items: center; gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); }
.account-head__title .brand-monogram { height: clamp(2.5rem, 2rem + 2vw, 3.75rem); width: auto; }
.account-head__title h1::after { display: none; }
.account-reviews { list-style: none; padding: 0; display: grid; gap: 1rem; border-top: 1px solid var(--color-border); padding-top: 1rem; }

.checkout { display: grid; gap: var(--space-lg); padding-bottom: var(--space-section); }
@media (min-width: 64em) {
  .checkout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-lg); align-items: start; }
  .checkout-summary { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.checkout-form { display: grid; gap: var(--space-md); }
.checkout-group { border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; min-width: 0; }
.checkout-group legend { margin-bottom: 0.25rem; padding: 0; }
.checkout-form .row { display: grid; gap: 1rem; }
@media (min-width: 40em) { .checkout-form .row { grid-template-columns: 1fr 1fr; } }
.checkout-lines { list-style: none; padding: 0; display: grid; gap: 0.9rem; padding-bottom: 0.5rem; }
.checkout-lines li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; }
.checkout-lines img { width: 3.5rem; aspect-ratio: 4 / 5; object-fit: cover; background: var(--color-surface); }
.field .check { align-items: flex-start; }
.field .check input { margin-top: 0.15rem; }
.check a { position: relative; z-index: 1; }
.order-item { grid-template-columns: minmax(0, 1fr); }
#checkout-test { margin-bottom: var(--space-md); }
@media (max-width: 63.99em) {
  /* Mobiel: gegevens vóór reviews en wachtwoord */
  .account-col { display: contents; }
  .account-grid [aria-labelledby="details-title"] { order: 2; }
  .account-grid [aria-labelledby="reviews-title"] { order: 3; }
  .account-grid [aria-labelledby="password-title"] { order: 4; }
}
.return-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--color-border); padding-block: 0.25rem; }
.return-line__qty { width: 5.5rem; min-height: 40px; padding-block: 0.3rem; }