/* ==========================================================================
   AVELLIQUE · brand.css
   Huisstijl rond het logo: zwarte basis, champagnegoud, monogram en woordmerk.
   Wordt als laatste geladen en bouwt voort op de tokens in base.css.
   ========================================================================== */


/* ==========================================================================
   Donkere zones: header, aankondiging, hero, footer, sfeerbanden, menu, zoeken en beheer.
   Dezelfde kleurvariabelen krijgen hier hun donkere waarde, zodat alles erbinnen automatisch klopt.
   ========================================================================== */
.theme-dark, .announce, .site-header, .hero, .site-footer, .section--deep, .trust, .mobile-menu, .search-overlay, .pdp-sticky, .consent, body.admin, body.admin-auth {
  --color-bg: #0B0A09;
  --color-ivory: #12100E;
  --color-surface: #171411;
  --color-stone: #211D19;
  --color-border: #2E2923;
  --color-text: #F2EBDD;
  --color-muted: #A49A89;
  --color-success: #A9BC8A;
  --color-error: #E28D78;
  --gold-soft: #E6CD87;
  --gold-light: #F4E4A1;
  --gold-line: rgba(212, 175, 85, 0.28);
  color: var(--color-text);
}
body.admin, body.admin-auth { background: var(--color-bg); color-scheme: dark; }
.hero { background: var(--black); }

/* ---------- Logo-varianten ----------
   .brand-lockup        monogram + woordmerk naast elkaar (header, mobiel menu)
   .brand-logo          volledig gestapeld logo als afbeelding (footer, contact)
   .brand-logo--dark    versie met zwarte tekst voor lichte achtergronden
   .brand-monogram      alleen het gouden A-monogram
   .brand-wordmark      vector-woordmerk, neemt de tekstkleur over (currentColor)
   Afbeeldingen schalen altijd op hoogte of breedte met behoud van verhouding. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.55rem, 0.4rem + 0.5vw, 0.85rem);
  min-height: 44px;
  color: var(--color-text);
  white-space: nowrap;
}
.brand-monogram { display: block; width: auto; height: 100%; object-fit: contain; flex-shrink: 0; }
.brand-lockup .brand-monogram { height: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); }
/* Woordmerk en slogan als masker: één gecachet vectorbestand, kleur via currentColor */
.brand-wordmark, .brand-tagline {
  display: block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--mask) center / contain no-repeat;
  mask: var(--mask) center / contain no-repeat;
}
.brand-wordmark { --mask: url("../assets/brand/avellique-wordmark.svg"); aspect-ratio: 5352 / 752; height: clamp(0.8rem, 0.66rem + 0.45vw, 1.05rem); }
.brand-tagline { --mask: url("../assets/brand/avellique-tagline.svg"); aspect-ratio: 4227 / 130; width: 100%; }
.brand-logo { display: block; width: 100%; height: auto; object-fit: contain; }
.brand-logo--footer { max-width: 15rem; }
.brand-logo--contact { max-width: 18rem; margin-inline: auto; }
.brand-mark-sm { height: 1.75rem; width: auto; }

/* Oude tekstlogo-class blijft werken, maar zonder letterspatiëring-hack */
.logo { letter-spacing: 0; margin-right: 0; font-family: inherit; }

/* ---------- Gouden details ---------- */
.gold-text {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--gold);
  -webkit-text-fill-color: transparent;
}
/* Korte gouden lijn, ontleend aan de lijn onder het logo */
.gold-rule { display: block; width: 3rem; height: 1px; background: var(--gold-gradient); border: 0; }
.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

a:focus-visible, button:focus-visible { box-shadow: var(--focus); }

/* ---------- Aankondigingsbalk ---------- */
.announce {
  background: var(--black-deep);
  color: var(--gold-soft);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  border-bottom: 1px solid var(--gold-line);
}

