/**
 * Whimsy & Co. — Additional Application CSS
 *
 * Loads the Geist font family and provides supplementary styles
 * that are difficult to include in the main compiled style.css.
 *
 * @package Whimsy_Co
 * @version 1.0.0
 */

/* ─── Google Fonts: Geist ─── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');

/* ─── Fallback @font-face (for self-hosted option) ─── */
/*
  To self-host the Geist font instead of using Google Fonts:
  1. Download the Geist font files (.woff2, .woff) from
     https://github.com/vercel/geist-font
  2. Place them in /assets/fonts/
  3. Uncomment the @font-face blocks below and remove the @import above.

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Light.woff2') format('woff2'),
         url('../fonts/Geist-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Regular.woff2') format('woff2'),
         url('../fonts/Geist-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Medium.woff2') format('woff2'),
         url('../fonts/Geist-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-SemiBold.woff2') format('woff2'),
         url('../fonts/Geist-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Bold.woff2') format('woff2'),
         url('../fonts/Geist-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../fonts/GeistMono-Regular.woff2') format('woff2'),
         url('../fonts/GeistMono-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
*/

/* ─── Smooth image transitions for gallery ─── */
.pdp-main-image img {
    transition: opacity 0.2s ease, transform 0.3s ease;
}

/* ─── Active filter badges row ─── */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* ─── Mobile filter overlay ─── */
.shop-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 199;
}

/* ─── Search toggle expanded state ─── */
.header-search.open {
    display: flex !important;
    align-items: center;
}

/* ─── Lightbox Overlay ─── */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
}

.lightbox-overlay.open {
    display: flex;
}

.lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    user-select: none;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10001;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.lightbox-overlay .hero-carousel-btn {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10001;
}

.lightbox-overlay .hero-carousel-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* ─── Lightbox focus trap ─── */
.lightbox-overlay button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ─── Spinner for AJAX actions ─── */
.spinner-sm {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(212, 114, 106, 0.3);
    border-top-color: var(--color-primary);
    border-radius: 9999px;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}