/*
 * LIV International — Product Listing Page
 * liv-products-listing.css  v2.0
 * =========================================================
 * Prefix: listore-  (safe — no conflict with existing site CSS)
 * Deploy to: /Portals/0/livint/css/liv-products-listing.css
 *
 * RULES:
 *  - ZERO font-size declarations — DNN theme controls all sizing
 *  - No absolute positioning inside table cells — flexbox only
 *  - All new classes prefixed listore-
 *  - Existing .wsc-*, .promoRow, .ib classes left untouched
 * =========================================================
 */

/* =====================================================================
   PAGE BACKGROUND
   ===================================================================== */
.listore-page-bg {
    background: var(--li-bg-warm);
    min-height: 100vh;
}


/* =====================================================================
   ABOVE-GRID PROMO BANNER (Module 4)
   ===================================================================== */
.listore-promo-banner {
    background: linear-gradient(135deg, var(--li-green-deep) 0%, var(--li-dark-2) 100%);
    color: #ffffff;
    border-radius: var(--li-radius-lg);
    padding: var(--li-space-lg) var(--li-space-xl);
    margin: var(--li-space-lg) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.listore-promo-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, var(--li-green-glow) 0%, transparent 70%);
    pointer-events: none;
}

.listore-promo-banner h1,
.listore-promo-banner h2 {
    color: #ffffff !important;
    margin-bottom: var(--li-space-sm) !important;
    position: relative;
    z-index: 1;
}

.listore-promo-banner h4,
.listore-promo-banner p {
    color: rgba(255, 255, 255, 0.85) !important;
    position: relative;
    z-index: 1;
}

.listore-promo-banner strong {
    color: var(--li-gold-bright) !important;
}

.listore-promo-banner hr {
    border-color: rgba(255, 255, 255, 0.15);
    margin: var(--li-space-sm) 0;
}

/* Free membership badge */
.listore-promo-banner .listore-free-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(184, 149, 90, 0.25);
    border: 1px solid var(--li-gold);
    border-radius: var(--li-radius-pill);
    color: var(--li-gold-bright) !important;
    padding: 6px 20px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: var(--li-space-md);
}


/* =====================================================================
   PRODUCT GRID
   ===================================================================== */
.listore-grid {
    margin-top: var(--li-space-lg) !important;
}

.listore-col {
    padding: 20px 12px !important;
    display: flex;
}


/* =====================================================================
   PRODUCT CARD
   ===================================================================== */
.listore-card {
    background: var(--li-card);
    border: 1px solid var(--li-border);
    border-radius: var(--li-radius-lg);
    box-shadow: var(--li-shadow-sm);
    overflow: visible;           /* allows .liv-featured badge to overflow */
    transition: var(--li-transition);
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.listore-card:hover {
    box-shadow: var(--li-shadow-lg);
    transform: translateY(-4px);
    border-color: var(--li-green);
}

/* Image area */
.listore-img-wrap {
    display: block;
    background: var(--li-bg-alt);
    border-radius: var(--li-radius-lg) var(--li-radius-lg) 0 0;
    overflow: hidden;
    text-align: center;
    padding: var(--li-space-md);
}

.listore-img-wrap img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 200px;
    margin: 0 auto !important;
    object-fit: contain;
    transition: transform 0.35s var(--li-ease);
}

.listore-card:hover .listore-img-wrap img {
    transform: scale(1.05);
}

/* Card body */
.listore-card-body {
    padding: var(--li-space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--li-space-sm);
}

/* Product title + tagline */
.listore-title {
    font-weight: 900 !important;
    color: var(--li-text) !important;
    margin: 0 0 2px !important;
    line-height: 1.2 !important;
}

.listore-tagline {
    color: var(--li-text-muted) !important;
    margin: 0 0 var(--li-space-sm) !important;
    line-height: 1.4 !important;
}

/* Product specs row (icons: bottle / pills / days) */
.listore-specs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--li-space-sm);
    flex-wrap: wrap;
    padding: var(--li-space-sm) 0;
    border-top: 1px solid var(--li-border);
    border-bottom: 1px solid var(--li-border);
}

.listore-spec-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--li-text-muted) !important;
    white-space: nowrap;
}

.listore-spec-item i {
    color: var(--li-green) !important;
}


/* =====================================================================
   PRICE TIERS
   ===================================================================== */