/* ---------- Header ---------- */
.site-header { background: var(--black); }
.site-header.is-scrolled { border-bottom-color: var(--gold-line); }
.nav-link { color: var(--color-text); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; }
.nav-link::after { background: var(--gold-gradient); height: 1px; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--gold-soft); }
.icon-btn { color: var(--color-text); transition: color var(--dur-fast) var(--ease); }
.icon-btn:hover { opacity: 1; color: var(--gold); }
.has-overlay-header .site-header:not(.is-scrolled) { background: linear-gradient(to bottom, rgba(5, 5, 4, 0.72), rgba(5, 5, 4, 0)); }
.nav-panel { border-top: 1px solid var(--gold-line); }
.nav-panel a:hover span:first-child { color: var(--gold-soft); }

/* ---------- Knoppen ---------- */
.btn {
  --btn-bg: var(--gold-gradient);
  --btn-fg: var(--color-on-accent);
  --btn-bd: transparent;
  background: var(--gold-gradient);
  background-size: 220% 100%;
  background-position: 0% 50%;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  font-weight: 500;
  transition: background-position var(--dur-slow) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn::before { display: none; }
.btn:hover { background-position: 100% 50%; box-shadow: 0 10px 30px -18px rgba(212, 175, 85, 0.65); }
.btn:disabled:hover { background-position: 0% 50%; box-shadow: none; }
.btn--outline, .btn--light {
  background: transparent;
  color: var(--gold-soft);
  border-color: var(--gold);
}
.btn--outline:hover, .btn--light:hover {
  background: var(--gold-gradient);
  background-size: 220% 100%;
  color: var(--color-on-accent);
  border-color: transparent;
}
.btn--small { letter-spacing: 0.12em; font-size: 0.6875rem; }
.btn--danger { --btn-fg: var(--color-error); background: transparent; color: var(--color-error); border-color: var(--color-error); }
.btn--danger:hover { background: var(--color-error); color: var(--black); }

/* ---------- Links ---------- */
.link { color: var(--gold-soft); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; }
.link span::after { background: var(--gold-gradient); }
.link:hover { color: var(--gold-light); }
.text-btn { color: var(--gold-soft); text-decoration-color: var(--gold-line); }
.text-btn:hover { color: var(--gold-light); text-decoration-color: currentColor; }

/* ---------- Typografie en koppen ---------- */
.page-head h1::after,
.hero__title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin-top: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  background: var(--gold-gradient);
}
.section-head h2 { color: var(--color-text); }
.meta { color: var(--color-muted); }
.lead { color: var(--color-text); }

