/*

 * elcg-prerender.css

 *

 * Global structural styles for the Extract Labs Category Grid.

 * Color palette and design language aligned with pdp-core.css.

 * Uses BEM class names (.elcg-*) shared between the PHP pre-render

 * and React components. !important used where theme override risk is high.

 */



/* =========================================================================

   CSS Custom Properties

   Aligned with Extract Labs PDP palette (pdp-core.css).

   ========================================================================= */



:root {

    /* Brand palette */

    --elgrid-color-primary:        #2d2926;

    --elgrid-color-accent:         #4a7a73;

    --elgrid-color-accent-dark:    #274a47;

    --elgrid-color-text:           #2d2926;

    --elgrid-color-text-secondary: #54595f;

    --elgrid-color-text-muted:     #757575;

    --elgrid-color-bg:             #ffffff;

    --elgrid-color-bg-warm:        #f9f7f4;

    --elgrid-color-bg-page:        #e6edec;

    --elgrid-color-border:         #d7d7d7;

    --elgrid-color-badge-bg:       #d1dedc;

    --elgrid-color-badge-text:     #274a47;



    /* Layout */

    --elgrid-card-bg:              #ffffff;

    --elgrid-card-radius:          12px;

    --elgrid-card-shadow:          0 2px 12px rgba(0, 0, 0, 0.07);

    --elgrid-grid-gap:             24px;

    --elgrid-sidebar-width:        260px;



    /* Badge colors — 3-shade brand family */

    --elgrid-badge-sale-bg:              #c0392b;   /* red — universal sale signal */

    --elgrid-badge-sale-color:           #ffffff;

    --elgrid-badge-new-bg:               #4a7a73;   /* accent teal */

    --elgrid-badge-new-color:            #ffffff;

    --elgrid-badge-bestseller-bg:        #2d2926;   /* primary dark — bold */

    --elgrid-badge-bestseller-color:     #ffffff;

    --elgrid-badge-profile-bg:           #274a47;   /* accent dark */

    --elgrid-badge-profile-color:        #ffffff;

    --elgrid-badge-ingredient-bg:        #4a7a73;   /* accent */

    --elgrid-badge-ingredient-color:     #ffffff;

    --elgrid-badge-certification-bg:     #d1dedc;   /* light badge style */

    --elgrid-badge-certification-color:  #274a47;

    --elgrid-badge-characteristic-bg:   #e6edec;

    --elgrid-badge-characteristic-color: #274a47;



    /* Buttons */

    --elgrid-btn-bg:               #274a47;

    --elgrid-btn-color:            #ffffff;

    --elgrid-btn-radius:           50px;



    /* Typography */

    --elgrid-font-family:          inherit;

}



/* =========================================================================

   Layout — sidebar + grid

   ========================================================================= */



.elcg-layout {

    display:     flex;

    gap:         32px;

    align-items: flex-start;

    font-family: var(--elgrid-font-family);

}



/* Sidebar */

.elcg-sidebar {

    width:       var(--elgrid-sidebar-width);

    flex-shrink: 0;

    position:    sticky;

    top:         24px;

}



/* Right-hand content area */

.elcg-grid-wrap {

    flex:      1;

    min-width: 0;

    position:  relative;

}



/* =========================================================================

   Sort bar

   ========================================================================= */



.elcg-sortbar {

    display:         flex;

    align-items:     center;

    justify-content: space-between;

    margin-bottom:   20px;

    min-height:      40px;

}



.elcg-sortbar__count {

    font-size:   0.875rem !important;

    color:       var(--elgrid-color-text-muted) !important;

    font-weight: 400 !important;

}



.elcg-sortbar__right {

    display:     flex;

    align-items: center;

    gap:         10px;

}



.elcg-sortbar__label {

    font-size:   0.875rem !important;

    color:       var(--elgrid-color-text-secondary) !important;

    font-weight: 400 !important;

}



.elcg-sortbar__select {

    padding:       6px 32px 6px 12px !important;

    border:        1px solid var(--elgrid-color-border) !important;

    border-radius: 6px !important;

    font-size:     0.875rem !important;

    color:         var(--elgrid-color-text) !important;

    background:    #fff !important;

    cursor:        pointer !important;

    appearance:    auto !important;

    outline:       none !important;

}

