html, body {
            font-family: Nunito, sans-serif !important;
        }
        
        
        h1 {
            font-size: 22px !important;
            font-weight: 700 !important;
            color: #792384 !important;
            text-transform: uppercase !important;
            /*margin: 6px 0 !important;*/
        }
        
        h2 {
            font-size: 18px !important;
            font-weight: 700 !important;
            color: #792384 !important;
            text-transform: capitalize !important;
            /*margin: 6px !important;*/
        }
        
        h3 {
            font-size: 16px !important;
            font-weight: 700 !important;
            color: #333 !important;
            /*margin: 6px !important;*/
        }
        
        p {
            font-size: 14px !important;
            font-weight: 400 !important;
            color: #333 !important;
            text-align: justify !important;
            line-height: 1.5 !important;
            margin: 6px 0 !important;
        }

        /* ========== MOBILE ONLY: full site type scale (desktop unchanged) ========== */
        @media (max-width: 991.98px) {
            html {
                font-size: 14px !important;
            }

            body {
                font-size: 13px !important;
                line-height: 1.45 !important;
            }

            h1 {
                font-size: 18px !important;
                line-height: 1.25 !important;
            }

            h2 {
                font-size: 15px !important;
                line-height: 1.3 !important;
            }

            h3 {
                font-size: 14px !important;
                line-height: 1.3 !important;
            }

            h4 {
                font-size: 13.5px !important;
                line-height: 1.3 !important;
            }

            h5 {
                font-size: 13px !important;
                line-height: 1.3 !important;
            }

            h6 {
                font-size: 12.5px !important;
                line-height: 1.3 !important;
            }

            /* Body text elements */
            p,
            li,
            td,
            th,
            dt,
            dd,
            label,
            legend,
            blockquote,
            figcaption,
            address {
                font-size: 12.5px !important;
                line-height: 1.45 !important;
            }

            a,
            span,
            strong,
            b,
            em,
            i:not([class*="bi-"]):not([class*="fa-"]),
            u,
            small,
            .small {
                font-size: 12.5px !important;
                line-height: 1.4 !important;
            }

            small,
            .small {
                font-size: 11px !important;
            }

            /* Lists */
            ul,
            ol,
            dl {
                font-size: 12.5px !important;
            }

            ul li,
            ol li,
            menu li {
                font-size: 12.5px !important;
                line-height: 1.4 !important;
            }

            /* Tables */
            table,
            thead,
            tbody,
            tfoot,
            tr,
            td,
            th {
                font-size: 12.5px !important;
            }

            table th {
                font-size: 12.5px !important;
                font-weight: 600 !important;
            }

            /* Forms */
            input,
            select,
            textarea,
            option,
            .form-control,
            .form-select,
            .form-label,
            .form-check-label,
            .form-text {
                font-size: 13px !important;
            }

            input::placeholder,
            textarea::placeholder {
                font-size: 12.5px !important;
            }

            /* Nav / UI */
            .nav-link,
            .dropdown-item,
            .navbar-nav .nav-link,
            .breadcrumb,
            .breadcrumb-item,
            .breadcrumb a,
            .breadcrumb span,
            .pagination,
            .page-link,
            .badge,
            .alert,
            .card,
            .card-title,
            .card-text,
            .card-body,
            .list-group-item,
            .modal-title,
            .modal-body,
            .offcanvas-title,
            .offcanvas-body,
            .accordion-button,
            .accordion-body,
            .tab-content,
            .simple-tab-box,
            .simple-tab-box p,
            .simple-tab-box li,
            .simple-tab-box span,
            .simple-tab-box a {
                font-size: 12.5px !important;
                line-height: 1.4 !important;
            }

            .nav-link,
            .dropdown-item {
                font-size: 13px !important;
            }

            .btn,
            button,
            .btn span,
            .btn a {
                font-size: 13px !important;
            }

            /* Footer */
            footer,
            footer a,
            footer li,
            footer p,
            footer span,
            footer h5,
            footer h6 {
                font-size: 12.5px !important;
            }

            footer h5 {
                font-size: 13px !important;
            }

            /* Product / shop common */
            .product-title,
            .product-subtitle,
            .product-category,
            .product-label,
            .product-body,
            .product-content,
            .price-normal,
            .price-deal,
            .shop-price-gst,
            .lowest-price-text,
            .text-block h4,
            .card-overlay,
            .card-overlay h4,
            .drawer-content,
            .drawer-content h6,
            .drawer-content small,
            .drawer-price,
            .drawer-line-total,
            .summary-row,
            .summary-row span,
            .summary-row strong,
            .order-summary-box,
            .cart-product-content,
            .cart-product-content h4,
            .cart-product-content p {
                font-size: 12.5px !important;
                line-height: 1.4 !important;
            }

            .price-deal,
            .price-normal {
                font-size: 16px !important;
            }

            .shop-price-gst,
            .price-ex-gst,
            .lowest-price-text {
                font-size: 11px !important;
            }

        }

        @media (max-width: 575.98px) {
            html {
                font-size: 13px !important;
            }

            body {
                font-size: 12.5px !important;
            }

            h1 {
                font-size: 16px !important;
            }

            h2 {
                font-size: 14px !important;
            }

            h3 {
                font-size: 13px !important;
            }

            h4 {
                font-size: 12.5px !important;
            }

            h5 {
                font-size: 12px !important;
            }

            h6 {
                font-size: 11.5px !important;
            }

            p,
            li,
            td,
            th,
            a,
            span,
            label,
            ul,
            ol,
            table,
            .nav-link,
            .dropdown-item,
            .breadcrumb,
            .breadcrumb-item,
            .card-text,
            .list-group-item,
            .accordion-body,
            .simple-tab-box,
            .simple-tab-box p,
            footer,
            footer a,
            footer li {
                font-size: 12px !important;
                line-height: 1.4 !important;
            }

            .btn,
            button,
            input,
            select,
            textarea,
            .form-control,
            .form-select {
                font-size: 12px !important;
            }

            small,
            .small,
            .shop-price-gst,
            .price-ex-gst,
            .lowest-price-text {
                font-size: 10.5px !important;
            }

            .price-deal,
            .price-normal {
                font-size: 15px !important;
            }

            .accordion-button {
                font-size: 12.5px !important;
            }
        }
        
        
        img
        {
            margin-bottom: 10px !important;
        }
        
        /* Table */
        table {
            width: 100% !important;
            font-size: 14px !important;
            border-collapse: collapse !important;
        }
        
        /* Table Header */
        table th {
            font-size: 16px !important;
            font-weight: 700 !important;
            color: #000000 !important;
            background-color: #c9bfd3 !important;
            padding: 12px !important;
            text-align: center !important;
        }
        
        /* Table Data */
        table td {
            font-size: 14px !important;
            color: #000 !important;
            padding: 8px !important;
        }



        body {
            margin: 0;
            font-family: Nunito, sans-serif;
        }
        /* NAVBAR */
        #mainNavbar {
            height: 70px;
            background: #fff;
            z-index: 999;
            transition: all 0.3s ease;
        }

        #mainNavbar.scrolled {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        /* LOGO (70/30 effect) */
        .logo-img {
            height: 95px;
            position: relative;
            top: 16px;
            z-index: 10;
        }

        /* CONTENT OFFSET */
        /* .main-content {
            margin-top: 70px;
        } */

        /* CARD */
        .card-custom {
            /* border-radius: 12px; */
            overflow: hidden;
            position: relative;
        }

        .card-custom img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            margin: 0 !important; /* override global img margin (gray gap under cards) */
        }

        /* .card-overlay {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 15px;
            color: #fff;
        } */
        
        .yellow-box {
            background: #ffdb00;
            min-height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 22px;
            color: #000;
            position: relative;
            overflow: hidden;
        }
        
        /* Center content */
        .content-center {
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }
        
        /* Inner white box (NOT full width) */
        .yellow-footer-box {
            position: absolute;
            bottom: 15px;
            left: 15px; 
            right: 15px;
            
            background: #fff;
            color: #000;
            padding: 12px 16px;
            border-radius: 0px;
        
            justify-content: space-between;
            align-items: center;
        
            font-size: 14px;
            font-weight: 500;
        
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        
       

        /* CTA BOX */
        .yellow-box {
            background: #ffdb00;
            /* border-radius: 12px; */
            min-height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 22px;
            color: #000;
            transition: all 0.3s ease;
        }

        .yellow-box i {
            font-size: 18px;
            transition: transform 0.3s ease;
        }

        .yellow-box:hover i {
            transform: translateX(5px);
        }

        /* SECTIONS */
        .section-box {
            border-radius: 12px;
            padding: 30px;
        }

        .bg-pink {
            background: #f7b6d2;
        }

        .bg-yellow {
            background: #ffdb00;
        }

        /* FOOTER */
        footer {
            background: #3c3c3c !important;
            color: #ffffff;
            padding: 40px 0;
        }

        /* MOBILE */
        @media (max-width: 768px) {
            .logo-img {
                height: 70px;
                top: 8px;
            }

            .yellow-box {
                min-height: 120px;
                font-size: 18px;
            }
        }

        /* MOBILE MENU FIX */
        @media (max-width: 991px) {

            .navbar-collapse {
                background: #fff;
                padding: 15px;
                border-radius: 10px;
                margin-top: 10px;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            }

            .navbar-nav .nav-link {
                padding: 10px 0;
                font-weight: 500;
            }

            /* Button full width on mobile */
            .navbar-collapse .btn {
                width: 100%;
                margin-top: 10px;
            }
        }

        /* HERO FULL HEIGHT */
        /* .hero-section {
            min-height: calc(100vh - 70px);
        } */

        /* Let row stretch children */
        /* .hero-section {
            align-items: stretch;
        } */

        /* Hero row only: stretch sides to match; grid cards use fixed heights */
        .hero-section .card-custom,
        .hero-section .yellow-box,
        .yellow-box {
            height: 100%;
        }

        /* Mobile fix */
        /* @media (max-width: 992px) {
            .hero-section {
                min-height: auto;
            }
        } */


        /* ===== PREMIUM HOVER (CLEAN) ===== */

        /* Layout */
        /* .text-row {
            display: flex;
            align-items: flex-start;
            gap: 14px;
        } */

        /* Text block */
        .text-block small {
            display: block;
            font-size: 15px;
            line-height: 1.3;
            margin: 0;
            opacity: 0.9;
        }

        /* .text-block h4 {
            margin: 4px 0 0;
            font-size: 26px;
            font-weight: 700;
            line-height: 1.3;
        } */

        /* Arrow */
        /* .arrow {
            font-size: 24px;
            opacity: 0;
            transform: translateX(-14px);
            transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
            margin-top: 4px;
        } */

        /* Smooth movement container */
        /* .overlay-content {
            transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        } */

        /* Hover interaction */
        /* .hover-card:hover .overlay-content {
            transform: translateX(18px);
        } */

        /* Arrow reveal */
        /* .hover-card:hover .arrow {
            opacity: 1;
            transform: translateX(0);
        } */

        .hover-card {
            overflow: hidden !important;   /* 👈 THIS is the key */
        }

        .hover-card img {
            transition: transform 0.6s ease;
        }

        .hover-card:hover img {
            transform: scale(1.1); /* zoom effect */
        }

        /* Footer links row */
        .footer-links {
            display: flex;
            justify-content: center;
            /* ✅ CENTER items */
            align-items: center;
            gap: 20px;
            list-style: none;
            padding: 0;
            margin: 0;
            flex-wrap: wrap;
        }

        /* Each item */
        .footer-links li a {
            position: relative;
            padding-left: 16px;
            color: #ccc;
            text-decoration: none;
            display: inline-block;
            font-size: 14px !important;
            font-weight: 400 !important;
        }
        
        footer ul li a 
        {
            font-size: 14px !important;
            font-weight: 400 !important;
        }

        /* Dot perfectly centered */
        .footer-links li a::before {
            content: "•";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            /* ✅ vertical center fix */
            color: #999;
            /* match text visually */
            line-height: 1;
        }

        /* Hover */
        .footer-links li:hover {
            color: #fff;
        }

        .fs-22 {
            font-size: 22px;
        }

        @media (max-width: 992px) {
            .fs-22 {
                font-size: 18px;
            }
        }

        #shopBtn {
            transition: all 0.3s ease;
        }

        #shopBtn.show {
            opacity: 1;
            transform: translateY(0);
        }

        #shopBtn.d-none {
            opacity: 0;
            transform: translateY(-10px);
        }

        /* CTA initial hidden state */
        .shop-btn {
            opacity: 0;
            transform: translateY(-12px) scale(0.98);
            pointer-events: none;
            transition:
                opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        }

        /* Visible state */
        .shop-btn.show {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }



        /* //menu hover start here */
       /* Base dropdown */
        .dropdown-menu {
            opacity: 0;
            visibility: hidden;
            transform: translateY(15px) scale(0.98);
            transition: 
                opacity 0.25s ease,
                transform 0.25s ease,
                visibility 0.25s;
            
            display: block; /* IMPORTANT */
            border: none;
            border-radius: 6px;
            padding: 10px 0;
            
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        }

        /* Hover state */
        .navbar .dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        /* Add slight delay for better UX */
        .navbar .dropdown {
            position: relative;
        }

        .navbar .dropdown-menu {
            top: 100%;
            left: 0;
        }

        .dropdown-item {
            padding: 10px 20px;
            transition: all 0.2s ease;
            font-weight: 500;
        }

        .dropdown-item:hover {
            background: #f8f9fa;
            padding-left: 25px;
        }

        /* Hover open only on desktop — pointer-events:none blocks mobile submenu taps */
        @media (min-width: 992px) {
            .navbar .dropdown-menu {
                pointer-events: none;
            }

            .navbar .dropdown:hover .dropdown-menu {
                pointer-events: auto;
            }
        }

        @media (max-width: 991.98px) {
            .navbar .dropdown-menu,
            .navbar .dropdown-menu.show,
            .navbar .dropdown-menu .dropdown-item {
                pointer-events: auto !important;
            }
        }

        .dropdown-menu {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.95);
        }

        .navbar .dropdown {
            position: relative;
        }

        @media (min-width: 992px) {
            .navbar .dropdown::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                height: 15px; /* invisible buffer */
            }
        }

        /* Remove default link styling */
        .card-link {
            display: block;
            text-decoration: none;
            color: inherit;
        }

        /* Make sure hover works */
        .card-link:hover {
            text-decoration: none;
        }

        /* Optional: cursor pointer */
        .card-custom {
            cursor: pointer;
        }


        #mainNavbar ul li a
        {
            font-size: 14px !important;
            font-weight: 400 !important;
        }

        ul, ol
        {
            padding-left: 1rem !important;
        }

        ul li 
        {
            font-size: 14px !important;
            font-weight: 400 !important;
        }
        
        
        
        
        #mainNavbar {
            top: 32px;
        }

        /* BELOW 992px */
        @media(max-width:991px){
            #mainNavbar{
                top:78px;
            }
        }
        
        


        .breadcrumb-section {
            background: #f5f5f5; /* light gray full width */
            padding: 140px 0 20px 0;
        }

        .breadcrumb-nav {
            font-size: 14px;
            color: #777;
            margin-bottom: 10px;
        }

        .breadcrumb-nav a {
            color: #555;
            text-decoration: none;
            transition: 0.3s;
        }

        .breadcrumb-nav a:hover {
            color: #000;
        }

        .breadcrumb-nav span {
            margin: 0 6px;
        }

        .breadcrumb-nav .active {
            color: #999;
        }

        .breadcrumb-title {
            font-size: 28px;
            font-weight: 600;
            color: #222;
            margin: 0;
        }


        /* cusotm accordion styling start */
        .accordion-button
        {
            font-size: 14px !important;
            font-weight: 400 !important;
            color: #333 !important;
            text-align: justify !important;
            line-height: 1.5 !important;
        }

        .accordion-item
        {
            border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important;
            border-radius: 0 !important;
        }

         /* Remove default borders */
        .custom-accordion .accordion-item {
            /* border: none; */
            margin-bottom: 16px;
            /* border-radius: 10px; */
            overflow: hidden;
        }

        /* Button default */
        .custom-accordion .accordion-button {
            background: #fff;
            box-shadow: none !important;
            border: none;
            font-weight: 500;
            padding: 15px 20px;
        }

        /* Remove blue border on click */
        .custom-accordion .accordion-button:focus {
            box-shadow: none;
        }

        /* Active state (your brand color) */
        .custom-accordion .accordion-button:not(.collapsed) {
            background: #792384 ; /* 👈 your primary color */
            color: #ffffff !important;
        }

        /* Body */
        .custom-accordion .accordion-body {
            background: #fff;
            padding: 15px 20px;
            font-size: 14px !important;
            font-weight: 400 !important;
            color: #333 !important;
            text-align: justify !important;
            line-height: 1.5 !important;
        }

        /* Arrow icon color fix */
        .custom-accordion .accordion-button::after {
            filter: brightness(0);
        }

        /* Mobile: force smaller FAQ accordion + tables (must be AFTER base !important rules) */
        @media (max-width: 991.98px) {
            table,
            table th,
            table td,
            table thead th,
            table tbody td,
            table tfoot td,
            .table,
            .table th,
            .table td {
                font-size: 12px !important;
                line-height: 1.35 !important;
                padding: 8px 6px !important;
            }

            table th,
            .table th {
                font-size: 12.5px !important;
            }

            .accordion-button,
            .custom-accordion .accordion-button,
            .custom-faq-accordion .accordion-button,
            .product-mobile-accordion .accordion-button,
            .checkout-accordion .accordion-button {
                font-size: 13px !important;
                line-height: 1.35 !important;
                padding: 12px 14px !important;
            }

            .accordion-body,
            .custom-accordion .accordion-body,
            .custom-faq-accordion .accordion-body,
            .product-mobile-accordion .accordion-body,
            .checkout-accordion .accordion-body,
            .accordion-body p,
            .accordion-body li,
            .accordion-body span,
            .accordion-body a,
            .accordion-body td,
            .accordion-body th,
            .custom-accordion .accordion-body p,
            .custom-accordion .accordion-body li,
            .custom-faq-accordion .accordion-body p {
                font-size: 12.5px !important;
                line-height: 1.45 !important;
            }
        }

        @media (max-width: 575.98px) {
            table,
            table th,
            table td,
            .table th,
            .table td {
                font-size: 11px !important;
                padding: 6px 4px !important;
            }

            table th,
            .table th {
                font-size: 11.5px !important;
            }

            .accordion-button,
            .custom-accordion .accordion-button,
            .custom-faq-accordion .accordion-button,
            .product-mobile-accordion .accordion-button {
                font-size: 12.5px !important;
                padding: 11px 12px !important;
            }

            .accordion-body,
            .custom-accordion .accordion-body,
            .custom-faq-accordion .accordion-body,
            .accordion-body p,
            .accordion-body li,
            .custom-accordion .accordion-body p {
                font-size: 12px !important;
                line-height: 1.4 !important;
            }
        }

    </style>

   {{-- cart drawer css --}}
  <style>