/* ---------- Secties ---------- */
.section--surface { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.section--deep { background: var(--black-deep); border-block: 1px solid var(--gold-line); }
.section--deep h2 { color: var(--color-text); }

/* ---------- Formulieren ---------- */
.input, .select, .textarea { background: var(--color-ivory); color: var(--color-text); }
.input::placeholder, .textarea::placeholder { color: #6F675B; }
.input:hover, .select:hover, .textarea:hover { border-color: #4A4136; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.check input { border-color: #5A5044; background: var(--color-ivory); }
.check input:checked { border-color: var(--gold); }
.check input::after { background: var(--gold); }
.select option { background: var(--color-ivory); color: var(--color-text); }
.form-status.is-success { border-color: var(--color-success); color: var(--color-success); }
.notice { border-color: var(--gold-line); }

/* ---------- Productkaarten ---------- */
.card__media { background: var(--color-surface); }
.card__title { color: var(--color-text); }
.card__title a { transition: color var(--dur-fast) var(--ease); }
.card:hover .card__title a { color: var(--gold-soft); }
.card__price { color: var(--gold-soft); letter-spacing: 0.02em; }
.card__category { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.6875rem; }
.quick-add__btn { color: var(--color-text); border-color: var(--gold-line); }
.quick-add__btn:hover { background: var(--gold); color: var(--color-on-accent); border-color: var(--gold); }
.quick-add__sizes button:hover { border-color: var(--gold); color: var(--gold-soft); }
.badge, .card__badge { background: var(--black); color: var(--gold-soft); border: 1px solid var(--gold-line); }

/* ---------- Productpagina ---------- */
.swatch input:checked + label span, .swatch input:checked + label { box-shadow: 0 0 0 1px var(--color-bg), 0 0 0 2px var(--gold); }
.size-option input:checked + label { border-color: var(--gold); color: var(--gold-soft); background: var(--color-ivory); }
.qty { border-color: var(--color-border); }
.qty button:hover { color: var(--gold); }
.accordion details { border-color: var(--color-border); }
.accordion summary:hover { color: var(--gold-soft); }
.plus::before, .plus::after { background: var(--gold); }

/* ---------- Winkelmand, drawers, overlays ---------- */
.drawer { background: var(--color-bg); color: var(--color-text); }
.search-overlay, .mobile-menu { background: var(--black); color: var(--color-text); }
.drawer { border-left: 1px solid var(--gold-line); }
.drawer--left { border-left: 0; border-right: 1px solid var(--gold-line); }
.drawer__head, .drawer__foot { border-color: var(--color-border); }
.cart-summary { background: var(--color-surface); border: 1px solid var(--color-border); }
.summary-row--total { border-top-color: var(--gold-line); }
.summary-row--total span:last-child { color: var(--gold-soft); }
.shipping-progress__bar, .progress__bar { background: var(--gold-gradient); }
.toast { background: var(--color-ivory); color: var(--color-text); border: 1px solid var(--gold-line); }
.payment-methods li { border-color: var(--color-border); color: var(--color-muted); }
.mobile-menu__primary a:hover, .mobile-menu__secondary a:hover { color: var(--gold-soft); }
.mobile-menu__top { border-bottom: 1px solid var(--gold-line); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--black-deep);
  border-top: 1px solid var(--gold-line);
}
.footer-brand { gap: var(--space-md); }
.footer-brand p { color: var(--color-muted); }
.footer-col h2 { color: var(--gold); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.6875rem; font-weight: 500; }
.footer-col a:hover, .footer-bottom a:hover { color: var(--gold-soft); }
.footer-bottom { border-top-color: var(--color-border); align-items: center; }
.footer-legal { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.footer-legal a { color: var(--color-text); }

/* ---------- Account, checkout en bestelling ---------- */
.account-panel { background: var(--color-ivory); border-color: var(--color-border); }
.account-panel h2 { color: var(--color-text); }

.account-orders a:hover .account-orders__number { color: var(--gold-soft); }
.account-orders__number { color: var(--color-text); }
.checkout-summary { border-top: 1px solid var(--gold); }
.order-invoice { display: inline-flex; align-items: center; gap: 0.5rem; }

/* ---------- Contact ---------- */
.contact__phone { color: var(--gold-soft); }
.contact__phone:hover { color: var(--gold-light); }
.contact__brand { display: grid; justify-items: start; gap: 1rem; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.contact__brand .brand-logo { max-width: 13rem; margin: 0; }

/* ---------- Juridische pagina's ---------- */
.legal__nav a[aria-current="page"] { color: var(--gold-soft); }
.legal__nav a:hover { color: var(--gold-soft); }
.details-list dt { color: var(--color-muted); }
.config-missing { color: var(--color-error); border-bottom-color: var(--color-error); }

/* ---------- Reviews ---------- */
.review blockquote p { color: var(--color-text); }
.review figcaption { color: var(--color-muted); }
.review::before { content: ""; display: block; width: 2rem; height: 1px; margin-bottom: 1rem; background: var(--gold-gradient); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ---------- reCAPTCHA: badge verborgen, vermelding bij het formulier ---------- */
.has-recaptcha .grecaptcha-badge { visibility: hidden; }
.recaptcha-note { font-size: 0.6875rem; line-height: 1.5; color: var(--color-muted); margin-top: 0.25rem; }
.recaptcha-note .text-btn { font-size: inherit; }

/* ---------- Cookietoestemming (alleen zichtbaar als Google-tags zijn ingesteld) ---------- */
.consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: var(--z-toast); max-width: 34rem; margin-inline: auto; padding: 1.1rem 1.25rem; display: grid; gap: 0.9rem; background: var(--black); border: 1px solid var(--gold-line); box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); font-size: var(--fs-sm); }
.consent__actions { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Vertrouwen onder de hero ---------- */
.trust { border-block: 1px solid var(--gold-line); background: var(--black-deep); }
.trust__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; padding: clamp(1.1rem, 0.8rem + 1vw, 1.6rem) 0; margin: 0; }
.trust__list li { display: grid; gap: 0.15rem; padding-left: 0.9rem; border-left: 1px solid var(--gold-line); }
.trust__list strong { font-weight: 500; font-size: var(--fs-sm); color: var(--gold-soft); letter-spacing: 0.02em; }
.trust__list span { font-size: var(--fs-xs); color: var(--color-muted); }
.trust__list a { color: var(--color-text); }
@media (min-width: 64em) { .trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Honden en katten ---------- */
.pets { list-style: none; padding: 0; display: grid; gap: clamp(1rem, 0.6rem + 1.5vw, 1.75rem); }
@media (min-width: 48em) { .pets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pet-card { display: grid; gap: 0.8rem; align-content: start; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--color-surface); border: 1px solid var(--color-border); position: relative; }
.pet-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 3rem; height: 1px; background: var(--gold-gradient); }
.pet-card h3 { font-family: var(--font-serif); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.15; font-weight: 400; }
.pet-card p:not(.eyebrow) { color: var(--color-muted); max-width: 44ch; }

/* ---------- Belofte ---------- */
.promise { display: grid; gap: clamp(1rem, 0.5rem + 2vw, 3rem); }
@media (min-width: 64em) { .promise { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }
.promise__text { display: grid; gap: 1rem; color: var(--color-text); }
.promise__text p:last-child { color: var(--color-muted); }

/* ---------- Productpagina: geruststelling ---------- */
.pdp-promise { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; font-size: var(--fs-xs); color: var(--color-muted); border-top: 1px solid var(--color-border); padding-top: 0.9rem; }
.pdp-promise li::before { content: ""; display: inline-block; width: 0.9rem; height: 1px; margin-right: 0.55rem; vertical-align: middle; background: var(--gold-gradient); }
.cart-promise { font-size: var(--fs-xs); color: var(--color-muted); text-align: center; }

/* ---------- Testmodus ---------- */
.notice--test { border-color: var(--color-error); color: var(--color-text); background: rgba(226, 141, 120, 0.08); }
.notice--test strong { color: var(--color-error); }
.checkout-terms-note { margin-top: 0.5rem; }
.badge-test { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem; border: 1px solid var(--color-error); color: var(--color-error); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; vertical-align: middle; }

/* ==========================================================================
   Conversie: visuele hiërarchie
   Goud (verloop) is gereserveerd voor de belangrijkste actie per scherm, zodat die er direct uitspringt.
   Secundaire acties zijn omlijnd of een tekstlink. Geen knipperende of opdringerige effecten: past niet bij luxe.
   ========================================================================== */
.btn--cta { min-height: 3.5rem; padding-inline: 2rem; font-size: 0.8125rem; letter-spacing: 0.16em; gap: 0.6rem; box-shadow: 0 12px 32px -20px rgba(212, 175, 85, 0.7); }
.btn--cta:hover { box-shadow: 0 16px 36px -18px rgba(212, 175, 85, 0.85); transform: translateY(-1px); }
.btn--cta:active { transform: translateY(0); box-shadow: 0 6px 18px -14px rgba(212, 175, 85, 0.7); }
.btn--cta .icon { width: 1rem; height: 1rem; }
.btn:disabled, .btn[disabled] { background: var(--color-stone); color: var(--color-muted); box-shadow: none; transform: none; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .btn--cta:hover { transform: none; } }

.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.hero__secondary { font-size: 0.75rem; }

/* Productpagina */
.stock.is-low { color: var(--gold-soft); }
.stock.is-low::before { background: var(--gold); }
.pdp__reviews-link { display: inline-block; margin-top: 0.4rem; font-size: var(--fs-xs); }
.pdp__buy .btn--cta { flex: 1; }
.pdp__nudge { margin-top: 0.75rem; font-size: var(--fs-xs); color: var(--color-muted); }
.pdp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-header) - 1); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem clamp(1rem, 4vw, 1.5rem) calc(0.75rem + env(safe-area-inset-bottom)); background: rgba(5, 5, 4, 0.96); border-top: 1px solid var(--gold-line); backdrop-filter: blur(8px); }
.pdp-sticky[hidden] { display: none; }
.pdp-sticky__info { display: grid; min-width: 0; }
.pdp-sticky__title { font-family: var(--font-serif); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-sticky__price { font-size: var(--fs-sm); color: var(--gold-soft); }
.pdp-sticky .btn--cta { min-height: 3rem; padding-inline: 1.25rem; flex-shrink: 0; }
@media (min-width: 64em) { .pdp-sticky { display: none !important; } }
@media (max-width: 63.99em) { .has-pdp-sticky .toast { bottom: 5.5rem; } .has-pdp-sticky .site-footer { padding-bottom: 5rem; } }

/* Winkelmand */
.drawer__foot .btn--cta, .cart-summary .btn--cta { margin-top: 0.25rem; }
.cart-continue { display: block; margin: 0.25rem auto 0; font-size: var(--fs-xs); color: var(--color-muted); }

/* Afrekenen: voortgang en vertrouwen */
.checkout-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 0; padding: 0; margin: clamp(1rem, 2vw, 1.75rem) 0 0; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); counter-reset: step; }
.checkout-steps li { display: flex; align-items: center; counter-increment: step; }
.checkout-steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; border: 1px solid var(--color-border); border-radius: 50%; font-size: 0.6875rem; }
.checkout-steps li + li::after { content: none; }
.checkout-steps li:not(:last-child)::after { content: ""; display: inline-block; width: clamp(1rem, 3vw, 2.5rem); height: 1px; margin: 0 0.75rem; background: var(--color-border); }
.checkout-steps .is-done::before { content: "✓"; border-color: var(--gold-deep); color: var(--gold-soft); }
.checkout-steps .is-done a { color: var(--color-muted); }
.checkout-steps .is-current { color: var(--color-text); }
.checkout-steps .is-current::before { background: var(--gold-gradient); border-color: transparent; color: var(--color-on-accent); }
.field-hint { margin-top: -0.6rem; }
.checkout-trust { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.25rem; font-size: var(--fs-xs); color: var(--color-muted); }
.checkout-trust li::before { content: ""; display: inline-block; width: 0.35rem; height: 0.35rem; margin-right: 0.45rem; border-radius: 50%; background: var(--gold); vertical-align: middle; }

