/* =====================================================
   Product Gallery — MINIMAL THEME
   Pure white, clean typography, no distractions.
   Only CSS variables + font. All structural CSS is in
   /css/base.css which loads before this file.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
    /* ── Brand ── */
    --pg-primary:    #111827;
    --pg-primary-h:  #374151;
    --pg-accent:     #111827;

    /* ── Backgrounds ── */
    --pg-bg:         #ffffff;
    --pg-white:      #fafafa;

    /* ── Text ── */
    --pg-text:       #111827;
    --pg-text-muted: #9ca3af;

    /* ── Borders & Effects ── */
    --pg-border:     #f3f4f6;
    --pg-border-md:  #e5e7eb;
    --pg-radius:     0px;
    --pg-shadow:     none;
    --pg-shadow-h:   0 1px 0 0 #111827;

    /* ── Cards ── */
    --pg-card-bg:                #ffffff;
    --pg-card-hover:             #f9fafb;
    --pg-card-shadow:            none;
    --pg-card-border:            none;
    --pg-card-border-bottom:     1px solid #e5e7eb;
    --pg-card-hover-shadow:      none;
    --pg-card-hover-transform:   none;
    --pg-card-hover-border-color:transparent;
    --pg-card-hover-opacity:     0.75;

    /* ── Hero ── */
    --pg-hero-bg:      #111827;
    --pg-hero-text:    #ffffff;
    --pg-hero-overlay: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(17,24,39,0.45) 60%, rgba(55,65,81,0.30) 100%);
    --pg-hero-eyebrow-bg:    rgba(255,255,255,0.15);
    --pg-hero-eyebrow-color: rgba(255,255,255,0.90);
    --pg-hero-eyebrow-radius:0px;
    --pg-hero-eyebrow-border:rgba(255,255,255,0.25);
    --pg-hero-frame-shadow:  none;
    --pg-hero-frame-border:  rgba(255,255,255,0.15);

    /* ── Navbar ── */
    --pg-nav-bg:             #ffffff;
    --pg-nav-text:           #374151;
    --pg-nav-border:         #e5e7eb;
    --pg-nav-shadow:         none;
    --pg-nav-font-size:      0.875rem;
    --pg-nav-weight:         400;
    --pg-nav-transform:      none;
    --pg-nav-letter-spacing: normal;
    --pg-nav-hover-decoration: underline;
    --pg-brand-font:         'DM Sans', system-ui, sans-serif;
    --pg-brand-spacing:      -0.3px;
    --pg-search-bg:          #ffffff;
    --pg-search-radius-l:    0;
    --pg-search-radius-r:    0;

    /* ── Footer ── */
    --pg-footer-bg:            #111827;
    --pg-footer-text:          #9ca3af;
    --pg-footer-heading-color: #e5e7eb;

    /* ── Stats bar ── */
    --pg-stats-bg:  #fafafa;
    --pg-stats-top: 2px solid #111827;

    /* ── Icons ── */
    --pg-icon-bg:    transparent;
    --pg-icon-radius:0px;

    /* ── Typography ── */
    --pg-body-font:       'DM Sans', system-ui, sans-serif;
    --pg-heading-font:    'DM Sans', system-ui, sans-serif;
    --pg-heading-weight:  700;
    --pg-heading-spacing: -0.3px;
    --pg-body-weight:     300;

    /* ── Buttons ── */
    --pg-btn-primary-color: #fff;
    --pg-wa-text:           #fff;

    /* ── Misc ── */
    --pg-badge-radius:       0px;
    --pg-tab-radius:         0px;
    --pg-why-num-color:      #e5e7eb;
    --pg-focus-ring:         rgba(17,24,39,0.08);
    --pg-faq-q-active-bg:    rgba(17,24,39,0.03);
    --pg-product-img-fit:    cover;
    --pg-product-img-filter: none;
    --pg-product-img-hover-filter: none;
    --pg-eyebrow-color:      #9ca3af;
    --pg-eyebrow-light-color:rgba(255,255,255,0.70);
    --pg-cta-bg:             #111827;
    --pg-cta-border:         1px solid #e5e7eb;
    --pg-cta-text:           #ffffff;
    --pg-sidebar-bg:         transparent;
    --pg-sidebar-padding:    0;
    --pg-sidebar-link-px:    0;
    --pg-category-img-h:     160px;
    --pg-category-info-border:none;
    --pg-category-info-padding:10px 0 0;
    --pg-product-info-border: none;
    --pg-product-info-padding:12px 0;
    --pg-quality-gap:        0;
    --pg-quality-item-padding:20px 0;
    --pg-quality-border-bottom:1px solid #f3f4f6;
    --pg-cert-border-bottom: 1px solid #e5e7eb;
    --pg-industry-border-bottom:1px solid #e5e7eb;
    --pg-why-border-bottom:  1px solid #e5e7eb;
}

body { font-family: var(--pg-body-font); }