.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 1000; transform: translateY(-180%); padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--color-ink); color: #fff; font-weight: 700; }
.skip-link:focus { transform: translateY(0); color: #fff; }
.site-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5); padding: 1rem clamp(1.25rem, 4vw, 3rem); border-bottom: 1px solid var(--color-border); background: rgb(246 248 251 / .94); backdrop-filter: blur(12px); }
.site-logo img { width: auto; height: 2.25rem; }
.site-nav { justify-self: center; }
.site-nav__list { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.6rem); margin: 0; padding: 0; list-style: none; }
.site-nav a { color: var(--color-ink); font-size: .925rem; font-weight: 600; text-decoration: none; }
.site-nav a:hover { color: var(--color-brand); }
.site-header__actions { display: flex; align-items: center; gap: .75rem; }
.nav-toggle { display: none; min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }
.nav-toggle__icon, .nav-toggle__icon::before, .nav-toggle__icon::after { display: block; width: 1.25rem; height: 2px; margin: auto; background: currentColor; content: ""; transition: transform var(--transition); }
.nav-toggle__icon::before { transform: translateY(-.38rem); }
.nav-toggle__icon::after { transform: translateY(.28rem); }
.btn { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: .75rem 1.35rem; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--color-brand); color: #fff !important; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: background var(--transition), transform var(--transition); }
.btn:hover { background: var(--color-brand-dark); transform: translateY(-1px); }
.btn-dark { background: var(--color-ink); }
.btn-secondary { border-color: var(--color-border); background: var(--color-surface); color: var(--color-ink) !important; }
.card { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.product-card { position: relative; display: flex; min-width: 0; flex-direction: column; color: inherit; text-decoration: none; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.product-card:hover { border-color: #aebfd4; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #e5edf7; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.product-card:hover .product-card__media img { transform: scale(1.025); }
.product-card__body { display: flex; flex: 1; flex-direction: column; gap: .4rem; padding: 1.125rem; }
.product-card__category { color: var(--color-brand); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.product-card__title { margin: 0; font-size: 1.05rem; }
.product-card__description { flex: 1; margin: 0; color: var(--color-ink-soft); font-size: .875rem; }
.product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .4rem; }
.product-card__price { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.product-card__link { color: var(--color-brand); font-size: .8rem; font-weight: 700; }
.badge { display: inline-flex; width: max-content; align-items: center; padding: .3rem .65rem; border-radius: var(--radius-pill); background: var(--color-ink); color: #fff; font-size: .7rem; font-weight: 700; }
.product-card .badge { position: absolute; top: .75rem; left: .75rem; z-index: 1; }
.eyebrow { margin-bottom: .5rem; color: var(--color-brand); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.muted { color: var(--color-ink-soft); }
.faq-toggle { color: var(--color-ink); }
.form-field { display: grid; gap: .4rem; }
.form-field label { font-size: .875rem; font-weight: 700; }
.form-control { width: 100%; min-height: 3rem; padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }
.modal { width: min(92vw, 42rem); border: 0; border-radius: var(--radius-lg); padding: 0; box-shadow: 0 24px 80px rgb(23 32 51 / .3); }
.modal::backdrop { background: rgb(23 32 51 / .65); }
@media (max-width: 62rem) { .site-header { grid-template-columns: auto auto 1fr; } .nav-toggle { display: inline-grid; place-items: center; } .site-nav { position: absolute; top: 100%; right: 1.25rem; left: 1.25rem; display: none; padding: 1rem; border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-md); } .site-nav[data-open="true"] { display: block; } .site-nav__list { align-items: stretch; flex-direction: column; gap: 0; } .site-nav a { display: block; padding: .75rem; } .site-header__actions { justify-self: end; } }
@media (max-width: 36rem) { .site-header { gap: .65rem; } .site-logo img { height: 1.9rem; } .site-header__actions .btn { display: none; } }