/* ================================
   Cart Overlay
================================ */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 20, 0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
    z-index: 99998;
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ================================
   Cart Drawer
================================ */
.cart-drawer {
    position: fixed;
    top: 0;
    right: -480px;
    width: 460px;
    max-width: 100%;
    height: 100vh;
    background: #ffffff;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
    transition: right 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 99999;
    display: flex;
    flex-direction: column;
}

.cart-drawer.active {
    right: 0;
}

/* ================================
   Header (Fixed)
================================ */
.cart-drawer-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 24px;
    border-bottom: 1px solid #f0ecf4;
    background: #fff;
    z-index: 2;
}

.cart-drawer-header h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}

.cart-drawer-header small {
    color: #888;
    font-size: 13px;
    margin-top: 2px;
    display: block;
}

.cart-drawer-header button {
    width: 40px;
    height: 40px;
    border: none;
    background: #f7f4f9;
    border-radius: 50%;
    font-size: 18px;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.cart-drawer-header button:hover {
    background: #792384;
    color: #fff;
}

/* ================================
   Body (Scrollable)
================================ */
.cart-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
}

/* Elegant Scrollbar */
.cart-drawer-body::-webkit-scrollbar {
    width: 5px;
}

.cart-drawer-body::-webkit-scrollbar-thumb {
    background: #d9cfe3;
    border-radius: 20px;
}

