/* ============================================================
AG54 — Responsive Enhancement Layer
Add LAST in , after all other stylesheets (including
styles-perf.css), on every page.
elements sometimes do)
getting visually truncated at the button's edge, as seen on
the "RESERVE MY SPOT — PRE-ORDE[R]" CTA.
!important is used deliberately here: this rule must always
win regardless of stylesheet load order or future edits. */
.btn,
.btn span {
white-space: normal !important;
overflow: visible !important;
}
.btn {
text-align: center;
line-height: 1.35;
height: auto;
min-height: 44px;
}
/* Defensive net for any other long, unbroken strings (long email
addresses, German/French compounds, URLs pasted as text, etc.) */
h1, h2, h3, p, a, span, label, button, li, td {
overflow-wrap: break-word;
word-break: break-word;
}
/* ── 1. LANGUAGE SELECTOR — accessible, larger tap target ──────── */
.lang-selector {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.04em;
padding: 6px 8px;
min-height: 36px;
border-radius: var(--radius-sm);
border: 0.5px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
}
.lang-selector:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* ── 2. HEADER — tighter on small screens, no wrap/clip ─────────── */
@media (max-width: 1024px) {
.site-header__nav {
display: none; /* mobile-nav dialog takes over below 1024px */
}
}
@media (max-width: 480px) {
.site-header__inner {
padding-left: var(--space-4);
padding-right: var(--space-4);
}
.site-header__logo svg {
width: 110px;
height: auto;
}
.site-header__actions {
gap: var(--space-2);
}
}
/* ── 3. MOBILE NAV — large tap targets, breathing room ──────────── */
@media (max-width: 768px) {
.mobile-nav {
padding: var(--space-8) var(--space-6);
gap: var(--space-2);
}
.mobile-nav .nav-link {
min-height: 52px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-lg);
width: 100%;
text-align: center;
}
}
/* ── 4. HAMBURGER / THEME TOGGLE — minimum 44×44 tap target ─────── */
.hamburger,
.theme-toggle,
.mobile-nav__close,
.social-link,
.gallery__arrow,
.back-to-top {
min-width: 40px;
min-height: 40px;
}
/* ── 5. HERO SECTIONS — fluid type + safe padding on phones ─────── */
@media (max-width: 640px) {
.hero,
.section-hero {
min-height: 78vh;
}
.hero__content,
.section-hero__content {
padding-left: var(--space-5);
padding-right: var(--space-5);
}
.hero__title,
.text-display.text-3xl {
font-size: clamp(2.2rem, 11vw, 3.2rem);
line-height: 1.05;
}
.hero__subtitle {
font-size: var(--text-sm);
line-height: 1.7;
}
.hero__actions,
.section-hero .btn {
width: 100%;
}
.hero__actions {
flex-direction: column;
gap: var(--space-3);
}
.hero__actions .btn,
.hero__actions a.btn {
width: 100%;
text-align: center;
}
}
/* ── 6. SECTION SPACING — tighter rhythm on phones ──────────────── */
@media (max-width: 640px) {
.section {
padding-top: var(--space-12);
padding-bottom: var(--space-12);
}
.section--tight {
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
.section__inner {
padding-left: var(--space-5);
padding-right: var(--space-5);
}
.section__title {
font-size: clamp(1.5rem, 7vw, 2rem);
}
.section__desc {
font-size: var(--text-sm);
}
}
/* ── 7. EDITORIAL / COLLECTIONS GRID — single column, full-bleed cards */
@media (max-width: 640px) {
.collections-grid,
.collections-grid--editorial {
grid-template-columns: 1fr !important;
gap: var(--space-6);
}
.editorial-card__image {
aspect-ratio: 4 / 5;
}
.editorial-card__content {
padding: var(--space-4);
}
}
/* ── 8. PRODUCT PAGE — gallery + info stack, sticky disabled ────── */
@media (max-width: 900px) {
.two-col {
grid-template-columns: 1fr !important;
gap: var(--space-8) !important;
}
.gallery {
position: static;
top: auto;
}
}
@media (max-width: 480px) {
.gallery__thumb {
width: 56px;
height: 74px;
}
.size-btn {
min-width: 46px;
min-height: 44px;
padding: var(--space-2) var(--space-3);
}
}
/* ── 9. FORMS — full-width inputs, no zoom-on-focus on iOS ──────── */
@media (max-width: 640px) {
.contact-grid {
grid-template-columns: 1fr !important;
gap: var(--space-10);
}
.form-group {
margin-bottom: var(--space-4);
}
.input,
textarea.input,
select.input {
font-size: 16px; /* prevents iOS Safari auto-zoom on focus */
min-height: 48px;
}
textarea.input {
min-height: 120px;
}
.btn-lg {
min-height: 50px;
font-size: var(--text-sm);
}
}
/* ── 10. STORE LIST / STATS ROW — stack cleanly ─────────────────── */
@media (max-width: 640px) {
.store-list {
grid-template-columns: 1fr !important;
gap: var(--space-6);
}
.stats-row {
flex-direction: column;
gap: var(--space-6);
text-align: center;
}
.manifesto-values {
grid-template-columns: 1fr !important;
gap: var(--space-8);
}
}
/* ── 11. MANIFESTO BLOCKS — readable line length on phones ──────── */
@media (max-width: 640px) {
.manifesto-block__quote {
font-size: clamp(1.3rem, 6vw, 1.7rem);
line-height: 1.3;
}
.manifesto-block__text {
font-size: var(--text-sm);
line-height: 1.75;
}
}
/* ── 12. SIZE GUIDE DIALOG — fits small viewports ───────────────── */
@media (max-width: 480px) {
dialog#size-guide {
padding: var(--space-5);
width: calc(100% - 1.5rem);
max-height: 85vh;
overflow-y: auto;
}
dialog#size-guide table {
font-size: var(--text-xs);
}
}
/* ── 13. FOOTER — stacked, generous tap targets ─────────────────── */
@media (max-width: 768px) {
.site-footer__grid {
grid-template-columns: 1fr 1fr !important;
gap: var(--space-8) var(--space-4);
}
.site-footer__brand {
grid-column: 1 / -1;
margin-bottom: var(--space-4);
}
}
@media (max-width: 480px) {
.site-footer__grid {
grid-template-columns: 1fr !important;
}
.site-footer__links a {
display: inline-block;
padding: var(--space-2) 0;
min-height: 36px;
}
.site-footer__bottom {
flex-direction: column;
gap: var(--space-3);
text-align: center;
}
}
/* ── 14. NEWSLETTER FORM — stacked input + button on phones ─────── */
@media (max-width: 540px) {
.newsletter-inline {
flex-direction: column;
gap: var(--space-3);
}
.newsletter-inline .input,
.newsletter-inline .btn {
width: 100%;
}
.newsletter-section {
padding: var(--space-8) var(--space-5);
}
}
/* ── 15. PRE-ORDER MODAL — comfortable on small phones ──────────── */
@media (max-width: 380px) {
.po-panel {
padding: var(--space-8) var(--space-5) var(--space-6);
}
.po-title {
font-size: var(--text-lg);
}
}
/* ── 16. ERROR (404) PAGE — fits without scroll on small phones ──── */
@media (max-width: 480px) {
.error-number {
font-size: clamp(4.5rem, 24vw, 7rem);
}
.error-links {
flex-direction: column;
width: 100%;
}
.error-links .btn {
width: 100%;
}
}
/* ── 17. TOUCH TARGET BASELINE — applies everywhere ─────────────── */
@media (pointer: coarse) {
a.nav-link,
button.btn,
.product-card__size,
.filter-btn {
min-height: 44px;
}
}
/* ── 18. LANDSCAPE PHONES — avoid hero overtaking viewport ──────── */
@media (max-height: 480px) and (orientation: landscape) {
.hero,
.section-hero {
min-height: 100vh;
padding-top: var(--space-16);
padding-bottom: var(--space-8);
}
}
/* ── 19. LARGE TABLET — 2-col grids stay balanced ───────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
.collections-grid--editorial {
grid-template-columns: repeat(2, 1fr);
}
.manifesto-values {
grid-template-columns: repeat(2, 1fr);
}
}