.elcg-sortbar__select:focus {

    border-color: var(--elgrid-color-accent) !important;

}



/* =========================================================================

   Product grid

   ========================================================================= */



.elcg-grid {

    display:               grid;

    grid-template-columns: repeat(3, 1fr);

    gap:                   var(--elgrid-grid-gap);

    list-style:            none !important;

    margin:                0 !important;

    padding:               0 !important;

}



.elcg-grid__item {

    list-style: none !important;

    margin:     0 !important;

    padding:    0 !important;

}



/* =========================================================================

   Product card

   ========================================================================= */



.elcg-card {

    display:        flex;

    flex-direction: column;

    background:     var(--elgrid-card-bg) !important;

    border-radius:  var(--elgrid-card-radius) !important;

    box-shadow:     var(--elgrid-card-shadow) !important;

    overflow:       hidden !important;

    height:         100%;

    transition:     box-shadow 0.2s ease, transform 0.2s ease;

}

.elcg-card:hover {

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.11) !important;

    transform:  translateY(-2px);

}



/* Image area */

.elcg-card__image-link {

    display: block !important;

    color:   inherit !important;

}



.elcg-card__image-wrap {

    position:   relative;

    overflow:   hidden;

    background: var(--elgrid-color-bg-warm);

    aspect-ratio: 1 / 1;

}



.elcg-card__image {

    width:      100% !important;

    height:     100% !important;

    object-fit: cover !important;

    display:    block !important;

    transition: transform 0.3s ease;

}

.elcg-card:hover .elcg-card__image {

    transform: scale(1.03);

}



/* =========================================================================

   Overlay badges (Sale, New) — diagonal corner fold ribbon

   ========================================================================= */



/*

 * Technique: the container clips to the card corner, the ribbon sits

 * inside it rotated -45deg so it cuts diagonally across the corner.

 * A second badge (rare: sale + new simultaneously) stacks below.

 */



.elcg-card__overlay-badges {

    position:   absolute;

    top:        0;

    left:       0;

    z-index:    2;

    width:      84px;

    height:     84px;

    overflow:   hidden;

    pointer-events: none;

}



.elcg-badge--ribbon {

    position:       absolute;

    top:            20px;

    left:           -26px;

    width:          100px;

    text-align:     center;

    transform:      rotate( -45deg );

    padding:        5px 0;

    font-size:      0.6rem !important;

    font-weight:    700 !important;

    letter-spacing: 0.07em;

    text-transform: uppercase !important;

    color:          #fff !important;

    box-shadow:     0 1px 4px rgba(0,0,0,0.18);

}



/* Second ribbon (e.g. both Sale and New) — stacks further out */

.elcg-badge--ribbon:nth-child(2) {

    top:  38px;

    left: -22px;

}



.elcg-badge--sale.elcg-badge--ribbon {

    background: var(--elgrid-badge-sale-bg) !important;

}



.elcg-badge--new.elcg-badge--ribbon {

    background: var(--elgrid-badge-new-bg) !important;

}



/* Card body */

.elcg-card__body {

    padding:        14px 16px 16px;

    display:        flex;

    flex-direction: column;

    flex:           1;

    gap:            8px;

}



/* =========================================================================

   Body badges — above product name

   ========================================================================= */



.elcg-card__body-badges {

    display:   flex;

    flex-wrap: wrap;

    gap:       5px;

}



.elcg-badge {

    display:        inline-flex !important;

    align-items:    center !important;

    padding:        3px 9px !important;

    border-radius:  20px !important;

    font-size:      0.625rem !important;

    font-weight:    700 !important;

    letter-spacing: 0.05em !important;

    text-transform: uppercase !important;

    line-height:    1.4 !important;

    white-space:    nowrap !important;

}



.elcg-badge--bestseller {

    background: var(--elgrid-badge-bestseller-bg) !important;

    color:      var(--elgrid-badge-bestseller-color) !important;

}



.elcg-badge--profile {

    background: var(--elgrid-badge-profile-bg) !important;

    color:      var(--elgrid-badge-profile-color) !important;

}



.elcg-badge--ingredient {

    background: var(--elgrid-badge-ingredient-bg) !important;

    color:      var(--elgrid-badge-ingredient-color) !important;

}