.cart-drawer-body::-webkit-scrollbar-track {
    background: transparent;
}

/* ================================
   Footer (Fixed)
================================ */
.cart-drawer-footer {
    flex-shrink: 0;
    padding: 22px 24px 28px;
    background: #fff;
    border-top: 1px solid #f0ecf4;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
}

/* ================================
   Cart Item
================================ */
.drawer-item {
    display: flex;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid #f3eff7;
}

.drawer-item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 8px;
}

.drawer-image {
    width: 92px;
    height: 92px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f5fa;
}

.drawer-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* no stretch / no compress */
    object-position: center;
    display: block;
}

.drawer-image .drawer-product-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    z-index: 2;
    pointer-events: auto !important;
}

.drawer-content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.drawer-content h6 {
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.4;
    color: #1a1a1a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Name link — same look as h6, fully clickable */
.drawer-content .drawer-product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.4;
    color: #1a1a1a !important;
    text-decoration: none !important;
    cursor: pointer;
    position: relative;
    z-index: 3;
    pointer-events: auto !important;
}

.drawer-content .drawer-product-name:hover {
    color: #792384 !important;
}

.drawer-content small {
    color: #888;
    font-size: 12.5px;
}

.drawer-price {
    margin-top: 8px;
    font-weight: 700;
    font-size: 15px;
    color: #792384;
}

