/* ============================================================
   PUSPARANI NURSERY — Category Page Styles
   File   : Category.css
   Version: Final Consolidated — Compact No-Scrollbar
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
    --pn-forest-dark  : #0b1f14;
    --pn-forest-mid   : #122b1b;
    --pn-gold         : #c9a84c;
    --pn-gold-light   : #edd97a;
    --pn-ivory        : #f5f0e6;
    --pn-gold-border  : rgba(201, 168, 76, 0.30);
    --pn-gold-hover   : rgba(201, 168, 76, 0.55);
    --pn-strip-bg     : rgba(11,  31,  20, 0.52);
    --pn-strip-hover  : rgba(11,  31,  20, 0.76);
    --pn-card-radius  : 13px;
    --pn-image-height : 225px;
    --pn-name-size    : 13.5px;
    --pn-name-lines   : 2;
    --pn-name-height  : calc(var(--pn-name-size) * 1.25 * var(--pn-name-lines));
    --pn-ease         : cubic-bezier(0.23, 1, 0.32, 1);
    --pn-duration     : 0.40s;
}


/* ============================================================
   2. CATEGORY HEADER
   ============================================================ */

.category-header {
    text-align : center;
    margin     : 28px 0 14px;
}

.category-icon {
    display       : block;
    font-size     : 26px;
    color         : #3f8f46;
    margin-bottom : 4px;
}

.category-header h2 {
    font-family    : 'Tenor Sans', sans-serif;
    font-size      : 30px;
    font-weight    : 600;
    color          : #2f6f3e;
    letter-spacing : 1px;
    margin         : 6px 0 0;
}


/* ============================================================
   3. FILTER CONTAINER
   ============================================================ */