.elcg-badge--certification {

    background: var(--elgrid-badge-certification-bg) !important;

    color:      var(--elgrid-badge-certification-color) !important;

}



.elcg-badge--characteristic {

    background: var(--elgrid-badge-characteristic-bg) !important;

    color:      var(--elgrid-badge-characteristic-color) !important;

}



/* Product name */

.elcg-card__name-link {

    text-decoration: none !important;

    color:           var(--elgrid-color-text) !important;

}

.elcg-card__name-link:hover {

    color: var(--elgrid-color-accent-dark) !important;

}



.elcg-card__name {

    font-size:         0.9375rem !important;

    font-weight:       600 !important;

    line-height:       1.35 !important;

    margin:            0 !important;

    color:             var(--elgrid-color-text) !important;

    /* Clamp to 2 lines — prevents variable title length breaking grid alignment */

    display:           -webkit-box !important;

    -webkit-line-clamp: 2 !important;

    -webkit-box-orient: vertical !important;

    overflow:          hidden !important;

    min-height:        calc( 1.35em * 2 ); /* reserve space even for 1-line titles */

}



/* Price */

.elcg-card__price {

    font-size:   1rem !important;

    font-weight: 600 !important;

    color:       var(--elgrid-color-text) !important;

    line-height: 1 !important;

    margin-top:  auto !important; /* push price + button to card bottom */

}

}

.elcg-card__price * {

    color: var(--elgrid-color-text) !important;

}



/* =========================================================================

   Add to cart / Select Options button

   ========================================================================= */



.elcg-card__button {

    display:         block !important;

    width:           100% !important;

    padding:         11px 16px !important;

    background:      var(--elgrid-btn-bg) !important;

    color:           var(--elgrid-btn-color) !important;

    border:          none !important;

    border-radius:   var(--elgrid-btn-radius) !important;

    font-size:       0.875rem !important;

    font-weight:     600 !important;

    text-align:      center !important;

    text-decoration: none !important;

    cursor:          pointer !important;

    transition:      background 0.2s ease, opacity 0.2s ease !important;

    margin-top:      auto !important;

    line-height:     1.4 !important;

    letter-spacing:  0.01em !important;

}

.elcg-card__button:hover {

    opacity: 0.88 !important;

}



.elcg-card__button--variable,

.elcg-card__button--variable:visited,

.elcg-card__button--variable:hover,

.elcg-card__button--variable:focus {

    color: var(--elgrid-btn-color) !important;

}



.elcg-card__button--outofstock {

    background: #e2e8f0 !important;

    color:      #9aa5b4 !important;

    cursor:     not-allowed !important;

}



/* =========================================================================

   Loading placeholder skeleton

   ========================================================================= */



.elcg-loading-placeholder {

    width: 100%;

}



.elcg-loading-placeholder__grid {

    display:               grid;

    grid-template-columns: repeat(3, 1fr);

    gap:                   var(--elgrid-grid-gap);

}



.elcg-loading-placeholder__card {

    background:    #fff;

    border-radius: var(--elgrid-card-radius);

    overflow:      hidden;

    box-shadow:    var(--elgrid-card-shadow);

}



.elcg-loading-placeholder__image,

.elcg-loading-placeholder__title,

.elcg-loading-placeholder__text {

    background:  linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);

    background-size: 200% 100%;

    animation:   elcg-shimmer 1.4s infinite;

    border-radius: 4px;

}



.elcg-loading-placeholder__image {

    width:        100%;

    aspect-ratio: 1 / 1;

    border-radius: 0;

}



.elcg-loading-placeholder__title {

    height: 14px;

    margin: 14px 16px 8px;

}



.elcg-loading-placeholder__text {

    height:  10px;

    margin:  0 16px 14px;

    width:   60%;

}



@keyframes elcg-shimmer {

    0%   { background-position: 200% 0; }

    100% { background-position: -200% 0; }

}



/* =========================================================================

   Page loading overlay

   ========================================================================= */