/* Cart prices only — not shop/product listing; always under the amount */
.price-ex-gst {
    display: block !important;
    margin-top: 2px;
    margin-left: 0 !important;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    color: #888;
}

.drawer-price,
.drawer-line-total {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Quantity */
.drawer-qty {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 12px;
    border: 1.5px solid #e8e2ef;
    border-radius: 10px;
    width: fit-content;
    overflow: hidden;
    background: #fff;
}

.drawer-qty button {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer-qty button:hover {
    background: #f5f0f8;
    color: #792384;
}

.drawer-qty input {
    width: 38px;
    height: 34px;
    border: none;
    border-left: 1px solid #efeaf4;
    border-right: 1px solid #efeaf4;
    background: #faf8fc;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    padding: 0;
}

/* Line Total */
.drawer-line-total {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

/* Remove */
.drawer-actions {
    margin-top: 8px;
}

.drawer-remove {
    color: #999;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
}

.drawer-remove:hover {
    color: #c0392b;
    text-decoration: none;
}

/* ================================
   Empty State
================================ */
#drawerEmpty {
    padding: 60px 20px;
}

#drawerEmpty i {
    font-size: 52px;
    color: #d5cce0;
}

#drawerEmpty h5 {
    font-size: 17px;
    font-weight: 600;
    color: #666;
    margin-top: 16px;
}

