/* ============================================================
   Shoehub — design tokens
   Same oklch color values, fonts, and corner radius as the original
   design. Note: there is deliberately NO @media (prefers-color-scheme:
   dark) block here — an earlier version had one, and on a device set to
   dark mode it painted the ENTIRE page (not just the hero) a dark blue,
   which read as a bug rather than a design choice. Only .hero gets a
   deliberate blue background now (see below); the rest of the site
   always uses the light theme.
   ============================================================ */

:root {
    --radius: 0.75rem;
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-2xl: calc(var(--radius) + 8px);
    --radius-3xl: calc(var(--radius) + 12px);

    --color-background: oklch(0.98 0.006 250);
    --color-foreground: oklch(0.26 0.07 262);
    --color-card: oklch(1 0 0);
    --color-primary: oklch(0.67 0.19 45);
    --color-primary-foreground: oklch(0.99 0.005 250);
    --color-secondary: oklch(0.94 0.015 255);
    --color-secondary-foreground: oklch(0.26 0.07 262);
    --color-muted: oklch(0.95 0.012 255);
    --color-muted-foreground: oklch(0.5 0.04 260);
    --color-border: oklch(0.9 0.015 255);
    --color-destructive: oklch(0.577 0.245 27.325);

    /* Used only by .hero — a deliberate accent block, not a site-wide theme. */
    --color-hero-bg: oklch(0.32 0.1 262);
    --color-hero-fg: oklch(0.97 0.006 250);
    --color-hero-muted: oklch(0.82 0.03 258);

    --font-sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Fraunces', ui-serif, Georgia, serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

a {
    color: inherit;
}

.wrap {
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 20px;
}

.empty-state {
    color: var(--color-muted-foreground);
}

/* ============================================================
   Header + mobile nav
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-background);
}

.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    font-size: 0.85rem;
    font-weight: 900;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.brand-accent,
.text-accent {
    color: var(--color-primary);
}

.main-nav {
    display: none;
    gap: 32px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-muted-foreground);
}

.main-nav a {
    text-decoration: none;
}

.main-nav a:hover,
.main-nav a.is-active {
    color: var(--color-foreground);
}

@media (min-width: 768px) {
    .main-nav {
        display: flex;
    }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-contact-btn {
    white-space: nowrap;
}

/* Hamburger — visible up through tablet, hidden once the full nav shows. */
.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-foreground);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 768px) {
    .menu-toggle {
        display: none;
    }
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    border-top: 0 solid var(--color-border);
    transition: max-height 0.25s ease;
}

.mobile-nav.is-open {
    max-height: 260px;
    border-top-width: 1px;
}

.mobile-nav a {
    padding: 14px 20px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid var(--color-border);
}

.mobile-nav a.is-active {
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .mobile-nav {
        display: none;
    }
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
}

.btn--primary:hover {
    opacity: 0.9;
}

.btn--sm {
    padding: 6px 14px;
    font-size: 0.8rem;
}

.btn--lg {
    padding: 14px 28px;
    font-size: 1rem;
}

.btn--block {
    width: 100%;
}

.btn--disabled {
    background: var(--color-muted);
    color: var(--color-muted-foreground);
    cursor: not-allowed;
}

.btn--outline {
    background: transparent;
    color: var(--color-hero-fg);
    border: 1px solid oklch(0.99 0.005 250 / 40%);
}

.btn--outline:hover {
    background: oklch(0.99 0.005 250 / 12%);
}

/* ============================================================
   Hero — the ONE section with the blue background
   ============================================================ */

.hero {
    overflow: hidden;
    background: var(--color-hero-bg);
    color: var(--color-hero-fg);
}

.hero-grid {
    display: grid;
    gap: 32px;
    padding: 48px 20px;
}

@media (min-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        padding: 80px 20px;
    }
}

.eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 4px 12px;
    border: 1px solid oklch(0.99 0.005 250 / 30%);
    background: oklch(0.99 0.005 250 / 12%);
    color: var(--color-hero-fg);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-copy h1 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--color-hero-fg);
}

.hero-copy h1 .text-accent {
    color: oklch(0.78 0.16 55); /* a lighter warm accent, readable on the dark blue */
}

@media (min-width: 640px) {
    .hero-copy h1 {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .hero-copy h1 {
        font-size: 3.75rem;
    }
}

.hero-lede {
    margin-top: 20px;
    max-width: 420px;
    font-size: 1.125rem;
    color: var(--color-hero-muted);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--radius-3xl);
    border: 1px solid oklch(0.99 0.005 250 / 15%);
    box-shadow: 0 20px 40px -10px rgb(0 0 0 / 0.35);
}

/* ============================================================
   Generic page header (About / Contact / New Collection)
   ============================================================ */