.elcg-page-loading {

    position:       absolute;

    inset:          0;

    z-index:        100;

    display:        flex;

    flex-direction: column;

    align-items:    center;

    justify-content: center;

    gap:            12px;

    background:     rgba(255, 255, 255, 0.78);

    backdrop-filter: blur(2px);

    border-radius:  var(--elgrid-card-radius);

    opacity:        0;

    pointer-events: none;

    transition:     opacity 0.2s ease;

}



.elcg-page-loading--visible {

    opacity:        1;

    pointer-events: auto;

}



.elcg-page-loading__spinner {

    width:        36px;

    height:       36px;

    border:       3px solid var(--elgrid-color-bg-page);

    border-top:   3px solid var(--elgrid-color-accent-dark);

    border-radius: 50%;

    animation:    elcg-spin 0.7s linear infinite;

}



@keyframes elcg-spin {

    to { transform: rotate(360deg); }

}



.elcg-page-loading__text {

    font-size:  0.8125rem;

    color:      var(--elgrid-color-text-muted);

    font-weight: 500;

}



/* =========================================================================

   No results

   ========================================================================= */



.elcg-no-results {

    padding:    64px 24px;

    text-align: center;

    color:      var(--elgrid-color-text-muted);

    font-size:  0.9375rem;

}



/* =========================================================================

   Pagination

   ========================================================================= */



.elcg-pagination {

    display:         flex;

    justify-content: center;

    align-items:     center;

    gap:             6px;

    margin-top:      32px;

    flex-wrap:       wrap;

}



.elcg-pagination__btn {

    display:         inline-flex !important;

    align-items:     center !important;

    justify-content: center !important;

    min-width:       38px !important;

    height:          38px !important;

    padding:         0 10px !important;

    border:          1px solid var(--elgrid-color-border) !important;

    border-radius:   8px !important;

    background:      #fff !important;

    color:           var(--elgrid-color-text) !important;

    font-size:       0.875rem !important;

    font-weight:     500 !important;

    cursor:          pointer !important;

    text-decoration: none !important;

    transition:      border-color 0.15s, background 0.15s, color 0.15s !important;

    line-height:     1 !important;

}

.elcg-pagination__btn:hover {

    border-color: var(--elgrid-color-accent) !important;

    color:        var(--elgrid-color-accent-dark) !important;

}

.elcg-pagination__btn--active {

    background:   var(--elgrid-color-accent-dark) !important;

    border-color: var(--elgrid-color-accent-dark) !important;

    color:        #fff !important;

    font-weight:  700 !important;

}

.elcg-pagination__btn:disabled {

    opacity: 0.4 !important;

    cursor:  not-allowed !important;

}



.elcg-pagination__ellipsis {

    color:     var(--elgrid-color-text-muted);

    font-size: 0.875rem;

    padding:   0 4px;

}



/* =========================================================================

   Active filter chips — above the product grid

   ========================================================================= */



.elcg-active-chips {

    display:       flex !important;

    flex-wrap:     wrap !important;

    align-items:   center !important;

    gap:           6px !important;

    margin-bottom: 18px !important;

}



.elcg-active-chip {

    display:        inline-flex !important;

    align-items:    center !important;

    gap:            7px !important;

    padding:        5px 12px 5px 14px !important;

    background:     var(--elgrid-color-accent-dark) !important;

    color:          #ffffff !important;

    border:         none !important;

    border-radius:  20px !important;

    font-size:      0.75rem !important;

    font-weight:    600 !important;

    letter-spacing: 0.02em !important;

    cursor:         pointer !important;

    line-height:    1.4 !important;

    white-space:    nowrap !important;

    transition:     opacity 0.15s !important;

    text-transform: none !important;

    text-decoration: none !important;

    box-shadow:     none !important;

}

.elcg-active-chip:hover {

    opacity: 0.85 !important;

}



.elcg-active-chip__x {

    flex-shrink: 0;

    opacity:     0.7;

}

.elcg-active-chip:hover .elcg-active-chip__x {

    opacity: 1;

}



.elcg-active-chips__clear {

    display:        inline-flex !important;

    align-items:    center !important;

    padding:        5px 12px !important;

    background:     transparent !important;

    color:          var(--elgrid-color-text-muted) !important;

    border:         1px solid var(--elgrid-color-border) !important;

    border-radius:  20px !important;

    font-size:      0.75rem !important;

    font-weight:    500 !important;

    cursor:         pointer !important;

    line-height:    1.4 !important;

    white-space:    nowrap !important;

    transition:     border-color 0.15s, color 0.15s !important;

    text-decoration: none !important;

    box-shadow:     none !important;

}

