/* Minigolf Lavanda - editorial magazine design system */

:root {
  --espresso: #2b1810;
  --espresso-2: #3d241a;
  --caramel: #c98a5e;
  --caramel-light: #e8c48a;
  --milk: #f7f1e6;
  --milk-2: #efe4d0;
  --lavender: #8a7ab8;
  --ink: #1d130d;
  --line: rgba(43, 24, 16, 0.18);
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-label: "Courier New", ui-monospace, monospace;
  --radius: 2px;
  --max: 1280px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--milk);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.05; margin: 0 0 .4em; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--caramel); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.label { font-family: var(--font-label); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--caramel); }
.rule { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* ---- reveal / motion ---- */
.reveal { opacity: 0; transform: translateY(24px); clip-path: inset(0 0 10% 0); transition: opacity .7s var(--ease), transform .7s var(--ease), clip-path .7s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.reveal--1.in-view { transition-delay: .05s; }
.reveal--2.in-view { transition-delay: .15s; }
.reveal--3.in-view { transition-delay: .25s; }
.reveal--4.in-view { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in-view { transition: none !important; transform: none !important; opacity: 1 !important; clip-path: none !important; }
}

/* ---- header ---- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--milk); border-bottom: 1px solid var(--line); }
.site-header__inner { max-width: var(--max); margin: 0 auto; padding: .75rem clamp(1.25rem, 4vw, 3rem); display: flex; align-items: center; gap: 2rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--espresso); flex-shrink: 0; }
.brand__mark { flex-shrink: 0; width: 36px; height: 36px; aspect-ratio: 1/1; }
.brand__word { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.1; }
.site-nav { display: flex; gap: 1.6rem; margin-left: auto; font-size: .92rem; }
.site-nav a { position: relative; padding: .3rem 0; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--caramel); transition: right .3s var(--ease); }
.site-nav a:hover::after, .site-nav a.is-active::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.cart-link { position: relative; color: var(--espresso); display: flex; }
.cart-count { position: absolute; top: -8px; right: -10px; background: var(--caramel); color: var(--milk); font-size: .65rem; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0); transition: transform .25s var(--ease); }
.cart-count.is-visible { opacity: 1; transform: scale(1); }
.cart-count.bump { animation: bump .4s var(--ease); }
@keyframes bump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.5); } }
.nav-toggle { display: none; background: none; border: none; color: var(--espresso); }

@media (max-width: 860px) {
  .site-nav { position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw, 320px); background: var(--espresso); color: var(--milk); flex-direction: column; padding: 5rem 2rem 2rem; gap: 1.5rem; transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility .35s; }
  .site-nav.is-open { transform: translateX(0); visibility: visible; }
  .nav-toggle { display: block; }
}

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.6rem; border: 1px solid var(--espresso); border-radius: var(--radius); background: var(--espresso); color: var(--milk); font-size: .9rem; letter-spacing: .02em; min-height: 44px; position: relative; overflow: hidden; isolation: isolate; }
.btn--sweep::before { content: ""; position: absolute; inset: 0; left: -100%; width: 100%; background: var(--caramel); transition: left .35s var(--ease); z-index: -1; }
.btn--sweep:hover::before, .btn--sweep:focus-visible::before { left: 0; }
.btn--outline { background: transparent; color: var(--espresso); }
.btn--outline.btn--sweep::before { background: var(--espresso); }
.btn--outline.btn--sweep:hover { color: var(--milk); }
.btn--ghost { background: transparent; border: 1px solid var(--milk); color: var(--milk); }
.btn--ghost:hover { background: rgba(247,241,230,.15); }
.btn--sm { padding: .55rem 1.1rem; font-size: .82rem; min-height: 36px; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- hero (home) ---- */
.hero { position: relative; overflow: hidden; }
.hero__grid { max-width: var(--max); margin: 0 auto; padding: clamp(2rem,6vw,4rem) clamp(1.25rem,4vw,3rem) clamp(3rem,8vw,6rem); display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.hero__kicker { font-family: var(--font-label); font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--caramel); margin-bottom: 1rem; }
.hero__title { font-size: clamp(2.6rem, 7vw, 5.4rem); color: var(--espresso); }
.hero__lede { font-size: 1.1rem; max-width: 34ch; color: var(--espresso-2); }
.hero__actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.hero__art { position: relative; aspect-ratio: 4/5; }
.hero__layer { position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; }
.hero__layer img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.25) saturate(1.1); }
.hero__layer--photo { inset: 6% 0 0 8%; transition: transform .9s var(--ease); }
.hero__layer--card { inset: auto 0 0 auto; width: 58%; aspect-ratio: 1/1; background: var(--caramel-light); top: 0; left: 0; display: flex; align-items: center; justify-content: center; transition: transform .9s var(--ease); }
.hero:hover .hero__layer--photo { transform: translate(-6px, -6px) rotate(-1deg); }
.hero:hover .hero__layer--card { transform: translate(6px, 6px) rotate(1deg); }
@media (prefers-reduced-motion: reduce) { .hero__layer--photo, .hero__layer--card { transition: none; } }
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } }

/* ---- page hero (inner pages) ---- */
.page-hero { background: var(--espresso); color: var(--milk); padding: clamp(3rem,8vw,5rem) 0 clamp(2rem,5vw,3rem); position: relative; overflow: hidden; }
.page-hero__inner { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.25rem,4vw,3rem); }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.page-hero p { max-width: 50ch; color: var(--caramel-light); font-size: 1.05rem; }

/* ---- breadcrumbs ---- */
.breadcrumbs { font-size: .82rem; color: var(--caramel-light); margin-bottom: 1rem; }
.breadcrumbs a { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .25s; }
.breadcrumbs a:hover { text-decoration-color: currentColor; }
.breadcrumbs span { opacity: .6; margin: 0 .4em; }

/* ---- numbered sections / dividers ---- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2.5rem; }
.section__num { font-family: var(--font-display); font-size: 1.1rem; color: var(--espresso); border: 1px solid var(--caramel); border-radius: 50%; width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.section__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0; }
.divider { width: 100%; height: 32px; color: var(--caramel); margin: 1rem 0; }

/* ---- sticky narrative layout (home composition) ---- */
.story { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; max-width: var(--max); margin: 0 auto; padding: clamp(2rem,5vw,3rem) clamp(1.25rem,4vw,3rem); }
.story__sticky { position: sticky; top: 6rem; align-self: start; }
.story__scroll { display: flex; flex-direction: column; gap: 3rem; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } .story__sticky { position: static; } }

/* ---- cards / products ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.75rem; }
.product-card { background: var(--milk-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); position: relative; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 18px 32px -16px rgba(43,24,16,.35); }
.product-card__media { aspect-ratio: 4/3; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__body { padding: 1.25rem; }
.product-card__badge { position: absolute; top: .8rem; left: .8rem; background: var(--caramel); color: var(--milk); font-family: var(--font-label); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; padding: .3rem .6rem; border-radius: var(--radius); }
.product-card__price { font-family: var(--font-display); font-size: 1.3rem; color: var(--espresso); }
.product-card__row { display: flex; align-items: baseline; justify-content: space-between; margin-top: .8rem; }

.strip { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
.strip .product-card { flex: 0 0 min(80vw, 300px); scroll-snap-align: start; }

/* ---- product detail ---- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.product-detail__media { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); }
.product-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__price { font-family: var(--font-display); font-size: 2.2rem; color: var(--espresso); margin: .5rem 0 1rem; }
.product-detail__meta { display: flex; gap: 1.5rem; font-size: .88rem; color: var(--espresso-2); margin-bottom: 1.5rem; flex-wrap: wrap; }
.product-detail__meta span { display: flex; align-items: center; gap: .4rem; }
.qty-row { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
.qty-control { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); }
.qty-control button { background: none; border: none; width: 40px; height: 44px; font-size: 1.1rem; }
.qty-control input { width: 46px; border: none; text-align: center; font-size: 1rem; }
@media (max-width: 760px) { .product-detail { grid-template-columns: 1fr; } }

/* ---- cart / checkout ---- */
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.cart-table th { text-align: left; font-family: var(--font-label); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--espresso-2); border-bottom: 1px solid var(--line); padding: .75rem .5rem; }
.cart-table td { padding: 1rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-table__product { display: flex; align-items: center; gap: 1rem; }
.cart-table__product img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); }
.cart-remove { color: var(--caramel); font-size: .82rem; text-decoration: underline; background: none; border: none; }
.cart-summary { max-width: 360px; margin-left: auto; background: var(--milk-2); padding: 1.5rem; border-radius: var(--radius); }
.cart-summary__row { display: flex; justify-content: space-between; margin-bottom: .6rem; font-size: .95rem; }
.cart-summary__row--total { font-family: var(--font-display); font-size: 1.3rem; border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .8rem; }
.cart-empty { text-align: center; padding: 3rem 1rem; color: var(--espresso-2); }

