:root {
    --faf-ink: #161616;
    --faf-muted: #626262;
    --faf-paper: #f7f6f3;
    --faf-line: #e7e3dc;
    --faf-font: "Manrope", "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--faf-ink); background: #fff; font-family: var(--faf-font); }
a { color: inherit; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--faf-ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: 12px; z-index: 100; transform: translateY(-160%); background: var(--faf-ink); color: #fff; padding: 10px 14px; }
.skip-link:focus { transform: translateY(0); }
.container { width: min(1280px, calc(100% - 48px)); margin-inline: auto; }
.campaign-home { background: #111; }
.campaign-banner { position: relative; min-height: 560px; overflow: hidden; }
.campaign-banner img { display: block; width: 100%; min-height: 560px; object-fit: cover; }
.campaign-copy { position: absolute; left: 7%; bottom: 12%; color: #fff; max-width: 460px; display: grid; gap: 12px; }
.campaign-copy strong { font-size: clamp(48px, 8vw, 116px); line-height: .92; letter-spacing: -.07em; font-weight: 500; }
.campaign-copy small, .campaign-copy em { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-style: normal; }
.campaign-copy a { color: #fff; }
.site-header { position: relative; z-index: 5; background: #fff; }
.site-footer { background: var(--faf-ink); color: #fff; padding: 60px 0 24px; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.product-card img { aspect-ratio: .67; object-fit: cover; background: var(--faf-paper); }
@media (max-width: 760px) {
    .container { width: calc(100% - 36px); }
    .campaign-banner, .campaign-banner img { min-height: 560px; }
    .campaign-copy { left: 24px; right: 24px; bottom: 12%; }
    .campaign-copy strong { font-size: clamp(48px, 15vw, 76px); }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
.site-header { border-bottom: 1px solid var(--faf-line); }
.site-header__inner { min-height: 82px; display: flex; align-items: center; gap: 24px; }
.wordmark img, .custom-logo { display: block; width: 180px; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: 18px; flex: 1; }
.desktop-nav ul { display: flex; gap: 18px; list-style: none; padding: 0; margin: 0; }
.desktop-nav a, .header-actions a { text-decoration: none; font-size: 11px; letter-spacing: .1em; }
.header-search { display: flex; gap: 6px; align-items: center; }
.header-search input { border: 0; border-bottom: 1px solid var(--faf-ink); min-width: 180px; padding: 9px 0; }
.header-search button, .icon-button { border: 0; background: transparent; cursor: pointer; }
.header-actions { display: flex; gap: 12px; align-items: center; }
.menu-button { display: none; }
.mobile-menu { padding: 20px; border-top: 1px solid var(--faf-line); }
.mobile-menu ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.cart-count { display: inline-grid; place-items: center; min-width: 16px; height: 16px; border-radius: 50%; background: var(--faf-ink); color: #fff; font-size: 9px; }
.breadcrumb { display: flex; gap: 10px; font-size: 11px; color: var(--faf-muted); margin: 30px auto; width: min(1280px, calc(100% - 48px)); }
.product-card__media { display: block; overflow: hidden; background: var(--faf-paper); }
.product-card__media img { display: block; width: 100%; }
.product-card__meta { padding: 12px 4px 24px; }
.product-card__meta h3 { font-size: 14px; font-weight: 500; margin: 0 0 8px; }
.price { font-size: 13px; }
.empty-state { text-align: center; padding: 100px 20px; }
@media (max-width: 760px) { .site-header__inner { min-height: 64px; gap: 12px; } .menu-button { display: inline-flex; } .desktop-nav, .header-search { display: none; } .wordmark { flex: 1; } .wordmark img, .custom-logo { width: 170px; } .breadcrumb { width: calc(100% - 36px); } }