/* LDM Brand - Bootstrap Theme Overrides & Custom Tokens */

:root {
    /* Override Bootstrap primary/secondary with LDM colors */
    --bs-primary: #003d9b;
    --bs-primary-rgb: 0, 61, 155;
    --bs-secondary: #4648d4;
    --bs-secondary-rgb: 70, 72, 212;
    --bs-success: #22C55E;
    --bs-success-rgb: 34, 197, 94;
    --bs-danger: #EF4444;
    --bs-danger-rgb: 239, 68, 68;

    /* LDM Color Tokens */
    --ldm-primary: #003d9b;
    --ldm-primary-container: #0052cc;
    --ldm-on-primary: #ffffff;
    --ldm-on-primary-container: #c4d2ff;
    --ldm-secondary: #4648d4;
    --ldm-secondary-container: #6063ee;
    --ldm-tertiary: #7b2600;
    --ldm-tertiary-container: #a33500;
    --ldm-surface: #faf8ff;
    --ldm-surface-dim: #d9d9e4;
    --ldm-surface-bright: #faf8ff;
    --ldm-surface-container-lowest: #ffffff;
    --ldm-surface-container-low: #f3f3fd;
    --ldm-surface-container: #ededf8;
    --ldm-surface-container-high: #e7e7f2;
    --ldm-surface-container-highest: #e1e2ec;
    --ldm-surface-variant: #e1e2ec;
    --ldm-background: #faf8ff;
    --ldm-on-background: #191b23;
    --ldm-on-surface: #191b23;
    --ldm-on-surface-variant: #434654;
    --ldm-outline: #737685;
    --ldm-outline-variant: #c3c6d6;
    --ldm-inverse-surface: #2e3038;
    --ldm-inverse-on-surface: #f0f0fb;
    --ldm-inverse-primary: #b2c5ff;
    --ldm-primary-fixed: #dae2ff;
    --ldm-primary-fixed-dim: #b2c5ff;
    --ldm-secondary-fixed: #e1e0ff;
    --ldm-secondary-fixed-dim: #c0c1ff;
    --ldm-urgency-red: #EF4444;
    --ldm-success-green: #22C55E;
    --ldm-loyalty-gold: #F59E0B;
    --ldm-loyalty-silver: #94A3B8;
    --ldm-loyalty-bronze: #CD7F32;
    --ldm-surface-gray: #F8FAFC;

    /* Typography */
    --ldm-font-display: 'Plus Jakarta Sans', sans-serif;
    --ldm-font-body: 'Inter', sans-serif;
}