/* ---- forms ---- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; }
.field input, .field select, .field textarea { font: inherit; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--milk); accent-color: var(--caramel); min-height: 44px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--caramel); }
.field-error { color: #a33; font-size: .78rem; min-height: 1.1em; }
.form-msg { min-height: 1.4em; font-size: .9rem; margin-top: .6rem; }
.form-msg--ok { color: #2e6b3e; }
.form-msg--error { color: #a33; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* ---- newsletter (footer) ---- */
.newsletter-form { display: flex; flex-direction: column; gap: .6rem; }
.newsletter-form input[type=email] { padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--espresso-2); color: var(--milk); min-height: 44px; }
.newsletter-form input[type=email]::placeholder { color: var(--caramel-light); }

/* ---- notice / prose / legal ---- */
.notice { border: 1px solid var(--caramel); background: var(--milk-2); padding: 1.25rem 1.5rem; border-radius: var(--radius); font-size: .92rem; }
.notice--info { border-color: var(--lavender); }
.prose { max-width: 68ch; font-size: 1.02rem; }
.prose h2 { font-size: 1.5rem; margin-top: 2rem; }
.prose h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.prose ul { padding-left: 1.3rem; margin-bottom: 1em; }
.prose li { margin-bottom: .4em; }
.legal-toc { background: var(--milk-2); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 2rem; max-width: 42ch; }
.legal-toc strong { font-family: var(--font-label); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--caramel); display: block; margin-bottom: .6rem; }
.legal-toc a { display: block; padding: .25rem 0; font-size: .92rem; }
.legal-toc a:hover { color: var(--caramel); }

/* ---- faq ---- */
.faq { max-width: 70ch; }
.faq-item { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.faq-item summary { cursor: pointer; font-family: var(--font-display); font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--caramel); transition: transform .3s var(--ease); flex-shrink: 0; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: .8rem; color: var(--espresso-2); }

/* ---- contact ---- */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info__item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info__item svg { flex-shrink: 0; color: var(--caramel); margin-top: .2rem; }
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }

/* ---- planner (signature feature) ---- */
.planner { background: var(--espresso); color: var(--milk); border-radius: var(--radius); padding: clamp(2rem,5vw,3rem); position: relative; overflow: hidden; }
.planner__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.planner__controls { display: flex; flex-direction: column; gap: 1.25rem; }
.planner__field { display: flex; flex-direction: column; gap: .5rem; }
.planner__field label { font-family: var(--font-label); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--caramel-light); }
.planner__field input[type=range] { accent-color: var(--caramel); width: 100%; }
.planner__field select { background: var(--espresso-2); color: var(--milk); border: 1px solid var(--caramel); border-radius: var(--radius); padding: .6rem; min-height: 44px; }
.planner__value { font-family: var(--font-display); font-size: 1.4rem; }
.planner__result { background: var(--espresso-2); border-radius: var(--radius); padding: 1.5rem; }
.planner__result dl { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; margin: 0; }
.planner__result dt { color: var(--caramel-light); font-size: .9rem; }
.planner__result dd { margin: 0; font-family: var(--font-display); font-size: 1.1rem; text-align: right; }
@media (max-width: 760px) { .planner__grid { grid-template-columns: 1fr; } }

/* ---- grain texture ---- */
.grain { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; opacity: .035; z-index: 100; mix-blend-mode: multiply; }

