/*
 * ══ FASHION THEME — Structural CSS Overrides ═══════════════════════════════
 * File: public/css/themes/fashion.css
 * Purpose: Indian ethnic / modest fashion — festive warm tones, classic layout.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ── Hero: full-width slider, festival feel ─────────────────────────── */
.sf-hero { min-height: 80vh; }
@media (max-width: 768px) { .sf-hero { min-height: 60vh; } }

.sf-hero-title {
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
}

/* ── Fashion product cards: warm soft border ────────────────────────── */
.sf-product-card {
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    border: 1px solid var(--color-border, #E8D0B8);
    box-shadow: 0 2px 8px rgba(60,16,6,0.04);
}
.sf-product-card:hover {
    box-shadow: 0 6px 24px rgba(60,16,6,0.10);
    border-color: var(--color-gold, #C8880A);
}

/* ── Stacked scroll gallery: fashion lookbook close spacing ─────────── */
.sf-gallery-stacked-scroll { gap: 4px; }

/* ── Fashion buttons: warm, classic ─────────────────────────────────── */
.sf-btn, .sf-btn-primary {
    border-radius: var(--radius-md, 8px);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ── Size guide table accent: warm gold ─────────────────────────────── */
.sf-size-table th { background: var(--color-gold, #C8880A); }
.sf-size-table tr:nth-child(even) td { background: var(--color-bg-elevated, #F5E8D0); }