/* Bestelbevestiging: wat gebeurt er nu */
.next-steps { list-style: none; padding: 0; margin: 0 0 var(--space-lg); display: grid; gap: 1rem; counter-reset: next; }
@media (min-width: 48em) { .next-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.next-steps li { display: grid; gap: 0.25rem; padding: 1.1rem 1.25rem; border: 1px solid var(--color-border); background: var(--color-surface); counter-increment: next; }
.next-steps li::before { content: counter(next); font-family: var(--font-serif); font-size: 1.5rem; color: var(--gold-soft); line-height: 1; }
.next-steps .is-done { border-color: var(--gold-line); }
.next-steps span { font-size: var(--fs-sm); color: var(--color-muted); }

/* ---------- Licht thema: details ---------- */
.card__media, .pdp__gallery, .frame { background: var(--color-stone); }
.input::placeholder, .textarea::placeholder { color: #8F8677; }
.input:hover, .select:hover, .textarea:hover { border-color: #B9AC96; }
.check input { border-color: #9C917F; }
.section--surface { border-color: var(--color-border); }
.toast { box-shadow: 0 18px 40px -24px rgba(27, 24, 21, 0.45); }
.drawer { box-shadow: -24px 0 60px -30px rgba(27, 24, 21, 0.35); }
.pet-card, .cart-summary, .account-panel, .next-steps li { box-shadow: 0 1px 0 rgba(27, 24, 21, 0.03); }
.btn--cta { box-shadow: 0 12px 28px -18px rgba(140, 100, 20, 0.55); }
.btn--cta:hover { box-shadow: 0 16px 32px -16px rgba(140, 100, 20, 0.6); }
.hero .btn--cta, .section--deep .btn--cta, .pdp-sticky .btn--cta { box-shadow: 0 12px 32px -20px rgba(212, 175, 85, 0.7); }
.btn:disabled, .btn[disabled] { background: var(--color-stone); color: var(--color-muted); }
@media (min-width: 64em) { .shop-layout .filters { box-shadow: none; background: transparent; } }