/**
 * CUSTOM-MINIMAL.CSS — Ultra-Clean Boutique Theme
 * 
 * Concept: Editorial simplicity. Black lines, white space, no shadows.
 * Inspired by: Celine, The Row, minimalist gallery aesthetics.
 * 
 * To use: Replace custom.css with this file, or copy contents into custom.css
 */

/* Import Playfair Display as web fallback for Didot */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ===========================================
   DESIGN TOKEN OVERRIDES
   
   LYSE BRAND PALETTE (from Canva Brand Kit):
   --lyse-offwhite: #fbfcf8
   --lyse-gray: #7a7a7a
   --lyse-blush: #edd3d2
   --lyse-silver: #c7c5cd
   --lyse-warmgray: #908080
   --lyse-black: #000000
   --lyse-pale-pink: #f1e7e7
=========================================== */
:root {
    /* Lyse Brand Palette */
    --lyse-offwhite: #fbfcf8;
    --lyse-gray: #7a7a7a;
    --lyse-blush: #edd3d2;
    --lyse-silver: #c7c5cd;
    --lyse-warmgray: #908080;
    --lyse-black: #000;
    --lyse-pale-pink: #f1e7e7;
    
    /* Minimal palette using Lyse brand colors */
    --color-bg: var(--lyse-offwhite);
    --color-bg-alt: var(--lyse-offwhite);
    --color-text: var(--lyse-black);
    --color-accent: var(--lyse-black);
    --color-accent-hover: var(--lyse-gray);
    --color-border: var(--lyse-gray);
    --color-shadow-rgb: 0, 0, 0;

    /* Refined typography - Didot with elegant serif fallbacks */
    --font-family: didot, "Didot LT STD", "Playfair Display", "Bodoni MT", "GFS Didot", "Times New Roman", serif;
    --font-sans: system-ui, -apple-system, "Helvetica Neue", helvetica, arial, sans-serif;
    --font-xs: 0.65rem;
    --font-sm: 0.72rem;
    --font-base: 0.85rem;

    /* Boutique refinement: subtle shadow and antialiasing */
    --text-shadow: 0 1px 1px rgb(0 0 0 / 7%);

    /* Boutique refinement: subpixel antialiasing and subtle shadow for all text */
    body, .boutique-header, .boutique-nav, .section-title, .product-title, .dress-title, .dress-description, .product-meta, .product-price, .product-sale, .product-status {
        -webkit-font-smoothing: subpixel-antialiased;
        font-smooth: always;
        text-shadow: var(--text-shadow);
        letter-spacing: 0.01em;
    }

    /* Slightly bolder for Didot to avoid harsh thinness */
    .dress-title, .product-title, .section-title {
        font-weight: 400;
    }

    /* Sharp edges */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-pill: 0;
    --border-width: 1px;

    /* No shadows, instant transitions */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --transition: 0.15s ease;
}

/* ===========================================
   LAYOUT OVERRIDES
=========================================== */

/* Header — thin black underline */
.boutique-header {
    border-bottom: 1px solid #000;
    padding-bottom: 1rem;
    margin-bottom: 0;
    text-align: center;
}

/* Navigation — text links only, no pills */
.boutique-nav {
    border-bottom: 1px solid #000;
    padding: 0.8rem 2.2rem;
    gap: 0 2rem;
    justify-content: center;
}

.boutique-nav a {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0.4rem 0;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.boutique-nav a:hover {
    background: transparent;
    transform: none;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Footer — minimal */
.boutique-footer {
    border-top: 1px solid #000;
    margin-top: 5rem;
    padding: 1.5rem 2.2rem;
    opacity: 1;
}

/* ===========================================
   COMPONENT OVERRIDES
=========================================== */

/* Section title — thin line below */
.section-title {
    font-weight: 400;
    font-size: var(--font-xs);
    letter-spacing: 0.25em;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #000;
    margin-bottom: 2rem;
}

/* Product Grid — more breathing room */
.product-grid {
    gap: 2.5rem;
}

/* Product Card — borderless, no hover lift */
.product-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.product-card:hover {
    transform: none;
    box-shadow: none;
}

/* Product Thumbnail — black border, no radius */
.product-thumb {
    border: 1px solid #000;
    border-radius: 0;
    background: #fff;
}

.no-image {
    border: 1px solid #000;
    border-radius: 0;
    background: #fafafa;
}

/* Product Meta — refined spacing */
.product-meta {
    padding-top: 0.8rem;
    gap: 0.15rem;
}

.product-title {
    font-weight: 400;
    font-size: var(--font-xs);
    letter-spacing: 0.12em;
}

.product-price {
    font-size: var(--font-xs);
    opacity: 0.5;
}

.product-sale,
.product-status {
    font-size: var(--font-xs);
    color: #000;
    font-weight: 400;
}

/* ===========================================
   LIGHTBOX — stark overlay
=========================================== */
.lightbox {
    background: rgb(255 255 255 / 96%);
}

.lightbox-img {
    border: 1px solid #000;
    border-radius: 0;
}

/* ===========================================
   PAGE-SPECIFIC: DRESSES GRID
=========================================== */
.dresses-grid {
    gap: 3rem;
}

.dress-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.dress-card:hover {
    transform: none;
    box-shadow: none;
}

.dress-card-image {
    border: 1px solid #000;
    border-radius: 0;
}

.dress-card:hover .dress-card-image {
    transform: none;
}

.dress-card-title {
    font-weight: 400;
    font-size: var(--font-xs);
    letter-spacing: 0.1em;
    margin-top: 0.8rem;
}

/* ===========================================
   PAGE-SPECIFIC: SINGLE DRESS
=========================================== */
.dress-container {
    max-width: 1000px;
}

.dress-top-nav a {
    border: 1px solid #000;
    border-radius: 0;
    font-weight: 400;
    font-size: var(--font-xs);
    letter-spacing: 0.12em;
}

.dress-top-nav a:hover {
    background: #000;
    color: #fff;
}

.dress-main-image {
    border: 1px solid #000;
    border-radius: 0;
    box-shadow: none;
}

.dress-thumb {
    border: 1px solid #000;
    border-radius: 0;
}

.dress-thumb:hover {
    box-shadow: none;
    opacity: 0.7;
}

.dress-title {
    font-weight: 300;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dress-description {
    font-size: var(--font-base);
    line-height: 1.7;
}