.listore-prices {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: var(--li-space-sm) 0;
}

.listore-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--li-radius-sm);
    transition: var(--li-transition-fast);
}

/* Store Price — neutral */
.listore-price-store {
    background: var(--li-bg-alt);
    border: 1px solid var(--li-border);
}

.listore-price-store .listore-price-label { color: var(--li-text-muted) !important; font-weight: 700; }
.listore-price-store .listore-price-val   { color: var(--li-text) !important; font-weight: 800; }

/* Member Price — green tint */
.listore-price-member {
    background: var(--li-green-xlight);
    border: 1px solid var(--li-green-light);
}

.listore-price-member .listore-price-label { color: var(--li-green-dark) !important; font-weight: 700; }
.listore-price-member .listore-price-val   { color: var(--li-green-dark) !important; font-weight: 800; }

/* MSP Price — gold, premium highlight */
.listore-price-msp {
    background: linear-gradient(135deg, var(--li-gold-xlight) 0%, var(--li-gold-light) 100%);
    border: 1.5px solid var(--li-gold);
    position: relative;
    overflow: hidden;
}

.listore-price-msp::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
    background-size: 200% auto;
    animation: liv-shimmer 4s linear infinite;
    pointer-events: none;
}

.listore-price-msp .listore-price-label {
    color: var(--li-gold-dark) !important;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.listore-price-msp .listore-price-val {
    color: var(--li-gold-dark) !important;
    font-weight: 900;
    position: relative;
    z-index: 1;
}

.listore-price-msp-note {
    color: var(--li-green) !important;
    display: block;
    text-align: center;
    padding: 2px 0 4px;
}


/* =====================================================================
   ADD-TO-CART ACTION AREA
   ===================================================================== */
.listore-actions {
    margin-top: auto;
    padding-top: var(--li-space-sm);
    border-top: 1px solid var(--li-border);
    display: flex;
    flex-direction: column;
    gap: var(--li-space-xs);
}

/* Style buttons rendered by Action Form inside listore-actions */
.listore-actions .btn,
.listore-actions .wsc-button,
.listore-actions .dnnPrimaryAction,
.listore-actions .dnnSecondaryAction {
    width: 100% !important;
    border-radius: var(--li-radius-pill) !important;
    font-weight: 700 !important;
    transition: var(--li-transition) !important;
    border: 2px solid var(--li-green) !important;
    background: var(--li-green) !important;
    color: #ffffff !important;
    box-shadow: var(--li-shadow-green) !important;
    margin: 2px 0 !important;
}

.listore-actions .btn:hover,
.listore-actions .wsc-button:hover,
.listore-actions .dnnPrimaryAction:hover {
    background: var(--li-green-dark) !important;
    border-color: var(--li-green-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--li-shadow-green-lg) !important;
}

/* Number input stepper — keep existing styles, just refine appearance */
.listore-actions .number-input {
    border-color: var(--li-border-dark) !important;
    border-radius: var(--li-radius-sm) !important;
    width: 100% !important;
    justify-content: center !important;
}

/* "More Info" / secondary link button */
.listore-actions .listore-info-btn {
    display: block;
    text-align: center;
    color: var(--li-green) !important;
    font-weight: 600;
    text-decoration: none !important;
    padding: 6px;
    border-radius: var(--li-radius-pill);
    transition: var(--li-transition-fast);
    border: 1px solid transparent;
}

.listore-actions .listore-info-btn:hover {
    background: var(--li-green-xlight);
    border-color: var(--li-green-light);
    text-decoration: none !important;
}


/* =====================================================================
   FLOATING CHECKOUT BUTTON — Option B (Horizontal Pill, bottom-right)
   ===================================================================== */

/* Override existing CSS that positions it top-right */
div.angrid .angrid-buttons .angrid-simple-btn,
.angrid-simple-btn {
    /* Reset old positioning */
    position: fixed !important;
    top: auto !important;
    right: 24px !important;
    bottom: 80px !important;

    /* Layout — two-section horizontal pill */
    display: inline-flex !important;
    align-items: stretch !important;
    overflow: hidden !important;

    /* Shape */
    border-radius: var(--li-radius-pill) !important;
    padding: 0 !important;
    min-width: 220px !important;

    /* Visual */
    background: transparent !important;
    border: none !important;
    box-shadow: var(--li-shadow-xl), 0 0 0 3px rgba(92,125,98,0.20) !important;
    z-index: 1100 !important;
    cursor: pointer !important;
    transition: var(--li-transition) !important;

    /* Entrance animation */
    animation: liv-rise 0.4s var(--li-ease-bounce) both !important;
}

div.angrid .angrid-buttons .angrid-simple-btn:hover,
.angrid-simple-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--li-shadow-xl), 0 0 0 4px rgba(92,125,98,0.30) !important;
}