/* Font overrides */
body {
    font-family: var(--ldm-font-body);
    background-color: var(--ldm-background);
    color: var(--ldm-on-surface);
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4,
.display-5, .display-6 {
    font-family: var(--ldm-font-display);
}

/* Bootstrap primary btn override */
.btn-primary {
    --bs-btn-bg: var(--ldm-primary);
    --bs-btn-border-color: var(--ldm-primary);
    --bs-btn-hover-bg: var(--ldm-primary-container);
    --bs-btn-hover-border-color: var(--ldm-primary-container);
    --bs-btn-active-bg: var(--ldm-primary-container);
}

.btn-outline-primary {
    --bs-btn-color: var(--ldm-primary);
    --bs-btn-border-color: var(--ldm-primary);
    --bs-btn-hover-bg: var(--ldm-primary);
}

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* Glass effect */
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Live pulse animation */
.live-pulse {
    animation: livepulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes livepulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

/* LDM Color Utilities */
.bg-ldm-primary { background-color: var(--ldm-primary) !important; }
.bg-ldm-secondary { background-color: var(--ldm-secondary) !important; }
.bg-ldm-urgency-red { background-color: var(--ldm-urgency-red) !important; }
.bg-ldm-success-green { background-color: var(--ldm-success-green) !important; }
.bg-ldm-surface { background-color: var(--ldm-surface) !important; }
.bg-ldm-surface-container { background-color: var(--ldm-surface-container) !important; }
.bg-ldm-surface-container-low { background-color: var(--ldm-surface-container-low) !important; }
.bg-ldm-surface-container-high { background-color: var(--ldm-surface-container-high) !important; }
.bg-ldm-surface-container-highest { background-color: var(--ldm-surface-container-highest) !important; }
.bg-ldm-surface-container-lowest { background-color: var(--ldm-surface-container-lowest) !important; }
.bg-ldm-inverse-surface { background-color: var(--ldm-inverse-surface) !important; }
.bg-ldm-primary-container { background-color: var(--ldm-primary-container) !important; }
.bg-ldm-secondary-container { background-color: var(--ldm-secondary-container) !important; }
.bg-ldm-primary-fixed { background-color: var(--ldm-primary-fixed) !important; }
.bg-ldm-loyalty-gold { background-color: var(--ldm-loyalty-gold) !important; }

.text-ldm-primary { color: var(--ldm-primary) !important; }
.text-ldm-secondary { color: var(--ldm-secondary) !important; }
.text-ldm-on-surface { color: var(--ldm-on-surface) !important; }
.text-ldm-on-surface-variant { color: var(--ldm-on-surface-variant) !important; }
.text-ldm-outline { color: var(--ldm-outline) !important; }
.text-ldm-urgency-red { color: var(--ldm-urgency-red) !important; }
.text-ldm-success-green { color: var(--ldm-success-green) !important; }
.text-ldm-loyalty-gold { color: var(--ldm-loyalty-gold) !important; }
.text-ldm-on-primary { color: var(--ldm-on-primary) !important; }
.text-ldm-inverse-on-surface { color: var(--ldm-inverse-on-surface) !important; }
.text-ldm-primary-fixed-dim { color: var(--ldm-primary-fixed-dim) !important; }
.text-ldm-on-primary-container { color: var(--ldm-on-primary-container) !important; }

.border-ldm-outline-variant { border-color: var(--ldm-outline-variant) !important; }
.border-ldm-primary { border-color: var(--ldm-primary) !important; }

/* Status badge */
.status-badge {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    font-family: var(--ldm-font-body);
}

/* Urgency top bar */
.urgency-bar {
    background-color: var(--ldm-urgency-red);
    color: white;
}

/* Navbar blur */
.navbar-blur {
    background: rgba(250, 248, 255, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(195, 198, 214, 0.3) !important;
}

/* Brand text */
.ldm-brand {
    font-family: var(--ldm-font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ldm-primary);
}

/* Rounded pill buttons */
.btn-pill {
    border-radius: 9999px !important;
}

/* Rounded card */
.card-xl {
    border-radius: 1.5rem !important;
}
.card-xxl {
    border-radius: 2rem !important;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #c3c6d6; border-radius: 10px; }

/* Sidebar active item */
.sidebar-active {
    background-color: var(--ldm-primary-fixed) !important;
    color: var(--ldm-primary) !important;
    font-weight: 700;
}

/* Progress bar color */
.progress-bar-ldm {
    background-color: var(--ldm-primary-container);
}

/* Metric card hover */
.metric-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
}

/* Flash sale hover overlay */
.flash-sale-card .buy-overlay {
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.3s ease;
}
.flash-sale-card:hover .buy-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* ── Global site footer (partials/footer.php) ─────────────────────────────── */
.site-footer {
    margin-top: 48px;
    border-top: 1px solid var(--ldm-outline-variant, #c3c6d6);
    background: var(--ldm-surface-lowest, #fff);
    padding: 48px var(--ldm-page-padding, 32px) 28px;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}
.site-footer__logo img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    border-radius: 8px;
}
.site-footer__brand p {
    margin: 14px 0 16px;
    max-width: 340px;
    color: var(--ldm-on-surface-variant, #434654);
    font-size: 14px;
    line-height: 1.6;
}
.site-footer__social { display: flex; gap: 10px; }
.site-footer__social a {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--ldm-surface-low, #f3f3fd);
    color: var(--ldm-on-surface, #191b23);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.site-footer__social a:hover { background: var(--ldm-primary, #0052cc); color: #fff; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col h3 {
    margin: 0 0 4px;
    font-family: var(--ldm-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ldm-on-surface, #191b23);
}
.site-footer__col a {
    color: var(--ldm-on-surface-variant, #434654);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}
.site-footer__col a:hover { color: var(--ldm-primary, #0052cc); }
.site-footer__form {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.site-footer__form input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--ldm-outline-variant, #c3c6d6);
    border-radius: 999px;
    background: var(--ldm-surface-low, #f3f3fd);
    color: var(--ldm-on-surface, #191b23);
    font: inherit;
    font-size: 13px;
    padding: 10px 14px;
}
.site-footer__form button {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: var(--ldm-primary, #0052cc);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 18px;
    cursor: pointer;
}
.site-footer__form button:hover { background: var(--ldm-primary-dark, #0040a2); }
.site-footer__legal {
    max-width: 1200px;
    margin: 32px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--ldm-outline-variant, #c3c6d6);
    color: var(--ldm-outline, #737685);
    font-size: 13px;
    text-align: center;
}
@media (max-width: 860px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .site-footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    /* Clear the fixed mobile bottom nav so the legal line stays visible. */
    .site-footer { padding-bottom: 96px; }
}


/* ---------------------------------------------------------------------------
   Product card. Shared surface — the home page rails and grids emit it from
   productCardHtml(), and the live show's "Recently Featured" grid reuses it so
   both read as the same catalogue object. Lives here rather than home.css
   because both pages load shared.css and neither loads the other's sheet.
   Page-specific additions (the live Buy button, the home fulfilment-label
   colours) stay in those pages' own stylesheets.
--------------------------------------------------------------------------- */
.ldm-product-card {
    position: relative;
    border: 1px solid rgba(195, 198, 214, .3);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .2s;
}
.ldm-product-card:hover { box-shadow: 0 6px 20px rgba(0,61,155,.1); }
.ldm-product-card__image {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--ldm-surface-2, #f6f7fb);
}
.ldm-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s;
}
.ldm-product-card:hover .ldm-product-card__image img { transform: scale(1.04); }
.ldm-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 6px;
    background: var(--ldm-urgency, #ef4444);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
}
.ldm-product-card__body { padding: 12px 14px 8px; }
/* Shop name on the product card. One rule for every surface that emits the
   card: the home page rails and grids, the live show's Recently Featured, and
   the catalogue grid. */
.ldm-product-card__vendor {
    display: block;
    color: #607d8b;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.ldm-product-card__name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 8px;
}
.ldm-product-card__name a { color: inherit; text-decoration: none; }
.ldm-product-card__price strong { font-size: 15px; font-weight: 800; color: var(--ldm-primary, #0052cc); }
.ldm-product-card__price del { font-size: 12px; color: var(--ldm-outline, #8c8fa8); margin-left: 6px; }
.ldm-product-card__cart {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--ldm-primary, #0052cc);
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    opacity: 0;
    transition: opacity .2s;
}
.ldm-product-card:hover .ldm-product-card__cart { opacity: 1; }