.elcg-active-chips__clear:hover {

    border-color: var(--elgrid-color-accent-dark) !important;

    color:        var(--elgrid-color-accent-dark) !important;

}



/* =========================================================================

   Filter Sidebar — desktop

   ========================================================================= */



.elcg-filter-sidebar {

    padding-bottom: 16px;

}



/* =========================================================================

   Filter Group

   Desktop: heading is display text only, list always visible, no chevron.

   Mobile:  heading is an interactive toggle, list collapses.

   ========================================================================= */



.elcg-filter-group {

    border-bottom: 1px solid var(--elgrid-color-border);

    padding:       4px 0;

}

.elcg-filter-group:last-child {

    border-bottom: none;

}



/* Heading — desktop: plain text heading, not a button */

.elcg-filter-group__heading {

    display:         flex !important;

    align-items:     center !important;

    justify-content: space-between !important;

    width:           100% !important;

    padding:         12px 0 10px !important;

    background:      transparent !important;

    border:          none !important;

    box-shadow:      none !important;

    cursor:          default !important;

    font-size:       0.8125rem !important;

    font-weight:     700 !important;

    letter-spacing:  0.06em !important;

    text-transform:  uppercase !important;

    color:           var(--elgrid-color-text) !important;

    text-align:      left !important;

    gap:             12px !important;

    pointer-events:  none !important;

    outline:         none !important;

}



.elcg-filter-group__chevron {

    display:    none !important; /* hidden on desktop */

    flex-shrink: 0;

    transition: transform 0.2s;

    color:      var(--elgrid-color-text-muted);

}

.elcg-filter-group--open .elcg-filter-group__chevron {

    transform: rotate(180deg);

}



/* List — always rendered; closed class collapses on mobile */

.elcg-filter-group__list {

    list-style: none !important;

    margin:     0 0 10px !important;

    padding:    0 !important;

    overflow:   hidden;

    max-height: 600px;

    opacity:    1;

    transition: max-height 0.25s ease, opacity 0.2s ease;

}



.elcg-filter-group__list--closed {

    max-height: 0 !important;

    opacity:    0 !important;

}



.elcg-filter-group__item {

    margin-bottom: 2px !important;

}



/* Label row */

.elcg-filter-group__label {

    display:     flex !important;

    align-items: center !important;

    gap:         9px !important;

    cursor:      pointer !important;

    font-size:   0.8125rem !important;

    font-weight: 400 !important;

    color:       var(--elgrid-color-text-secondary) !important;

    padding:     5px 4px !important;

    border-radius: 5px !important;

    transition:  background 0.12s, color 0.12s !important;

    text-decoration: none !important;

}

.elcg-filter-group__label:hover {

    background: var(--elgrid-color-bg-warm) !important;

    color:      var(--elgrid-color-text) !important;

}

.elcg-filter-group__label--checked {

    color:      var(--elgrid-color-accent-dark) !important;

    font-weight: 600 !important;

}



/* Custom checkbox */

.elcg-filter-group__checkbox-wrap {

    position:    relative;

    flex-shrink: 0;

    width:       16px;

    height:      16px;

    display:     inline-flex;

}



.elcg-filter-group__checkbox {

    position:   absolute !important;

    opacity:    0 !important;

    width:      100% !important;

    height:     100% !important;

    margin:     0 !important;

    cursor:     pointer !important;

    z-index:    1 !important;

}



.elcg-filter-group__checkmark {

    display:       block;

    width:         16px;

    height:        16px;

    border:        1.5px solid var(--elgrid-color-border);

    border-radius: 3px;

    background:    #fff;

    transition:    border-color 0.15s, background 0.15s;

    position:      relative;

    pointer-events: none;

}



/* Checked state via sibling selector */

.elcg-filter-group__checkbox:checked + .elcg-filter-group__checkmark {

    background:   var(--elgrid-color-accent-dark);

    border-color: var(--elgrid-color-accent-dark);

}



/* Checkmark tick */

