/* ============================================================
   HOME PAGE STYLES
   Page: resources/views/main/home/index.blade.php
   Depends on global variables defined in style.css:
   - Colors: --ink-*, --primary-*, --gold, --danger, --success
   - Spacing: --spacing-*
   - Typography: --font-size-*, --font-weight-*
   - Transitions: --t-*, --ease-*
   - Shadows: --shadow-*
   - Radius: --radius-*
   - Gradients: --grad-*
   ============================================================ */

   /* ============================================================
      HERO SECTION
      ============================================================ */
   
   .hero-main-wrapper {
       height: 78vh;
       min-height: 540px;
       background: var(--ink-900);
       position: relative;
       overflow: hidden;
   }
   
   .hero-image-overlay {
       position: absolute;
       inset: 0;
       background-position: center;
       background-size: cover;
       background-repeat: no-repeat;
       background-color: var(--primary-blue-darker);
       transform: scale(1.02);
       transition: transform 8s ease-out;
   }
   
   .hero-image-overlay::after {
       content: "";
       position: absolute;
       inset: 0;
       background-image: linear-gradient(
               to top,
               var(--ink-900) 0%,
               rgba(10, 37, 64, 0.65) 45%,
               transparent 100%
           ),
           linear-gradient(to right, rgba(10, 37, 64, 0.4) 0%, transparent 60%);
       pointer-events: none;
   }
   
   .hero-main-wrapper::before {
       content: "";
       position: absolute;
       inset: 0;
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
       background-size: 180px;
       opacity: 0.4;
       pointer-events: none;
       z-index: 3;
   }
   
   #slider-title {
       color: var(--white);
       font-family: var(--font-display);
   }
   
   .hero-content-z {
       z-index: 5;
   }
   
   .hero-pb-row {
       padding-bottom: var(--spacing-xl) !important;
   }
   
   .hero-text-col {
       color: var(--white);
       padding-bottom: var(--spacing-md) !important;
   }
   
   .hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background: rgba(245, 200, 66, 0.15);
       padding: 6px 16px;
       border-radius: var(--border-radius-sm);
       font-size: 0.7rem;
       font-family: var(--font-display);
       font-weight: 600;
       letter-spacing: 2.5px;
       text-transform: uppercase;
       border: 1px solid rgba(245, 200, 66, 0.35);
       color: var(--gold);
       backdrop-filter: blur(12px);
   }
   
   .hero-title {
       font-family: var(--font-display);
       font-size: clamp(1.8rem, 3vw, 2.7rem);
       font-weight: 800;
       line-height: 1.15;
       margin-bottom: 1rem;
       color: var(--white);
       letter-spacing: -0.02em;
       text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
   }
   
   .hero-description {
       font-size: 1.05rem;
       opacity: 0.88;
       margin-bottom: 2rem;
       max-width: 460px;
       font-weight: 300;
       line-height: 1.65;
       color: var(--white);
       letter-spacing: 0.01em;
   }
   
   .hero-cta-button {
       background: var(--gold);
       color: var(--ink-900);
       padding: 12px 30px;
       border-radius: var(--border-radius-sm);
       font-family: var(--font-display);
       font-size: 0.9rem;
       font-weight: 700;
       transition: all var(--t-base) var(--ease-out);
       display: inline-flex;
       align-items: center;
       gap: 8px;
       text-decoration: none;
       border: none;
       letter-spacing: 0.02em;
       box-shadow: var(--shadow-gold);
   }
   
   .hero-cta-button:hover {
       background: var(--white);
       transform: translateY(-3px);
       box-shadow: 0 16px 40px rgba(245, 200, 66, 0.4);
       color: var(--ink-900);
   }
   
   .hero-nav-container {
       position: absolute;
       bottom: 0;
       inset-inline-end: 0;
       margin-inline-end: 3rem;
       display: flex;
       gap: var(--spacing-sm);
       z-index: 10;
       padding-bottom: 30px;
   }
   
   .hero-nav-btn {
       width: 42px;
       height: 42px;
        border-radius: var(--border-radius-sm);
       border: 1px solid rgba(255, 255, 255, 0.25);
       background: rgba(255, 255, 255, 0.08);
       color: var(--white);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all var(--t-base) var(--ease-out);
       backdrop-filter: blur(8px);
   }
   
   .hero-nav-btn:hover {
       background: rgba(245, 200, 66, 0.2) !important;
       border-color: rgba(245, 200, 66, 0.5);
       transform: scale(1.08);
   }
   
   /* Animation classes */
   .animate__animated {
       animation-duration: 0.9s;
       animation-fill-mode: both;
   }
   
   .hero-badge-anim {
       animation-delay: 0.15s;
       margin-bottom: 1rem;
   }
   .hero-desc-anim {
       animation-delay: 0.45s;
   }
   .hero-btn-anim {
       animation-delay: 0.6s;
   }
   
   /* ============================================================
      FEATURES SECTION
      ============================================================ */
   
   .features-section {
       padding: var(--spacing-3xl) 0;
       background: radial-gradient(
               ellipse 70% 60% at 15% 0%,
               rgba(16, 134, 202, 0.07) 0%,
               transparent 60%
           ),
           radial-gradient(
               ellipse 60% 50% at 85% 100%,
               rgba(13, 158, 122, 0.06) 0%,
               transparent 60%
           ),
           var(--ink-50);
       position: relative;
       overflow: hidden;
   }
   
   .features-bg-circle {
       position: absolute;
       border-radius: 50%;
       filter: blur(50px);
       animation: float 10s ease-in-out infinite;
       pointer-events: none;
   }
   
   .features-bg-circle-1 {
       top: -60px;
       right: -60px;
       width: 240px;
       height: 240px;
       background: radial-gradient(
           circle,
           rgba(16, 134, 202, 0.12),
           transparent 70%
       );
   }
   
   .features-bg-circle-2 {
       bottom: -90px;
       left: -90px;
       width: 340px;
       height: 340px;
       background: radial-gradient(
           circle,
           rgba(13, 158, 122, 0.1),
           transparent 70%
       );
       animation-delay: 3s;
       animation-duration: 13s;
   }
   
   .features-container {
       position: relative;
       z-index: 2;
   }
   
   .features-title {
       align-items: center;
       font-family: var(--font-display);
       font-size: clamp(1.5rem, 2.5vw, 2rem);
       font-weight: 800;
       margin-bottom: 0;
       letter-spacing: -0.02em;
       display: inline-block;
       position: relative;
   }
   
   .feature-card {
       text-align: center;
       border-radius: var(--radius-2xl);
       background: var(--white);
       padding: var(--spacing-xl) var(--spacing-lg);
       box-shadow: var(--shadow-md);
       transition: all var(--t-base) var(--ease-out);
       border: 1px solid rgba(16, 134, 202, 0.07);
       height: 100%;
       position: relative;
       overflow: hidden;
   }
   
   .feature-card::before {
       content: "";
       position: absolute;
       inset: 0;
       background: var(--grad-card-glow);
       opacity: 0;
       transition: opacity var(--t-base);
       pointer-events: none;
   }
   
   .feature-card:hover {
       transform: translateY(-3px);
       box-shadow: var(--shadow-xl);
       border-color: rgba(16, 134, 202, 0.15);
   }
   
   .feature-card:hover::before {
       opacity: 1;
   }
   
   .feature-icon-wrapper {
       width: 76px;
       height: 76px;
       border-radius: 50%;
       margin: 0 auto var(--spacing-lg);
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
       position: relative;
   }
   
   .feature-icon-wrapper::after {
       content: "";
       position: absolute;
       inset: -4px;
       border-radius: 50%;
       background: inherit;
       opacity: 0.2;
       filter: blur(8px);
       transition: opacity var(--t-base);
       z-index: -1;
   }
   
   .feature-icon-wrapper i {
       font-size: 1.7rem;
       color: var(--white);
       transition: transform var(--t-base) var(--ease-bounce);
   }
   
   .feature-card:hover .feature-icon-wrapper {
       transform: scale(1.12) translateY(-3px);
   }
   
   .feature-card:hover .feature-icon-wrapper i {
       transform: rotate(8deg) scale(1.05);
   }
   
   .feature-icon-shipping {
       background: linear-gradient(135deg, #1086ca 0%, #00b4d8 100%);
   }
   
   .feature-icon-payment {
       background: linear-gradient(135deg, #e85d04 0%, #f48c06 100%);
   }
   
   .feature-icon-returns {
       background: linear-gradient(135deg, #6d28d9 0%, #a78bfa 100%);
   }
   
   .feature-icon-support {
       background: linear-gradient(135deg, #059669 0%, #34d399 100%);
   }
   
   .feature-content {
       position: relative;
       z-index: 1;
   }
   
   .feature-title {
       font-family: var(--font-display);
       font-weight: 700;
       margin-bottom: var(--spacing-sm);
       color: var(--primary-blue-darker);
       font-size: 1rem;
       letter-spacing: -0.01em;
   }
   
   .feature-description {
       color: var(--ink-600);
       margin-bottom: 0;
       line-height: 1.65;
       font-size: 0.9rem;
   }
   
   .feature-hover-border {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 3px;
       background: var(--grad-brand);
       transform: scaleX(0);
       transition: transform 0.35s var(--ease-out);
       border-radius: 0 0 2px 2px;
   }
   
   .feature-card:hover .feature-hover-border {
       transform: scaleX(1);
   }
   
   /* ============================================================
      ORGANIC PRODUCTS SECTION
      ============================================================ */
   
   .organic-products-section {
       padding: var(--spacing-3xl) 0;
       background-color: var(--ink-50);
   }
   
   .organic-title {
       font-family: var(--font-display);
       font-size: var(--font-size-xl);
       font-weight: 800;
       letter-spacing: -0.02em;
       margin-bottom: 0;
   }
   
   .organic-subtitle {
       font-size: 1rem;
       max-width: 560px;
       margin: var(--spacing-md) auto 0;
       color: var(--ink-600);
       line-height: 1.65;
   }
   
   /* ============================================================
      TABS – pill-style category filters
      ============================================================ */
   
   .pills-tabs-container {
       margin-bottom: 1.5rem;
   }
   
   .tabs-wrapper-container {
       display: flex;
       justify-content: flex-start;
   }
   
   .tabs-wrapper {
       background: transparent !important;
       box-shadow: none !important;
       border: none !important;
       border-radius: 0 !important;
       display: block !important;
       overflow: visible !important;
       white-space: normal !important;
   }
   
   .nav-pills {
       display: flex !important;
       flex-wrap: wrap !important;
       gap: 8px !important;
       padding: 0 !important;
       margin: 0 !important;
       overflow: visible !important;
   }
   
   .tab-link {
       display: inline-flex !important;
       align-items: center;
       gap: 6px;
       padding: 7px 16px !important;
       border-radius: 999px !important;
       border: 1px solid var(--ink-200, #dde3ea) !important;
       background: transparent !important;
       color: var(--ink-600, #64748b) !important;
       font-family: var(--font-display, inherit);
       font-size: 0.84rem;
       font-weight: 500;
       line-height: 1;
       white-space: nowrap;
       cursor: pointer;
       text-decoration: none;
       transition:
           color        0.18s ease,
           background   0.18s ease,
           border-color 0.18s ease,
           transform    0.15s ease;
   }
   
   .tab-link:not(.active):hover {
       background:    #e6f4fc !important;
       border-color:  #1086CA !important;
       color:         #1086CA !important;
       transform:     translateY(-1px);
       text-decoration: none;
   }
   
   .tab-link.active {
       background: #0a5f99 !important;
       border-color: #0a5f99 !important;
       color: #fff !important;
   }
   
   .tab-link:active {
       transform: scale(0.97);
   }
   
   .tab-link i {
       font-size: 13px;
       opacity: 0.85;
       flex-shrink: 0;
   }
   
   /* Mobile: scrollable tabs */
   @media (max-width: 575px) {
   
       .nav-pills {
           flex-wrap: nowrap !important;
           overflow-x: auto !important;
           -webkit-overflow-scrolling: touch;
           scrollbar-width: none;
           padding-bottom: 4px !important;
       }
   
       .nav-pills::-webkit-scrollbar {
           display: none;
       }
   
       .nav-item {
           flex-shrink: 0;
       }
   }
   
   /* RTL support for tabs */
   [dir="rtl"] .nav-pills {
       direction: rtl;
       justify-content: flex-start;
   }
   
   @media (max-width: 575px) {
   
       [dir="rtl"] .nav-pills {
           direction: rtl;
           flex-direction: row !important;
       }
   }
   
   /* ============================================================
      PRODUCT CARDS – main product grid
      ============================================================ */
   
   .product-card {
       background: var(--white);
       border-radius: var(--radius-xl);
       overflow: hidden;
       box-shadow: var(--shadow-sm);
       border: 1px solid rgba(16, 134, 202, 0.07);
       transition: all var(--t-base) var(--ease-out);
       height: 100%;
       display: flex;
       flex-direction: column;
   }
   
   .product-card:hover {
       transform: translateY(-6px);
       box-shadow: var(--shadow-lg);
       border-color: rgba(16, 134, 202, 0.14);
   }
   
   .product-link {
       text-decoration: none;
       color: inherit;
       display: block;
   }
   
   .product-image-wrapper {
       height: 210px;
       overflow: hidden;
       position: relative;
       background: var(--ink-100);
   }
   
   .product-img {
       height: 100%;
       width: 100%;
       object-fit: cover;
       transition: transform var(--t-slow) var(--ease-out);
       display: block;
   }
   
   .product-card:hover .product-img {
       transform: scale(1.07);
   }
   
   .product-disc-badge {
       position: absolute;
       left: 12px;
       top: 12px;
       background: linear-gradient(135deg, #e03e3e, #f87171);
       color: var(--white);
       padding: 4px 10px;
        border-radius: var(--border-radius-sm);
       font-family: var(--font-display);
       font-size: 0.7rem;
       font-weight: 700;
       backdrop-filter: blur(6px);
       z-index: 2;
       letter-spacing: 0.5px;
       box-shadow: 0 2px 8px rgba(224, 62, 62, 0.3);
   }
   
   .product-card-elegant {
       background: var(--white);
       border-radius: var(--radius-xl);
       transition: all 0.3s var(--ease-out);
       overflow: hidden;
       box-shadow: 0 1px 2px rgba(10, 37, 64, 0.05),
           0 4px 12px rgba(10, 37, 64, 0.06), 0 0 0 1px rgba(16, 134, 202, 0.06);
       position: relative;
   }
   
   .product-card-elegant::after {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 3px;
       background: var(--grad-brand);
       transform: scaleX(0);
       transition: transform 0.3s var(--ease-out);
       transform-origin: left;
   }
   
   .product-card-elegant:hover {
       transform: translateY(-7px);
       box-shadow: 0 8px 24px rgba(10, 37, 64, 0.1),
           0 20px 48px rgba(10, 37, 64, 0.08), 0 0 0 1px rgba(16, 134, 202, 0.1);
   }
   
   .product-card-elegant:hover::after {
       transform: scaleX(1);
   }
   
   /* Reduced motion preference */
   @media (prefers-reduced-motion: reduce) {
   
       .product-card-elegant,
       .product-card-elegant::after {
           transition: none;
       }
   
       .product-card-elegant:hover {
           transform: none;
       }
   }
   
   .product-content {
       padding: var(--spacing-md) var(--spacing-lg);
   }
   
   .product-name {
       font-family: var(--font-display);
       font-weight: 700;
       color: var(--ink-800);
       font-size: 0.9rem;
       line-height: 1.4;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
       letter-spacing: -0.01em;
   }
   
   .product-name a {
       text-decoration: none;
       color: inherit;
       transition: color var(--t-fast);
   }
   
   .product-description {
       font-size: 0.82rem;
       line-height: 1.55;
       color: var(--ink-600);
       margin-bottom: 0.75rem;
       height: 2.6em;
       overflow: hidden;
   }
   
   .product-price-display {
       display: flex;
       align-items: baseline;
       gap: 6px;
   }
   
   .product-old-price {
       color: var(--ink-400);
       font-size: 0.82rem;
       text-decoration: line-through;
   }
   
   .product-sale-price,
   .text-sale-price {
       color: var(--primary-blue-darker);
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 1.1rem;
   }
   
   .product-regular-price {
       color: var(--primary-blue-darker);
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 1.1rem;
   }
   
   html[dir="rtl"] .product-old-price {
       margin-right: 0;
       margin-left: 6px;
   }
   
   .product-actions {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 8px;
   }
   
   /* ============================================================
      BUTTONS – wishlist & cart
      ============================================================ */
   
   .btn-wishlist-remove,
   .btn-wishlist-add,
   .wishlist-btn {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all var(--t-base) var(--ease-bounce);
       border: 1.5px solid;
       flex-shrink: 0;
       padding: 0;
   }
   
   .btn-wishlist-remove,
   .btn-outline-danger {
       background: rgba(224, 62, 62, 0.06) !important;
       border-color: rgba(224, 62, 62, 0.3) !important;
       color: var(--danger) !important;
       width: 36px;
       height: 36px;
       border-radius: 50% !important;
       display: flex !important;
       align-items: center;
       justify-content: center;
       padding: 0 !important;
       transition: all var(--t-base) var(--ease-bounce) !important;
   }
   
   .btn-wishlist-remove:hover,
   .btn-outline-danger:hover {
       background: var(--danger) !important;
       color: var(--white) !important;
       border-color: var(--danger) !important;
       transform: scale(1.12) !important;
       box-shadow: 0 4px 12px rgba(224, 62, 62, 0.3) !important;
   }
   
   .wishlist-btn {
       background: var(--ink-50);
       border-color: var(--ink-200);
       color: var(--ink-400);
   }
   
   .wishlist-btn:hover {
       background: rgba(224, 62, 62, 0.08);
       border-color: rgba(224, 62, 62, 0.35);
       color: var(--danger);
       transform: scale(1.12);
   }
   
   .btn-cart-go,
   .btn-cart-add,
   .btn-rounded-pill {
       background: var(--gold);
       border: none;
        border-radius: var(--border-radius-sm);
       padding: 8px 8px;
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 0.8rem;
       transition: all var(--t-base) var(--ease-out);
       color: var(--ink-900) !important;
       text-decoration: none;
       justify-content: center;
       align-items: center;
       gap: 6px;
       letter-spacing: 0.01em;
   }
   
   .btn-cart-go:hover,
   .btn-cart-add:hover,
   .btn-rounded-pill:hover {
       transform: translateY(-2px) scale(1.03);
       box-shadow: var(--shadow-gold);
       background: var(--gold-dark);
   }
   
   .fa-heart-wishlist-active {
       color: #e03e3e;
   }
   .fa-heart-wishlist-inactive {
       color: rgba(16, 171, 243, 0.55);
   }
   
   .btn-wishlist-custom {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 9px 20px;
        border-radius: var(--border-radius-sm);
       font-family: var(--font-display);
       font-size: 0.85rem;
       font-weight: 600;
       transition: all 0.25s var(--ease-out);
       border: 1.5px solid transparent;
       background: white;
       box-shadow: var(--shadow-sm);
       white-space: nowrap;
   }
   
   .btn-wishlist-inactive-style {
       border-color: rgba(16, 171, 243, 0.4);
       color: #10abf3;
   }
   
   .btn-wishlist-inactive-style:hover {
       background: #10abf3;
       color: white !important;
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(16, 171, 243, 0.3);
   }
   
   .btn-wishlist-active-style {
       border-color: #e03e3e;
       background: #fff5f5;
       color: #e03e3e;
   }
   
   .btn-wishlist-active-style:hover {
       background: #e03e3e;
       color: white !important;
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(224, 62, 62, 0.3);
   }
   
   .btn-wishlist-active-style:hover .fa-heart-wishlist-active {
       color: white;
   }
   .btn-wishlist-inactive-style:hover .fa-heart-wishlist-inactive {
       color: white;
   }
   
   /* ============================================================
      LOAD MORE BUTTON
      ============================================================ */
   
   .load-more-wrapper {
       margin-top: 3rem;
       text-align: center;
   }
   
   .load-more-btn {
       background: var(--grad-brand);
       border: none;
        border-radius: var(--border-radius-sm);
       color: var(--white);
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 0.9rem;
       letter-spacing: 0.03em;
       transition: all var(--t-base) var(--ease-out);
       position: relative;
       overflow: hidden;
       padding: 12px 36px;
       box-shadow: var(--shadow-blue);
   }
   
   .load-more-btn::before {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(
           90deg,
           transparent,
           rgba(255, 255, 255, 0.15),
           transparent
       );
       background-size: 200% 100%;
       transform: translateX(-100%);
       transition: transform 0.55s;
   }
   
   .load-more-btn:hover {
       transform: translateY(-4px);
       box-shadow: 0 16px 40px rgba(16, 134, 202, 0.4);
       color: var(--white);
   }
   
   /* ============================================================
      SPECIAL OFFERS SECTION
      ============================================================ */
   
   .special-offers-section {
       padding: var(--spacing-2xl) 0;
       background: radial-gradient(
               ellipse 80% 60% at 50% 0%,
               rgba(245, 200, 66, 0.07) 0%,
               transparent 60%
           ),
           linear-gradient(180deg, var(--ink-100) 0%, var(--white) 100%);
   }
   
   .offers-title {
       font-family: var(--font-display);
       font-size: clamp(1.5rem, 2.5vw, 2rem);
       font-weight: 800;
       letter-spacing: -0.02em;
       margin-bottom: 0;
       display: inline-block;
   }
   
   .offers-title-underline {
       width: 80px;
       height: 3px;
       background: var(--grad-gold);
       margin: 10px auto 0;
        border-radius: var(--border-radius-sm);
   }
   
   .offers-subtitle {
       font-size: 1rem;
       max-width: 560px;
       margin: var(--spacing-md) auto 0;
       color: var(--ink-600);
       line-height: 1.65;
   }
   
   .offer-card {
       background: var(--white);
       border-radius: var(--radius-xl);
       overflow: hidden;
       box-shadow: var(--shadow-lg);
       transition: all var(--t-base) var(--ease-out);
       height: 100%;
       position: relative;
       border: 1px solid rgba(16, 134, 202, 0.06);
   }
   
   .offer-card:hover {
       transform: translateY(-10px);
       box-shadow: var(--shadow-2xl);
   }
   
   .offer-badge {
       position: absolute;
       top: 16px;
       right: 16px;
       z-index: 2;
       color: var(--white);
       padding: 5px 14px;
        border-radius: var(--border-radius-sm);
       font-family: var(--font-display);
       font-size: 0.78rem;
       font-weight: 700;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   }
   
   html[dir="rtl"] .offer-badge {
       right: auto;
       left: 16px;
   }
   
   .offer-image-wrapper {
       position: relative;
       height: 230px;
       overflow: hidden;
   }
   
   .offer-image {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform var(--t-slow) var(--ease-out);
   }
   
   .offer-card:hover .offer-image {
       transform: scale(1.07);
   }
   
   .offer-image-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(
           to bottom,
           transparent 45%,
           rgba(10, 37, 64, 0.25) 100%
       );
   }
   
   .offer-content {
       padding: var(--spacing-lg);
   }
   
   .offer-name {
       font-family: var(--font-display);
       font-weight: 700;
       color: var(--primary-blue-darker);
       font-size: 1.05rem;
       min-height: 56px;
       line-height: 1.4;
       margin-bottom: 0.5rem;
       letter-spacing: -0.01em;
   }
   
   .offer-description {
       color: var(--ink-600);
       font-size: 0.88rem;
       line-height: 1.55;
       min-height: 40px;
       margin-bottom: 0.75rem;
   }
   
   .offer-cta-wrapper {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .offer-limited-badge {
       color: var(--primary-blue-darker);
       font-family: var(--font-display);
       font-size: 0.82rem;
       font-weight: 600;
       display: inline-flex;
       align-items: center;
       gap: 5px;
   }
   
   .offer-shop-btn {
       border: none;
        border-radius: var(--border-radius-sm);
       padding: 8px 20px;
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 0.85rem;
       transition: all var(--t-base) var(--ease-out);
       color: var(--white);
   }
   
   .offer-shop-btn:hover {
       transform: scale(1.05);
       box-shadow: var(--shadow-md);
   }
   
   .offer-ribbon {
       position: absolute;
       top: 0;
       width: 70px;
       height: 70px;
       overflow: hidden;
       z-index: 5;
   }
   
   .offer-ribbon-text {
       position: absolute;
       top: 14px;
       width: 100px;
       color: var(--white);
       text-align: center;
       font-family: var(--font-display);
       font-size: 0.68rem;
       font-weight: 700;
       padding: 3px 0;
       text-transform: uppercase;
       letter-spacing: 1px;
   }
   
   html[dir="rtl"] .offer-ribbon-text {
       right: -20px;
   }
   html[dir="ltr"] .offer-ribbon-text {
       left: -20px;
   }
   
   /* ============================================================
      DISCOVER PRODUCTS SECTION
      ============================================================ */
   
   .discover-products-section {
       padding: var(--spacing-3xl) 0;
       background: radial-gradient(
               ellipse 70% 50% at 90% 50%,
               rgba(16, 134, 202, 0.05) 0%,
               transparent 60%
           ),
           linear-gradient(180deg, var(--ink-100) 0%, var(--ink-50) 100%);
   }
   
   .discover-title {
       font-family: var(--font-display);
       font-size: var(--font-size-xl);
       font-weight: 800;
       letter-spacing: -0.02em;
       margin-bottom: 0;
       display: inline-block;
   }
   
   .discover-title-underline {
       width: 90px;
       height: 3px;
       background: linear-gradient(90deg, #4caf50, #8bc34a, #f5c842);
       margin: 10px auto 0;
        border-radius: var(--border-radius-sm);
   }
   
   .discover-subtitle {
       font-size: 1rem;
       max-width: 560px;
       margin: var(--spacing-md) auto 0;
       color: var(--ink-600);
       line-height: 1.65;
   }
   
   .discover-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
       gap: var(--spacing-lg);
       margin: var(--spacing-xl) 0;
   }
   
   .discover-card {
       background: var(--white);
       border-radius: var(--radius-xl);
       overflow: hidden;
       box-shadow: var(--shadow-md);
       height: 100%;
       border: 1px solid rgba(16, 134, 202, 0.07);
       transition: all var(--t-base) var(--ease-out);
   }
   
   .discover-card:hover {
       transform: translateY(-6px);
       box-shadow: var(--shadow-xl);
       border-color: rgba(16, 134, 202, 0.13);
   }
   
   .discover-link {
       text-decoration: none;
       color: inherit;
       display: block;
   }
   
   .discover-image-wrapper {
       position: relative;
       height: 200px;
       overflow: hidden;
       background: var(--ink-100);
   }
   
   .discover-image {
       height: 100%;
       width: 100%;
       object-fit: cover;
       transition: transform var(--t-slow) var(--ease-out);
   }
   
   .discover-card:hover .discover-image {
       transform: scale(1.07);
   }
   
   .discover-category-badge {
       position: absolute;
       top: 12px;
       background: rgba(245, 200, 66, 0.92);
       color: var(--ink-900);
       padding: 4px 12px;
        border-radius: var(--border-radius-sm);
       font-family: var(--font-display);
       font-size: 0.7rem;
       font-weight: 700;
       backdrop-filter: blur(6px);
       z-index: 2;
       box-shadow: 0 2px 8px rgba(245, 200, 66, 0.3);
   }
   
   .discover-sale-badge {
       position: absolute;
       top: 12px;
       background: rgba(224, 62, 62, 0.92);
       color: var(--white);
       padding: 4px 10px;
        border-radius: var(--border-radius-sm);
       font-family: var(--font-display);
       font-size: 0.7rem;
       font-weight: 700;
       backdrop-filter: blur(6px);
       z-index: 2;
       box-shadow: 0 2px 8px rgba(224, 62, 62, 0.3);
   }
   
   .discover-content {
       padding: var(--spacing-md) var(--spacing-lg);
   }
   
   .btn-wishlist-icon {
       width: 38px;
       height: 38px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       border: 1.5px solid var(--ink-200);
       background: var(--white);
       transition: all var(--t-base) var(--ease-bounce);
       color: var(--ink-400);
   }
   
   .btn-wishlist-icon.active {
       color: #e03e3e;
       border-color: rgba(224, 62, 62, 0.3);
   }
   
   .btn-wishlist-icon:hover {
       background: rgba(224, 62, 62, 0.06);
       border-color: rgba(224, 62, 62, 0.35);
       color: #e03e3e;
       transform: scale(1.12);
   }
   
   .btn-cart-custom {
       height: 38px;
       border-radius: var(--radius-md);
       font-family: var(--font-display);
       font-size: 0.8rem;
       font-weight: 700;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       transition: all var(--t-base) var(--ease-out);
       letter-spacing: 0.01em;
   }
   
   .btn-cart-add-style {
       background: var(--gold);
       color: var(--ink-900);
       border: none;
       box-shadow: 0 2px 8px rgba(245, 200, 66, 0.3);
   }
   
   .btn-cart-add-style:hover {
       color: var(--ink-900);
       background: var(--gold-dark);
       transform: translateY(-2px);
       box-shadow: var(--shadow-gold);
   }
   
   .btn-cart-go-style {
       background: var(--success);
       color: var(--white);
       border: none;
       box-shadow: 0 2px 8px rgba(21, 128, 61, 0.3);
   }
   
   .btn-cart-go-style:hover {
       background: #166534;
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(21, 128, 61, 0.35);
       color: var(--white);
   }
   
   .discover-name {
       font-family: var(--font-display);
       font-weight: 700;
       color: var(--ink-800);
       font-size: 0.9rem;
       line-height: 1.4;
       min-height: 42px;
       margin-bottom: var(--spacing-sm);
       letter-spacing: -0.01em;
   }
   
   .discover-name a {
       text-decoration: none;
       color: inherit;
       transition: color var(--t-fast);
   }
   
   .discover-description {
       font-size: 0.82rem;
       line-height: 1.55;
       min-height: 38px;
       color: var(--ink-600);
       margin-bottom: 0.75rem;
   }
   
   .discover-price-wrapper {
       margin-bottom: 0.75rem;
   }
   
   .discover-price-display {
       display: flex;
       align-items: baseline;
       gap: 6px;
   }
   
   .discover-old-price {
       color: var(--ink-400);
       font-size: 0.82rem;
       text-decoration: line-through;
   }
   
   .discover-sale-price {
       color: var(--primary-blue);
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 1rem;
   }
   
   .discover-regular-price {
       color: var(--danger);
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 1rem;
   }
   
   .discover-actions {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: var(--spacing-sm);
   }
   
   html[dir="rtl"] .discover-old-price {
       margin-right: 0;
       margin-left: 6px;
   }
   
   /* ============================================================
      FEATURED BANNER
      ============================================================ */
   
   .featured-banner {
       padding: var(--spacing-3xl) 0;
   }
   
   .banner-content {
       padding: var(--spacing-xl) 0;
   }
   
   .banner-badge {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background: rgba(255, 255, 255, 0.18);
       color: var(--white);
       padding: 7px 18px;
        border-radius: var(--border-radius-sm);
       font-family: var(--font-display);
       font-size: 0.82rem;
       font-weight: 600;
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.28);
   }
   
   .banner-content > .home-banner-title {
       color: var(--white);
       font-family: var(--font-display);
       font-size: 2rem;
       font-weight: 800;
       line-height: 1.2;
       margin-bottom: 0.75rem;
       letter-spacing: -0.03em;
       text-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
   }
   
   .banner-category {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background: rgba(255, 255, 255, 0.92);
       color: var(--primary-blue);
       padding: 6px 16px;
       border-radius: var(--radius-xl);
       font-family: var(--font-display);
       font-size: 0.85rem;
       font-weight: 700;
   }
   
   .banner-description {
       color: rgba(255, 255, 255, 0.88);
       font-size: 1rem;
       line-height: 1.65;
       max-width: 88%;
       margin-bottom: var(--spacing-lg);
   }
   
   .banner-sale-price {
       color: var(--gold);
       font-family: var(--font-display);
       font-size: 1.75rem;
       font-weight: 800;
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   }
   
   .banner-old-price {
       color: rgba(255, 255, 255, 0.6);
       font-size: 1.1rem;
       text-decoration: line-through;
   }
   
   .banner-regular-price {
       color: var(--white);
       font-family: var(--font-display);
       font-size: 2.2rem;
       font-weight: 800;
   }
   
   .banner-discount-badge {
       display: inline-block;
       background: var(--primary-blue-darker);
       color: var(--white);
       padding: 3px 12px;
        border-radius: var(--border-radius-sm);
       font-family: var(--font-display);
       font-size: 0.82rem;
       font-weight: 700;
   }
   
   .banner-actions {
       display: flex;
       flex-wrap: wrap;
       gap: var(--spacing-md);
       margin-bottom: var(--spacing-lg);
   }
   
   .banner-btn-buy {
       background: var(--gold);
       color: var(--ink-900);
       border: none;
        border-radius: var(--border-radius-sm);
       padding: 12px 28px;
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 0.95rem;
       transition: all var(--t-base) var(--ease-out);
       display: inline-flex;
       align-items: center;
       gap: 8px;
       box-shadow: var(--shadow-gold);
   }
   
   .banner-btn-buy:hover {
       transform: translateY(-3px);
       box-shadow: 0 16px 40px rgba(245, 200, 66, 0.4);
       color: var(--ink-900);
   }
   
   .banner-btn-wishlist-remove,
   .banner-btn-wishlist-add {
       background: rgba(255, 255, 255, 0.15);
       color: var(--white);
       border: 1.5px solid rgba(255, 255, 255, 0.28);
        border-radius: var(--border-radius-sm);
       padding: 12px var(--spacing-lg);
       font-family: var(--font-display);
       font-weight: 600;
       transition: all var(--t-base) var(--ease-out);
       display: inline-flex;
       align-items: center;
       gap: 8px;
   }
   
   .banner-btn-wishlist-remove:hover,
   .banner-btn-wishlist-add:hover {
       background: rgba(255, 255, 255, 0.25);
       transform: translateY(-3px);
       color: var(--white);
   }
   
   .banner-feature-icon {
       width: 38px;
       height: 38px;
       background: rgba(255, 255, 255, 0.18);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-inline-end: 10px;
       backdrop-filter: blur(6px);
   }
   
   .banner-feature-icon i {
       color: var(--white);
       font-size: 1rem;
   }
   .banner-feature-title {
       color: var(--white);
       font-weight: 600;
       font-size: 0.85rem;
       font-family: var(--font-display);
   }
   .banner-feature-subtitle {
       color: rgba(255, 255, 255, 0.65);
       font-size: 0.75rem;
   }
   
   .banner-image-wrapper {
       width: 100%;
       aspect-ratio: 1;
       border-radius: var(--radius-2xl);
       overflow: hidden;
       box-shadow: var(--shadow-2xl);
       background: var(--ink-100);
       border: 2px solid rgba(255, 255, 255, 0.15);
   }
   
   .banner-image-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(
           45deg,
           rgba(16, 134, 202, 0.12),
           rgba(13, 158, 122, 0.08)
       );
       pointer-events: none;
   }
   
   .banner-float-element {
       position: absolute;
       background: var(--white);
       color: var(--ink-900);
       padding: 8px 16px;
       border-radius: var(--radius-md);
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 0.82rem;
       z-index: 2;
       box-shadow: var(--shadow-lg);
       display: inline-flex;
       align-items: center;
       gap: 6px;
   }
   
   .banner-float-top {
       top: -14px;
   }
   .banner-float-bottom {
       bottom: -14px;
   }
   
   /* ============================================================
      BESTSELLER SECTION
      ============================================================ */
   
   .bestseller-section {
       padding: var(--spacing-3xl) 0;
       background: radial-gradient(
               ellipse 70% 60% at 20% 50%,
               rgba(16, 134, 202, 0.05) 0%,
               transparent 60%
           ),
           linear-gradient(180deg, #dce8f2 0%, var(--white) 100%);
   }
   
   .bestseller-title {
       font-family: var(--font-display);
       font-size: clamp(1.5rem, 2.8vw, 2.2rem);
       font-weight: 800;
       letter-spacing: -0.03em;
       margin-bottom: 0;
   }
   
   .bestseller-title-underline {
       width: 80px;
       height: 3px;
       background: var(--grad-brand);
       margin: 10px auto var(--spacing-xl);
        border-radius: var(--border-radius-sm);
   }
   
   .bestseller-subtitle {
       font-size: 1rem;
       max-width: 560px;
       margin: 0 auto;
       color: var(--ink-600);
       line-height: 1.65;
   }
   
   .bestseller-card {
       background: var(--white);
       border-radius: var(--radius-xl);
       overflow: hidden;
       box-shadow: var(--shadow-xl);
       transition: all var(--t-base) var(--ease-out);
       height: 100%;
       position: relative;
       border: 1px solid rgba(16, 134, 202, 0.07);
   }
   
   .bestseller-card:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow-2xl);
       border-color: rgba(16, 134, 202, 0.12);
   }
   
   .bestseller-number {
       position: absolute;
       top: var(--spacing-xl);
       z-index: 2;
       font-family: var(--font-display);
       color: var(--primary-blue);
       font-size: 5rem;
       font-weight: 800;
       opacity: 0.08;
       line-height: 1;
       user-select: none;
       letter-spacing: -0.04em;
   }
   
   .bestseller-row {
       height: 100%;
   }
   .bestseller-image-col {
       position: relative;
       min-height: 240px;
   }
   
   .bestseller-link {
       display: block;
       height: 100%;
       text-decoration: none;
       color: inherit;
   }
   
   .bestseller-image-wrapper {
       height: 100%;
       overflow: hidden;
   }
   
   .bestseller-image {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform var(--t-slow) var(--ease-out);
   }
   
   .bestseller-card:hover .bestseller-image {
       transform: scale(1.07);
   }
   
   .bestseller-discount-badge {
       position: absolute;
       top: var(--spacing-xl);
       background: linear-gradient(135deg, #e03e3e, #f87171);
       color: var(--white);
       padding: 4px 10px;
        border-radius: var(--border-radius-sm);
       font-family: var(--font-display);
       font-size: 0.7rem;
       font-weight: 700;
       box-shadow: 0 4px 12px rgba(224, 62, 62, 0.3);
       z-index: 2;
   }
   
   .bestseller-details-col {
       padding: var(--spacing-lg);
       display: flex;
       flex-direction: column;
       justify-content: center;
   }
   
   .bestseller-category {
       color: var(--primary-blue);
       font-family: var(--font-display);
       font-size: 0.72rem;
       font-weight: 600;
       letter-spacing: 1.5px;
       text-transform: uppercase;
       margin-bottom: var(--spacing-sm);
   }
   
   .bestseller-name {
       font-family: var(--font-display);
       font-weight: 700;
       color: var(--primary-blue-darker);
       font-size: 1rem;
       line-height: 1.4;
       margin-bottom: 0.6rem;
       letter-spacing: -0.01em;
   }
   
   .bestseller-name a {
       text-decoration: none;
       color: inherit;
       transition: color var(--t-fast);
   }
   
   .bestseller-description {
       font-size: 0.88rem;
       line-height: 1.55;
       color: var(--ink-600);
       margin-bottom: 0.75rem;
   }
   
   .bestseller-stars {
       color: var(--gold-dark);
       font-size: 0.88rem;
   }
   .bestseller-reviews {
       color: var(--ink-400);
       font-size: 0.75rem;
   }
   
   .bestseller-sale-price {
       color: var(--primary-blue-dark);
       font-family: var(--font-display);
       font-size: 1.1rem;
       font-weight: 800;
   }
   
   .bestseller-old-price {
       color: var(--danger);
       font-size: 0.88rem;
       text-decoration: line-through;
   }
   
   .bestseller-regular-price {
       color: var(--primary-blue-dark);
       font-family: var(--font-display);
       font-size: 1.1rem;
       font-weight: 800;
   }
   
   .bestseller-actions {
       display: flex;
       gap: var(--spacing-sm);
       flex-wrap: wrap;
   }
   
   .bestseller-btn-cart-go,
   .bestseller-btn-cart-add {
       background: var(--gold);
       border: none;
        border-radius: var(--border-radius-sm);
       padding: 9px 16px;
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 0.82rem;
       color: var(--ink-900);
       transition: all var(--t-base) var(--ease-out);
       text-decoration: none;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
   }
   
   .bestseller-btn-cart-go:hover,
   .bestseller-btn-cart-add:hover {
       transform: scale(1.04);
       box-shadow: var(--shadow-gold);
       color: var(--ink-900);
   }
   
   .bestseller-btn-cart-add {
       width: 100%;
   }
   
   .bestseller-btn-wishlist-remove,
   .bestseller-btn-wishlist-add {
       width: 40px;
       height: 40px;
       background: var(--ink-100);
       border: 1.5px solid var(--ink-200);
       border-radius: var(--radius-md);
       transition: all var(--t-base) var(--ease-bounce);
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--ink-400);
   }
   
   .bestseller-btn-wishlist-remove {
       background: rgba(224, 62, 62, 0.07);
       border-color: rgba(224, 62, 62, 0.2);
       color: var(--danger);
   }
   
   .bestseller-btn-wishlist-remove:hover {
       background: var(--danger);
       color: var(--white);
       border-color: var(--danger);
       transform: scale(1.08);
   }
   
   .bestseller-btn-wishlist-add:hover {
       background: var(--primary-blue);
       color: var(--white);
       border-color: var(--primary-blue);
       transform: scale(1.08);
   }
   
   .bestseller-view-more-wrapper {
       text-align: center;
       margin-top: var(--spacing-2xl);
   }
   
   .bestseller-view-more-btn {
       background: var(--grad-brand);
       border: none;
        border-radius: var(--border-radius-sm);
       color: var(--white);
       font-family: var(--font-display);
       font-weight: 700;
       letter-spacing: 0.02em;
       padding: 12px 36px;
       transition: all var(--t-base) var(--ease-out);
       display: inline-flex;
       align-items: center;
       gap: 8px;
       box-shadow: var(--shadow-blue);
   }
   
   .bestseller-view-more-btn:hover {
       transform: translateY(-4px);
       box-shadow: 0 16px 40px rgba(16, 134, 202, 0.4);
       color: var(--white);
   }
   
   /* ============================================================
      STATS SECTION
      ============================================================ */
   
   .stats-section {
       padding: var(--spacing-3xl) 0;
       background: radial-gradient(
               ellipse 60% 60% at 0% 50%,
               rgba(16, 134, 202, 0.07) 0%,
               transparent 55%
           ),
           radial-gradient(
               ellipse 60% 60% at 100% 50%,
               rgba(13, 158, 122, 0.06) 0%,
               transparent 55%
           ),
           var(--ink-50);
       position: relative;
       overflow: hidden;
   }
   
   .stats-bg-circle {
       position: absolute;
       border-radius: 50%;
       filter: blur(50px);
       animation: pulse-glow 10s ease-in-out infinite;
       pointer-events: none;
   }
   
   .stats-bg-circle-1 {
       top: -100px;
       right: -100px;
       width: 350px;
       height: 350px;
       background: radial-gradient(
           circle,
           rgba(16, 134, 202, 0.12),
           transparent 70%
       );
   }
   
   .stats-bg-circle-2 {
       bottom: -150px;
       left: -150px;
       width: 450px;
       height: 450px;
       background: radial-gradient(
           circle,
           rgba(13, 158, 122, 0.1),
           transparent 70%
       );
       animation-delay: 4s;
       animation-duration: 14s;
   }
   
   .stats-container {
       position: relative;
       z-index: 2;
   }
   
   .stats-card-wrapper {
       background: rgba(255, 255, 255, 0.94);
       border-radius: var(--radius-2xl);
       padding: var(--spacing-2xl);
       box-shadow: var(--shadow-xl);
       border: 1px solid rgba(16, 134, 202, 0.08);
       backdrop-filter: blur(12px);
   }
   
   .stat-card {
       background: var(--white);
       border-radius: var(--radius-xl);
       padding: var(--spacing-xl);
       height: 100%;
       box-shadow: var(--shadow-md);
       transition: all 0.35s var(--ease-out);
       position: relative;
       overflow: hidden;
       text-align: center;
       border: 1px solid rgba(16, 134, 202, 0.07);
   }
   
   .stat-card::before {
       content: "";
       position: absolute;
       inset: 0;
       background: var(--grad-card-glow);
       opacity: 0;
       transition: opacity var(--t-base);
   }
   
   .stat-card-hover {
       transform: translateY(-10px);
       box-shadow: var(--shadow-xl);
       border-color: rgba(16, 134, 202, 0.14);
   }
   
   .stat-card-hover::before {
       opacity: 1;
   }
   
   .stat-icon-wrapper {
       width: 76px;
       height: 76px;
       border-radius: 50%;
       margin: 0 auto var(--spacing-lg);
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: var(--shadow-md);
       transition: all var(--t-base) var(--ease-bounce);
       position: relative;
   }
   
   .stat-icon-wrapper::after {
       content: "";
       position: absolute;
       inset: -4px;
       border-radius: 50%;
       background: inherit;
       opacity: 0;
       filter: blur(10px);
       z-index: -1;
       transition: opacity var(--t-base);
   }
   
   .stat-card-hover .stat-icon-wrapper {
       transform: scale(1.12);
   }
   .stat-card-hover .stat-icon-wrapper::after {
       opacity: 0.3;
   }
   
   .stat-icon-wrapper i {
       font-size: 1.7rem;
       color: var(--white);
   }
   
   .stat-title {
       font-family: var(--font-display);
       font-weight: 600;
       color: var(--primary-blue-darker);
       margin-bottom: var(--spacing-md);
       font-size: 0.95rem;
       letter-spacing: -0.01em;
   }
   
   .stat-value {
       font-family: var(--font-display);
       font-weight: 800;
       margin-bottom: 0;
       font-size: 2.4rem;
       color: var(--primary-blue);
       transition: all var(--t-base);
       letter-spacing: -0.04em;
       line-height: 1;
   }
   
   .stat-card-hover .stat-value {
       color: var(--primary-blue-darker);
   }
   
   .stat-hover-line {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 3px;
       transform: scaleX(0);
       transform-origin: left;
       transition: transform var(--t-base) var(--ease-out);
       background: var(--grad-brand);
   }
   
   .stat-card-hover .stat-hover-line {
       transform: scaleX(1);
   }
   
   /* ============================================================
      TESTIMONIALS SECTION
      ============================================================ */
   
   .testimonials-section {
       padding: var(--spacing-3xl) 0;
       background: linear-gradient(180deg, var(--ink-50) 0%, var(--white) 100%);
   }
   
   .testimonials-title {
       font-family: var(--font-display);
       font-size: var(--font-size-xl);
       font-weight: 800;
       letter-spacing: -0.02em;
       margin-bottom: 0;
   }
   
   .testimonials-title-underline {
       width: 80px;
       height: 3px;
       background: var(--grad-brand);
       margin: 10px auto 0;
        border-radius: var(--border-radius-sm);
   }
   
   .testimonials-subtitle {
       font-size: 1rem;
       max-width: 560px;
       margin: var(--spacing-md) auto 0;
       color: var(--ink-600);
       line-height: 1.65;
   }
   
   .testimonial-card {
       background: var(--white);
       border-radius: var(--radius-xl);
       padding: var(--spacing-xl);
       box-shadow: var(--shadow-md);
       border: 1px solid rgba(16, 134, 202, 0.06);
       height: 100%;
       transition: all var(--t-base) var(--ease-out);
       position: relative;
       overflow: hidden;
   }
   
   .testimonial-card::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 3px;
       background: var(--grad-brand);
       transform: scaleX(0);
       transition: transform var(--t-base) var(--ease-out);
       transform-origin: left;
   }
   
   .testimonial-card:hover {
       transform: translateY(-6px);
       box-shadow: var(--shadow-xl);
       border-color: rgba(16, 134, 202, 0.12);
   }
   
   .testimonial-card:hover::before {
       transform: scaleX(1);
   }
   
   .testimonial-quote-icon {
       margin-bottom: 0.75rem;
   }
   
   .testimonial-quote-icon i {
       font-size: 1.8rem;
       color: var(--primary-blue);
       opacity: 0.25;
   }
   
   .testimonial-content {
       color: var(--ink-600);
       font-size: 0.92rem;
       line-height: 1.7;
       margin-bottom: var(--spacing-lg);
       font-style: italic;
   }
   
   .testimonial-avatar {
       width: 52px;
       height: 52px;
       border-radius: 50%;
       overflow: hidden;
       margin-inline-end: var(--spacing-md);
       flex-shrink: 0;
       background: var(--ink-100);
       border: 2px solid var(--primary-blue-light);
   }
   
   .testimonial-avatar-img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }
   
   .testimonial-client-name {
       font-family: var(--font-display);
       font-weight: 700;
       color: var(--ink-800);
       font-size: 0.9rem;
       margin-bottom: 2px;
   }
   
   .testimonial-client-profession {
       color: var(--ink-400);
       font-size: 0.8rem;
       margin: 0;
   }
   
   .testimonials-load-more-btn {
       background: var(--grad-brand);
       border: none;
        border-radius: var(--border-radius-sm);
       color: var(--white);
       font-family: var(--font-display);
       font-weight: 700;
       padding: 12px 32px;
       transition: all var(--t-base) var(--ease-out);
       box-shadow: var(--shadow-blue);
   }
   
   .testimonials-load-more-btn:hover {
       transform: translateY(-3px);
       box-shadow: 0 16px 40px rgba(16, 134, 202, 0.4);
       color: var(--white);
   }
   
   /* ============================================================
      RESPONSIVE: TABLET (≤768px)
      ============================================================ */
   
   @media (max-width: 768px) {
   
       .slider-bg-container {
           background-attachment: scroll !important;
           background-position: center;
       }
   
       .tabs-wrapper {
           width: 100%;
           border-radius: var(--radius-xl);
       }
   
       .nav-pills {
           flex-wrap: nowrap;
           overflow-x: auto;
       }
   
       .bestseller-row {
           flex-direction: column;
       }
   
       .bestseller-image-col {
           min-height: 200px;
       }
   
       .stat-card-wrapper {
           padding: var(--spacing-xl);
       }
   
       .stat-value {
           font-size: 2rem;
       }
   
       .hero-section {
           height: 100vh;
           display: flex;
           flex-direction: column;
       }
   
       .hero-text-col {
           display: flex !important;
           flex-direction: column !important;
           height: 100% !important;
           padding-top: 20% !important;
           padding-bottom: 50px !important;
       }
   
       .hero-buttons-container {
           margin-top: auto !important;
           margin-bottom: 60px !important;
       }
   }
   
   /* ============================================================
      RESPONSIVE: MOBILE (≤576px)
      ============================================================ */
   
   @media (max-width: 576px) {
   
       .discover-title,
       .bestseller-title,
       .testimonials-title {
           font-size: 1.6rem;
       }
   
       .hero-btn {
           width: 100%;
           margin: 0 !important;
       }
   
       .banner-actions {
           flex-direction: column;
       }
   
       .bestseller-actions {
           flex-direction: column;
       }
   
       .bestseller-btn-cart-go,
       .bestseller-cart-form {
           width: 100%;
       }
   
       .bestseller-btn-wishlist-remove,
       .bestseller-btn-wishlist-add {
           width: 100%;
       }
   }
   
   /* ============================================================
      UTILITY CLASSES
      ============================================================ */
   
   .btn-primary-custom {
       background: var(--grad-brand);
       border: none;
       color: var(--white);
        border-radius: var(--border-radius-sm);
       font-family: var(--font-display);
       font-weight: 700;
       transition: all var(--t-base) var(--ease-out);
   }
   
   .btn-primary-custom:hover {
       transform: translateY(-2px);
       box-shadow: var(--shadow-blue);
       color: var(--white);
   }
   
   .shadow-text {
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
   }
   
   /* List view overrides */
   .products-list-view .product-item {
       flex: 0 0 100% !important;
       max-width: 100% !important;
   }
   
   .products-list-view .product-card {
       flex-direction: row;
       align-items: center;
   }
   
   .products-list-view .product-img {
       width: 200px;
       height: 200px;
       flex-shrink: 0;
   }
   
   @media (max-width: 768px) {
   
       .products-list-view .product-card {
           flex-direction: column;
       }
   
       .products-list-view .product-img {
           width: 100%;
           height: auto;
       }
   }
   
   .btn-sm.rounded-circle {
       width: 34px;
       height: 34px;
       padding: 0;
       display: flex;
       align-items: center;
       justify-content: center;
   }