/* Left section — icon + label */
.listore-btn-left {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px 14px 20px;
    background: linear-gradient(135deg, var(--li-green-mid) 0%, var(--li-green) 100%);
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex: 1;
}

.listore-btn-icon {
    line-height: 1;
}

.listore-btn-label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
}

/* Right section — price */
.listore-btn-price {
    display: flex;
    align-items: center;
    padding: 14px 20px 14px 16px;
    background: var(--li-green-dark);
    color: #ffffff;
    font-weight: 900;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-left: 1px solid rgba(255,255,255,0.15);
}

/* Empty cart state — hide button */
.listore-btn-empty {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(16px) !important;
}


/* =====================================================================
   MOBILE — Floating Button becomes full-width bottom bar
   ===================================================================== */
@media (max-width: 767px) {

    div.angrid .angrid-buttons .angrid-simple-btn,
    .angrid-simple-btn {
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        min-width: unset !important;
        width: 100% !important;
        border-radius: 0 !important;
        box-shadow: 0 -4px 28px rgba(0,0,0,0.25) !important;
        border-top: 3px solid var(--li-green-mid) !important;
    }

    .listore-btn-left {
        flex: 1;
        justify-content: center;
        padding: 16px 16px !important;
    }

    .listore-btn-price {
        padding: 16px 20px !important;
        background: var(--li-green-deep);
        min-width: 90px;
        justify-content: center;
    }

    /* Push page content above the button bar */
    body {
        padding-bottom: 68px !important;
    }

    /* Bigger tap area on mobile */
    .listore-actions .btn,
    .listore-actions .wsc-button {
        padding: 12px 20px !important;
    }
}

@media (max-width: 991px) {
    .listore-col {
        padding: 10px 8px !important;
    }
}


/* =====================================================================
   REPLICATED SITE HEADER — Consultant Bar (Module 0)
   Shows only when a distributor is set. DNN handles conditional display.
   ===================================================================== */
.listore-rep-bar {
    background: linear-gradient(90deg, var(--li-green-deep) 0%, var(--li-dark-2) 60%, var(--li-dark) 100%);
    border-bottom: 2px solid var(--li-green);
    padding: 0;
}

.listore-rep-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Circular avatar with distributor initial */
.listore-rep-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--li-green-mid) 0%, var(--li-green-dark) 100%);
    border: 2px solid var(--li-gold);
    color: #ffffff;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(184, 149, 90, 0.35);
    letter-spacing: 0;
}

/* Label + name stacked */
.listore-rep-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.listore-rep-label {
    color: rgba(255, 255, 255, 0.50) !important;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: block;
    line-height: 1.2;
}

.listore-rep-name {
    color: #ffffff !important;
    font-weight: 800;
    display: block;
    line-height: 1.2;
}

/* Gold dot separator */
.listore-rep-dot {
    color: var(--li-gold);
    flex-shrink: 0;
    opacity: 0.7;
}

/* Tagline — right side */
.listore-rep-tagline {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.38) !important;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    .listore-rep-tagline { display: none; }
    .listore-rep-dot { display: none; }
    .listore-rep-inner { padding: 8px 14px; }
}


/* =====================================================================
   MISC FIXES — scoped so they don't bleed to rest of site
   ===================================================================== */

/* Hide specs row (bottle / pills / days) — too cluttered */
.listore-specs { display: none !important; }

/* Hide the Action Grid table (only the checkout button shows) */
#angrid1439 table { display: none !important; }

/* Remove old border from table-responsive inside listore cards */
.listore-card .table-responsive {
    border: none !important;
    margin: 0 !important;
}

/* Keep existing .ib circle (store price badge) but recolor to brand */
.listore-card .ib {
    background-color: var(--li-green) !important;
    color: #ffffff !important;
}

/* PV label color update */
.listore-card .liv-pv {
    color: var(--li-green) !important;
}

/* Inline CSS module — nothing to show */
.listore-vars-hidden { display: none !important; }