/* =========================================================================
   EXCHANGE GADGETS — REDESIGN THEME
   A Cashify (trust, instant-quote, sell-flow) x Amazon (dense grid, deal
   badges, ratings, buy-box) hybrid visual system.
   This file is purely presentational: it only styles NEW markup/classes
   (prefixed "eg-") added during the redesign. It never touches PHP logic.
   ========================================================================= */

   @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

   :root {
       /* Palette */
       --eg-navy: #0b1f3d; /* header / footer / trust surfaces */
       --eg-navy-light: #142e57;
       --eg-blue: #2557d6; /* primary brand / links / active */
       --eg-blue-dark: #1a3fa0;
       --eg-teal: #00b67a; /* "sell" / success actions (Cashify) */
       --eg-teal-dark: #049566;
       --eg-orange: #ff7a00; /* "buy" CTAs / deal badges (Amazon) */
       --eg-orange-dark: #e56800;
       --eg-star: #ffa41c; /* rating stars */
       --eg-danger: #e5484d;
   
       --eg-bg: #f3f5f9;
       --eg-surface: #ffffff;
       --eg-border: #e3e7ef;
       --eg-text: #101828;
       --eg-text-muted: #64748b;
       --eg-text-soft: #94a3b8;
   
       --eg-radius-sm: 8px;
       --eg-radius-md: 14px;
       --eg-radius-lg: 20px;
       --eg-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
       --eg-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.1);
       --eg-shadow-lg: 0 20px 48px rgba(16, 24, 40, 0.16);
   
       --eg-font-display: "Poppins", "Segoe UI", sans-serif;
       --eg-font-body: "Inter", "Segoe UI", sans-serif;
   }
   
   /* ---------- Base ---------- */
   .eg-scope,
   .eg-scope * {
       box-sizing: border-box;
   }
   body {
       font-family: var(--eg-font-body);
       color: var(--eg-text);
       background: var(--eg-bg);
   }
   .eg-container {
       width: 100%;
       max-width: 1280px;
       margin: 0 auto;
       padding: 0 20px;
   }
   .eg-section {
       padding: 56px 0;
   }
   .eg-section--tight {
       padding: 36px 0;
   }
   .eg-h1,
   .eg-h2,
   .eg-h3 {
       font-family: var(--eg-font-display);
       color: var(--eg-navy);
       font-weight: 700;
       margin: 0;
   }
   .eg-h2 {
       font-size: 28px;
       letter-spacing: -0.01em;
   }
   .eg-eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       font-size: 12.5px;
       font-weight: 700;
       letter-spacing: 0.06em;
       text-transform: uppercase;
       color: var(--eg-blue-dark);
       background: #1a3fa02b;
       padding: 5px 12px;
       border-radius: 999px;
   }
   .eg-section-head {
       display: flex;
       align-items: flex-end;
       justify-content: space-between;
       gap: 16px;
       margin-bottom: 24px;
       flex-wrap: wrap;
   }
   .eg-section-head p {
       color: var(--eg-text-muted);
       margin: 6px 0 0;
       font-size: 14.5px;
   }
   .eg-link-all {
       font-weight: 600;
       font-size: 14px;
       color: var(--eg-blue);
       text-decoration: none;
       display: inline-flex;
       align-items: center;
       gap: 6px;
       white-space: nowrap;
   }
   .eg-link-all:hover {
       color: var(--eg-blue-dark);
   }
   
   /* ---------- Buttons ---------- */
   .eg-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       border-radius: 10px;
       font-weight: 600;
       font-size: 14.5px;
       padding: 12px 22px;
       border: 1px solid transparent;
       cursor: pointer;
       text-decoration: none;
       transition: 0.18s ease;
       line-height: 1.2;
   }
   .eg-btn-sell {
       background: var(--eg-orange);
       color: #fff;
       box-shadow: 0 6px 16px rgba(0, 182, 122, 0.28);
   }
   .eg-btn-sell:hover {
       background: var(--eg-orange-dark);
       color: #fff;
       transform: translateY(-1px);
   }
   .eg-btn-buy {
       background: var(--eg-blue);
       color: #fff;
       box-shadow: 0 6px 16px rgba(255, 122, 0, 0.26);
   }
   .eg-btn-buy:hover {
       background: var(--eg-blue-dark);
       color: #fff;
       transform: translateY(-1px);
   }
   .eg-btn-outline {
       background: #fff;
       color: var(--eg-navy);
       border-color: var(--eg-border);
   }
   .eg-btn-outline:hover {
       border-color: var(--eg-navy);
       color: var(--eg-navy);
   }
   .eg-btn-ghost-light {
       background: rgba(255, 255, 255, 0.12);
       color: #fff;
       border-color: rgba(255, 255, 255, 0.35);
   }
   .eg-btn-ghost-light:hover {
       background: rgba(255, 255, 255, 0.2);
       color: #fff;
   }
   .eg-btn-block {
       width: 100%;
   }
   .eg-btn-lg {
       padding: 14px 28px;
       font-size: 15.5px;
   }
   
   /* =========================================================================
      HEADER
      ========================================================================= */
   .eg-topbar {
       background: var(--eg-navy);
       color: #cfd8ea;
       font-size: 13px;
   }
   .eg-topbar .eg-container {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding-top: 7px;
       padding-bottom: 7px;
       gap: 16px;
   }
   .eg-topbar-msg {
       display: flex;
       align-items: center;
       gap: 8px;
       overflow: hidden;
       white-space: nowrap;
   }
   .eg-topbar-links {
       display: flex;
       align-items: center;
       gap: 18px;
       list-style: none;
       margin: 0;
       padding: 0;
   }
   .eg-topbar-links a {
       color: #cfd8ea;
       text-decoration: none;
   }
   .eg-topbar-links a:hover {
       color: #fff;
   }
   
   .eg-header {
       background: #fff;
       border-bottom: 1px solid var(--eg-border);
       position: sticky;
       top: 0;
       z-index: 1000;
   }
   .eg-header-row {
       display: flex;
       align-items: center;
       gap: 22px;
       padding: 14px 0;
   }
   .eg-logo img {
       height: 90px;
       width: auto;
       display: block;
   }
   .eg-search {
       flex: 1;
       max-width: 640px;
   }
   .eg-search form {
       display: flex;
       align-items: center;
       background: var(--eg-bg);
       border: 1.5px solid var(--eg-border);
       border-radius: 10px;
       padding: 2px;
   }
   .eg-search input {
       flex: 1;
       border: 0;
       background: transparent;
       padding: 11px 14px;
       font-size: 14.5px;
       outline: none;
       color: var(--eg-text);
   }
   .eg-search button {
       border: 0;
       background: var(--eg-navy);
       color: #fff;
       width: 42px;
       height: 38px;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       font-size: 15px;
   }
   .eg-search button:hover {
       background: var(--eg-blue);
   }
   .eg-header-actions {
       display: flex;
       align-items: center;
       gap: 10px;
   }
   .eg-icon-btn {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 2px;
       color: var(--eg-navy);
       text-decoration: none;
       font-size: 11px;
       font-weight: 600;
       padding: 6px 10px;
       border-radius: 8px;
       position: relative;
       background: none;
       border: none;
       cursor: pointer;
   }
   .eg-icon-btn:hover {
       background: var(--eg-bg);
       color: var(--eg-blue);
   }
   .eg-icon-btn i,
   .eg-icon-btn svg {
       font-size: 19px;
   }
   .eg-icon-btn .eg-badge {
       position: absolute;
       top: 2px;
       right: 2px;
       background: var(--eg-blue);
       color: #fff;
       font-size: 9.5px;
       font-weight: 700;
       min-width: 15px;
       height: 15px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .eg-navbar {
       background: var(--eg-navy);
   }
   .eg-navbar .eg-container {
       display: flex;
       align-items: center;
       gap: 4px;
   }
   .eg-nav-list {
       display: flex;
       align-items: center;
       list-style: none;
       margin: 0;
       padding: 0;
   }
   .eg-nav-list > li {
       position: relative;
   }
   .eg-nav-list > li > a {
       display: block;
       padding: 13px 16px;
       color: #e7ecf6;
       font-weight: 600;
       font-size: 14px;
       text-decoration: none;
       white-space: nowrap;
   }
   .eg-nav-list > li > a:hover,
   .eg-nav-list > li.active > a {
       color: #fff;
       background: rgba(255, 255, 255, 0.08);
   }
   .eg-nav-list .eg-dropdown {
       position: absolute;
       top: 100%;
       left: 0;
       background: #fff;
       min-width: 230px;
       border-radius: 0 0 10px 10px;
       box-shadow: var(--eg-shadow-lg);
       list-style: none;
       margin: 0;
       padding: 8px;
       opacity: 0;
       visibility: hidden;
       transform: translateY(6px);
       transition: 0.15s ease;
       z-index: 50;
   }
   .eg-nav-list li:hover .eg-dropdown {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }
   .eg-nav-list .eg-dropdown a {
       display: block;
       padding: 9px 12px;
       border-radius: 8px;
       color: var(--eg-text);
       font-size: 14px;
       font-weight: 500;
       text-decoration: none;
   }
   .eg-nav-list .eg-dropdown a:hover {
       background: var(--eg-bg);
       color: var(--eg-blue);
   }
   .eg-nav-sell {
       margin-left: auto;
       padding: 10px 18px !important;
       background: var(--eg-orange);
       border-radius: 8px;
       color: #fff !important;
   }
   .eg-nav-sell:hover {
       background: var(--eg-orange-dark) !important;
   }
   
   .eg-mobile-toggle {
       display: none;
   }
   .eg-mobile-nav {
       display: none;
       border-bottom: 1px solid var(--eg-border);
   }
   .eg-mobile-nav.open {
       display: block;
   }
   body.eg-nav-locked {
       overflow: hidden;
   }
   @media (max-width: 992px) {
       .eg-header-actions .eg-icon-btn span {
           display: none;
       }
   }
   .eg-user-chip {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 8px 12px !important;
       border-radius: 999px;
       background: var(--eg-bg);
       color: var(--eg-navy) !important;
       font-weight: 600 !important;
   }
   /* Note: this menu's open/close is handled by Bootstrap's dropdown JS (data-bs-toggle) via
      the .dropdown / .dropdown-menu / .show classes it already has — we only add cosmetics here. */
   .eg-user-menu {
       list-style: none;
       margin-top: 8px !important;
       padding: 8px;
       border-radius: 12px !important;
       box-shadow: var(--eg-shadow-lg);
       min-width: 190px;
       border: 1px solid var(--eg-border) !important;
   }
   .eg-user-wrap {
       position: relative;
   }
   .eg-user-menu a,
   .eg-user-menu button {
       display: flex;
       align-items: center;
       gap: 8px;
       width: 100%;
       text-align: left;
       padding: 9px 12px;
       border-radius: 8px;
       border: 0;
       background: none;
       color: var(--eg-text);
       font-size: 14px;
       font-weight: 500;
       text-decoration: none;
       cursor: pointer;
   }
   .eg-user-menu a:hover,
   .eg-user-menu button:hover {
       background: var(--eg-bg);
       color: var(--eg-blue);
   }
   .eg-user-menu hr {
       margin: 6px 0;
       border-color: var(--eg-border);
   }
   .eg-user-menu .text-danger {
       color: var(--eg-danger) !important;
   }
   
   /* =========================================================================
      HERO / QUOTE STRIP (signature element)
      ========================================================================= */
   .eg-hero {
       background: linear-gradient(135deg, var(--eg-navy) 0%, #16326b 60%, var(--eg-blue-dark) 100%);
       position: relative;
       overflow: hidden;
       color: #fff;
   }
   .eg-hero::after {
       content: "";
       position: absolute;
       inset: 0;
       background: radial-gradient(600px 300px at 85% 20%, rgba(0, 182, 122, 0.25), transparent 70%);
       pointer-events: none;
   }
   .eg-hero .eg-container {
       position: relative;
       z-index: 1;
       padding-top: 56px;
       padding-bottom: 40px;
   }
   .eg-hero-grid {
       display: grid;
       grid-template-columns: 1.15fr 0.85fr;
       gap: 40px;
       align-items: center;
   }
   .eg-hero-eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(255, 255, 255, 0.18);
       padding: 6px 14px;
       border-radius: 999px;
       font-size: 12.5px;
       font-weight: 600;
       letter-spacing: 0.03em;
   }
   .eg-hero h1 {
       font-family: var(--eg-font-display);
       font-size: 44px;
       line-height: 1.12;
       font-weight: 800;
       margin: 18px 0 14px;
   }
   .eg-hero h1 span {
       color: #ff7a00;
   }
   .eg-hero p {
       font-size: 16px;
       color: #c6d0e6;
       max-width: 480px;
       margin: 0 0 26px;
   }
   .eg-hero-ctas {
       display: flex;
       gap: 12px;
       flex-wrap: wrap;
   }
   .eg-trust-row {
       display: flex;
       gap: 28px;
       margin-top: 34px;
       flex-wrap: wrap;
   }
   .eg-trust-row div {
       display: flex;
       flex-direction: column;
   }
   .eg-trust-row strong {
       font-family: var(--eg-font-display);
       font-size: 22px;
   }
   .eg-trust-row span {
       font-size: 12.5px;
       color: #9fb0ce;
   }
   
   .eg-quote-card {
       background: #fff;
       border-radius: var(--eg-radius-lg);
       padding: 26px;
       box-shadow: var(--eg-shadow-lg);
       color: var(--eg-text);
   }
   .eg-quote-card h4 {
       font-family: var(--eg-font-display);
       font-size: 18px;
       margin: 0 0 4px;
       color: var(--eg-navy);
   }
   .eg-quote-card > p {
       font-size: 13px;
       color: var(--eg-text-muted);
       margin: 0 0 18px;
   }
   .eg-quote-steps {
       display: flex;
       justify-content: space-between;
       margin-bottom: 20px;
   }
   .eg-quote-steps li {
       list-style: none;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 6px;
       flex: 1;
       text-align: center;
       position: relative;
       font-size: 11.5px;
       font-weight: 600;
       color: var(--eg-text-soft);
   }
   .eg-quote-steps li:not(:last-child)::after {
       content: "";
       position: absolute;
       top: 15px;
       left: 60%;
       width: 80%;
       height: 2px;
       background: var(--eg-border);
       z-index: 0;
   }
   .eg-quote-steps li.done:not(:last-child)::after {
       background: var(--eg-orange);
   }
   .eg-quote-steps .eg-step-num {
       width: 30px;
       height: 30px;
       border-radius: 50%;
       background: var(--eg-bg);
       border: 2px solid var(--eg-border);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 13px;
       color: var(--eg-text-muted);
       position: relative;
       z-index: 1;
   }
   .eg-quote-steps li.done .eg-step-num {
       background: var(--eg-orange);
       border-color: var(--eg-orange);
       color: #fff;
   }
   .eg-quote-steps li.active .eg-step-num {
       border-color: var(--eg-orange);
       color: var(--eg-orange);
       background: #fff;
   }
   .eg-quote-card select,
   .eg-quote-card input {
       width: 100%;
       border: 1.5px solid var(--eg-border);
       border-radius: 9px;
       padding: 11px 12px;
       font-size: 14px;
       margin-bottom: 12px;
       color: var(--eg-text);
       background: #fff;
   }
   .eg-quote-card label {
       font-size: 12.5px;
       font-weight: 600;
       color: var(--eg-text-muted);
       margin-bottom: 6px;
       display: block;
   }
   
   /* =========================================================================
      CATEGORY / BRAND STRIP
      ========================================================================= */
   .eg-cat-grid {
       display: grid;
       grid-template-columns: repeat(6, 1fr);
       gap: 14px;
   }
   .eg-cat-card {
       background: #fff;
       border: 1px solid var(--eg-border);
       border-radius: var(--eg-radius-md);
       padding: 18px 10px;
       text-align: center;
       text-decoration: none;
       color: var(--eg-text);
       transition: 0.18s ease;
   }
   .eg-cat-card:hover {
       transform: translateY(-4px);
       box-shadow: var(--eg-shadow-md);
       border-color: transparent;
       color: var(--eg-blue);
   }
   .eg-cat-card img {
       height: 44px;
       width: auto;
       margin: 0 auto 10px;
       object-fit: contain;
   }
   .eg-cat-card span {
       font-size: 13px;
       font-weight: 600;
       display: block;
   }
   
   /* =========================================================================
      PRODUCT GRID (Amazon-style cards)
      ========================================================================= */
   .eg-product-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 18px;
   }
   .eg-pcard {
       background: #fff;
       border: 1px solid var(--eg-border);
       border-radius: var(--eg-radius-md);
       overflow: hidden;
       text-decoration: none;
       color: var(--eg-text);
       display: flex;
       flex-direction: column;
       transition: 0.18s ease;
       position: relative;
   }
   .eg-pcard:hover {
       box-shadow: var(--eg-shadow-md);
       transform: translateY(-3px);
       border-color: transparent;
   }
   .eg-pcard-badge {
       position: absolute;
       top: 10px;
       left: 10px;
       background: var(--eg-orange);
       color: #fff;
       font-size: 11px;
       font-weight: 700;
       padding: 4px 9px;
       border-radius: 6px;
       z-index: 2;
   }
   .eg-pcard-badge.eg-badge-deal {
       background: var(--eg-blue);
   }
   .eg-pcard-wishlist {
       position: absolute;
       top: 8px;
       right: 8px;
       width: 32px;
       height: 32px;
       border-radius: 50%;
       background: #fff;
       border: 1px solid var(--eg-border);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 2;
       color: var(--eg-text-muted);
       cursor: pointer;
   }
   .eg-pcard-wishlist:hover {
       color: var(--eg-danger);
       border-color: var(--eg-danger);
   }
   .eg-pcard-img {
       background: #f7f8fb;
       aspect-ratio: 1/1;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 22px;
   }
   .eg-pcard-img img {
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
       mix-blend-mode: multiply;
   }
   .eg-pcard-body {
       padding: 14px 16px 16px;
       display: flex;
       flex-direction: column;
       gap: 6px;
       flex: 1;
   }
   .eg-pcard-brand {
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.04em;
       text-transform: uppercase;
       color: var(--eg-text-soft);
   }
   .eg-pcard-title {
       font-size: 14.5px;
       font-weight: 600;
       color: var(--eg-text);
       line-height: 1.35;
       display: -webkit-box;
       -webkit-line-clamp: 4;
       -webkit-box-orient: vertical;
       overflow: hidden;
       min-height: 39px;
   }
   .eg-pcard-rating {
       display: flex;
       align-items: center;
       gap: 6px;
       font-size: 12.5px;
       color: var(--eg-text-muted);
   }
   .eg-pcard-rating .eg-stars {
       color: var(--eg-star);
       letter-spacing: 1px;
       font-size: 12px;
   }
   .eg-pcard-price-row {
       display: flex;
       align-items: baseline;
       gap: 8px;
       margin-top: 2px;
   }
   .eg-price {
       font-family: var(--eg-font-display);
       font-size: 18px;
       font-weight: 700;
       color: var(--eg-navy);
   }
   .eg-price-strike {
       font-size: 12.5px;
       color: var(--eg-text-soft);
       text-decoration: line-through;
   }
   .eg-price-off {
       font-size: 12px;
       font-weight: 700;
       color: var(--eg-orange-dark);
   }
   .eg-pcard-cta {
       margin-top: auto;
       padding-top: 10px;
   }
   .eg-pcard-cta .eg-btn {
       width: 100%;
       padding: 9px;
       font-size: 13.5px;
   }
   
   /* =========================================================================
      SELL-YOUR-DEVICE STRIP (Cashify-style banner)
      ========================================================================= */
   .eg-sell-strip {
       background: linear-gradient(135deg, var(--eg-navy) 0%, #16326b 60%, var(--eg-blue-dark) 100%);
       border-radius: var(--eg-radius-lg);
       padding: 34px 40px;
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 24px;
       flex-wrap: wrap;
   }
   .eg-sell-strip h3 {
       font-family: var(--eg-font-display);
       font-size: 24px;
       margin: 0 0 6px;
   }
   .eg-sell-strip p {
       margin: 0;
       color: #dff9ee;
       font-size: 14.5px;
       max-width: 520px;
   }
   
   /* =========================================================================
      WHY CHOOSE / TRUST FEATURES
      ========================================================================= */
   .eg-feature-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 20px;
   }
   .eg-feature-card {
       background: #fff;
       border: 1px solid var(--eg-border);
       border-radius: var(--eg-radius-md);
       padding: 24px 20px;
       text-align: center;
   }
   .eg-feature-icon {
       width: 52px;
       height: 52px;
       border-radius: 14px;
       background: #eaf1ff;
       color: var(--eg-blue);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 22px;
       margin: 0 auto 14px;
   }
   .eg-feature-card h5 {
       font-family: var(--eg-font-display);
       font-size: 15.5px;
       margin: 0 0 6px;
       color: var(--eg-navy);
   }
   .eg-feature-card p {
       font-size: 13px;
       color: var(--eg-text-muted);
       margin: 0;
       line-height: 1.5;
   }
   
   /* =========================================================================
      TESTIMONIALS
      ========================================================================= */
   .eg-testi-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 18px;
   }
   .eg-testi-card {
       background: #fff;
       border: 1px solid var(--eg-border);
       border-radius: var(--eg-radius-md);
       padding: 22px;
   }
   .eg-testi-card .eg-stars {
       color: var(--eg-star);
       font-size: 13px;
       letter-spacing: 2px;
   }
   .eg-testi-card p {
       font-size: 14px;
       color: var(--eg-text);
       line-height: 1.6;
       margin: 10px 0 16px;
   }
   .eg-testi-user {
       display: flex;
       align-items: center;
       gap: 10px;
   }
   .eg-testi-user img {
       width: 38px;
       height: 38px;
       border-radius: 50%;
       object-fit: cover;
   }
   .eg-testi-user strong {
       font-size: 13.5px;
       display: block;
   }
   .eg-testi-user span {
       font-size: 12px;
       color: var(--eg-text-muted);
   }
   
   /* =========================================================================
      PRODUCT LISTING PAGE
      ========================================================================= */
   .eg-listing-head {
       background: #fff;
       border-bottom: 1px solid var(--eg-border);
       padding: 16px 0;
   }
   .eg-breadcrumb {
       font-size: 13px;
       color: var(--eg-text-muted);
   }
   .eg-breadcrumb a {
       color: var(--eg-text-muted);
       text-decoration: none;
   }
   .eg-breadcrumb a:hover {
       color: var(--eg-blue);
   }
   .eg-listing-layout {
       display: grid;
       grid-template-columns: 260px 1fr;
       gap: 22px;
       align-items: start;
   }
   .eg-filter-panel {
       background: #fff;
       border: 1px solid var(--eg-border);
       border-radius: var(--eg-radius-md);
       padding: 18px;
       position: sticky;
       top: 90px;
   }
   .eg-filter-panel h6 {
       font-family: var(--eg-font-display);
       font-size: 13.5px;
       text-transform: uppercase;
       letter-spacing: 0.04em;
       color: var(--eg-navy);
       margin: 0 0 10px;
       padding-bottom: 10px;
       border-bottom: 1px solid var(--eg-border);
   }
   .eg-filter-group {
       margin-bottom: 18px;
   }
   .eg-filter-group label {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 13.5px;
       color: var(--eg-text);
       padding: 5px 0;
       cursor: pointer;
   }
   .eg-toolbar {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 16px;
       flex-wrap: wrap;
       gap: 10px;
   }
   .eg-toolbar select {
       border: 1.5px solid var(--eg-border);
       border-radius: 8px;
       padding: 8px 12px;
       font-size: 13.5px;
   }
   .eg-result-count {
       font-size: 13.5px;
       color: var(--eg-text-muted);
   }
   
   /* =========================================================================
      PRODUCT DETAIL PAGE
      ========================================================================= */
   .eg-pd-layout {
       display: grid;
       grid-template-columns: 0.85fr 1.15fr;
       gap: 40px;
   }
   .eg-pd-gallery-main {
       background: #f7f8fb;
       border: 1px solid var(--eg-border);
       border-radius: var(--eg-radius-md);
       aspect-ratio: 1/1;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 30px;
       margin-bottom: 12px;
   }
   .eg-pd-gallery-main img {
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
   }
   .eg-pd-thumbs {
       display: flex;
       gap: 10px;
   }
   .eg-pd-thumbs button {
       width: 64px;
       height: 64px;
       border-radius: 8px;
       border: 1.5px solid var(--eg-border);
       background: #f7f8fb;
       padding: 6px;
       cursor: pointer;
   }
   .eg-pd-thumbs button.active {
       border-color: var(--eg-blue);
   }
   .eg-pd-thumbs img {
       width: 100%;
       height: 100%;
       object-fit: contain;
   }
   .eg-pd-title {
       font-family: var(--eg-font-display);
       font-size: 24px;
       font-weight: 500;
       color: var(--eg-navy);
       margin: 0 0 8px;
   }
   .eg-pd-sub {
       color: var(--eg-text-muted);
       font-size: 13.5px;
       margin-bottom: 12px;
   }
   .eg-pd-rating {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: #f7f8fb;
       border-radius: 8px;
       padding: 6px 10px;
       font-size: 13px;
       margin-bottom: 16px;
   }
   .eg-pd-price-block {
       border-top: 1px solid var(--eg-border);
       border-bottom: 1px solid var(--eg-border);
       padding: 18px 0;
       margin: 6px 0 18px;
   }
   .eg-pd-price-row {
       display: flex;
       align-items: baseline;
       gap: 12px;
   }
   .eg-pd-price {
       font-family: var(--eg-font-display);
       font-size: 32px;
       font-weight: 600;
       color: var(--eg-navy);
   }
   .eg-pd-variants {
       margin: 16px 0;
   }
   .eg-pd-variants h6 {
       font-size: 13px;
       font-weight: 700;
       margin: 0 0 8px;
       color: var(--eg-text);
   }
   .eg-pd-swatches {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
   }
   .eg-pd-swatches button {
       border: 1.5px solid var(--eg-border);
       background: #fff;
       border-radius: 8px;
       padding: 1px 14px;
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       color: var(--eg-text);
   }
   .eg-pd-swatches button.active {
       border-color: var(--eg-blue);
       color: var(--eg-blue);
       background: #eaf1ff;
   }
   .eg-pd-ctas {
       display: flex;
       gap: 12px;
       margin-top: 20px;
   }
   .eg-pd-ctas .eg-btn {
       flex: 1;
       padding: 14px;
   }
   .eg-pd-trust {
       display: flex;
       gap: 18px;
       margin-top: 22px;
       flex-wrap: wrap;
   }
   .eg-pd-trust div {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 12.5px;
       color: var(--eg-text-muted);
   }
   .eg-pd-tabs {
       display: flex;
       gap: 26px;
       border-bottom: 1.5px solid var(--eg-border);
       margin: 44px 0 20px;
   }
   .eg-pd-tabs button {
       background: none;
       border: 0;
       padding: 10px 2px;
       font-weight: 600;
       font-size: 14.5px;
       color: var(--eg-text-muted);
       cursor: pointer;
       border-bottom: 2.5px solid transparent;
       margin-bottom: -2px;
   }
   .eg-pd-tabs button.active {
       color: var(--eg-navy);
       border-color: var(--eg-blue);
   }
   .eg-spec-table {
       width: 100%;
       border-collapse: collapse;
       font-size: 14px;
   }
   .eg-spec-table tr {
       border-bottom: 1px solid var(--eg-border);
   }
   .eg-spec-table td {
       padding: 11px 4px;
   }
   .eg-spec-table td:first-child {
       color: var(--eg-text-muted);
       width: 220px;
   }
   .eg-spec-table td:last-child {
       font-weight: 500;
       color: var(--eg-text);
   }
   
   /* =========================================================================
      FOOTER
      ========================================================================= */
   .eg-footer {
       background: var(--eg-navy);
       color: #b9c4dc;
       padding-top: 48px;
   }
   .eg-footer h6 {
       color: #fff;
       font-family: var(--eg-font-display);
       font-size: 14.5px;
       margin: 0 0 16px;
   }
   .eg-footer-grid {
       display: grid;
       grid-template-columns: 1.4fr repeat(4, 1fr);
       gap: 28px;
       padding-bottom: 36px;
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }
   .eg-footer-grid ul {
       list-style: none;
       margin: 0;
       padding: 0;
       display: flex;
       flex-direction: column;
       gap: 9px;
   }
   .eg-footer-grid a {
       color: #b9c4dc;
       text-decoration: none;
       font-size: 13.5px;
   }
   .eg-footer-grid a:hover {
       color: #fff;
   }
   .eg-footer-about p {
       font-size: 13.5px;
       line-height: 1.7;
       color: #9fadc9;
       max-width: 280px;
   }
   .eg-footer-social {
       display: flex;
       gap: 10px;
       margin-top: 16px;
   }
   .eg-footer-social a {
       width: 34px;
       height: 34px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.08);
       display: flex;
       align-items: center;
       justify-content: center;
       color: #fff;
   }
   .eg-footer-social a:hover {
       background: var(--eg-orange);
   }
   .eg-footer-bottom {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 18px 0;
       font-size: 12.5px;
       color: #8393b3;
       flex-wrap: wrap;
       gap: 8px;
   }
   .eg-footer-bottom a {
       color: #8393b3;
   }
   
   /* ---------- Back to top ---------- */
   .eg-back-top {
       position: fixed;
       bottom: 26px;
       right: 26px;
       width: 44px;
       height: 44px;
       border-radius: 50%;
       background: var(--eg-navy);
       color: #fff;
       border: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
       cursor: pointer;
       box-shadow: var(--eg-shadow-md);
       opacity: 0;
       visibility: hidden;
       transform: translateY(10px);
       transition: 0.2s ease;
       z-index: 900;
   }
   .eg-back-top.show {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }
   .eg-back-top:hover {
       background: var(--eg-blue);
   }
   
   .eg-pcard-wishlist.active {
       color: var(--eg-danger);
       border-color: var(--eg-danger);
   }
   .eg-pcard-wishlist.active i::before {
       content: "\f415";
   } /* bi-heart-fill */
   @media (max-width: 992px) {
       .eg-filter-panel {
           display: none;
       }
       .eg-filter-panel.eg-filter-open {
           display: block;
       }
   }
   
   .fav.active {
       color: var(--eg-danger);
       border-color: var(--eg-danger);
   }
   .fav.active i::before {
       content: "\f415";
   } /* bi-heart-fill */
   
   /* =========================================================================
      AUTH / FORM PAGES
      ========================================================================= */
   .eg-auth-wrap {
       display: flex;
       justify-content: center;
       padding: 20px 0;
   }
   .eg-auth-card {
       width: 100%;
       max-width: 480px;
       background: #fff;
       border: 1px solid var(--eg-border);
       border-radius: var(--eg-radius-lg);
       box-shadow: var(--eg-shadow-md);
       padding: 36px 34px;
   }
   .eg-auth-card.eg-auth-wide {
       max-width: 640px;
   }
   .eg-auth-head {
       text-align: center;
       margin-bottom: 22px;
   }
   .eg-auth-head h4 {
       font-family: var(--eg-font-display);
       font-size: 22px;
       color: var(--eg-navy);
       margin: 0 0 6px;
       font-weight: 700;
   }
   .eg-auth-head p {
       color: var(--eg-text-muted);
       font-size: 13.5px;
       margin: 0;
   }
   .eg-form-group {
       margin-bottom: 18px;
   }
   .eg-form-group label {
       display: block;
       font-size: 13px;
       font-weight: 600;
       color: var(--eg-text);
       margin-bottom: 7px;
   }
   .eg-input-wrapper {
       position: relative;
   }
   .eg-input-wrapper .eg-input-icon {
       position: absolute;
       left: 14px;
       top: 50%;
       transform: translateY(-50%);
       color: var(--eg-text-soft);
       font-size: 14px;
   }
   .eg-input-wrapper .eg-input-end-icon {
       position: absolute;
       right: 14px;
       top: 50%;
       transform: translateY(-50%);
       color: var(--eg-text-soft);
       cursor: pointer;
       font-size: 14px;
   }
   .eg-form-control {
       width: 100%;
       border: 1.5px solid var(--eg-border);
       border-radius: 10px;
       padding: 12px 14px 12px 40px;
       font-size: 14.5px;
       color: var(--eg-text);
       transition: 0.15s ease;
       background: #fff;
   }
   .eg-form-control.eg-no-icon {
       padding-left: 14px;
   }
   .eg-form-control:focus {
       outline: none;
       border-color: var(--eg-blue);
       box-shadow: 0 0 0 3px rgba(37, 87, 214, 0.12);
   }
   .eg-form-control.is-invalid {
       border-color: var(--eg-danger);
   }
   .eg-error-msg {
       display: block;
       color: var(--eg-danger);
       font-size: 12px;
       margin-top: 5px;
   }
   .eg-auth-alert {
       border-radius: 10px;
       padding: 12px 16px;
       font-size: 13.5px;
       margin-bottom: 18px;
   }
   .eg-auth-alert.alert-success {
       background: #e7f9f1;
       color: var(--eg-orange-dark);
       border: 1px solid #b9efd9;
   }
   .eg-auth-alert.alert-danger {
       background: #fdecec;
       color: var(--eg-danger);
       border: 1px solid #f6c6c7;
   }
   .eg-auth-foot {
       text-align: center;
       font-size: 13.5px;
       color: var(--eg-text-muted);
       border-top: 1px solid var(--eg-border);
       padding-top: 18px;
       margin-top: 6px;
   }
   .eg-auth-foot a {
       color: var(--eg-blue);
       font-weight: 600;
       text-decoration: none;
   }
   .eg-otp-row {
       display: flex;
       gap: 10px;
       justify-content: center;
       margin: 8px 0 22px;
   }
   .eg-otp-row input {
       width: 48px;
       height: 54px;
       text-align: center;
       font-size: 20px;
       font-weight: 700;
       border: 1.5px solid var(--eg-border);
       border-radius: 10px;
   }
   .eg-otp-row input:focus {
       outline: none;
       border-color: var(--eg-blue);
   }
   
   /* =========================================================================
      RESPONSIVE
      ========================================================================= */
   @media (max-width: 1200px) {
       .eg-product-grid {
           grid-template-columns: repeat(3, 1fr);
       }
       .eg-cat-grid {
           grid-template-columns: repeat(4, 1fr);
       }
       .eg-feature-grid,
       .eg-testi-grid {
           grid-template-columns: repeat(2, 1fr);
       }
       .eg-footer-grid {
           grid-template-columns: 1fr 1fr;
       }
   }
   @media (max-width: 992px) {
       .eg-hero-grid {
           grid-template-columns: 1fr;
       }
       .eg-hero h1 {
           font-size: 34px;
       }
       .eg-navbar {
           display: none;
       }
       .eg-search {
           display: none;
       }
       .eg-mobile-toggle {
           display: flex;
       }
       .eg-pd-layout {
           grid-template-columns: 1fr;
       }
       .eg-listing-layout {
           grid-template-columns: 1fr;
       }
       .eg-filter-panel {
           position: static;
       }
   }
   @media (max-width: 768px) {
       .eg-product-grid {
           grid-template-columns: repeat(2, 1fr);
       }
       .eg-cat-grid {
           grid-template-columns: repeat(3, 1fr);
       }
       .eg-feature-grid,
       .eg-testi-grid {
           grid-template-columns: 1fr;
       }
       .eg-footer-grid {
           grid-template-columns: 1fr 1fr;
       }
       .eg-sell-strip {
           text-align: center;
           justify-content: center;
       }
       .eg-topbar-msg {
           display: none;
       }
   }
   @media (max-width: 520px) {
       .eg-product-grid {
           grid-template-columns: 1fr 1fr;
           gap: 10px;
       }
       .eg-cat-grid {
           grid-template-columns: repeat(3, 1fr);
           gap: 8px;
       }
       .eg-hero h1 {
           font-size: 27px;
       }
       .eg-footer-grid {
           grid-template-columns: 1fr;
       }
   }
   
   /* ---------------- custome CSS add ---------------- */
   .eg-product-grid3 {
       display: grid;
       grid-template-columns: repeat(3, 1fr) !important;
       gap: 18px;
   }
   .eg-pcard-rating-row {
       display: flex;
       align-items: center;
       gap: 6px;
   }
   
   .eg-pcard-rating {
       display: inline-flex !important;
       align-items: center;
       gap: 4px;
       width: fit-content !important;
       background: #198754;
       color: #fff;
       padding: 1px 7px;
       border-radius: 4px;
       font-size: 13px;
       font-weight: 600;
       line-height: 1.5;
   }
   
   .eg-rating-star {
       font-size: 11px;
       color: #fff;
   }
   
   .eg-review-count {
       font-size: 12px;
       color: #999;
       font-weight: 400;
   }