.filter-container {
    max-width              : 1200px;
    margin                 : 14px auto 26px;
    padding                : 14px 20px;
    background             : rgba(255, 255, 255, 0.72);
    backdrop-filter        : blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius          : 18px;
    border                 : 1px solid rgba(46, 125, 50, 0.14);
    box-shadow             : 0 8px 20px rgba(0, 0, 0, 0.08),
                             inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.filter-row {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 28px;
}

.filter-divider {
    width      : 1px;
    height     : 44px;
    background : linear-gradient(
                   to bottom,
                   transparent,
                   rgba(46, 125, 50, 0.25),
                   transparent
                 );
}

@media (max-width: 768px) {
    .filter-container {
        padding : 16px 18px;
    }

    .filter-row {
        flex-direction : column;
        align-items    : stretch;
        gap            : 18px;
    }

    .filter-divider {
        display : none;
    }
}


/* ============================================================
   4. PRICE FILTER & RANGE SLIDER
   ============================================================ */

.price-filter-box {
    flex      : 1;
    min-width : 280px;
}

.price-filter-box label {
    display        : block;
    font-weight    : 600;
    font-size      : 14px;
    color          : #2f6f3e;
    margin-bottom  : 4px;
    letter-spacing : 0.4px;
}

input[type=range] {
    -webkit-appearance : none;
    width              : 100%;
    margin             : 6px 0 4px;
    background         : transparent;
}

input[type=range]::-webkit-slider-runnable-track {
    height        : 8px;
    background    : linear-gradient(to right, #d8efe0, #7fcf9a, #2e7d32);
    border-radius : 6px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance : none;
    width              : 18px;
    height             : 18px;
    border-radius      : 50%;
    background         : #2e7d32;
    margin-top         : -5px;
    cursor             : pointer;
    box-shadow         : 0 3px 6px rgba(0, 0, 0, 0.25);
}

.filter-controls-row {
    display         : flex;
    justify-content : space-between;
    align-items     : flex-end;
    width           : 100%;
    gap             : 20px;
}

.price-filter-box-wrapper {
    width    : 260px;
    position : relative;
}

.dual-range-container {
    position : relative;
    height   : 20px;
    width    : 100%;
}

.slider-track {
    position   : absolute;
    width      : 100%;
    height     : 3px;
    background : #eee;
    top        : 50%;
    transform  : translateY(-50%);
    z-index    : 1;
}

.dual-input {
    position           : absolute;
    left               : 0;
    width              : 100% !important;
    appearance         : none;
    -webkit-appearance : none;
    background         : none;
    pointer-events     : none;
    top                : 50%;
    transform          : translateY(-50%);
    margin             : 0;
    z-index            : 2;
}

.dual-input::-webkit-slider-thumb {
    appearance         : none;
    -webkit-appearance : none;
    height             : 16px;
    width              : 16px;
    border-radius      : 50%;
    background         : #d4af37;
    pointer-events     : auto;
    cursor             : pointer;
    border             : 2px solid #fff;
    box-shadow         : 0 2px 4px rgba(0, 0, 0, 0.2);
    position           : relative;
    z-index            : 10;
}

@media (max-width: 768px) {
    .filter-controls-row {
        flex-direction : column !important;
        align-items    : flex-start !important;
        gap            : 15px !important;
    }

    .price-filter-box-wrapper,
    .sort-filter-box,
    .price-filter-box {
        width       : 100% !important;
        text-align  : left !important;
        margin-left : 0 !important;
    }
}


/* ============================================================
   5. FILTER ACTION BUTTONS
   ============================================================ */

.filter-actions {
    display    : flex;
    gap        : 12px;
    margin-top : 6px;
}

.filter-btn {
    padding        : 9px 24px;
    background     : linear-gradient(to right, #1b4d3e, #2e7d32);
    color          : #ffffff;
    border         : none;
    border-radius  : 22px;
    font-size      : 14px;
    font-weight    : 600;
    letter-spacing : 0.6px;
    cursor         : pointer;
    box-shadow     : 0 6px 16px rgba(0, 0, 0, 0.25);
    transition     : transform 0.25s ease, box-shadow 0.25s ease;
}

.filter-btn:hover {
    transform  : translateY(-1px);
    box-shadow : 0 9px 22px rgba(0, 0, 0, 0.32);
}

.clear-filter-btn {
    padding       : 9px 22px;
    background    : #ffffff;
    color         : #2e7d32;
    border        : 1px solid rgba(46, 125, 50, 0.35);
    border-radius : 22px;
    font-size     : 14px;
    font-weight   : 600;
    cursor        : pointer;
    transition    : background 0.25s ease, box-shadow 0.25s ease;
}

.clear-filter-btn:hover {
    background : #eef6f1;
    box-shadow : 0 4px 10px rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
    .filter-actions {
        flex-wrap : wrap;
    }
}


/* ============================================================
   6. SORT BOX
   ============================================================ */

.sort-box-right {
    min-width  : 200px;
    text-align : right;
}

.sort-box-right label {
    display        : block;
    font-size      : 13px;
    font-weight    : 600;
    color          : #2f6f3e;
    margin-bottom  : 4px;
    letter-spacing : 0.4px;
}

.sort-dropdown {
    padding       : 8px 14px;
    border-radius : 20px;
    border        : 1px solid rgba(63, 143, 70, 0.25);
    background    : #ffffff;
    font-family   : 'Tenor Sans', sans-serif;
}

.sort-dropdown:focus {
    outline    : none;
    box-shadow : 0 0 0 2px rgba(63, 143, 70, 0.25);
}

@media (max-width: 768px) {
    .sort-box-right {
        text-align : left;
        width      : 100%;
    }
}


/* ============================================================
   7. ACTIVE MENU ITEM
   ============================================================ */

.menu a.active {
    background    : linear-gradient(to right,
                      #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    color         : #1a3c15 !important;
    font-weight   : 700;
    border-radius : 20px;
    box-shadow    : 0 4px 12px rgba(184, 134, 11, 0.4);
    border        : 1px solid #d4af37;
    transition    : all 0.3s ease;
}

.menu a.active:hover {
    transform : none;
}


/* ============================================================
   8. PLANT GRID
   ============================================================ */

.plant-grid {
    display               : grid !important;
    grid-template-columns : repeat(4, 1fr) !important;
    align-items           : stretch !important;
    gap                   : 22px !important;
    padding               : 22px 0 !important;
    max-width             : 1200px !important;
    margin                : 0 auto !important;
}

@media (max-width: 1024px) {
    .plant-grid {
        grid-template-columns : repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .plant-grid {
        grid-template-columns : repeat(2, 1fr) !important;
        gap                   : 8px !important;
        padding               : 8px !important;
    }

    .container {
        padding-left  : 6px !important;
        padding-right : 6px !important;
    }

    .filter-controls-container {
        padding-left  : 6px !important;
        padding-right : 6px !important;
    }
}


/* ============================================================
   9. PLANT CARD SHELL
   ============================================================ */

.plant-card {
    height         : 100% !important;
    display        : flex !important;
    flex-direction : column !important;
    position       : relative !important;
    overflow       : hidden !important;
    border         : 1px solid var(--pn-gold-border) !important;
    border-radius  : var(--pn-card-radius) !important;
    box-shadow     : 0 3px 12px rgba(0, 0, 0, 0.06) !important;
    opacity        : 0;
    transition     : transform var(--pn-duration) var(--pn-ease),
                     box-shadow var(--pn-duration) var(--pn-ease) !important;
}

.plant-card.visible {
    opacity   : 1;
    animation : pn-card-reveal 0.42s var(--pn-ease) both;
}

@keyframes pn-card-reveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.plant-card:hover {
    transform  : translateY(-8px) !important;
    box-shadow : 0 22px 50px rgba(0, 0, 0, 0.14),
                 0 0 0 1px rgba(201, 168, 76, 0.38) !important;
}

@media (max-width: 768px) {
    .plant-card:hover {
        transform  : none !important;
        box-shadow : 0 4px 14px rgba(0, 0, 0, 0.09) !important;
    }
}


/* ============================================================
   10. IMAGE AREA
   ============================================================ */

.image-container {
    position      : relative !important;
    height        : var(--pn-image-height) !important;
    flex-shrink   : 0 !important;
    width         : 100% !important;
    overflow      : hidden !important;
    border-radius : var(--pn-card-radius) var(--pn-card-radius) 0 0 !important;
    background    : #dde6d9 !important;
}

@media (max-width: 768px) {
    .image-container {
        height : 148px !important;
    }
}

.plant-image {
    width      : 100% !important;
    height     : 100% !important;
    object-fit : cover !important;
    display    : block !important;
    transition : transform 0.60s var(--pn-ease) !important;
}

.plant-card:hover .plant-image {
    transform : scale(1.06) !important;
}

@media (max-width: 768px) {
    .plant-card:hover .plant-image {
        transform : scale(1.03) !important;
    }
}

.image-container::before {
    content        : '';
    position       : absolute;
    bottom         : 0;
    left           : 0;
    right          : 0;
    height         : 65px;
    background     : linear-gradient(to top,
                       rgba(11, 31, 20, 0.50), transparent);
    pointer-events : none;
    z-index        : 2;
    transition     : height var(--pn-duration) var(--pn-ease);
}

.plant-card:hover .image-container::before {
    height : 85px;
}

.image-container::after {
    content        : '';
    position       : absolute;
    inset          : 0;
    background     : linear-gradient(145deg,
                       transparent 50%,
                       rgba(201, 168, 76, 0.09));
    opacity        : 0;
    pointer-events : none;
    z-index        : 1;
    transition     : opacity var(--pn-duration) var(--pn-ease);
}

.plant-card:hover .image-container::after {
    opacity : 1;
}


/* ============================================================
   11. LOW STOCK BADGE
   ============================================================ */

.low-stock-badge {
    position       : absolute !important;
    top            : 9px !important;
    left           : 9px !important;
    z-index        : 8 !important;
    padding        : 3px 10px !important;
    border-radius  : 20px !important;
    background     : linear-gradient(120deg, #b03020, #d94030) !important;
    color          : #ffffff !important;
    font-family    : 'Tenor Sans', sans-serif !important;
    font-size      : 8px !important;
    font-weight    : 600 !important;
    letter-spacing : 1.8px !important;
    text-transform : uppercase !important;
    box-shadow     : 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    pointer-events : none !important;
}


/* ============================================================
   12. ACTION STRIP
   ============================================================ */

.elegant-action-strip.permanent {
    position               : absolute !important;
    bottom                 : 10px !important;
    left                   : 50% !important;
    transform              : translateX(-50%) !important;
    z-index                : 9 !important;
    display                : flex !important;
    align-items            : center !important;
    height                 : 30px !important;
    padding                : 0 !important;
    border-radius          : 15px !important;
    white-space            : nowrap !important;
    background             : var(--pn-strip-bg) !important;
    border                 : 1px solid rgba(201, 168, 76, 0.32) !important;
    box-shadow             : 0 4px 18px rgba(0, 0, 0, 0.20),
                             inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter        : blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition             : background  0.28s ease,
                             border-color 0.28s ease,
                             box-shadow   0.28s ease !important;
}

.plant-card:hover .elegant-action-strip.permanent {
    background   : var(--pn-strip-hover) !important;
    border-color : var(--pn-gold-hover) !important;
    box-shadow   : 0 6px 24px rgba(0, 0, 0, 0.28),
                   inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.mini-action-icon {
    display         : inline-flex !important;
    align-items     : center !important;
    justify-content : center !important;
    width           : 36px !important;
    height          : 100% !important;
    padding         : 0 !important;
    color           : rgba(245, 240, 230, 0.68) !important;
    font-size       : 0.82rem !important;
    background      : transparent !important;
    border          : none !important;
    text-decoration : none !important;
    cursor          : pointer !important;
    position        : relative !important;
    transition      : color 0.20s ease, transform 0.20s ease !important;
}

.mini-action-icon + .mini-action-icon::before {
    content    : '';
    position   : absolute;
    left       : 0;
    top        : 22%;
    height     : 56%;
    width      : 1px;
    background : rgba(201, 168, 76, 0.25);
}

.mini-action-icon:hover {
    color     : var(--pn-gold-light) !important;
    transform : scale(1.22) !important;
}

.mini-action-icon:hover .fa-heart {
    color : #e07070 !important;
}

.cart-bag-centered {
    color     : var(--pn-gold) !important;
    font-size : 0.88rem !important;
}

.cart-bag-centered:hover {
    color : var(--pn-gold-light) !important;
}


/* ============================================================
   13. INFO PANEL
   ============================================================ */

.plant-info {
    flex-grow       : 1 !important;
    display         : flex !important;
    flex-direction  : column !important;
    align-items     : center !important;
    justify-content : space-between !important;
    gap             : 3px !important;
    padding         : 8px 12px 10px !important;
    background      : var(--pn-forest-mid) !important;
    text-align      : center !important;
}

@media (max-width: 768px) {
    .plant-info {
        padding : 6px 8px 8px !important;
        gap     : 2px !important;
    }
}

.plant-code,
.plant-code-mini {
    font-family    : 'Tenor Sans', sans-serif !important;
    font-size      : 8px !important;
    letter-spacing : 2.8px !important;
    text-transform : uppercase !important;
    color          : var(--pn-gold) !important;
    opacity        : 0.78 !important;
    line-height    : 1 !important;
}

.plant-name {
    font-family          : 'Cormorant Garamond', 'Playfair Display',
                           Georgia, serif !important;
    font-size            : var(--pn-name-size) !important;
    font-weight          : 600 !important;
    font-style           : italic !important;
    line-height          : 1.25 !important;
    color                : var(--pn-ivory) !important;
    height               : var(--pn-name-height) !important;
    min-height           : var(--pn-name-height) !important;
    display              : -webkit-box !important;
    -webkit-line-clamp   : var(--pn-name-lines) !important;
    -webkit-box-orient   : vertical !important;
    overflow             : hidden !important;
    margin               : 0 !important;
    padding              : 0 !important;
    width                : 100% !important;
    visibility           : visible !important;
    opacity              : 1 !important;
}

@media (max-width: 768px) {
    .plant-name {
        font-size  : 11.5px !important;
        height     : calc(11.5px * 1.25 * 2) !important;
        min-height : calc(11.5px * 1.25 * 2) !important;
    }
}

.rating-row {
    display         : flex !important;
    justify-content : center !important;
    align-items     : center !important;
    margin          : 0 !important;
}

.star {
    font-size      : 9.5px !important;
    color          : var(--pn-gold) !important;
    letter-spacing : 1.5px !important;
    opacity        : 0.85 !important;
}

.price-row {
    display         : flex !important;
    align-items     : baseline !important;
    justify-content : center !important;
    gap             : 4px !important;
    margin          : 0 !important;
}

.price {
    font-family : 'Cormorant Garamond', Georgia, serif !important;
    font-size   : 17px !important;
    font-weight : 600 !important;
    color       : var(--pn-gold-light) !important;
    line-height : 1 !important;
}

@media (max-width: 768px) {
    .price {
        font-size : 13px !important;
    }
}

.outstock {
    font-family    : 'Tenor Sans', sans-serif !important;
    font-size      : 7.5px !important;
    letter-spacing : 1.2px !important;
    text-transform : uppercase !important;
    color          : #e07070 !important;
    background     : rgba(224, 112, 112, 0.10) !important;
    border         : 1px solid rgba(224, 112, 112, 0.28) !important;
    padding        : 2px 7px !important;
    border-radius  : 20px !important;
}

.review-count {
    font-size : 12px;
    color     : #666;
}


/* ============================================================
   14. ADD TO CART BUTTON
   ============================================================ */

.btn-add-to-cart {
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    gap             : 5px !important;
    flex-shrink     : 0 !important;
    width           : 82% !important;
    margin-top      : 6px !important;
    padding         : 6px 10px !important;
    background      : transparent !important;
    color           : var(--pn-gold) !important;
    border          : 1px solid rgba(201, 168, 76, 0.42) !important;
    border-radius   : 18px !important;
    font-family     : 'Tenor Sans', sans-serif !important;
    font-size       : 8.5px !important;
    letter-spacing  : 2.2px !important;
    text-transform  : uppercase !important;
    text-decoration : none !important;
    cursor          : pointer !important;
    white-space     : nowrap !important;
    transition      : background   0.30s var(--pn-ease),
                      color        0.30s var(--pn-ease),
                      border-color 0.30s var(--pn-ease),
                      box-shadow   0.30s var(--pn-ease) !important;
}

.btn-add-to-cart:hover {
    background   : var(--pn-gold) !important;
    color        : var(--pn-forest-dark) !important;
    border-color : var(--pn-gold) !important;
    box-shadow   : 0 5px 16px rgba(201, 168, 76, 0.30) !important;
    transform    : translateY(-1px) !important;
}

.btn-add-to-cart i {
    font-size  : 9px !important;
    transition : transform 0.25s ease !important;
}

.btn-add-to-cart:hover i {
    transform : rotate(-10deg) scale(1.15) !important;
}

@media (max-width: 768px) {
    .btn-add-to-cart {
        width          : 90% !important;
        font-size      : 7.5px !important;
        letter-spacing : 1.5px !important;
        padding        : 5px !important;
    }
}


/* ============================================================
   15. MODAL OVERLAY & CART MODAL
   ============================================================ */

.modal-overlay {
    position        : fixed !important;
    top             : 0 !important;
    left            : 0 !important;
    width           : 100% !important;
    height          : 100% !important;
    z-index         : 2147483646 !important;
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    background      : rgba(0, 0, 0, 0.60) !important;
    padding         : 55px 16px 70px 16px !important;
    box-sizing      : border-box !important;
}

@media (max-width: 768px) {
    .modal-overlay {
        padding : 80px 10px 65px 10px !important;
    }
}

.cart-modal {
    position        : relative !important;
    width           : 100% !important;
    max-width       : 420px !important;
    max-height      : 100% !important;
    overflow        : hidden !important;   /* no scrollbar */
    border-radius   : 12px !important;
    background      : #fff !important;
    box-shadow      : 0 20px 60px rgba(0, 0, 0, 0.35) !important;
    box-sizing      : border-box !important;
    margin          : 0 !important;
    display         : flex !important;
    flex-direction  : column !important;
}

/* Hide scrollbar everywhere but still allow scroll if needed */
.cart-modal::-webkit-scrollbar { display: none !important; }
.cart-modal                     { -ms-overflow-style: none !important;
                                   scrollbar-width: none !important; }

@media (max-width: 768px) {
    .cart-modal {
        max-width     : 100% !important;
        border-radius : 10px !important;
    }
}


/* ============================================================
   16. MODAL HEADER & CLOSE BUTTON
   ============================================================ */

.modal-header {
    display         : flex !important;
    justify-content : space-between !important;
    align-items     : center !important;
    padding         : 10px 14px !important;   /* compact */
    border-bottom   : 1px solid #eee !important;
    position        : sticky !important;
    top             : 0 !important;
    background      : #fff !important;
    z-index         : 10 !important;
    border-radius   : 12px 12px 0 0 !important;
    flex-shrink     : 0 !important;
}

.modal-header h3 {
    color       : #2f6f3e !important;
    margin      : 0 !important;
    font-size   : 14px !important;
    font-family : 'Tenor Sans', sans-serif !important;
}

.close-btn {
    position        : relative !important;
    top             : unset !important;
    right           : unset !important;
    z-index         : 10 !important;
    width           : 28px !important;
    height          : 28px !important;
    border-radius   : 50% !important;
    background      : #f0f0f0 !important;
    border          : none !important;
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    font-size       : 16px !important;
    color           : #333 !important;
    cursor          : pointer !important;
    text-decoration : none !important;
    flex-shrink     : 0 !important;
    transition      : background 0.2s ease, transform 0.2s ease,
                      color 0.2s ease !important;
}

.close-btn:hover {
    background : #d4a030 !important;
    color      : #fff !important;
    transform  : rotate(90deg) !important;
}


/* ============================================================
   17. MODAL BODY
   ============================================================ */

.modal-body {
    display        : flex !important;
    flex-direction : column !important;
    padding        : 10px 14px !important;   /* compact */
    gap            : 8px !important;
    overflow-y     : auto !important;
    flex           : 1 !important;
    /* hide scrollbar */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.modal-body::-webkit-scrollbar {
    display : none !important;
}

.product-preview {
    display        : flex !important;
    flex-direction : row !important;
    align-items    : flex-start !important;
    gap            : 10px !important;
    flex-shrink    : 0 !important;
}

.main-img-box {
    width         : 100px !important;   /* compact */
    height        : 100px !important;
    flex-shrink   : 0 !important;
    border-radius : 8px !important;
    overflow      : hidden !important;
    border        : 1px solid #eee !important;
}

@media (max-width: 768px) {
    .main-img-box {
        width  : 80px !important;
        height : 80px !important;
    }
}

.primary-thumb {
    width      : 100% !important;
    height     : 100% !important;
    object-fit : cover !important;
    display    : block !important;
}

.secondary-img-box {
    display        : flex !important;
    flex-direction : column !important;
    align-items    : center !important;
    gap            : 4px !important;
    flex-shrink    : 0 !important;
}

.secondary-circle,
.zoom-trigger {
    width         : 58px !important;   /* compact */
    height        : 58px !important;
    border-radius : 50% !important;
    object-fit    : cover !important;
    display       : block !important;
    cursor        : zoom-in !important;
    border        : 2px solid #2f6f3e !important;
    transition    : transform 0.3s ease, border-color 0.3s ease !important;
}

@media (max-width: 768px) {
    .secondary-circle,
    .zoom-trigger {
        width  : 46px !important;
        height : 46px !important;
    }
}

.secondary-circle:hover,
.zoom-trigger:hover {
    transform    : scale(1.06) !important;
    border-color : #d4af37 !important;
}

.zoom-instruction {
    font-family    : 'Tenor Sans', sans-serif !important;
    font-size      : 8px !important;
    color          : #d4af37 !important;
    text-transform : uppercase !important;
    letter-spacing : 1.2px !important;
    font-weight    : 600 !important;
    display        : block !important;
    visibility     : visible !important;
    pointer-events : none !important;
}


/* ============================================================
   18. PRODUCT DETAILS
   ============================================================ */

.product-details {
    display        : flex !important;
    flex-direction : column !important;
    gap            : 5px !important;    /* compact */
    width          : 100% !important;
    visibility     : visible !important;
    opacity        : 1 !important;
}

.store-tag {
    display        : block !important;
    font-size      : 9px !important;
    color          : #888 !important;
    letter-spacing : 1px !important;
    text-transform : uppercase !important;
    visibility     : visible !important;
}

.modal-plant-name {
    font-size   : 13px !important;   /* compact */
    color       : #1a3c15 !important;
    margin      : 0 !important;
    line-height : 1.3 !important;
    display     : block !important;
    visibility  : visible !important;
    font-family : 'Tenor Sans', sans-serif !important;
}

.variety-selector {
    display        : flex !important;
    flex-direction : column !important;
    gap            : 3px !important;
    visibility     : visible !important;
}

.variety-selector label {
    font-size   : 10px !important;
    font-weight : 600 !important;
    color       : #2f6f3e !important;
    display     : block !important;
}

.styled-dropdown {
    width         : 100% !important;
    padding       : 5px 8px !important;   /* compact */
    border-radius : 6px !important;
    border        : 1px solid #ddd !important;
    font-size     : 11px !important;
    font-family   : 'Tenor Sans', sans-serif !important;
    display       : block !important;
    visibility    : visible !important;
    background    : #fff !important;
    color         : #333 !important;
}

.modal-price {
    font-size   : 16px !important;   /* compact */
    font-weight : 700 !important;
    color       : #0f3a1e !important;
    display     : block !important;
    visibility  : visible !important;
    margin      : 0 !important;
}


/* ============================================================
   19. QUANTITY SELECTOR
   ============================================================ */

.cart-controls {
    display     : flex !important;
    align-items : center !important;
    visibility  : visible !important;
    width       : 100% !important;
}

.qty-selector {
    display        : flex !important;
    flex-direction : row !important;
    align-items    : center !important;
    border         : 1px solid #ddd !important;
    border-radius  : 8px !important;
    overflow       : hidden !important;
    width          : fit-content !important;
    visibility     : visible !important;
    opacity        : 1 !important;
}

.qty-selector a,
.qty-selector input[type="text"] {
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    visibility      : visible !important;
    opacity         : 1 !important;
}

.qty-selector a {
    padding         : 6px 12px !important;   /* compact */
    font-size       : 16px !important;
    font-weight     : 700 !important;
    color           : #2f6f3e !important;
    text-decoration : none !important;
    background      : #f5f5f5 !important;
    line-height     : 1 !important;
    cursor          : pointer !important;
    min-width       : 30px !important;
    text-align      : center !important;
}

.qty-selector a:hover {
    background : #e8f5e9 !important;
    color      : #1e4d2b !important;
}

.qty-selector input[type="text"] {
    width        : 38px !important;   /* compact */
    height       : 32px !important;
    border       : none !important;
    border-left  : 1px solid #ddd !important;
    border-right : 1px solid #ddd !important;
    text-align   : center !important;
    font-size    : 13px !important;
    font-weight  : 700 !important;
    color        : #1a3c15 !important;
    background   : #fff !important;
    padding      : 0 !important;
}


/* ============================================================
   20. MODAL FOOTER BUTTONS
   ============================================================ */

.modal-footer-elegant {
    display         : flex !important;
    flex-direction  : row !important;
    justify-content : center !important;
    align-items     : center !important;
    gap             : 10px !important;
    flex-wrap       : nowrap !important;
    padding         : 10px 14px !important;   /* compact */
    border-top      : 1px solid #eee !important;
    background      : #fff !important;
    position        : sticky !important;
    bottom          : 0 !important;
    z-index         : 5 !important;
    border-radius   : 0 0 12px 12px !important;
    flex-shrink     : 0 !important;
}

.btn-choose-more-elegant,
.btn-go-bag-elegant {
    flex            : 1 !important;
    max-width       : 155px !important;
    min-width       : 0 !important;
    display         : inline-flex !important;
    align-items     : center !important;
    justify-content : center !important;
    visibility      : visible !important;
    opacity         : 1 !important;
    padding         : 8px 10px !important;   /* compact */
    font-family     : 'Tenor Sans', sans-serif !important;
    font-size       : 10px !important;
    font-weight     : 600 !important;
    letter-spacing  : 0.8px !important;
    text-transform  : uppercase !important;
    border-radius   : 4px !important;
    cursor          : pointer !important;
    text-decoration : none !important;
    white-space     : nowrap !important;
    text-align      : center !important;
    transition      : all 0.3s ease !important;
}

.btn-choose-more-elegant {
    background : transparent !important;
    color      : #2f6f3e !important;
    border     : 1.5px solid #2f6f3e !important;
}

.btn-choose-more-elegant:hover {
    background   : #f0f9f2 !important;
    color        : #1e4d2b !important;
    border-color : #1e4d2b !important;
}

.btn-go-bag-elegant {
    background : #2f6f3e !important;
    color      : #ffffff !important;
    border     : 1.5px solid #2f6f3e !important;
}

.btn-go-bag-elegant:hover {
    background   : #1e4d2b !important;
    border-color : #1e4d2b !important;
    color        : #fff !important;
}

@media (max-width: 768px) {
    .modal-footer-elegant {
        gap     : 8px !important;
        padding : 8px 10px !important;
    }

    .btn-choose-more-elegant,
    .btn-go-bag-elegant {
        font-size      : 9px !important;
        letter-spacing : 0.5px !important;
        padding        : 7px 8px !important;
        max-width      : 140px !important;
    }
}


/* ============================================================
   21. ZOOM OVERLAY
   ============================================================ */

.zoom-overlay {
    position        : fixed !important;
    top             : 0 !important;
    left            : 0 !important;
    width           : 100vw !important;
    height          : 100vh !important;
    background      : rgba(5, 10, 5, 0.93) !important;
    z-index         : 2147483647 !important;
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    backdrop-filter : blur(6px) !important;
}

.zoom-frame.enlarged {
    position        : relative !important;
    display         : inline-flex !important;
    align-items     : center !important;
    justify-content : center !important;
    max-width       : 92vw !important;
    max-height      : 85vh !important;
}

.large-preview-img {
    max-width       : 82vw !important;
    max-height      : 55vh !important;
    object-fit      : contain !important;
    border          : 3px solid #fff !important;
    border-radius   : 4px !important;
    display         : block !important;
    animation       : elegantZoom 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes elegantZoom {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1);   }
}

@media (max-width: 768px) {
    .large-preview-img {
        max-width  : 90vw !important;
        max-height : 46vh !important;
    }
}


/* ============================================================
   22. ZOOM CLOSE BUTTON
   ============================================================ */

.zoom-close {
    position        : absolute !important;
    top             : -14px !important;
    right           : -14px !important;
    z-index         : 2147483647 !important;
    width           : 28px !important;
    height          : 28px !important;
    border-radius   : 50% !important;
    background      : rgba(20, 20, 20, 0.88) !important;
    border          : 1.5px solid rgba(212, 160, 48, 0.6) !important;
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    font-size       : 15px !important;
    color           : #ffffff !important;
    text-decoration : none !important;
    opacity         : 1 !important;
    cursor          : pointer !important;
    line-height     : 1 !important;
    transition      : background 0.2s ease, transform 0.2s ease !important;
}

.zoom-close:hover {
    background : rgba(212, 160, 48, 0.9) !important;
    color      : #fff !important;
    transform  : rotate(90deg) !important;
}

@media (max-width: 768px) {
    .zoom-close {
        top       : -12px !important;
        right     : -12px !important;
        width     : 24px !important;
        height    : 24px !important;
        font-size : 13px !important;
    }
}


/* ============================================================
   23. HEADER & FLOATING ICONS
   ============================================================ */

.header-contact {
    display         : flex !important;
    flex-direction  : row !important;
    align-items     : center !important;
    justify-content : flex-end !important;
    gap             : 15px !important;
    visibility      : visible !important;
    opacity         : 1 !important;
}

.header-phone {
    display     : flex !important;
    align-items : center !important;
}

.phone-link,
.phone-number,
.phone-link i {
    color           : #ffffff !important;
    display         : flex !important;
    align-items     : center !important;
    text-decoration : none !important;
    animation       : none !important;
    text-shadow     : none !important;
}

.phone-number {
    font-size   : 20px !important;
    font-weight : 700 !important;
    margin-left : 8px !important;
    white-space : nowrap !important;
    display     : inline-block !important;
}

.phone-link i {
    font-size : 16px !important;
}

.social-icons {
    display     : flex !important;
    align-items : center !important;
    gap         : 12px !important;
}

.header-icon {
    width          : 28px !important;
    height         : 28px !important;
    object-fit     : contain !important;
    vertical-align : middle !important;
    position       : relative !important;
    bottom         : 3px !important;
}

@media (max-width: 768px) {
    .header-contact {
        flex-direction  : column !important;
        gap             : 5px !important;
        justify-content : center !important;
        width           : 100% !important;
        padding         : 5px 0 !important;
    }

    .header-phone {
        display         : flex !important;
        justify-content : center !important;
        width           : 100% !important;
    }

    .phone-number {
        display   : inline-block !important;
        font-size : 18px !important;
        color     : #ffffff !important;
    }

    .social-icons {
        display         : flex !important;
        justify-content : center !important;
        gap             : 12px !important;
        width           : 100% !important;
    }

    .header-icon {
        width  : 28px !important;
        height : 28px !important;
        filter : none !important;
    }
}

#finalFloatingIcons.floating-container {
    position        : fixed !important;
    z-index         : 2147483647 !important;
    display         : flex !important;
    flex-direction  : row !important;
    align-items     : center !important;
    justify-content : center !important;
    top             : 40px !important;
    right           : 50px !important;
    height          : 36px !important;
    padding         : 0 12px !important;
    box-sizing      : border-box !important;
    overflow        : visible !important;
    background      : rgba(10, 38, 29, 0.9) !important;
    border-radius   : 20px !important;
    border          : 1px solid #d4af37 !important;
    box-shadow      : 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

#finalFloatingIcons .icon-link-wrapper {
    text-decoration : none !important;
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    width           : 32px !important;
    height          : 100% !important;
    margin          : 0 4px !important;
    overflow        : visible !important;
}

#finalFloatingIcons .floating-icon {
    font-size       : 17px !important;
    color           : #FFD700 !important;
    filter          : drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.4)) !important;
    line-height     : 1 !important;
    display         : inline-flex !important;
    align-items     : center !important;
    justify-content : center !important;
}

#finalFloatingIcons .icon-wrapper {
    position        : relative !important;
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    height          : 100% !important;
    overflow        : visible !important;
}

#finalFloatingIcons .cart-badge {
    position         : absolute !important;
    top              : 2px !important;
    right            : -4px !important;
    background-color : #FFD700 !important;
    color            : #000 !important;
    font-size        : 8px !important;
    font-weight      : 800 !important;
    min-width        : 14px !important;
    height           : 14px !important;
    border-radius    : 50% !important;
    display          : flex !important;
    align-items      : center !important;
    justify-content  : center !important;
    border           : 1px solid #fff !important;
}

@media (max-width: 768px) {
    #finalFloatingIcons.floating-container {
        right      : 10px !important;
        height     : auto !important;
        min-height : 34px !important;
        padding    : 6px 10px !important;
    }

    #finalFloatingIcons.scrolled-mobile,
    #finalFloatingIcons.scrolled-icons {
        top        : 43px !important;
        background : rgba(10, 38, 29, 0.95) !important;
        box-shadow : 0 4px 15px rgba(0, 0, 0, 0.3) !important;
        z-index    : 2147483647 !important;
        transition : all 0.3s ease-in-out !important;
    }

    .nav-scrolled .mobile-nav-search {
        padding-top    : 22px !important;
        padding-bottom : 5px !important;
    }
}