.elcg-filter-group__checkbox:checked + .elcg-filter-group__checkmark::after {

    content:      '';

    position:     absolute;

    left:         4px;

    top:          1px;

    width:        5px;

    height:       9px;

    border:       2px solid #fff;

    border-top:   none;

    border-left:  none;

    transform:    rotate(45deg);

}



/* Focus ring on keyboard nav */

.elcg-filter-group__checkbox:focus-visible + .elcg-filter-group__checkmark {

    outline:        2px solid var(--elgrid-color-accent);

    outline-offset: 2px;

}



.elcg-filter-group__name {

    flex:         1;

    line-height:  1.3;

}



.elcg-filter-group__count {

    color:     var(--elgrid-color-text-muted) !important;

    font-size: 0.75rem !important;

    font-weight: 400 !important;

    flex-shrink: 0;

}



/* Boolean filters (On Sale, In Stock) */

.elcg-filter-booleans {

    padding: 8px 0 4px;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.elcg-filter-bool {

    display:     flex !important;

    align-items: center !important;

    gap:         9px !important;

    cursor:      pointer !important;

    font-size:   0.8125rem !important;

    color:       var(--elgrid-color-text-secondary) !important;

    padding:     5px 4px !important;

    border-radius: 5px !important;

    transition:  background 0.12s !important;

}

.elcg-filter-bool:hover {

    background: var(--elgrid-color-bg-warm) !important;

}

.elcg-filter-bool--checked {

    color:      var(--elgrid-color-accent-dark) !important;

    font-weight: 600 !important;

}



/* =========================================================================

   Benefit filter squares

   ========================================================================= */



.elcg-benefit-group {

    border-bottom: 1px solid var(--elgrid-color-border);

    padding:       4px 0 14px;

}



.elcg-benefit-group__heading {

    padding:        12px 0 10px !important;

    font-size:      0.8125rem !important;

    font-weight:    700 !important;

    letter-spacing: 0.06em !important;

    text-transform: uppercase !important;

    color:          var(--elgrid-color-text) !important;

    margin:         0 !important;

}



.elcg-benefit-grid {

    display:               grid;

    grid-template-columns: repeat(2, 1fr);

    gap:                   6px;

}



.elcg-benefit-btn {

    display:         flex !important;

    flex-direction:  column !important;

    align-items:     center !important;

    justify-content: center !important;

    gap:             5px !important;

    padding:         10px 6px !important;

    background:      var(--elgrid-color-bg-warm) !important;

    border:          1.5px solid var(--elgrid-color-border) !important;

    border-radius:   8px !important;

    cursor:          pointer !important;

    transition:      background 0.15s, border-color 0.15s, color 0.15s !important;

    color:           var(--elgrid-color-text-secondary) !important;

    text-align:      center !important;

    box-shadow:      none !important;

    min-height:      70px !important;

}

.elcg-benefit-btn:hover {

    background:   var(--benefit-color, var(--elgrid-color-accent-dark)) !important;

    border-color: var(--benefit-color, var(--elgrid-color-accent-dark)) !important;

    color:        #ffffff !important;

}

.elcg-benefit-btn--selected {

    background:   var(--benefit-color, var(--elgrid-color-accent-dark)) !important;

    border-color: var(--benefit-color, var(--elgrid-color-accent-dark)) !important;

    color:        #ffffff !important;

}



.elcg-benefit-btn__icon {

    flex-shrink: 0;

    opacity:     0.9;

    transition:  transform 0.15s;

}

.elcg-benefit-btn:hover .elcg-benefit-btn__icon,

.elcg-benefit-btn--selected .elcg-benefit-btn__icon {

    opacity:   1;

    transform: scale(1.05);

}



.elcg-benefit-btn__label {

    font-size:      0.65rem !important;

    font-weight:    700 !important;

    letter-spacing: 0.04em !important;

    text-transform: uppercase !important;

    line-height:    1.2 !important;

}



/* =========================================================================

   Yotpo — suppress "Write a Review" link in card context

   Not functional outside PDP; users should click through to the product.

   ========================================================================= */



.elcg-card .yotpo.bottomLine .write-review-wrapper,

.elcg-card .yotpo.bottomLine .writeReview,

.elcg-card .yotpo.bottomLine a[class*="write"],

.elcg-card .yotpo .write-review-btn,

.elcg-card .yotpo .yotpo-write-review {

    display: none !important;

}



/* =========================================================================

   Sidebar mobile filter button

   Desktop: hidden. Tablet/mobile: shown in the sidebar slot.

   ========================================================================= */



.elcg-sidebar__mobile-filter-btn {

    display:       none !important;

    align-items:   center !important;

    gap:           8px !important;

    padding:       9px 20px !important;

    background:    transparent !important;

    border:        1.5px solid var(--elgrid-color-accent-dark) !important;

    border-radius: 50px !important;

    font-size:     0.875rem !important;

    font-weight:   600 !important;

    color:         var(--elgrid-color-accent-dark) !important;

    cursor:        pointer !important;

    transition:    background 0.15s, color 0.15s !important;

    text-decoration: none !important;

    box-shadow:    none !important;

}

.elcg-sidebar__mobile-filter-btn:hover {

    background: var(--elgrid-color-accent-dark) !important;

    color:      #ffffff !important;

}



.elcg-sidebar__mobile-filter-badge {

    display:         inline-flex !important;

    align-items:     center !important;

    justify-content: center !important;

    width:           19px !important;

    height:          19px !important;

    background:      var(--elgrid-color-accent-dark) !important;

    color:           #fff !important;

    border-radius:   50% !important;

    font-size:       0.7rem !important;

    font-weight:     700 !important;

    line-height:     1 !important;

}

.elcg-sidebar__mobile-filter-btn:hover .elcg-sidebar__mobile-filter-badge {

    background: #fff !important;

    color:      var(--elgrid-color-accent-dark) !important;

}



/* =========================================================================

   Mobile filter drawer

   ========================================================================= */



.elcg-drawer-open {

    overflow: hidden !important;

}



/* Backdrop — fades in/out via opacity transition */

.elcg-drawer-backdrop {

    position:    fixed !important;

    inset:       0 !important;

    z-index:     10002 !important;  /* above nav header (9999) and nav drawer (10001) */

    background:  rgba(45, 41, 38, 0.5) !important;

    backdrop-filter: blur(2px) !important;

    opacity:     0 !important;

    transition:  opacity 0.26s ease !important;

}

.elcg-drawer-backdrop--open {

    opacity: 1 !important;

}



/* Drawer panel — slides in/out via transform transition */

.elcg-drawer {

    position:        fixed !important;

    top:             0 !important;

    left:            0 !important;

    bottom:          0 !important;

    z-index:         10003 !important; /* one above backdrop */

    width:           min(300px, 90vw) !important;

    background:      #fff !important;

    display:         flex !important;

    flex-direction:  column !important;

    box-shadow:      6px 0 32px rgba(45, 41, 38, 0.15) !important;

    transform:       translateX( -100% ) !important;

    transition:      transform 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;

}

.elcg-drawer--open {

    transform: translateX( 0 ) !important;

}



.elcg-drawer__header {

    display:         flex;

    align-items:     center;

    justify-content: space-between;

    padding:         18px 20px;

    border-bottom:   1px solid var(--elgrid-color-border);

    flex-shrink:     0;

}



.elcg-drawer__title {

    font-size:      0.9375rem !important;

    font-weight:    700 !important;

    letter-spacing: 0.04em !important;

    text-transform: uppercase !important;

    color:          var(--elgrid-color-text) !important;

}



.elcg-drawer__close {

    display:         flex !important;

    align-items:     center !important;

    justify-content: center !important;

    width:           32px !important;

    height:          32px !important;

    background:      transparent !important;

    border:          none !important;

    cursor:          pointer !important;

    color:           var(--elgrid-color-text-muted) !important;

    border-radius:   6px !important;

    transition:      background 0.15s !important;

    box-shadow:      none !important;

}

.elcg-drawer__close:hover {

    background: var(--elgrid-color-bg-warm) !important;

    color:      var(--elgrid-color-text) !important;

}



.elcg-drawer__body {

    flex:       1;

    overflow-y: auto;

    padding:    16px 20px;

}



/* Mobile: restore heading interactivity inside drawer */

.elcg-drawer__body .elcg-filter-group__heading {

    cursor:         pointer !important;

    pointer-events: auto !important;

}

.elcg-drawer__body .elcg-filter-group__chevron {

    display: block !important;

}



.elcg-drawer__footer {

    padding:        14px 20px;

    border-top:     1px solid var(--elgrid-color-border);

    flex-shrink:    0;

    display:        flex;

    flex-direction: column;

    gap:            10px;

}



.elcg-drawer__clear {

    background:    transparent !important;

    border:        1px solid var(--elgrid-color-border) !important;

    border-radius: 50px !important;

    color:         var(--elgrid-color-text-muted) !important;

    font-size:     0.875rem !important;

    font-weight:   500 !important;

    padding:       10px !important;

    cursor:        pointer !important;

    transition:    border-color 0.15s, color 0.15s !important;

}

.elcg-drawer__clear:hover {

    border-color: var(--elgrid-color-accent-dark) !important;

    color:        var(--elgrid-color-accent-dark) !important;

}



.elcg-drawer__apply {

    display:         flex !important;

    align-items:     center !important;

    justify-content: center !important;

    gap:             8px !important;

    width:           100% !important;

    padding:         13px !important;

    background:      var(--elgrid-color-accent-dark) !important;

    color:           #ffffff !important;

    border:          none !important;

    border-radius:   50px !important;

    font-size:       0.9375rem !important;

    font-weight:     600 !important;

    cursor:          pointer !important;

    transition:      opacity 0.15s !important;

    box-shadow:      none !important;

}

.elcg-drawer__apply:hover {

    opacity: 0.9 !important;

}



.elcg-drawer__apply-badge {

    display:         inline-flex !important;

    align-items:     center !important;

    justify-content: center !important;

    min-width:       20px !important;

    height:          20px !important;

    padding:         0 5px !important;

    background:      rgba(255, 255, 255, 0.25) !important;

    border-radius:   99px !important;

    font-size:       0.75rem !important;

    font-weight:     700 !important;

    line-height:     1 !important;

}



/* =========================================================================

   Responsive — Tablet (≤1023px)

   ========================================================================= */



@media ( max-width: 1023px ) {

    .elcg-layout {

        flex-direction: column;

    }



    .elcg-sidebar {

        width:    auto;

        position: static;

        padding:  12px 16px 0; /* breathing room from container edges */

    }



    /* Show mobile filter button, hide desktop sidebar content */

    .elcg-sidebar__mobile-filter-btn {

        display: inline-flex !important;

    }

    .elcg-sidebar__inner {

        display: none !important;

    }



    .elcg-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .elcg-loading-placeholder__grid {

        grid-template-columns: repeat(2, 1fr);

    }



    /* Mobile: enable heading toggle interactivity — handled by matchMedia

       in FilterGroup.jsx, CSS rules kept as visual backup only */

    .elcg-filter-group__list--closed {

        max-height: 0 !important;

        opacity:    0 !important;

    }

}



/* =========================================================================

   Responsive — Mobile (≤639px)

   2-column product grid with compact card adjustments

   ========================================================================= */



@media ( max-width: 639px ) {



    .elcg-layout {

        gap: 0;

    }



    .elcg-sidebar {

        padding: 16px 12px 0;

    }



    .elcg-grid {

        grid-template-columns: repeat(2, 1fr);

        gap:                   12px;

    }



    .elcg-loading-placeholder__grid {

        grid-template-columns: repeat(2, 1fr);

        gap:                   12px;

    }



    /* Tighter card body on small screens */

    .elcg-card__body {

        padding: 10px 10px 12px;

        gap:     5px;

    }



    .elcg-card__name {

        font-size:  0.8125rem !important;

        min-height: calc( 1.35em * 2 ) !important;

    }



    .elcg-card__price {

        font-size: 0.9rem !important;

    }



    .elcg-card__button {

        padding:   9px 10px !important;

        font-size: 0.8rem !important;

    }



    /* Slightly smaller badges on 2-col mobile */

    .elcg-badge {

        font-size: 0.5625rem !important;

        padding:   2px 7px !important;

    }



    /* Compact Yotpo row */

    .elcg-card .yotpo.bottomLine {

        font-size: 0.75rem !important;

    }

}