/* ================================
   Summary
================================ */
.drawer-summary .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14.5px;
    color: #444;
}

.drawer-summary .summary-row strong {
    font-weight: 600;
    color: #1a1a1a;
}

.drawer-summary .summary-row.text-success strong {
    color: #27ae60;
}

.drawer-summary .summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 0 22px;
    padding-top: 16px;
    border-top: 1.5px dashed #e8e2ef;
}

.drawer-summary .summary-total span {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.drawer-summary .summary-total h4 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #792384;
}

/* Buttons */
.drawer-summary .btn {
    height: 48px;
    border-radius: 11px;
    font-weight: 600;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.drawer-summary .btn-outline-secondary {
    border: 1.5px solid #e0d8ea;
    color: #555;
    background: #fff;
}

.drawer-summary .btn-outline-secondary:hover {
    background: #faf7fc;
    border-color: #cbb8db;
    color: #792384;
}

.drawer-summary .btn-light {
    border: 1.5px solid #e0d8ea !important;
    background: #fff !important;
    color: #444;
}

.drawer-summary .btn-light:hover {
    background: #faf7fc !important;
    border-color: #cbb8db !important;
    color: #792384;
}

.drawer-summary .btn-dark {
    background: #792384 !important;
    border-color: #792384 !important;
    color: #fff !important;
}

.drawer-summary .btn-dark:hover {
    background: #651f72 !important;
    border-color: #651f72 !important;
    box-shadow: 0 6px 18px rgba(121, 35, 132, 0.28);
    transform: translateY(-1px);
}

/* Remaining amount text */
#drawerRemainingAmount {
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: -4px;
}