/* ---- utilities ---- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }
.text-center { text-align: center; }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .gap-1 { gap: 1rem; } .gap-2 { gap: 2rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---- toast ---- */
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--espresso); color: var(--milk); padding: .8rem 1.4rem; border-radius: var(--radius); font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 200; }
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- footer ---- */
.site-footer { background: var(--espresso); color: var(--caramel-light); margin-top: 4rem; position: relative; }
.footer-divider { color: var(--caramel); display: block; }
.site-footer__inner { max-width: var(--max); margin: 0 auto; padding: 1rem clamp(1.25rem,4vw,3rem) 2rem; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 2rem; }
.footer-col { display: flex; flex-direction: column; gap: .7rem; }
.brand--footer { color: var(--milk); }
.footer-tag { font-size: .88rem; max-width: 30ch; }
.footer-contact { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.footer-contact a { text-decoration: underline; }
.footer-links a { display: block; padding: .15rem 0; font-size: .9rem; }
.footer-links a:hover { color: var(--milk); }
.site-footer__bottom { max-width: var(--max); margin: 0 auto; padding: 1rem clamp(1.25rem,4vw,3rem) 2rem; font-size: .8rem; opacity: .7; border-top: 1px solid rgba(247,241,230,.12); }
@media (max-width: 860px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .site-footer__inner { grid-template-columns: 1fr; } }

/* ---- cookie banner ---- */
.cookie-banner { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; max-width: 560px; margin: 0 auto; background: var(--espresso); color: var(--milk); padding: 1.25rem 1.5rem; border-radius: var(--radius); z-index: 300; box-shadow: 0 18px 40px -12px rgba(0,0,0,.4); }
.cookie-banner p { font-size: .88rem; margin-bottom: 1rem; }
.cookie-banner a { text-decoration: underline; color: var(--caramel-light); }
.cookie-banner__actions { display: flex; gap: .8rem; justify-content: flex-end; }

/* ---- product detail body ---- */
.product-detail__body { padding: 0; }
.product-detail__body h2 { margin-top: 0; }
.qty-btn { padding: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--espresso); cursor: pointer; font-size: 1.2rem; }
.qty-btn:hover { background: var(--milk-2); }
.qty-input { padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius); width: 60px; text-align: center; font-size: 1rem; }
.cart-table__header { display: grid; grid-template-columns: 1fr 120px 120px 60px; gap: 1rem; padding: 1rem; background: var(--milk-2); font-weight: 600; font-size: 0.9rem; }
.cart-table__product { display: grid; grid-template-columns: 1fr 120px 120px 60px; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--line); align-items: center; }

/* COMPONENTS:
.container - max-width content wrapper with responsive padding
.label - small uppercase mono eyebrow label
.rule - thin horizontal divider
.reveal / .reveal--1..4 - scroll-reveal animation wrapper + stagger delay
.site-header / .site-nav / .brand / .cart-link / .cart-count / .nav-toggle - header & nav
.btn / .btn--sweep / .btn--outline / .btn--ghost / .btn--sm / .btn--full - button variants
.hero / .hero__grid / .hero__title / .hero__art / .hero__layer(--photo|--card) - home hero with paper-layer motion
.page-hero / .page-hero__inner - dark hero banner for inner pages
.breadcrumbs - small breadcrumb trail
.section / .section__head / .section__num / .section__title - numbered editorial section
.divider - decorative SVG rule
.story / .story__sticky / .story__scroll - sticky-left scrolling-right composition
.card-grid / .product-card / .product-card__media / .product-card__badge / .product-card__price - product cards
.strip - horizontal scroll-snap card strip (mobile)
.product-detail / .product-detail__media / .product-detail__price / .product-detail__meta / .qty-row / .qty-control - product page
.cart-table / .cart-table__product / .cart-remove / .cart-summary / .cart-empty - cart & checkout
.form-grid / .field / .field--full / .field-error / .form-msg - form layout and validation
.newsletter-form - footer newsletter form
.notice / .notice--info - callout box
.prose - long-form legal/readable text column
.legal-toc - sticky-feel table of contents box for legal pages
.faq / .faq-item - details/summary accordion
.contact-layout / .contact-info / .contact-info__item - contact page split layout
.planner / .planner__grid / .planner__controls / .planner__field / .planner__result - Planer partije signature feature
.grain - fixed full-viewport grain texture overlay
.mt-*/.mb-*/.gap-*/.flex/.grid-2/.grid-3/.text-center - spacing & layout utilities
.toast - transient confirmation message
.site-footer / .footer-col / .footer-links / .footer-divider - footer
.cookie-banner - GDPR cookie consent banner
*/