.page-header {
    padding: 48px 20px 32px;
    border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.page-header p {
    margin: 8px 0 0;
    color: var(--color-muted-foreground);
}

/* ============================================================
   Collection / product grid
   ============================================================ */

.collection {
    padding: 40px 0 80px;
}

.collection-heading {
    margin-bottom: 32px;
}

.collection-heading h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.collection-heading p {
    margin: 4px 0 0;
    color: var(--color-muted-foreground);
}

.product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 640px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.product-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    background: var(--color-card);
    transition: box-shadow 0.2s ease;
}

.product-card:hover {
    box-shadow: 0 16px 32px -12px rgb(0 0 0 / 0.15);
}

.product-card__image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-secondary);
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-card__image img {
    transform: scale(1.05);
}

.badge-new {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 999px;
}

.product-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.product-card__body h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.product-card__body > p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__sizes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sizes-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted-foreground);
    margin-right: 2px;
}

.size-pill {
    position: relative;
}

.size-pill input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.size-pill span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 500;
}

.size-pill input:checked + span {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-foreground);
}

.product-card__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
}

.product-card__footer .price {
    font-weight: 600;
}

.view-more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* ============================================================
   About page
   ============================================================ */

.about-content {
    padding: 48px 0 80px;
}

.about-grid {
    display: grid;
    gap: 32px;
}

@media (min-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr 1.2fr;
        align-items: center;
    }
}

.about-image img {
    width: 100%;
    height: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
}

.about-copy h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 12px;
}

.about-copy p {
    color: var(--color-muted-foreground);
    margin: 0 0 16px;
}

.about-copy code {
    background: var(--color-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* ============================================================
   Contact page
   ============================================================ */

.contact-content {
    padding: 48px 0 80px;
}

.contact-grid {
    display: grid;
    gap: 40px;
}

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr 1.3fr;
    }
}

.contact-info h2,
.contact-form-wrap h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin: 0 0 20px;
}

.contact-method {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}

.contact-method__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted-foreground);
}

.contact-method .btn {
    align-self: flex-start;
}

.contact-method__pending {
    color: var(--color-muted-foreground);
    font-style: italic;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-form label,
.checkout-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}

.contact-form input,
.contact-form textarea {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-foreground);
    font: inherit;
}

.form-errors {
    background: oklch(0.577 0.245 27.325 / 10%);
    border: 1px solid oklch(0.577 0.245 27.325 / 30%);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    color: var(--color-destructive);
    font-size: 0.9rem;
}

.form-errors ul {
    margin: 0;
    padding-left: 18px;
}

.form-success {
    background: oklch(0.67 0.19 45 / 10%);
    border: 1px solid oklch(0.67 0.19 45 / 30%);
    border-radius: var(--radius-md);
    padding: 16px;
}

.form-success p {
    margin: 0;
}

/* ============================================================
   Shop locations (About + Contact pages)
   ============================================================ */

.locations {
    padding: 16px 0 64px;
}

.contact-content + .locations {
    padding-top: 0;
}

.location-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 640px) {
    .location-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.location-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-card);
}

.location-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin: 0 0 6px;
}

.location-address,
.location-phone {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-muted-foreground);
}

.location-phone a {
    text-decoration: none;
    color: inherit;
}

.location-map {
    margin-top: 14px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.location-map iframe {
    display: block;
    width: 100%;
    height: 220px;
    border: 0;
}

/* ============================================================
   "Make an Order" modal
   ============================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 90;
}

.modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 100;
}

.modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal__panel {
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--color-card);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.35);
}

.modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.modal__header h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin: 0;
}

.modal__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: var(--color-secondary);
    color: var(--color-foreground);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.modal__close:hover {
    background: var(--color-muted);
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}

.modal-form input,
.modal-form textarea {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-foreground);
    font: inherit;
}

body.modal-open {
    overflow: hidden;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
    border-top: 1px solid var(--color-border);
    margin-top: 48px;
    background: var(--color-secondary);
}

.footer-grid {
    display: grid;
    gap: 32px;
    padding: 48px 20px 32px;
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
    }
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col h4 {
    margin: 0 0 4px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted-foreground);
}

.footer-col a {
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--color-secondary-foreground);
}

.footer-col a:hover {
    color: var(--color-primary);
}

.footer-brand .brand {
    margin-bottom: 4px;
}

.footer-tagline {
    max-width: 320px;
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
}

.footer-address {
    font-size: 0.9rem;
    color: var(--color-muted-foreground);
}

.footer-social {
    display: flex;
    justify-content: center;
    padding-bottom: 32px;
}

.social-links {
    display: flex;
    gap: 12px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--color-secondary);
    color: var(--color-secondary-foreground);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

a.social-icon:hover {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
}

.social-icon--disabled {
    color: var(--color-muted-foreground);
    cursor: not-allowed;
    opacity: 0.6;
}

.footer-bottom {
    border-top: 1px solid var(--color-border);
    padding: 20px;
}

.footer-copyright {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
    text-align: center;
}

/* ============================================================
   Misc (product-not-found stub page)
   ============================================================ */

.not-found {
    text-align: center;
    padding: 96px 20px;
}