/* ================================
   Mobile — keep action buttons always visible
================================ */
@media (max-width: 768px) {
    .cart-drawer {
        width: 100%;
        right: -100%;
        height: 100dvh;
        max-height: 100dvh;
    }

    .cart-drawer-content {
        height: 100%;
        max-height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .cart-drawer-header {
        flex-shrink: 0;
        padding: 14px 16px;
    }

    .cart-drawer-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 16px;
    }

    .cart-drawer-footer {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: 52dvh;
        padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
        overflow: hidden;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
    }

    .drawer-summary {
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: 100%;
        margin: 0;
        overflow: hidden;
    }

    /* Totals scroll if needed; action buttons always stay visible */
    .drawer-summary-totals {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 22dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .drawer-summary .summary-row {
        margin-bottom: 6px !important;
        font-size: 13px;
    }

    .drawer-summary .summary-total {
        margin: 6px 0 0 !important;
        padding-top: 8px !important;
    }

    .drawer-summary .summary-total h4 {
        font-size: 18px;
    }

    .drawer-summary-actions {
        flex: 0 0 auto;
        background: #fff;
        padding-top: 8px;
        z-index: 3;
        border-top: 1px solid #f0ecf4;
    }

    .drawer-summary-actions .btn {
        height: 42px;
        font-size: 13.5px;
        margin-bottom: 6px !important;
    }

    .drawer-summary-actions .btn:last-child {
        margin-bottom: 0 !important;
    }

    .drawer-image {
        width: 72px;
        height: 72px;
    }

    .drawer-item {
        padding-bottom: 14px;
        margin-bottom: 14px;
        gap: 12px;
    }
}

/* Utility */
body.drawer-open {
    overflow: hidden;
}

.cart-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.drawer-summary-actions {
    margin-top: 4px;
}

/* Final mobile override for FAQ/tables (after all other CSS in this file) */
@media (max-width: 991.98px) {
    table,
    table th,
    table td,
    .table th,
    .table td {
        font-size: 12px !important;
    }

    .accordion-button,
    .custom-accordion .accordion-button,
    .custom-faq-accordion .accordion-button {
        font-size: 13px !important;
    }

    .accordion-body,
    .custom-accordion .accordion-body,
    .custom-faq-accordion .accordion-body,
    .accordion-body p,
    .custom-accordion .accordion-body p {
        font-size: 12.5px !important;
    }
}

@media (max-width: 575.98px) {
    table,
    table th,
    table td {
        font-size: 11px !important;
    }

    .accordion-button,
    .custom-accordion .accordion-button,
    .custom-faq-accordion .accordion-button {
        font-size: 12.5px !important;
    }

    .accordion-body,
    .custom-accordion .accordion-body,
    .accordion-body p {
        font-size: 12px !important;
    }
}

@media (max-width: 991.98px) {
    table, table th, table td, .table th, .table td {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }
    table th, .table th { font-size: 12.5px !important; }
    .accordion-button,
    .custom-accordion .accordion-button,
    .custom-faq-accordion .accordion-button,
    .product-mobile-accordion .accordion-button {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }
    .accordion-body,
    .custom-accordion .accordion-body,
    .custom-faq-accordion .accordion-body,
    .accordion-body p,
    .accordion-body li,
    .custom-accordion .accordion-body p {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
    }
}
@media (max-width: 575.98px) {
    table, table th, table td { font-size: 11px !important; }
    .accordion-button,
    .custom-accordion .accordion-button,
    .custom-faq-accordion .accordion-button { font-size: 12.5px !important; }
    .accordion-body,
    .custom-accordion .accordion-body,
    .accordion-body p { font-size: 12px !important; }
}

.whatsapp-float {
    position: fixed;
    width: 54px;
    height: 54px;
    bottom: 19px;
    right: 100px;
    z-index: 99999;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.whatsapp-float img {
    width: 54px !important;
    height: 54px !important;
    display: block;
}
@media (max-width: 767px) {
    .whatsapp-float {
        width: 54px;
        height: 54px;
        right: 100px;
        bottom: 17px;
    }
    .whatsapp-float img {
        width: 54px !important;
        height: 54px !important;
    }
}

.extra-float-btn {
    position: fixed;
    width: 54px;
    height: 54px;
    bottom: 100px;
    right: 32px;
    z-index: 99999;
    background: #ffffff;
    color: #792384;
    border: 2px solid #792384;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(121, 35, 132, 0.18);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: breath 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.extra-float-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid rgba(121, 35, 132, 0.5);
    animation: smooth-ripple 2.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.extra-float-btn:hover {
    background: #792384;
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 8px 25px rgba(121, 35, 132, 0.3);
    animation: none;
}
.extra-float-btn:hover::before {
    animation: none;
    opacity: 0;
}
@keyframes breath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.055); }
}
@keyframes smooth-ripple {
    0% { transform: scale(1); opacity: 0.55; }
    100% { transform: scale(1.65); opacity: 0; }
}
@media (max-width: 767px) {
    .extra-float-btn {
        right: 100px;
        bottom: 83px;
    }
}

.custom-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.custom-pagination ul {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.custom-pagination li a,
.custom-pagination li span {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #222;
    font-weight: 600;
    transition: all .3s ease;
}
.custom-pagination li a:hover {
    background: #792384;
    border-color: #792384;
    color: #fff;
}
.custom-pagination li.active a {
    background: #792384;
    border-color: #792384;
    color: #fff;
}
.custom-pagination li.disabled span {
    background: #f5f5f5;
    color: #aaa;
    border-color: #ddd;
    cursor: not-allowed;
}