/* ============================================================
   24. MODAL SUPPORTING STYLES
   ============================================================ */

.btn-checkout {
    display         : block !important;
    background      : #2f6f3e !important;
    color           : #fff !important;
    text-align      : center !important;
    padding         : 10px !important;
    border-radius   : 8px !important;
    text-decoration : none !important;
    font-weight     : bold !important;
    font-size       : 12px !important;
}

.btn-add-now {
    flex            : 1 !important;
    display         : inline-flex !important;
    align-items     : center !important;
    justify-content : center !important;
    gap             : 8px !important;
    padding         : 10px 16px !important;
    background      : linear-gradient(135deg, #ff9f00 0%, #ff6f00 100%) !important;
    color           : #ffffff !important;
    font-family     : 'Tenor Sans', sans-serif !important;
    font-size       : 11px !important;
    font-weight     : 700 !important;
    letter-spacing  : 1px !important;
    text-transform  : uppercase !important;
    text-decoration : none !important;
    border          : none !important;
    border-radius   : 22px !important;
    cursor          : pointer !important;
    transition      : all 0.3s ease !important;
}

.btn-add-now:hover {
    background : linear-gradient(135deg, #e65100 0%, #bf360c 100%) !important;
    transform  : translateY(-2px) !important;
}

.btn-view-cart {
    flex            : 1 !important;
    display         : inline-flex !important;
    align-items     : center !important;
    justify-content : center !important;
    gap             : 6px !important;
    padding         : 10px 16px !important;
    background      : #ffffff !important;
    color           : #2f6f3e !important;
    border          : 1.5px solid #2f6f3e !important;
    border-radius   : 22px !important;
    font-family     : 'Tenor Sans', sans-serif !important;
    font-size       : 11px !important;
    font-weight     : 700 !important;
    text-transform  : uppercase !important;
    text-decoration : none !important;
    transition      : all 0.3s ease !important;
}

.btn-view-cart:hover {
    background : #2f6f3e !important;
    color      : #ffffff !important;
}

.eye-btn-small {
    font-family     : 'Tenor Sans', sans-serif !important;
    font-size       : 10px !important;
    color           : #2f6f3e !important;
    text-decoration : none !important;
    text-transform  : uppercase !important;
    letter-spacing  : 1px !important;
    background      : #f4f9f5 !important;
    padding         : 3px 10px !important;
    border-radius   : 15px !important;
    border          : 1px solid rgba(47, 111, 62, 0.1) !important;
    transition      : all 0.3s ease !important;
    display         : inline-flex !important;
    align-items     : center !important;
    gap             : 4px !important;
}

.eye-btn-small:hover {
    background   : #2f6f3e !important;
    color        : #ffffff !important;
    border-color : #2f6f3e !important;
}
.header { background: linear-gradient(135deg, #1b7a3e, #2ea855, #5dc87a) !important; }

/* 2. White body */
body { background-color: #ffffff !important; }

/* 3. Fresher cards */
.luxury-card, .museum-card { background: #f8fef9 !important; border-top: 3px solid #2ea855 !important; }

/* 4. Brighter announcement bar */
.luxury-announcement-bar { background: #1b7a3e !important; }
.slogan-group span { color: #ffffff !important; }

/* 5. Warmer deals section */
.deals-section { background: #fffbea !important; padding: 30px 20px !important; border-radius: 16px; }
.deal-discount { background: #e53935 !important; }

/* 6. Green buy button */
.luxury-buy-btn { background: #2ea855 !important; color: #fff !important; }


/* ============================================================
   25. OUT OF STOCK — BADGE, CARD DIM, BUTTON PLACEHOLDER
   ============================================================ */

/* Red badge shown on the image when stock = 0 */
.oos-image-badge {
    position        : absolute !important;
    top             : 50% !important;
    left            : 50% !important;
    transform       : translate(-50%, -50%) !important;
    z-index         : 12 !important;
    background      : rgba(176, 0, 32, 0.88) !important;
    color           : #ffffff !important;
    font-family     : 'Tenor Sans', sans-serif !important;
    font-size       : 10px !important;
    font-weight     : 700 !important;
    letter-spacing  : 2px !important;
    text-transform  : uppercase !important;
    padding         : 8px 18px !important;
    border-radius   : 24px !important;
    white-space     : nowrap !important;
    pointer-events  : none !important;
    box-shadow      : 0 3px 12px rgba(0, 0, 0, 0.35) !important;
    border          : 1.5px solid rgba(255, 255, 255, 0.3) !important;
}

/* Dim + desaturate the card image when out of stock */
.oos-card .card-visual-wrapper {
    position : relative !important;
}

.oos-card .museum-img-primary,
.oos-card .museum-img-secondary {
    filter  : grayscale(55%) brightness(0.82) !important;
    opacity : 0.75 !important;
}

/* Mute hover lift on OOS cards */
.oos-card:hover {
    transform  : none !important;
    box-shadow : 0 4px 18px rgba(27, 122, 62, 0.08) !important;
}

/* Disabled eye icon on OOS card */
.oos-icon-disabled {
    opacity        : 0.35 !important;
    cursor         : not-allowed !important;
    pointer-events : none !important;
}

/* Greyed-out placeholder where the ADD TO CART button was */
.oos-btn-placeholder {
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    gap             : 6px !important;
    width           : 100% !important;
    padding         : 9px 0 !important;
    background      : #f3f3f3 !important;
    color           : #aaaaaa !important;
    border          : 1px dashed #cccccc !important;
    border-radius   : 22px !important;
    font-family     : 'Tenor Sans', sans-serif !important;
    font-size       : 10px !important;
    font-weight     : 700 !important;
    letter-spacing  : 1.5px !important;
    text-transform  : uppercase !important;
    cursor          : not-allowed !important;
    margin-top      : 6px !important;
    pointer-events  : none !important;
}

@media (max-width: 768px) {
    .oos-image-badge {
        font-size  : 9px !important;
        padding    : 6px 13px !important;
    }

    .oos-btn-placeholder {
        font-size      : 9px !important;
        letter-spacing : 1px !important;
        padding        : 7px 0 !important;
    }
}