:root{
  --blue: #197FE6;
  --blue-dark: #14528e;
  --navy: #0c1524;
  --gray-bg: #f3f5f8;
  --border: #e7eaef;
  --text-dark: #1a2233;
  --text-muted: #6b7688;
  --yellow: #ffc915;
  --radius: 10px;
   --abt-blue: #2563eb;
  --abt-blue-light: #eaf1ff;
  --abt-text-main: #1a2233;
  --abt-text-secondary: #6b7688;
  --abt-border: #e7eaef;
   --rs-blue: #2563eb;
  --rs-blue-dark: #1d4ed8;
  --rs-blue-light: #eaf1ff;
   --co-dark: #0f172a;
  --co-dark-hover: #1e293b;
  --co-blue: #2563eb;
  --co-text-main: #1a2233;
  --co-text-secondary: #8891a0;
  --co-border: #e7eaef;
  --co-green: #16a34a;
  --co-green-light: #e9f9ef;
  --co-yellow: #b45309;
  --co-yellow-light: #fef6e3;
  --rs-orange: #ea580c;
  --rs-orange-light: #fff1e8;
  --rs-text-main: #1a2233;
  --rs-text-secondary: #8891a0;
  --rs-border: #e7eaef;
  --rs-green: #16a34a;
  --ab-blue: #2563eb;
  --ab-blue-dark: #1d4ed8;
  --ab-blue-light: #eaf1ff;
  --ab-text-main: #1a2233;
  --ab-text-secondary: #8891a0;
  --ab-border: #e7eaef;
   --pm-blue: #2563eb;
  --pm-blue-dark: #1d4ed8;
  --pm-text-main: #1a2233;
  --pm-text-secondary: #8891a0;
  --pm-border: #e7eaef;
  --pm-green: #16a34a;
  --pd-blue: #197FE6;
  --pd-blue-dark: #14528e;
  --pd-text-main: #1a2233;
  --pd-text-secondary: #6b7688;
  --pd-border: #e7eaef;
  --pd-green: #17a34a;
  --pd-star: #ffb020;
    --ps-blue: #197FE6;
  --ps-text-main: #1a2233;
  --ps-text-secondary: #6b7688;
  --ps-border: #e7eaef;
      --oh-blue: #2563eb;
  --oh-blue-dark: #1d4ed8;
  --oh-blue-light: #eaf1ff;
  --oh-text-main: #1a2233;
  --oh-text-secondary: #8891a0;
  --oh-border: #eef1f6;
  --oh-green: #16a34a;
  --oh-green-light: #eafaf0;
  --font-body: 'Poppins', sans-serif;
  --font-display: 'Rajdhani', sans-serif;
   --primary-blue: #197FE6;
  --text-main: #1F2937;
  --text-secondary: #6b7688;
  --border-color: #e7eaef;
  --sale-badge-green: #1fa855;
  --stock-badge-red: #e53935;
  --accent-blue-bg: #e8f2ff;
  --light-grey-text-bg: #abb2ba; /* Grey background from original */
  --cart-btn-dark: #122245; /* Dark blue cart button from original */
  --card-shadow-default: 0 4px 15px rgba(0, 0, 0, 0.05);
  --card-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.1);
  --radius-product: 12px;
  --ae-blue: #2563eb;
  --ae-blue-dark: #1d4ed8;
  --ae-text-main: #1a2233;
  --ae-text-secondary: #6b7688;
  --ae-border: #e7eaef;
  --ae-star: #ffb020;
  --ae-lavender: #f1eefc;
  --ae-red: #ef4444;
}

*{box-sizing:border-box;}
body{
  font-family: var(--font-body);
  color: var(--text-dark);
  background:#fff;
  font-size:14px;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;}

/* ================= TOP BAR (white bg / black text / scrollable) ================= */
.top-bar{
  background: var(--ab-blue);
  color: var(--text-dark);
  font-size:12.5px;
  margin-bottom: 15px;
}
.top-bar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:36px;
  gap:16px;
}
.top-bar-marquee{
  display:flex;
  align-items:center;
  gap:28px;
  white-space:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;      /* Firefox */
  -ms-overflow-style:none;   /* old Edge/IE */
  flex:1 1 auto;
  min-width:0;
}
.top-bar-marquee::-webkit-scrollbar{display:none;} /* Chrome/Safari */
.top-bar-marquee li{
  display:flex;
  align-items:center;
  gap:6px;
  position:relative;
  padding-right:28px;
  color: #fff;
}
.top-bar-marquee li:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:14px;
  background: var(--border);
}
.top-bar-marquee i{color: #fff;font-size:13px;}

.top-bar-offer{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.offer-badge{
  color: #fff;
  font-weight:600;
  letter-spacing:.5px;
  font-size:11.5px;
  white-space:nowrap;
}
.countdown{
  background: var(--navy);
  color:#fff;
  font-weight:700;
  font-family: var(--font-display);
  font-size:13px;
  padding:3px 10px;
  border-radius:4px;
  letter-spacing:1px;
}
.close-btn{
  background:none;
  border:none;
  color: #fff;
  font-size:13px;
  cursor:pointer;
  padding:4px 6px;
  transition:.2s;
}
.close-btn:hover{color: var(--text-dark);}

/* ================= HEADER ================= */
.main-header{
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;
  align-items:center;
  gap: 209px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-img{
  height: 80px;
  width:auto;
  max-width:160px;
  object-fit:contain;
}

/* mobile icon buttons: hamburger + search toggle */
.mobile-nav-toggle,
.mobile-search-toggle{
  width:42px;height:42px;
  flex-shrink:0;
  border:1.5px solid var(--border);
  background:#fff;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;
  color:var(--text-dark);
  cursor:pointer;
  transition:.2s;
}
.mobile-nav-toggle:hover,
.mobile-search-toggle:hover{border-color:var(--blue);color:var(--blue);}

.search-bar{
  flex:1 1 auto;
  display:flex;
  align-items:stretch;
  max-width: 640px;
  height:44px;
  border:1.5px solid var(--border);
  border-radius:6px;
  overflow:hidden;
}
.search-category{
  border:none;
  border-right:1px solid var(--border);
  background:#f8f9fb;
  padding:0 12px;
  font-size:13px;
  color:var(--text-muted);
  max-width:150px;
}
.search-category:focus{outline:none;}
.search-input{
  flex:1;
  border:none;
  padding:0 14px;
  font-size:14px;
  min-width:0;
}
.search-input:focus{outline:none;}
.search-btn{
  border:none;
  background:var(--blue);
  color:#fff;
  width:52px;
  flex-shrink:0;
  font-size:16px;
  cursor:pointer;
  transition:.2s;
}
.search-btn:hover{background:var(--blue-dark);}

/* mobile search collapse panel */
.mobile-search-bar{
  max-width:100%;
  margin:10px 0 14px;
}

.header-icons{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
  margin-left:auto;
}
.icon-btn{
  position:relative;
  width:42px;height:42px;
  border-radius:50%;
  border:1.5px solid var(--border);
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  color:var(--text-dark);
  cursor:pointer;
  transition:.2s;
}
.icon-btn:hover{border-color:var(--blue);color:var(--blue);}
.icon-btn.cart-btn{background:var(--blue);color:#fff;border-color:var(--blue);}
.icon-btn.cart-btn:hover{background:var(--blue-dark);}
.badge-count{
  position:absolute;
  top:-4px;right:-4px;
  background:#ff4757;
  color:#fff;
  font-size:10px;
  font-weight:700;
  min-width:17px;height:17px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}

/* ================= CATEGORY NAV (desktop) ================= */
.category-nav{
  background: var(--ae-blue-dark);
  border-bottom:1px solid var(--border);
}
.category-nav-inner{
  display:flex;
  align-items:stretch;
}
.nav-tabs-custom{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
}
.nav-tabs-custom > li{position:relative;}
.tab-link{
  height:100%;
  background:none;
  border:none;
  padding:14px 20px;
  font-size:13.5px;
  color: #fff;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:.2s;
  width:100%;
  text-align:left;
}
.tab-link:hover, .tab-link.active{
  color: #000;
  border-bottom-color: #000;
}
.tab-link i{font-size:11px;}

.dropdown-tab{position:relative;}
.tab-dropdown{
  position:absolute;
  top:100%;left:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:6px;
  box-shadow:0 12px 28px rgba(20,30,50,.12);
  min-width:180px;
  padding:6px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:.18s;
  z-index:50;
}
.dropdown-tab:hover .tab-dropdown{
 position:absolute;
  opacity:1;visibility:visible;transform:translateY(0);
}
.tab-dropdown li a{
  display:block;
  padding:8px 12px;
  border-radius:5px;
  font-size:13px;
  color:var(--text-dark);
}
.tab-dropdown li a:hover{background:var(--gray-bg);color:var(--blue);}

/* ================= MOBILE LEFT DRAWER ================= */
.mobile-drawer{
  width:290px;
  max-width:85vw;
}
/* ==============================================
   MOBILE DRAWER ACCORDION SUBMENUS (FIXED STRUCTURE)
============================================== */

/* 1. <li> ko row ki jagah column banayein taaki submenu niche khule */
.mobile-drawer .sidebar-list li {
    flex-direction: column;
    align-items: stretch;
    padding: 0; /* Padding yahan se hatakar anchor me daalenge */
}

/* 2. Anchor tag ko wapas padding aur flex de dein taaki click area sahi rahe */
.mobile-drawer .sidebar-list li > a,
.mobile-drawer .sidebar-list li > span.drawer-heading {
    padding: 11px 12px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

/* 3. Submenu container ki styling fix */
.mobile-drawer .sidebar-submenu {
    position: static;
    width: 100%;
    min-width: unset;
    box-shadow: none;
    border: none;
    border-radius: 0;
    /* Thoda aur left indent de rahe hain taaki nested lage */
    padding: 5px 15px 15px 35px; 
    margin: 0;
    background-color: transparent; 
    display: none; /* JS isko flex karega */
    flex-direction: column;
    gap: 15px;
}

/* Jab click karne par 'open' class add hogi, tab show karo */
.mobile-drawer .has-submenu.open .sidebar-submenu {
    display: flex;
}

/* 4. Submenu ke andar ke links ki spacing */
.mobile-drawer .submenu-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-drawer .submenu-column .submenu-title {
    margin-bottom: 5px;
    font-size: 14px;
    color: var(--blue, #0d6efd); /* Title ko thoda highlight karne ke liye */
}

.mobile-drawer .submenu-column a {
    padding: 4px 0;
    font-size: 13px;
    display: block; /* Link ko puri line lene de */
}

/* 5. Chevron icon animation on open */
.mobile-drawer .has-submenu > a > i:last-child,
.mobile-drawer .dropdown-tab > button > i:last-child {
    transition: transform 0.3s ease;
}

.mobile-drawer .has-submenu.open > a > i:last-child,
.mobile-drawer .dropdown-tab.open > button > i:last-child {
    transform: rotate(90deg); /* Arrow niche ki taraf ghum jayega */
}
.mobile-drawer .offcanvas-header{
  border-bottom:1px solid var(--border);
  padding:16px;
}
.drawer-logo{
  height:55px;
  width:auto;
  object-fit:contain;
}
.mobile-drawer .offcanvas-body{
  padding:16px;
}
.drawer-icons{
  display:flex;
  gap:12px;
  margin-bottom:18px;
}

/* drawer nav tabs: stacked, click-to-expand submenu */
.drawer-tabs{
  overflow: visible; /* CRUCIAL: Allow expansion, no hidden content */
    border: 1px solid var(--border, #eee);
    border-radius: 8px;
    margin-bottom: 16px;
    background: #fff;
}
.drawer-tabs .tab-link{
  padding:12px 14px;
  color: #000;
  border-bottom:1px solid var(--border);
}
.drawer-tabs li:last-child .tab-link{border-bottom:none;}
.drawer-tabs .tab-dropdown{
  position:static;
  opacity:1;
  visibility:visible;
  transform:none;
  box-shadow:none;
  border:none;
  border-radius:0;
  display:none;
  padding:0 0 0 14px;
  background:var(--gray-bg);
}
.drawer-tabs .dropdown-tab.open > .tab-dropdown{display:block;}
.drawer-tabs .dropdown-tab.open > .tab-link{color:var(--blue);}
.drawer-tabs .tab-dropdown li a{padding:10px 12px;font-size:12.5px; display: block; /* each item is on its own line */
    margin: 0;}
.drawer-tabs .tab-dropdown li a {
    display: block; /* links also block-level */
    padding: 10px 14px;
    color: var(--text-dark, #333);
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid var(--border, #eee); /* subtle separator */
    background: transparent;
}
.drawer-tabs .tab-dropdown li:last-child a {
    border-bottom: none;
}
.drawer-tabs .tab-link i.bi-chevron-down {
    transition: transform 0.3s ease;
    margin-left: auto; /* Push to the right for a clean alignment */
    display: flex; /* correct vertical alignment */
}

/* Rotate on open state - use -180deg for a smooth rotation like standard UI */
.drawer-tabs .dropdown-tab.open > .tab-link i.bi-chevron-down {
    transform: rotate(-180deg); 
}

/* Ensure active state color on the parent tab-link button */
.drawer-tabs .dropdown-tab.open > .tab-link {
    color: var(--blue, #0d6efd) !important;
    background-color: transparent !important; /* ensure no blue background block on main tab link */
}
/* drawer categories heading */
.drawer-heading{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--text-muted);
}

/* ================= MAIN CONTENT ================= */
.main-content{padding:20px;}

/* Sidebar (desktop) */
/* ==============================================
   SIDEBAR BASE & SCROLLBAR DESIGN
============================================== */
.sidebar-card {
  border: 1px solid var(--border, #eee); /* Fallback added just in case */
  border-radius: var(--radius, 8px);
  padding: 6px;
  background: var(--ab-blue);
  height: 100%;
  position: relative; /* CRUCIAL: Yeh submenu ko card ke top se align karega */
}

.sidebar-list {
  max-height: 495px; /* 10 items ke hisaab se height fix, iske baad scroll hoga */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  list-style: none;
  
  /* Firefox Scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #d1d1d1 transparent;
}

/* Chrome/Safari Custom Elegant Scrollbar */
.sidebar-list::-webkit-scrollbar {
  width: 5px;
}
.sidebar-list::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-list::-webkit-scrollbar-thumb {
  background: #d1d1d1;
  border-radius: 10px;
}
.sidebar-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* ==============================================
   SIDEBAR LIST ITEMS
============================================== */
.sidebar-list li {
  /* position: relative HATA diya hai, taaki submenu clip na ho */
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 2px;
  color: #fff;
  cursor: pointer;
  transition: .2s ease;
}

.sidebar-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.sidebar-list li span {
  display: flex; 
  align-items: center; 
  gap: 8px;
}

.sidebar-list li i:first-child {
  color: #fff;
  width: 16px;
  text-align: center;
  font-size: 14px;
}

/* Hover & Active State */
.sidebar-list li:hover, 
.sidebar-list li.active {
  background: var(--blue, #0d6efd);
  color: #fff;
}

.sidebar-list li:hover i, 
.sidebar-list li.active i {
  color: #fff;
}

/* ==============================================
   MEGA MENU (FLYOUT) STYLING
============================================== */
.sidebar-submenu {
  position: absolute;
  top: -1px; /* Align with the top of sidebar-card */
  left: 100%; /* Card ke theek right side open hoga */
  width: max-content;
  min-width: 400px; /* Jaisa screenshot me do column hain */
  min-height: calc(100% + 2px);
  background: #fff;
  border: 1px solid var(--border, #eee);
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.08);
  border-radius: 0 8px 8px 0;
  padding: 24px;
  display: flex;
  gap: 40px;
  
  /* Smooth Transition Animation */
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px); /* Halki si doori se slide hoke aayega */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}

/* Jab `li` pe hover ho toh submenu show karo */
.sidebar-list li.has-submenu:hover .sidebar-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.submenu-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.submenu-title {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--border, #eee);
  padding-bottom: 6px;
}

.submenu-column a {
  font-size: 13.5px;
  color: #555 !important; /* Override white color from parent li:hover */
  text-decoration: none;
  transition: 0.2s ease;
  display: inline-block;
  width: fit-content;
}

.submenu-column a:hover {
  color: var(--blue, #0d6efd) !important;
  transform: translateX(4px); /* Hover pe thoda sa right move hoga */
}
.sidebar-list li.active {
    background: transparent !important; /* overrides previous solid blue background */
    color: inherit !important;
    border-left: 3px solid #000; /* left border only for a clean active state */
    padding-left: 9px !important; /* adjust for border */
    border-radius: 0; /* clean look with border */
}

/* Target only the primary link text color when active, not all children */
.sidebar-list li.active > a {
    color: var(--blue, #0d6efd) !important;
    font-weight: 600; /* make active link bolder */
}

/* The icons within an active item should stay their default color (blue), not white */
.sidebar-list li.active i:first-child {
    color: var(--blue, #0d6efd);
}
.sidebar-list li:hover i, .sidebar-list li.active i {
    color: #fff;
}
/* IMPROVE HOVER: Make it subtler than the solid blue background block */
.sidebar-list li:hover {
    background: #e0f0ff !important; /* light blue background on hover for a softer look */
    border-color: transparent !important;
}

/* Target primary link text color on hover */
.sidebar-list li:hover > a {
    color: var(--blue, #0d6efd);
}

/* Hero carousel / banner */
.hero-carousel{height:100%;}
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{height:100%;}

.hero-banner{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  color:#fff;
  display:flex;
  align-items:center;
  height:100%;
  min-height:430px;
  background:#0a0e18; /* fallback while image loads */
}
.hero-banner-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-bg-text{
  position:absolute;
  right:-6px;
  bottom:6px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:82px;
  color:rgba(255,255,255,.06);
  letter-spacing:2px;
  white-space:nowrap;
  z-index:1;
  pointer-events:none;
}
.hero-content{
  position:absolute;
  z-index:2;
  left:42px;
  top:50%;
  transform:translateY(-50%);
  max-width:410px;
}
.hero-brand{
  display:flex;align-items:center;gap:7px;
  font-size:13px;letter-spacing:2px;text-transform:lowercase;
  color:#dfe4ee;margin-bottom:14px;
}
.hero-brand i{font-size:10px;color:var(--blue);}
.hero-home-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:46px;
  color:#3fa3ff;
  letter-spacing:1px;
  margin:0 0 4px;
  line-height:1;
}
.hero-subtitle{
  font-size:12px;
  letter-spacing:3px;
  color:#c7cede;
  padding-bottom:14px;
  margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.15);
  display:inline-block;
}
.hero-features{margin-bottom:22px;}
.hero-features li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:12.5px;
  color:#d7dce6;
  margin-bottom:9px;
  line-height:1.4;
}
.hero-features li i{color:var(--blue);margin-top:2px;font-size:12px;flex-shrink:0;}
.hero-features li span{color:#8b93a5;}

.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.btn-outline-hero{
  border:1.5px solid #fff;
  background:transparent;
  color:#fff;
  padding:10px 20px;
  border-radius:30px;
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
  cursor:pointer;
  transition:.2s;
  white-space:nowrap;
}
.btn-outline-hero:hover{background:#fff;color:var(--navy);}
.price-pill{
  border:1.5px solid var(--blue);
  color:#3fa3ff;
  padding:10px 20px;
  border-radius:30px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px;
  white-space:nowrap;
}

/* carousel controls / indicators */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{
  width:44px;
  z-index:5;
}
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon{
  background-color:rgba(255,255,255,.15);
  border-radius:50%;
  padding:16px;
  background-size:16px;
}
.hero-indicators{
  bottom:14px;
  margin-bottom:0;
  z-index:5;
}
.hero-indicators [data-bs-target]{
  width:8px;height:8px;
  border-radius:50%;
  background-color:rgba(255,255,255,.4);
  border:none;
  opacity:1;
}
.hero-indicators .active{background-color:#3fa3ff;}

/* Promo column */
.promo-stack{display:flex;flex-direction:column;gap:12px;height:100%;}
.promo-card{
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  flex:1;
  min-height:205px;
}
.promo-card-top{
  background:var(--navy);
}
.promo-card-top img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.promo-card-bottom{
  background:linear-gradient(160deg,#12203a,#050a14 80%);
}
.promo-bottom-content{
  position:relative;z-index:2;
  height:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:22px;
  text-align:center;
  color:#fff;
}
.promo-eyebrow{
  font-size:9px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#8a93a8;
  margin-bottom:8px;
}
.promo-bottom-content h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:26px;
  color:#ffffff;
  letter-spacing:1px;
  line-height:1.1;
  margin-bottom:16px;
}
.btn-shop-now{
  background:var(--yellow);
  color:#1a1a1a;
  border:none;
  display:table;
  margin:0 auto;
  font-weight:700;
  text-align:center;
  font-size:12px;
  letter-spacing:.5px;
  padding:9px 22px;
  border-radius:5px;
  cursor:pointer;
  transition:.2s;
}
.btn-shop-now:hover{background:#e6b300;}

/* ================= FEATURES BAR ================= */
.features-bar{
  margin-top:28px;
  padding:22px 0;
  margin-bottom: 28px;
  border-top:1px solid var(--border);
}
.feature-item{
  display:flex;
  align-items:center;
  gap:12px;
}
.feature-item i{
  font-size:24px;
  color:var(--blue);
  flex-shrink:0;
}
.feature-item h6{
  font-size:13.5px;
  font-weight:600;
  margin:0 0 2px;
  color:var(--text-dark);
}
.feature-item p{
  font-size:11.5px;
  color:var(--text-muted);
  margin:0;
}

/* ================= RESPONSIVE ================= */
@media (min-width: 992px){
  .mobile-nav-toggle,
  .mobile-search-toggle{display:none;}
}

@media (max-width: 991.98px){
  .header-inner{gap:14px; justify-content:space-between;}
  .hero-banner{min-height:320px;aspect-ratio:16/11;height:auto;}
  .hero-home-title{font-size:32px;}
  .hero-content{left:24px;right:24px;max-width:100%;}
  .promo-stack{margin-top:0;flex-direction:row;}
  .promo-card{min-height:170px;}
}

@media (max-width: 767.98px){
  .hero-banner{aspect-ratio:3/4;min-height:380px;}
  .hero-content{left:18px;right:18px;top: 46px;transform:none;}
  .hero-home-title{font-size:26px;}
  .hero-subtitle{font-size:10.5px;letter-spacing:2px;margin-bottom:12px;padding-bottom:10px;}
  .hero-features{margin-bottom:14px;}
  .hero-features li{font-size:11.5px;margin-bottom:6px;}
  .hero-features li:nth-child(n+5){display:none;}
  .btn-outline-hero,.price-pill{font-size:10.5px;padding:8px 14px;}
  .promo-stack{flex-direction:column;}
  .logo-img{height:55px;}
}

@media (max-width: 575.98px){
  .hero-banner{aspect-ratio: 2;min-height:360px;}
  .hero-features li:nth-child(n+4){display:none;}
}


.featured-categories-section{
  padding:50px 0;
  max-width:1300px;
  margin:0 auto;
}
.section-header{margin-bottom:26px;}
.section-title{
  font-size:2.2rem;
  color:var(--text-main);
  margin:0 0 8px;
  font-weight:700;
}
.section-description{
  font-size:1rem;
  color:var(--text-secondary);
  margin:0;
  max-width:600px;
  line-height:1.6;
}

/* ============ CATEGORY TABS SLIDER ============ */
.category-tabs-container{margin-bottom:34px; padding:0 10px;}
.category-tab-swiper .swiper-slide{width:auto !important;}

.category-card{
  background:#fff;
  border:1px solid var(--border-color);
  border-radius:12px;
  padding:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:130px;
  cursor:pointer;
  
  transition:all .25s ease;
}
.category-card:hover{
  border-color:var(--primary-blue);
  box-shadow:0 10px 20px rgba(13,110,253,.12);
}
.category-card.active{
  border-color:var(--primary-blue);
  background:var(--accent-blue-bg);
  box-shadow:0 6px 16px rgba(13,110,253,.15);
}
.category-icon-container{
  width:66px;height:66px;
  margin-bottom:10px;
  display:flex;justify-content:center;align-items:center;
  border-radius:50%;
  background:#f4f7fb;
  overflow:hidden;
  transition:.25s;
}
.category-card:hover .category-icon-container,
.category-card.active .category-icon-container{background:#fff;}
.category-icon-container img{
  width:100%;height:100%;
  object-fit:contain;
  padding:8px;
  display:block;
}
.category-name{
  font-size:10px;
  color:var(--text-main);
  margin:0;
  font-weight:500;
  white-space:nowrap;
}
.category-card.active .category-name{font-weight:700;color:var(--primary-blue);}

/* ============ PRODUCT SLIDER ============ */
.featured-products-container{padding:0 10px;}
.featured-products-swiper{padding-bottom:50px !important;}
.featured-products-swiper .swiper-slide{height:auto;}

.product-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border-color);
  border-radius:14px;
  overflow:hidden;
  height:100%;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.product-card:hover{
 
  box-shadow:0 18px 34px rgba(20,30,55,.12);
  border-color:#cfe0f5;
}

.product-card-link{
  display:flex;
  flex-direction:column;
  color:inherit;
  text-decoration:none;
  height:100%;
}

/* badges */
.badges-wrapper{
  position:absolute;
  top:12px;left:12px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.badge{
  font-size:10.5px;
  font-weight:700;
  color:#fff;
  padding:4px 9px;
  border-radius:6px;
  letter-spacing:.3px;
  box-shadow:0 3px 8px rgba(0,0,0,.15);
}
.badge.sale-badge{background:linear-gradient(135deg,#22b25e,#1a9950);}
.badge.out-of-stock-badge{background:linear-gradient(135deg,#ef4444,#dc2626); text-transform:uppercase; font-size:9.5px;}

/* wishlist quick button */
.wishlist-quick-btn{
  position:absolute;
  top:12px;right:12px;
  z-index:3;
  width:32px;height:32px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--border-color);
  display:flex;align-items:center;justify-content:center;
  color:#9aa4b5;
  font-size:14px;
  cursor:pointer;
  transition:.2s;
}
.wishlist-quick-btn:hover{border-color:#ff4757;color:#ff4757;}
.wishlist-quick-btn.active{border-color:#ff4757;background:#fff0f1;}
.wishlist-quick-btn.active i{color:#ff4757;}

/* image with hover swap */
.product-image-container{
  position:relative;
  width:100%;
  height:170px;
  background:linear-gradient(180deg,#f7f9fc,#eef1f6);
  overflow:hidden;
}
.product-image-container img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:20px;
  transition:opacity .35s ease, transform .5s ease;
}
.img-primary{opacity:1; transform:scale(1); z-index:1;}
.img-hover{opacity:0; transform:scale(1.06); z-index:2;}
.product-card:hover .img-primary{opacity:0;}
.product-card:hover .img-hover{opacity:1;}
.product-card.is-oos .product-image-container img{filter:grayscale(.15); opacity:.75;}
.product-card.is-oos:hover .img-hover{opacity:.75;}

/* details */
.product-details{
  display:flex;
  flex-direction:column;
  flex-grow:1;
  padding:14px 16px 16px;
}
.product-title{
  font-size:13.5px;
  font-weight:600;
  color:var(--text-main);
  margin:0 0 8px;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:37px;
}
.rating-reviews{display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.stars-container{display:flex;gap:1px;color:#d8dde3;font-size:11.5px;}
.reviews-text{font-size:11px;color:var(--text-secondary);margin:0;}

.price-and-action{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
}
.price-container{display:flex;flex-direction:column;gap:2px;}
.old-price{font-size:11.5px;color:#a9b0bd;text-decoration:line-through;margin:0;}
.current-price{font-size:16px;font-weight:700;color:var(--primary-blue);margin:0;}

.product-purchase-action{
  width:38px;height:38px;
  border-radius:10px;
  border:none;
  background:var(--accent-blue-bg);
  color:var(--primary-blue);
  font-size:16px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:.25s;
  flex-shrink:0;
}
.product-purchase-action:hover{background:var(--primary-blue);color:#fff;transform:scale(1.06);}
.product-purchase-action.added{background:#1fa855;color:#fff;}
.product-purchase-action:disabled{background:#eef0f3;color:#c3c9d1;cursor:not-allowed;}

/* pagination */
.featured-products-swiper .swiper-pagination{
  position:absolute;bottom:5px;left:0;width:100%;
  display:flex;justify-content:center;align-items:center;gap:8px;
}
.featured-products-swiper .swiper-pagination-bullet{
  width:9px;height:9px;
  background:#c4c4c4;
  opacity:1;
  border-radius:50px;
  margin:0 !important;
  transition:.3s;
  cursor:pointer;
}
.featured-products-swiper .swiper-pagination-bullet-active{
  width:24px;
  background:var(--primary-blue);
  border-radius:50px;
}

@media (max-width:768px){
  .section-title{font-size:1.7rem;}
  .product-image-container{height:140px;}
  .current-price{font-size:14.5px;}
  .category-card{width:110px;padding:12px;}
}
/* Full Width Image Section */
.full_width_image {
  margin-bottom: 20px;
}

.full-width-image-link{
  position: relative;
  display: block;
  overflow: hidden;      /* shine aur zoom dono ko crop rakhega */
   /* optional — hata sakte ho agar sharp corners chahiye */
}

.full_width_image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .6s ease;
}

/* hover pe halka zoom */
.full-width-image-link:hover img {
  transform: scale(1.04);
}

/* shine streak */
.shine-overlay{
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left .75s ease;
}

.full-width-image-link:hover .shine-overlay{
  left: 125%;
}
/* Daily Deals */
/* ==============================================
   MULTI-COLUMN DEALS & SLIDERS STYLING
============================================== */

/* Header & Titles */
.column-header {
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.column-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin: 0;
}

/* Daily Deals Specific Underline */
.daily-deals-title {
    display: inline-block;
    border-bottom: 2px solid var(--blue, #0d6efd);
    margin-bottom: -11px; /* Overlaps the gray border */
    padding-bottom: 10px;
}

/* Daily Deals Image */
.daily-deals-img-wrapper {
    width: 100%;
    height: 520px; /* Adjust height based on your requirement */
    border-radius: 12px;
    overflow: hidden;
}

.daily-deal-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover use kiya h taaki banner space bhare aur fate na */
}

/* Custom Navigation Arrows for Sliders */
.custom-nav-arrows {
    display: flex;
    gap: 8px;
}

.custom-nav-arrows button {
    background: transparent;
    border: none;
    color: #999;
    font-size: 14px;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.custom-nav-arrows button:hover {
    color: var(--blue, #0d6efd);
}

.custom-nav-arrows button:disabled {
    color: #ddd;
    cursor: not-allowed;
}

/* Mini Product Card Layout (List view) */
.product-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between products in the column */
}

.mini-product-card {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Product Image Box */
.mini-img-box {
    width: 85px;
    height: 85px;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: #fff;
}

.mini-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Yeh ensure karega ki product ki image KABHI na kate/fatye */
}

/* Product Details */
.mini-details {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* prevents text overflow */
}

.mini-title {
    font-size: 13.5px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: 4px;
    
    /* Truncate to 2 lines like in screenshot */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.mini-title:hover {
    color: var(--blue, #0d6efd);
}

.mini-rating {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

.mini-rating .stars {
    color: #ddd;
    letter-spacing: 1px;
}

.mini-price .current {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue, #0d6efd);
}

.mini-price .old {
    font-size: 11.5px;
    color: #999;
    text-decoration: line-height; /* Strikethrough effect */
    text-decoration-line: line-through;
    margin-left: 5px;
}
/* ==============================================
   PROMO BANNERS (DUAL CARDS) STYLING
============================================== */

/* Main Card Wrapper */
.promo-card {
    position: relative;
    display: block; /* Makes the entire card clickable */
    width: 100%;
    min-height: 260px;
    border-radius: 12px;
    overflow: hidden; /* Important: Prevents zoomed image from spilling out */
    text-decoration: none !important; /* Removes default link underline */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Background Image Layer */
.promo-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Smooth Transition for the hover zoom effect */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

/* Dark Gradient Overlay */
.promo-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Screenshot jaisa dark fade right side ki taraf */
    background: linear-gradient(90deg, rgba(23, 32, 42, 0.95) 0%, rgba(23, 32, 42, 0.6) 50%, rgba(23, 32, 42, 0.2) 100%);
    z-index: 2;
}

/* Content Area */
.promo-card-content {
    position: relative;
    z-index: 3;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.promo-title {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.2;
}

.promo-desc {
    font-size: 14.5px;
    color: #aeb6c1; /* Light slate/gray color matching screenshot */
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Link Button Styling */
.promo-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--blue, #0d6efd);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

/* Arrow Icon Setup */
.promo-link i {
    font-size: 18px;
    transition: transform 0.3s ease; /* For arrow slide animation */
}

/* ==============================================
   HOVER EFFECTS (ATTRACTIVE ANIMATIONS)
============================================== */

/* 1. Zoom Background on Hover */
.promo-card:hover .promo-card-bg {
    transform: scale(1.08); /* Zooms image by 8% smoothly */
}

/* 2. Slide Arrow Right on Hover */
.promo-card:hover .promo-link i {
    transform: translateX(6px); /* Moves arrow slightly to right */
}

/* ==============================================
   RESPONSIVENESS (MOBILE TWEAKS)
============================================== */
@media (max-width: 768px) {
    .promo-card {
        min-height: 220px;
    }
    .promo-card-content {
        padding: 25px; /* Less padding on small screens */
    }
    .promo-title {
        font-size: 22px;
    }
    .promo-desc br {
        display: none; /* Let text wrap naturally on mobile */
    }
}
/* =========================================================
   NEW ARRIVALS ENHANCED SLIDER - Elevated Glassmorphism
========================================================= */


.new-arrivals-enhanced {
  font-family: sans-serif; /* Clean sans-serif like original */
}

/* 1. Header Typography */
.new-arrivals-enhanced .section-title {
  font-size: 2.25rem; /* Large size */
}

.new-arrivals-enhanced .section-description {
  max-width: 600px; /* Airy spacing */
  font-size: 1rem;
  line-height: 1.6;
}

/* 2. Custom Navigation Buttons */
.new-arrivals-enhanced .nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ced4da;
  background-color: white;
  color: #6c757d;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.new-arrivals-enhanced .nav-btn:hover {
  background-color: var(--blue);
  color: white;
  border-color: var(--blue);
}

/* 3. ENHANCED PRODUCT CARD DESIGN (Elevated Glassmorphism) */
.new-arrivals-enhanced .enhanced-product-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-product);
  overflow: hidden;
  box-shadow: var(--card-shadow-default);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth interaction */
  display: flex;
  flex-direction: column;
  height: 100%; /* Important for slider uniformity */
  border: 1px solid transparent; /* Subtle hover highlight */
}

.new-arrivals-enhanced .enhanced-product-card:hover {
  transform: translateY(-8px); /* Lift up effect */
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(13, 110, 253, 0.1); /* Subtle theme border on hover */
}

/* 3a. Image Box */
.new-arrivals-enhanced .card-image-box {
  position: relative;
  width: 100%;
  padding-top: 64%; /* Consistent 16:9 like aspect ratio */
  /* overflow: hidden; */
  border: 1px solid #eee; /* Light separation */
}

.new-arrivals-enhanced .card-image-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensure images aren't stretched */
  transition: transform 0.3s ease-in-out; /* Zoom-on-hover */
}

.new-arrivals-enhanced .enhanced-product-card:hover .card-image-box img {
  transform: scale(1.05); /* Subtle zoom */
}

/* 3b. NEW Badge */
.new-arrivals-enhanced .product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: bold;
}

/* 3c. Details Box (ENHANCED: Glassmorphism over the image box) */
.new-arrivals-enhanced .card-details-box {
  position: relative;
  z-index: 2;
  margin-top: -15px; /* Overlap image box slightly */
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* uniform height details box */
  justify-content: flex-start;
  min-height: 120px; /* original approximate height */
}

/* Apply Glassmorphism: Light grey tint from original */
.new-arrivals-enhanced .glass-morph-grey {
  background-color: var(--ab-blue); /* Original color with transparency */
  backdrop-filter: blur(10px); /* Modern blur effect */
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* light shine on top edge */
}

/* 3d. Text Typography in Card */
.new-arrivals-enhanced .product-title {
  font-size: 0.95rem; /* airy typography */
  line-height: 1.4;
  margin-bottom: 12px;
  display: -webkit-box; /* Multi-line truncation for uniformity */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.new-arrivals-enhanced .product-price {
  font-size: 1.1rem;
  margin-top: auto; /* Push price to bottom */
}

/* 4. Cart Action Button (Original style, enhanced interaction) */
.new-arrivals-enhanced .cart-action-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background-color: var(--cart-btn-dark);
  color: white;
  border: none;
  border-radius: 6px; /* slightly more rounded */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.new-arrivals-enhanced .cart-action-btn:hover {
  transform: scale(1.1); /* Soft grow effect */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Add subtle '+' next to the cart icon for enhanced cue, if bi bi-cart3 is used */
.new-arrivals-enhanced .cart-action-btn bi-cart3::after {
  content: '+';
  font-size: 0.6em;
  position: absolute;
  bottom: 0.5em;
  right: -0.2em;
  color: #ff9900; /* Subtle orange cue from NEW badge */
  opacity: 0.8;
}

/* 5. Swiper Pagination Dots */
.new-arrivals-enhanced .dots-nav-custom .swiper-pagination-bullet {
  background-color: #ced4da; /* Inactive grey */
  opacity: 1;
  width: 10px;
  height: 10px;
  transition: all 0.2s ease;
}

.new-arrivals-enhanced .dots-nav-custom .swiper-pagination-bullet-active {
  background-color: var(--blue); /* Active blue */
  width: 12px; /* Subtle size grow */
  height: 12px;
}

/* 6. RESPONSIVE GRID OVERRIDES (Mobile to Tablet) */
@media (max-width: 991.98px) {
  .new-arrivals-enhanced .nav-btn {
    width: 35px;
    height: 35px;
    font-size: 1.1rem;
  }
}

@media (max-width: 767.98px) {
  .new-arrivals-enhanced .section-title {
    font-size: 1.75rem;
  }
  .new-arrivals-enhanced .column-header {
    margin-bottom: 20px;
  }
  /* Stacking the header details on mobile */
  .new-arrivals-enhanced .alignment-row-custom {
    flex-direction: column;
    text-align: center;
  }
}
/* =========================================================
   GOOGLE REVIEWS & TESTIMONIALS CSS
========================================================= */

/* 1. Header Box Styling */
.review-header-box {
    background-color: #f8f9fb; /* Soft google-like grey-blue background */
    border-radius: 16px;
    padding: 24px 32px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.google-logo-wrapper {
    background: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.rating-info h4 {
    font-size: 1.3rem;
    color: #1a1f36;
}

.rating-score {
    font-size: 1.1rem;
    color: #202124;
}

/* 2. Gradient Feedback Button (Attractive Effect) */
.gradient-feedback-btn {
    background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%); /* Google Blue Gradient */
    color: white !important;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(26, 115, 232, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gradient-feedback-btn:hover {
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0 6px 20px rgba(26, 115, 232, 0.5); /* Stronger glow */
    background: linear-gradient(135deg, #2b84f3 0%, #1152b3 100%); /* Lighter on hover */
}
.testimonial-swiper .swiper-slide {
    height: auto; 
}
/* 3. Testimonial Card Styling */
.testimonial-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    height: 280px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.35s ease;
    overflow: hidden;
}

/* Attractive Hover Effect for Cards */
.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(26, 115, 232, 0.1);
}

/* Card Content Styling */
.testimonial-card .stars {
    font-size: 1.1rem;
    color: #fbbc04; /* Google Star Yellow/Orange */
}

.review-text {
    color: #5f6368;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
    
    /* Agar text fixed height se bada ho jaye, toh automatically trim ho jayega */
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Max 4 lines dikhayega */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more {
    color: #1a73e8;
    text-decoration: none;
    font-weight: 500;
}

.read-more:hover {
    text-decoration: underline;
}

/* Reviewer Info Area */
.reviewer-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reviewer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* Fallback Initial Avatar (Like the Orange 'K' in the image) */
.initial-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
}
.bg-orange { background-color: #f25c27; }

.reviewer-name {
    color: #1a4185; /* Dark blue matching image */
    font-size: 0.95rem;
}

/* Fix swiper padding so hover shadows don't get cut off */
.testimonial-swiper {
    padding: 15px 5px 25px 5px !important;
}
/* =========================================================
   GOOGLE REVIEWS & TESTIMONIALS CSS
========================================================= */

/* 1. Header Box Styling */
.review-header-box {
    background-color: var(--ab-blue-light); /* Soft google-like grey-blue background */
    border-radius: 16px;
    padding: 24px 32px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.google-logo-wrapper {
    background: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.rating-info h4 {
    font-size: 1.3rem;
    color: #1a1f36;
}

.rating-score {
    font-size: 1.1rem;
    color: #202124;
}

/* 2. Gradient Feedback Button (Attractive Effect) */
.gradient-feedback-btn {
    background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%); /* Google Blue Gradient */
    color: white !important;
    border: none;
    padding: 11px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(26, 115, 232, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gradient-feedback-btn:hover {
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0 6px 20px rgba(26, 115, 232, 0.5); /* Stronger glow */
    background: linear-gradient(135deg, #2b84f3 0%, #1152b3 100%); /* Lighter on hover */
}

/* 3. Testimonial Card Styling */
.testimonial-card {
    background: var(--ab-blue-light);
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.35s ease;
}

/* Attractive Hover Effect for Cards */
.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(26, 115, 232, 0.1);
}

/* Card Content Styling */
.testimonial-card .stars {
    font-size: 1.1rem;
    color: #fbbc04; /* Google Star Yellow/Orange */
}

.review-text {
    color: #5f6368;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 0;
}

.read-more {
    color: #1a73e8;
    text-decoration: none;
    font-weight: 500;
}

.read-more:hover {
    text-decoration: underline;
}

/* Reviewer Info Area */
.reviewer-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reviewer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* Fallback Initial Avatar (Like the Orange 'K' in the image) */
.initial-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
}
.bg-orange { background-color: #f25c27; }

.reviewer-name {
    color: #1a4185; /* Dark blue matching image */
    font-size: 14px;
}

/* Fix swiper padding so hover shadows don't get cut off */
.testimonial-swiper {
    padding: 15px 5px 25px 5px !important;
}
/* =========================================================
   MAIN FOOTER STYLING
========================================================= */

.site-footer {
    background-color: var(--ab-text-main);
    font-family: 'Poppins', sans-serif; /* Ya aapka default font */
    color: #fff;
    border-top: 2px solid #eee;
}

.footer-logo {
    max-width: 140px; /* Adjust according to your logo size */
    height: auto;
}

.footer-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #fff !important;
}

/* --- Social Icons (Exact design match) --- */
.social-icons {
    display: flex;
    gap: 12px;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background-color: #dbeafe; /* Light blue background */
    color: #1e3a8a; /* Dark blue icon */
    border-radius: 8px; /* Slightly rounded squares */
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.social-btn:hover {
    background-color: #bfdbfe; /* Slightly darker on hover */
    color: #1e40af;
    transform: translateY(-2px);
}

/* --- WhatsApp Button --- */
.whatsapp-btn {
    background-color: #25D366; /* WhatsApp Green */
    color: #ffffff !important;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 0.95rem;
    border: none;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2);
    transition: all 0.3s ease;
}

.whatsapp-btn:hover {
    background-color: #20bd5a;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3);
}

/* --- Footer Nav Links --- */
.footer-heading {
    color: #ff;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.footer-links li {
    margin-bottom: 14px;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--blue, #0d6efd);
}

/* --- Contact Information Cards --- */
.footer-contact-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    height: 100%;
    background-color: #ffffff;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.footer-contact-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border-color: #d1d5db;
}

.footer-contact-card .icon-blue {
    color: #2563eb; /* Vivid Blue Icon */
    font-size: 1.3rem;
    display: block;
}

.footer-contact-card h6 {
    font-size: 0.95rem;
}

.footer-contact-card p.text-muted {
    font-size: 0.85rem;
    line-height: 1.6;
}

.footer-contact-card p.text-dark {
    font-size: 0.9rem;
    letter-spacing: 0.3px;
}

/* --- Footer Bottom & Legal Links --- */
.footer-bottom {
    border-color: #f3f4f6 !important;
}

.footer-legal-links a {
    color: #4b5563;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    transition: color 0.2s;
}

.footer-legal-links a:hover {
    color: #111827;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .footer-desc {
        max-width: 100%;
    }
    .footer-legal-links {
        text-align: center;
    }
    .footer-bottom .text-md-end {
        text-align: center !important;
        margin-top: 10px;
    }
}
/* =========================================================
   CATEGORY HERO BANNER STYLING
========================================================= */

.category-hero-section {
    font-family: 'Poppins', sans-serif;
}

/* Main Card Wrapper */
.category-hero-card {
    position: relative;
    width: 100%;
    min-height: 420px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Background Image */
.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center right; /* Focus on the right side of the image */
    background-repeat: no-repeat;
    z-index: 1;
}

/* Smart Gradient Overlay (Fades from light grey to transparent) */
.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Screenshot match: Left side is solid grey-white, fading to right */
    background: linear-gradient(90deg, rgba(234, 236, 239, 1) 0%, rgba(234, 236, 239, 0.9) 40%, rgba(234, 236, 239, 0) 100%);
    z-index: 2;
}

/* Content Container */
.category-hero-content {
    position: relative;
    z-index: 3;
    padding: 50px 60px;
    max-width: 600px; /* Limits text width so it doesn't cross over the product image */
}

/* New Arrival Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #dbeafe; /* Soft blue background */
    color: #2563eb; /* Deep blue text */
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Typography */
.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #111827; /* Dark slate */
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.hero-title .text-highlight {
    color: var(--blue, #0d6efd); /* Bright blue for emphasis */
}

.hero-desc {
    font-size: 1.05rem;
    color: #4b5563; /* Muted grey text */
    line-height: 1.6;
    max-width: 450px;
}

/* --- Buttons Styling --- */
.btn-hero-primary {
    background-color: var(--blue, #0d6efd);
    color: #ffffff !important;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 10px;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.25);
}

.btn-hero-primary:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.35);
}

.btn-hero-secondary {
    background-color: #ffffff;
    color: #111827 !important;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.05); /* Very subtle border */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Soft shadow like image */
}

.btn-hero-secondary:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   RESPONSIVENESS (Tablet & Mobile)
========================================================= */

@media (max-width: 991px) {
    .hero-home-title {
        font-size: 2.8rem;
    }
    .category-hero-content {
        padding: 40px;
        max-width: 500px;
    }
}

@media (max-width: 767px) {
    .category-hero-card {
        min-height: 380px;
    }
    
    /* On mobile, make the gradient cover more area so text stays readable */
    .hero-bg-overlay {
        background: linear-gradient(90deg, rgba(234, 236, 239, 0.95) 0%, rgba(234, 236, 239, 0.85) 70%, rgba(234, 236, 239, 0.4) 100%);
    }

    .category-hero-content {
        padding: 30px 20px;
    }

    .hero-home-title {
        font-size: 2.2rem;
    }

    .hero-desc {
        font-size: 0.95rem;
    }

    .hero-actions {
        flex-direction: column; /* Stack buttons on very small screens */
        width: 100%;
    }
    
    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
}
/* =========================================================
   TRENDING CATEGORIES SLIDER
========================================================= */

/* Section Background (Subtle gradient from the screenshot) */
.trending-categories-section {
    background: linear-gradient(135deg, #fdfdfd 0%, #f4f0f8 100%);
    font-family: 'Poppins', sans-serif;
}

/* 1. Card Layout & Fixed Height */
.trending-card {
    display: block;
    position: relative;
    width: 100%;
    height: 380px; /* <-- FIXED HEIGHT for all cards */
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background-color: #000; /* Fallback for dark images */
}

/* 2. Image Fixes (No stretch, Top visibility) */
.trending-img {
    width: 100%;
    height: 100%;
    
    /* object-fit: cover ensures the image fills the 380px height without stretching */
    object-fit: cover; 
    
    /* object-position: center top ensures it focuses on the top/center so heads/top parts don't get cut off */
    object-position: center top; 
    
    transition: transform 0.5s ease;
}

/* Hover Zoom Effect */
.trending-card:hover .trending-img {
    transform: scale(1.06);
}

/* 3. Dark Gradient Overlay */
.trending-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; /* Only covers the bottom part */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    z-index: 1;
    pointer-events: none;
}

/* 4. Text Content inside Card */
.trending-content {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 2;
    color: #ffffff;
}

.trending-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #d1d5db; /* Light grayish */
    margin-bottom: 6px;
}

.trending-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
    line-height: 1.2;
}

/* 5. Custom Swiper Pagination Styling */
.trending-categories-section .trending-pagination {
    position: relative; /* Removes absolute positioning */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 30px !important;
}

.trending-categories-section .swiper-pagination-bullet {
    background-color: #c4c4c4;
    opacity: 1;
    width: 8px;
    height: 8px;
    margin: 0 !important;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
}

/* Active Pill Shape */
.trending-categories-section .swiper-pagination-bullet-active {
    background-color: var(--blue, #0d6efd);
    width: 24px; /* Extends into a pill shape */
}
/* =========================================================
   BEST SELLERS SECTION (WITH GLOW EFFECT)
========================================================= */

.best-sellers-section {
    background-color: #fafafc; /* Light subtle background */
}

/* --- Ambient Background Glows --- */
.glow-blob {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(100px); /* Heavy blur makes it look like ambient light */
    z-index: 0;
    opacity: 0.6; /* Soft transparency */
    pointer-events: none; /* Prevents blocking clicks on elements below */
}

.glow-blob-left {
    top: -150px;
    left: -150px;
    background: radial-gradient(circle, rgba(205, 185, 255, 0.7) 0%, rgba(205, 185, 255, 0) 70%);
}

.glow-blob-right {
    top: -100px;
    right: -150px;
    background: radial-gradient(circle, rgba(240, 190, 220, 0.6) 0%, rgba(240, 190, 220, 0) 70%);
}

/* --- Card & Image Boxes --- */
.best-seller-card {
    transition: transform 0.3s ease;
}

.best-seller-card:hover {
    transform: translateY(-5px); /* Soft lift on hover */
}

.image-box {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-color: #f1f3f5; /* Light grey base color for transparent images */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Subtle depth */
}

/* Aspect ratios ensure perfect box sizes regardless of the image dimensions */
.image-box.large-box {
    aspect-ratio: 1 / 1.05; /* Near perfect square for the main product */
}

.image-box.small-box {
    aspect-ratio: 16 / 11; /* Widescreen box for the stacked products */
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Use 'contain' if client provides cutout images on transparent background */
    transition: transform 0.4s ease;
}

.best-seller-card:hover .image-box img {
    transform: scale(1.04); /* Image zooms slightly inside the box */
}

/* --- Typography Formatting --- */
.product-info .product-title {
    font-size: 1.15rem;
    letter-spacing: -0.2px;
}

.product-info .product-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #8892a0 !important; /* Muted grey matching the design */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Truncates long text to keep layout intact */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-info .product-price {
    font-size: 0.95rem;
    letter-spacing: 0.2px;
}

/* --- Responsiveness --- */
@media (max-width: 991px) {
    .image-box.large-box {
        aspect-ratio: 4/3; /* Adjusts the large box on tablets/mobile */
    }
    
    .glow-blob {
        width: 300px;
        height: 300px; /* Reduces glow size on smaller screens */
    }
}
/* =========================================================
   OUR FEATURES SECTION (Clean & Minimalist)
========================================================= */

.our-features-section {
    font-family: 'Poppins', sans-serif;
}

/* Feature Block Styling */
.feature-block {
    /* Padding left 0 taaki design ekdum left align rahe initially */
    padding: 10px 20px 10px 0; 
    border-radius: 8px;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
}

/* PREMIUM HOVER EFFECT: Soft slide right & Icon highlight */
.feature-block:hover {
    transform: translateX(8px); /* Halki si right shift */
}

/* Icon Styling */
.feature-icon {
    display: inline-block;
    font-size: 1.3rem; /* Thin and elegant size */
    color: #374151; /* Dark grey */
    transition: color 0.3s ease, transform 0.3s ease;
}

.feature-block:hover .feature-icon {
    color: var(--blue, #0d6efd); /* Aapka primary blue color */
    transform: scale(1.1); /* Icon thoda sa bada hoga */
}

/* Typography */
.feature-title {
    font-size: 1.05rem;
    color: #111827; /* Near black */
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}

.feature-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #6b7280 !important; /* Soft grey text */
    margin-bottom: 0;
    max-width: 90%; /* Taaki text right side se bohot zyada edge par na jaye */
}

/* =========================================================
   RESPONSIVENESS (Mobile Tweaks)
========================================================= */
@media (max-width: 768px) {
    /* Mobile par row gap thoda kam kar diya */
    .our-features-section .row.g-5 {
        --bs-gutter-y: 2.5rem; 
    }
    
    .feature-desc {
        max-width: 100%; /* Mobile par full width text */
    }
    
    /* Mobile par left slide ke bajaye upar slide karega */
    .feature-block:hover {
        transform: translateY(-5px);
    }
}


.all-electronics-section{
  padding: 32px 0 60px;
  background: radial-gradient(circle at 100% 0%, rgba(37,99,235,.05), transparent 40%),
              radial-gradient(circle at 0% 100%, rgba(124,58,237,.05), transparent 40%);
}

/* ---- Breadcrumb ---- */
.ae-breadcrumb .breadcrumb{
  margin:0 0 14px;
  font-size:12.5px;
}
.ae-breadcrumb .breadcrumb-item a{color:var(--ae-text-secondary); text-decoration:none;}
.ae-breadcrumb .breadcrumb-item a:hover{color:var(--ae-blue);}
.ae-breadcrumb .breadcrumb-item.active{color:var(--ae-text-main); font-weight:500;}

/* ---- Page header ---- */
.ae-page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.ae-title{
  font-size:28px;
  font-weight:800;
  color:var(--ae-text-main);
  margin:0 0 4px;
}
.ae-subtitle{
  font-size:13px;
  color:var(--ae-text-secondary);
  margin:0;
}
.ae-sort{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.ae-sort-label{font-size:12.5px; color:var(--ae-text-secondary); white-space:nowrap;}
.ae-sort-select{
  border:1px solid var(--ae-border);
  border-radius:8px;
  padding:8px 12px;
  font-size:12.5px;
  color:var(--ae-text-main);
  background:#fff;
  cursor:pointer;
}
.ae-sort-select:focus{outline:none; border-color:var(--ae-blue);}

/* ============ FILTERS SIDEBAR ============ */
.ae-mobile-filter-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px;
  border:1px solid var(--ae-border);
  border-radius:8px;
  background:#fff;
  color:var(--ae-text-main);
  font-size:13px;
  font-weight:600;
  margin-bottom:14px;
  cursor:pointer;
}

.ae-filters-sidebar{
  border:1px solid var(--ae-border);
  border-radius:14px;
  padding:20px;
  background:#fff;
  position:sticky;
  top:16px;
}
.ae-filters-heading{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:700;
  color:var(--ae-text-main);
  margin-bottom:20px;
}

.ae-filter-group{margin-bottom:24px;}
.ae-filter-group:last-of-type{margin-bottom:20px;}
.ae-filter-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--ae-text-secondary);
  margin-bottom:12px;
}

.ae-checkbox-list{display:flex; flex-direction:column; gap:11px;}
.ae-checkbox{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13.5px;
  color:var(--ae-text-main);
  cursor:pointer;
}
.ae-checkbox input{
  width:16px;height:16px;
  accent-color:var(--ae-blue);
  cursor:pointer;
}

.ae-price-range{padding:4px 2px 0;}
.ae-range-input{
  width:100%;
  accent-color:var(--ae-blue);
  cursor:pointer;
}
.ae-price-values{
  display:flex;
  justify-content:space-between;
  font-size:11.5px;
  color:var(--ae-text-secondary);
  margin-top:6px;
}

.ae-radio{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:var(--ae-text-main);
  cursor:pointer;
}
.ae-radio input{accent-color:var(--ae-blue); cursor:pointer;}
.ae-stars{color:var(--ae-star); font-size:11px; display:flex; gap:1px;}
.ae-rating-text{color:var(--ae-text-secondary);}

.ae-reset-btn{
  width:100%;
  padding:11px;
  border:none;
  border-radius:9px;
  background:var(--ae-lavender);
  color:var(--ae-blue-dark);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}
.ae-reset-btn:hover{background:#e4ddfb;}

/* ============ FILTER PILLS ============ */
.ae-filter-pills{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
  margin-bottom:20px;
  scrollbar-width:none;
}
.ae-filter-pills::-webkit-scrollbar{display:none;}
.ae-pill{
  flex-shrink:0;
  padding:9px 18px;
  border-radius:24px;
  border:1px solid var(--ae-border);
  background:#fff;
  color:var(--ae-text-main);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:.2s;
}
.ae-pill:hover{border-color:var(--ae-blue); color:var(--ae-blue);}
.ae-pill.active{
  background:var(--ae-blue);
  border-color:var(--ae-blue);
  color:#fff;
}

/* ============ PRODUCT CARD (with side glow hover) ============ */
.ae-product-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--ae-border);
  border-radius:14px;
  overflow:hidden;
  height:100%;
  isolation:isolate;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* side glow pseudo-element */
.ae-product-card::before{
  content:"";
  position:absolute;
  top:50%;
  left:-30%;
  width:60%;
  height:140%;
  background:radial-gradient(circle, rgba(37,99,235,.35) 0%, rgba(37,99,235,0) 70%);
  transform:translateY(-50%);
  opacity:0;
  filter:blur(6px);
  z-index:-1;
  transition:opacity .4s ease, left .4s ease;
  pointer-events:none;
}
.ae-product-card:hover::before{
  opacity:1;
  left:-10%;
}

.ae-product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(20,30,55,.12);
  border-color:#d6e2fb;
}

.ae-badge{
  position:absolute;
  top:12px;left:12px;
  z-index:3;
  font-size:10px;
  font-weight:800;
  letter-spacing:.4px;
  color:#fff;
  padding:4px 10px;
  border-radius:6px;
}
.ae-badge-new{background:var(--ae-blue);}
.ae-badge-sale{background:var(--ae-red);}

.ae-wishlist-btn{
  position:absolute;
  top:12px;right:12px;
  z-index:3;
  width:32px;height:32px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--ae-border);
  display:flex;align-items:center;justify-content:center;
  color:#9aa4b5;
  font-size:14px;
  cursor:pointer;
  transition:.2s;
}
.ae-wishlist-btn:hover{border-color:#ff4757; color:#ff4757;}
.ae-wishlist-btn.active{border-color:#ff4757; background:#fff0f1;}
.ae-wishlist-btn.active i{color:#ff4757;}

.ae-product-thumb{
  display:block;
  width:100%;
  height:190px;
  background:linear-gradient(180deg,#f7f9fc,#eef1f6);
  overflow:hidden;
}
.ae-product-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.ae-product-card:hover .ae-product-thumb img{transform:scale(1.05);}

.ae-product-body{
  padding:16px 16px 18px;
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
.ae-product-category{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--ae-blue);
  margin-bottom:6px;
}
.ae-product-name{
  display:block;
  font-size:14.5px;
  font-weight:700;
  color:var(--ae-text-main);
  margin-bottom:8px;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:.2s;
}
.ae-product-name:hover{color:var(--ae-blue);}

.ae-product-rating{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  color:var(--ae-star);
  margin-bottom:12px;
}
.ae-rating-value{color:var(--ae-text-main); font-weight:600;}
.ae-rating-count{color:var(--ae-text-secondary); font-size:11.5px;}

.ae-product-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
}
.ae-price-block{display:flex; align-items:baseline; gap:8px;}
.ae-price-current{font-size:17px; font-weight:800; color:var(--ae-text-main);}
.ae-price-old{font-size:12px; color:#a9b0bd; text-decoration:line-through;}

.ae-cart-btn{
  width:38px;height:38px;
  border-radius:10px;
  border:none;
  background:var(--ae-blue);
  color:#fff;
  font-size:16px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:.25s;
  flex-shrink:0;
}
.ae-cart-btn:hover{background:var(--ae-blue-dark); transform:scale(1.06);}
.ae-cart-btn.added{background:#1fa855;}

/* ============ PAGINATION ============ */
.ae-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:32px;
}
.ae-page-btn{
  min-width:34px;
  height:34px;
  padding:0 4px;
  border-radius:8px;
  border:1px solid var(--ae-border);
  background:#fff;
  color:var(--ae-text-main);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}
.ae-page-btn:hover{border-color:var(--ae-blue); color:var(--ae-blue);}
.ae-page-btn.active{
  background:var(--ae-blue);
  border-color:var(--ae-blue);
  color:#fff;
}
.ae-page-arrow{color:var(--ae-text-secondary);}
.ae-page-ellipsis{color:var(--ae-text-secondary); font-size:13px;}

/* ============ RESPONSIVE ============ */
@media (max-width: 991.98px){
  .ae-filters-sidebar{
    display:none;
    position:static;
  }
  .ae-filters-sidebar.show{display:block;}
  .ae-page-header{flex-direction:column; align-items:flex-start;}
}

@media (max-width: 575.98px){
  .ae-title{font-size:22px;}
  .ae-product-thumb{height:160px;}
}
/* =========================================================
   NEWSLETTER SECTION & BLOB EFFECT
========================================================= */

.newsletter-section {
    background-color: #ffffff; /* Section base color */
    font-family: 'Poppins', sans-serif;
}

/* --- The Corner Blob Effect --- */
.newsletter-blob {
    position: absolute;
    top: -100px;
    right: -50px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    /* Soft purple/pinkish gradient matching the screenshot */
    background: radial-gradient(circle, rgba(230, 224, 255, 0.8) 0%, rgba(245, 243, 255, 0) 70%);
    filter: blur(80px);
    z-index: 0;
    pointer-events: none; /* User cant click on the blur */
}

/* --- Newsletter Card --- */
.newsletter-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb; /* Thin, subtle border */
    border-radius: 4px; /* Slightly sharp corners */
    padding: 60px 20px;
    /* Optional: very faint shadow if needed, but screenshot looks mostly flat with just a border */
    box-shadow: 0 0 0 transparent; 
}

/* --- Typography --- */
.newsletter-title {
    font-size: 2rem;
    letter-spacing: -0.5px;
    color: #111827 !important;
}

.newsletter-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6b7280 !important;
    max-width: 550px; /* Keeps text centered and balanced */
}

/* --- Form & Input --- */
.newsletter-form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
}

.newsletter-input {
    flex: 1;
    padding: 12px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #374151;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.newsletter-input::placeholder {
    color: #9ca3af;
}

.newsletter-input:focus {
    border-color: var(--blue, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* --- Button with Glow Effect --- */
.newsletter-btn {
    background-color: #1a73e8; /* Vibrant Google-like Blue */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Distinct blue shadow matching the design */
    box-shadow: 0 10px 20px rgba(26, 115, 232, 0.35); 
}

.newsletter-btn:hover {
    background-color: #155ebd;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(26, 115, 232, 0.45);
}

/* --- Disclaimer --- */
.newsletter-disclaimer {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #9ca3af; /* Light grey */
    margin-top: 15px;
    margin-bottom: 0;
}

/* =========================================================
   RESPONSIVENESS (Mobile Tweaks)
========================================================= */
@media (max-width: 576px) {
    .newsletter-card {
        padding: 40px 15px;
    }
    
    .newsletter-title {
        font-size: 1.6rem;
    }
    
    /* Stack input and button on mobile */
    .newsletter-form {
        flex-direction: column;
        width: 100%;
    }
    
    .newsletter-input, 
    .newsletter-btn {
        width: 100%;
    }
    
    .newsletter-blob {
        width: 300px;
        height: 300px;
        top: -50px;
        right: -50px;
    }
}


.product-detail-section{padding:24px 0 60px;}

.pd-breadcrumb .breadcrumb{margin:0 0 18px; font-size:11px; text-transform:uppercase; letter-spacing:.5px;}
.pd-breadcrumb .breadcrumb-item a{color:var(--pd-text-secondary); text-decoration:none;}

/* ============ STICKY GALLERY ============ */
.pd-gallery-sticky{
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

.pd-main-swiper{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;
  border:1px solid var(--pd-border);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  margin-bottom:12px;
}
.pd-main-swiper .swiper-slide{
  display:flex;align-items:center;justify-content:center;
}
.pd-main-swiper img{
  width:100%;height:100%;
  object-fit:contain;
  padding:20px;
}
.pd-main-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid var(--pd-border);
  background:rgba(255,255,255,.9);
  color:var(--pd-text-main);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  z-index:5;
  transition:.2s;
}
.pd-main-nav:hover{background:var(--pd-blue); color:#fff; border-color:var(--pd-blue);}
.pd-main-prev{left:12px;}
.pd-main-next{right:12px;}

.pd-thumb-swiper{
  width:100%;
  padding:2px;
}
.pd-thumb-swiper .swiper-slide{
  width:70px;
  height:70px;
  border-radius:10px;
  border:2px solid var(--pd-border);
  overflow:hidden;
  cursor:pointer;
  opacity:.75;
  transition:.2s;
  background:#fff;
}
.pd-thumb-swiper .swiper-slide img{
  width:100%;height:100%;
  object-fit:contain;
  padding:6px;
}
.pd-thumb-swiper .swiper-slide-thumb-active{
  border-color:var(--pd-blue);
  opacity:1;
}
.pd-thumb-swiper .swiper-slide:hover{opacity:1;}

.pd-wishlist-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  background:none;
  border:none;
  color:var(--pd-text-secondary);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  padding:0;
  transition:.2s;
}
.pd-wishlist-link:hover{color:#ff4757;}
.pd-wishlist-link.active{color:#ff4757;}

/* ============ PRODUCT INFO ============ */
.pd-info-top{
  display:flex;
  gap:24px;
  justify-content:space-between;
  margin-bottom:22px;
}
.pd-main-info{flex:1; min-width:0;}

.pd-title{
  font-size:22px;
  font-weight:800;
  color:var(--pd-text-main);
  line-height:1.35;
  margin:0 0 10px;
}

.pd-rating-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.pd-stars{display:flex; gap:2px; color:var(--pd-star); font-size:13px;}
.pd-review-count{font-size:12.5px; color:var(--pd-text-secondary);}
.pd-stock-status{font-size:12.5px; font-weight:600; color:var(--pd-green);}

.pd-feature-list{list-style:none; margin:0; padding:0;}
.pd-feature-list li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13.5px;
  color:var(--pd-text-main);
  margin-bottom:9px;
  line-height:1.4;
}
.pd-feature-list i{color:var(--pd-blue); margin-top:3px; font-size:13px;}

.pd-trust-list{
  list-style:none;
  margin:0;
  padding:0;
  flex-shrink:0;
  width:190px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.pd-trust-list li{display:flex; align-items:flex-start; gap:9px;}
.pd-trust-list i{font-size:17px; color:var(--pd-blue); margin-top:2px; flex-shrink:0;}
.pd-trust-list h6{font-size:11.5px; font-weight:700; color:var(--pd-text-main); margin:0 0 1px;}
.pd-trust-list p{font-size:10.5px; color:var(--pd-text-secondary); margin:0; line-height:1.3;}

/* ============ PROMO ROW ============ */
.pd-promo-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:14px;
}
.pd-promo-box{
  border:1px solid var(--pd-border);
  border-radius:10px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:11.5px;
}
.pd-promo-icons{display:flex; gap:4px;}
.pd-card-dot{width:16px; height:11px; border-radius:2px; display:inline-block;}
.pd-card-red{background:#e53935;}
.pd-card-blue{background:#1565c0;}
.pd-card-orange{background:#fb8c00;}
.pd-promo-toggle-dot{
  width:32px;height:16px;
  border-radius:20px;
  background:var(--pd-green);
  position:relative;
  flex-shrink:0;
}
.pd-promo-toggle-dot::after{
  content:"";
  position:absolute;
  top:2px;right:2px;
  width:12px;height:12px;
  border-radius:50%;
  background:#fff;
}
.pd-promo-text{flex:1; color:var(--pd-text-main); font-weight:500; min-width:120px;}
.pd-promo-link{
  color:var(--pd-blue);
  font-weight:700;
  font-size:11px;
  text-decoration:none;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:2px;
}
.pd-promo-link:hover{text-decoration:underline;}

/* ============ OFFERS BANNER ============ */
.pd-offers-banner{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px dashed #b7e4c7;
  background:#f2fbf5;
  border-radius:10px;
  padding:10px 14px;
  margin-bottom:14px;
}
.pd-offers-icon{
  width:30px;height:30px;
  border-radius:50%;
  background:var(--pd-green);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  flex-shrink:0;
}
.pd-offers-text{flex:1; display:flex; flex-direction:column; font-size:11.5px; color:var(--pd-text-main);}
.pd-offers-text strong{font-size:12.5px; letter-spacing:.3px;}
.pd-offers-text span{color:var(--pd-text-secondary);}
.pd-offers-btn{
  background:var(--pd-green);
  color:#fff;
  border:none;
  border-radius:7px;
  padding:9px 16px;
  font-size:11.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  cursor:pointer;
  transition:.2s;
}
.pd-offers-btn:hover{background:#128a3e;}

.pd-secure-strip{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.4px;
  color:var(--pd-text-secondary);
  display:flex;
  align-items:center;
  gap:6px;
  padding-bottom:16px;
  border-bottom:1px solid var(--pd-border);
  margin-bottom:18px;
}

/* ============ PRICE ============ */
.pd-price-row{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:18px;
}
.pd-price-current{font-size:28px; font-weight:800; color:var(--pd-blue);}
.pd-price-current::before{content:"₹";}
.pd-price-old{font-size:15px; color:#a9b0bd; text-decoration:line-through;}
.pd-price-old::before{content:"₹";}

/* ============ VARIANT / QTY / CART ============ */
.pd-field-label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--pd-text-main);
  margin-bottom:6px;
}
.pd-variant-row{margin-bottom:16px; max-width:260px;}
.pd-variant-select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--pd-border);
  border-radius:8px;
  font-size:13px;
  color:var(--pd-text-main);
  background:#fff;
}

.pd-qty-cart-row{
  display:flex;
  align-items:flex-end;
  gap:14px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.pd-qty-control{
  display:flex;
  align-items:center;
  border:1px solid var(--pd-border);
  border-radius:8px;
  overflow:hidden;
  width:110px;
}
.pd-qty-btn{
  width:34px;height:40px;
  border:none;
  background:#f5f7fa;
  color:var(--pd-text-main);
  font-size:16px;
  cursor:pointer;
  transition:.2s;
}
.pd-qty-btn:hover{background:#e9edf3;}
.pd-qty-input{
  width:42px;
  height:40px;
  border:none;
  border-left:1px solid var(--pd-border);
  border-right:1px solid var(--pd-border);
  text-align:center;
  font-size:14px;
  font-weight:600;
  color:var(--pd-text-main);
  -moz-appearance:textfield;
}
.pd-qty-input::-webkit-outer-spin-button,
.pd-qty-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}

.pd-add-cart-btn{
  height:42px;
  padding:0 32px;
  border:none;
  border-radius:8px;
  background:var(--pd-blue);
  color:#fff;
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}
.pd-add-cart-btn:hover{background:var(--pd-blue-dark);}
.pd-add-cart-btn.added{background:var(--pd-green);}

/* ============ META ============ */
.pd-meta{
  position:relative;
  padding-top:16px;
  border-top:1px solid var(--pd-border);
  margin-bottom:32px;
}
.pd-meta p{font-size:12.5px; margin:0 0 6px; color:var(--pd-text-main);}
.pd-meta-label{color:var(--pd-text-secondary); margin-right:4px;}
.pd-meta-link{color:var(--pd-blue); text-decoration:none; font-weight:500;}
.pd-meta-link:hover{text-decoration:underline;}
.pd-share-btn{
  position:absolute;
  right:0;top:16px;
  width:30px;height:30px;
  border-radius:50%;
  border:1px solid var(--pd-border);
  background:#fff;
  color:var(--pd-text-secondary);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:.2s;
}
.pd-share-btn:hover{border-color:var(--pd-blue); color:var(--pd-blue);}

/* ============ FAQs ============ */
.pd-faqs-title{
  font-size:20px;
  font-weight:800;
  color:var(--pd-text-main);
  margin-bottom:14px;
}
.pd-accordion-item{
  border:1px solid var(--pd-border);
  border-radius:10px;
  margin-bottom:10px;
  overflow:hidden;
}
.pd-accordion-head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:#fff;
  border:none;
  text-align:left;
  font-size:13.5px;
  font-weight:600;
  color:var(--pd-text-main);
  cursor:pointer;
}
.pd-accordion-head i{font-size:13px; color:var(--pd-text-secondary); flex-shrink:0;}
.pd-accordion-item.open .pd-accordion-head{color:var(--pd-blue);}
.pd-accordion-item.open .pd-accordion-head i{color:var(--pd-blue);}

.pd-accordion-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  padding:0 16px;
}
.pd-accordion-body p{
  font-size:13px;
  color:var(--pd-text-secondary);
  line-height:1.6;
  margin:0 0 16px;
}
.pd-accordion-item.open .pd-accordion-body{max-height:200px;}

/* ============ RESPONSIVE ============ */
@media (max-width: 991.98px){
  .pd-gallery-sticky{position:static;}
  .pd-info-top{flex-direction:column;}
  .pd-trust-list{
    width:100%;
    flex-direction:row;
    flex-wrap:wrap;
    gap:16px 24px;
  }
  .pd-trust-list li{width:calc(50% - 12px);}
}

@media (max-width: 575.98px){
  .pd-title{font-size:19px;}
  .pd-promo-row{grid-template-columns:1fr;}
  .pd-trust-list li{width:100%;}
  .pd-price-current{font-size:24px;}
  .pd-qty-cart-row{flex-direction:column; align-items:stretch;}
  .pd-add-cart-btn{width:100%;}
}


.product-spec-section{padding:40px 0 60px;}

/* ============ STATIC IMAGE (left) ============ */
.ps-static-image{
  position: sticky;
  top: 20px;
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}
.ps-static-image img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ============ TABS ============ */
.ps-tabs{
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--ps-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.ps-tabs::-webkit-scrollbar{display:none;}
.ps-tab{
  position: relative;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ps-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  padding-bottom: 12px;
  transition: color .2s ease;
}
.ps-tab:hover{color: var(--ps-text-main);}
.ps-tab.active{color: var(--ps-blue);}
.ps-tab.active::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -13px;
  width: 100%;
  height: 2px;
  background: var(--ps-blue);
  border-radius: 2px;
}

/* ============ TAB PANELS ============ */
.ps-tab-panel{display:none;}
.ps-tab-panel.active{display:block;}

.ps-tab-panel-inner{
  position: relative;
  max-height: 300px;
  overflow: hidden;
  transition: max-height .4s ease;
}
.ps-tab-panel-inner::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  transition: opacity .3s ease;
  pointer-events: none;
}
.ps-tab-panel.expanded .ps-tab-panel-inner{max-height: 3000px;}
.ps-tab-panel.expanded .ps-tab-panel-inner::after{opacity: 0;}

.ps-product-title{
  font-size: 22px;
  font-weight: 800;
  color: var(--ps-text-main);
  margin: 0 0 16px;
  line-height: 1.35;
}
.ps-sub-heading{
  font-size: 16px;
  font-weight: 700;
  color: var(--ps-text-main);
  margin: 22px 0 10px;
}
.ps-tab-panel-inner p{
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ps-text-secondary);
  margin: 0 0 14px;
}
.ps-feature-list{
  list-style: none;
  margin: 4px 0 18px;
  padding: 0;
}
.ps-feature-list li{
  position: relative;
  font-size: 13.5px;
  color: var(--ps-text-secondary);
  padding-left: 18px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.ps-feature-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ps-blue);
}

/* Specification tables */
.ps-spec-table{
  width: 100%;
  border-collapse: collapse;
}
.ps-spec-table tr{border-bottom: 1px solid var(--ps-border);}
.ps-spec-table tr:last-child{border-bottom: none;}
.ps-spec-table th,
.ps-spec-table td{
  text-align: left;
  padding: 12px 10px;
  font-size: 13.5px;
  vertical-align: top;
}
.ps-spec-table th{
  width: 220px;
  color: var(--ps-text-main);
  font-weight: 600;
}
.ps-spec-table td{color: var(--ps-text-secondary);}

/* Reviews empty state */
.ps-no-reviews{
  text-align: center;
  padding: 40px 10px;
  color: var(--ps-text-secondary);
}
.ps-no-reviews i{font-size: 34px; color: var(--ps-border); margin-bottom: 10px; display:block;}
.ps-no-reviews p{margin:0; font-size: 13.5px;}

/* ============ SHOW MORE BUTTON ============ */
.ps-show-more-wrap{
  text-align: center;
  margin-top: 8px;
}
.ps-show-more-btn{
  padding: 10px 26px;
  border: 1px solid var(--ps-blue);
  border-radius: 8px;
  background: #fff;
  color: var(--ps-blue);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
}
.ps-show-more-btn:hover{
  background: var(--ps-blue);
  color: #fff;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 991.98px){
  .ps-static-image{position: static; margin-bottom: 8px;}
  .ps-spec-table th{width: 150px;}
}

@media (max-width: 575.98px){
  .ps-product-title{font-size: 18px;}
  .ps-tabs{gap: 18px;}
  .ps-tab{font-size: 12.5px;}
  .ps-spec-table th,
  .ps-spec-table td{font-size: 12.5px; padding: 10px 6px;}
  .ps-spec-table th{width: 120px;}
}
/* =========================================================
   RELATED PRODUCTS SLIDER CSS
========================================================= */

.related-products-section {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
}

/* --- Card Base Styling --- */
.related-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover Effect: Soft Lift & Shadow */
.related-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    border-color: #e2e8f0;
}

/* --- Image & Wishlist Button --- */
.img-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
    background-color: #f8f9fa; /* Fallback background */
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps image full without stretching */
    transition: transform 0.4s ease;
}

.related-card:hover .product-img {
    transform: scale(1.05); /* Slight image zoom on hover */
}

/* Wishlist Floating Button */
.wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    border: none;
    color: #4a5568;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 2;
    transition: all 0.2s ease;
}

.wishlist-btn:hover {
    background-color: #ffffff;
    color: #e53e3e; /* Turns red on hover */
    transform: scale(1.1);
}

/* --- Card Content & Typography --- */
.card-content {
    padding: 20px;
}

.category-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--blue, #1a73e8); /* Exact blue from screenshot */
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.product-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.4;
    margin-bottom: 8px;
    /* Truncate long titles */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    margin-bottom: 16px;
}

.rating-score {
    font-weight: 600;
    color: #4a5568;
}

.rating-count {
    color: #a0aec0;
}

/* --- Price & Add to Cart Action --- */
.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.5px;
}

/* Square Cart Button */
.cart-btn-square {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-color: var(--blue, #1a73e8);
    color: #ffffff;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-btn-square:hover {
    background-color: #155ebd; /* Darker blue */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(26, 115, 232, 0.3);
}

/* --- Pagination (Pill Style) --- */
.related-pagination {
    bottom: 0 !important;
}

.related-products-section .swiper-pagination-bullet {
    background-color: #cbd5e1;
    opacity: 1;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.related-products-section .swiper-pagination-bullet-active {
    background-color: var(--blue, #1a73e8);
    width: 24px; /* Extends to pill shape */
}
/* =========================================================
   CONTACT US SECTION STYLING
========================================================= */

.contact-section {
    font-family: 'Poppins', sans-serif;
    /* Faint background to make the white cards pop */
    background-color: #fafafc; 
}

/* Base Card Styling */
.contact-card {
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover Effect on Cards (Slight lift and deeper shadow) */
.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05) !important;
}

/* Icon Circles on Left Column */
.icon-circle {
    width: 44px;
    height: 44px;
    background-color: var(--blue, #0d6efd); /* Adjust to your exact theme blue */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* --- Form Inputs Styling (Minimalist Grey) --- */
.custom-input {
    background-color: #f5f5f5 !important; /* Soft grey background */
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 0.95rem;
    color: #333333;
    box-shadow: none !important; /* Removes Bootstrap default blue glow */
    transition: all 0.3s ease;
}

.custom-input::placeholder {
    color: #9ca3af;
}

/* Focus Effect: Turns white with a blue border for accessibility */
.custom-input:focus {
    background-color: #ffffff !important;
    border: 1px solid var(--blue, #0d6efd);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1) !important;
}

/* Make asterisks red in placeholder natively (using a small CSS trick) */
.custom-input::placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* --- Submit Button Styling --- */
.custom-submit-btn {
    background-color: var(--blue, #0d6efd);
    border: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.custom-submit-btn:hover {
    background-color: #0b5ed7; /* Darker blue */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(13, 110, 253, 0.3);
}

/* =========================================================
   RESPONSIVENESS (Mobile Tweaks)
========================================================= */
@media (max-width: 991px) {
    /* Stack form inputs on mobile */
    .custom-input {
        padding: 12px 14px;
    }
    
    .contact-card {
        padding: 30px !important; /* Reduce padding on smaller screens */
    }
}
/* =========================================================
   SHOPPING CART SECTION STYLING
========================================================= */

.shopping-cart-section {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff; /* Clean white background */
}

/* --- Cart Item Cards --- */
.cart-item-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: box-shadow 0.3s ease;
}

.cart-item-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.cart-img-box {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.cart-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stock-status {
    font-size: 0.85rem;
    color: var(--blue, #0d6efd); /* Match the blue in the screenshot */
    font-weight: 500;
}

/* Delete Button */
.btn-delete {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #9ca3af; /* Light grey */
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-delete:hover {
    color: #ef4444; /* Red on hover */
}

/* --- Quantity Selector (Black Pill) --- */
.qty-selector {
    display: inline-flex;
    align-items: center;
    background-color: #000000;
    color: #ffffff;
    border-radius: 50px;
    padding: 6px 12px;
    width: 110px;
    justify-content: space-between;
}

.qty-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.qty-btn:hover {
    color: #cccccc;
}

.qty-val {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Shipping Note */
.shipping-note {
    color: #6b7280;
    font-weight: 500;
}

/* --- Order Summary Card --- */
.summary-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.summary-divider {
    border-color: #e5e7eb;
    opacity: 1;
    margin: 20px 0;
}

/* --- Summary Buttons --- */
.checkout-btn {
    background-color: var(--blue, #0d6efd);
    border: none;
    padding: 14px;
    border-radius: 8px;
    transition: all 0.3s;
}

.checkout-btn:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

.continue-btn {
    background-color: #000000;
    border: none;
    padding: 14px;
    border-radius: 8px;
    transition: all 0.3s;
}

.continue-btn:hover {
    background-color: #333333;
    transform: translateY(-2px);
}

/* Secure Payment Note */
.secure-payment-note {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
    letter-spacing: 0.5px;
}

/* =========================================================
   RESPONSIVENESS (Mobile Tweaks)
========================================================= */
@media (max-width: 576px) {
    .cart-img-box {
        width: 100%;
        height: 180px;
    }
    
    .btn-delete {
        top: 15px;
        right: 15px;
        background-color: rgba(255,255,255,0.8);
        border-radius: 50%;
        width: 35px;
        height: 35px;
    }
}
/* =========================================================
   MY WISHLIST STYLING
========================================================= */

/* Soft background similar to screenshot */
.wishlist-section {
    background: linear-gradient(135deg, #fdfdfd 0%, #f4f5f9 100%);
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
}

/* --- Top Buttons --- */
.btn-outline-custom {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s;
}

.btn-outline-custom:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

.btn-primary-custom {
    background-color: var(--blue, #0d6efd);
    color: #ffffff;
    border: none;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s;
}

.btn-primary-custom:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
    color: #ffffff;
}

/* --- Wishlist Cards --- */
.wishlist-card {
    background-color: #ffffff;
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.wishlist-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Image Wrapper */
.img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Makes the image area perfectly square */
    background-color: #f8f9fa;
    overflow: hidden;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Remove/Trash Button */
.btn-remove {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #f0f0f0;
    color: #94a3b8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    cursor: pointer;
    z-index: 2;
    transition: all 0.2s ease;
}

.btn-remove:hover {
    color: #ef4444; /* Turns red on hover */
    background-color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Stock Badges */
.status-badge {
    position: absolute;
    bottom: 15px;
    left: 15px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    z-index: 2;
}

.badge-instock {
    background-color: #dcfce7; /* Light green bg */
    color: #16a34a; /* Dark green text */
}

.badge-lowstock {
    background-color: #fef3c7; /* Light orange/yellow bg */
    color: #d97706; /* Dark orange text */
}

/* Card Body Content */
.card-body {
    padding: 24px;
}

.product-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.product-price {
    font-size: 1.1rem;
}

.product-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Bottom Footer Bar --- */
.wishlist-bottom-bar {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

/* Pagination Buttons */
.page-btn {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #64748b;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.page-btn:hover {
    background-color: #f8fafc;
    color: #1e293b;
}

.page-btn.active {
    border-color: var(--blue, #0d6efd);
    color: var(--blue, #0d6efd);
    background-color: rgba(13, 110, 253, 0.05); /* Very light blue tint */
}
/* =========================================================
   CHECKOUT SECTION STYLING
========================================================= */

.checkout-section {
    font-family: 'Poppins', sans-serif;
    background-color: #fdfdfd;
}

/* --- Ambient Glow Blobs --- */
.glow-blob {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
}

.top-right-blob {
    top: -200px;
    right: -200px;
    background: radial-gradient(circle, rgba(200, 180, 240, 0.8) 0%, rgba(200, 180, 240, 0) 70%);
}

.bottom-left-blob {
    bottom: -300px;
    left: -200px;
    background: radial-gradient(circle, rgba(220, 210, 245, 0.7) 0%, rgba(220, 210, 245, 0) 70%);
}

/* --- Form Fields Styling --- */
.checkout-label {
    font-size: 0.9rem;
    color: #9ca3af; /* Light grey label text */
    margin-bottom: 8px;
    font-weight: 500;
}

.checkout-input {
    background-color: #f5f5f5 !important; /* Solid light grey background */
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 0.95rem;
    color: #374151;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

.checkout-input:focus {
    background-color: #ffffff !important;
    border: 1px solid var(--blue, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1) !important;
}

/* --- Custom Checkbox & Radios --- */
.custom-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.custom-checkbox:checked {
    background-color: var(--blue, #0d6efd);
    border-color: var(--blue, #0d6efd);
}

.custom-radio {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 2px solid #9ca3af;
}

/* Make radio button black when selected as per screenshot */
.custom-radio:checked {
    background-color: #000000;
    border-color: #000000;
}

/* --- Order Summary Styling --- */
.checkout-img-box {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    border: 1px solid #ccc;
    overflow: hidden;
     /* Fallback for transparency */
}

.checkout-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.calc-row {
    font-size: 0.95rem;
}

.payment-logos .badge {
    font-size: 0.65rem;
    padding: 4px 8px;
}

/* --- Buttons --- */
.custom-btn {
    background-color: var(--blue, #0d6efd); /* Vibrant Blue */
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.custom-btn:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(13, 110, 253, 0.3);
}

/* =========================================================
   RESPONSIVENESS
========================================================= */
@media (max-width: 991px) {
    .order-summary-wrapper {
        margin-top: 30px;
        padding-left: 0 !important;
    }
}
/* =========================================================
   ORDER CONFIRMATION SECTION STYLING
========================================================= */

.order-confirmation-section {
    font-family: 'Poppins', sans-serif;
    background-color: #fdfdfd;
    min-height: 100vh;
}

/* --- Ambient Glow Blobs --- */
.glow-blob {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    opacity: 0.3;
    pointer-events: none;
}

.top-left-blob {
    top: -150px;
    left: -200px;
    background: radial-gradient(circle, rgba(200, 180, 240, 0.8) 0%, rgba(200, 180, 240, 0) 70%);
}

.bottom-right-blob {
    bottom: -100px;
    right: -150px;
    background: radial-gradient(circle, rgba(200, 180, 240, 0.7) 0%, rgba(200, 180, 240, 0) 70%);
}

/* --- Main Card Styling --- */
.confirmation-card {
    background-color: #ffffff;
    border-radius: 32px; /* Very large rounded corners matching screenshot */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04); /* Soft shadow */
    border: 1px solid rgba(0, 0, 0, 0.02);
}

/* ==========================================
   ICON ANIMATION (Pop & Pulse Effect)
========================================== */
.success-icon-wrapper {
    width: 86px;
    height: 86px;
    background-color: #dbeafe; /* Light blue background */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Continuous pulse animation */
    animation: pulse-ring 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.success-icon-inner {
    width: 46px;
    height: 46px;
    background-color: var(--blue, #0d6efd);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    /* Pop-in animation on load */
    animation: pop-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes pop-in {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.3); }
    70% { box-shadow: 0 0 0 15px rgba(13, 110, 253, 0); }
    100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); }
}
/* ========================================== */


/* --- Product Detail Row --- */
.product-img-box {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #ccc;
    padding: 5px;
    flex-shrink: 0;
}

.product-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.delivery-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.track-btn {
    background-color: var(--blue, #0d6efd);
    border: none;
    transition: all 0.3s;
}

.track-btn:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

/* --- Info Columns (Vertical Blue Borders) --- */
.divider-subtle {
    border-color: #e5e7eb;
    opacity: 1;
    display: none; 
}

.info-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.info-col {
    padding-left: 24px;
    border-left: 2px solid var(--blue, #0d6efd); }

/* First column shouldn't have a left border */
.info-col:first-child {
    border-left: none;
    padding-left: 12px;
}

/* --- Bottom Links & Buttons --- */
.back-link {
    transition: color 0.2s;
}

.back-link:hover {
    color: #111827 !important; 
}

.action-pill-btn {
    background-color: #ffffff;
    color: #4b5563;
    border: 1px solid #e5e7eb;
    padding: 8px 20px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.action-pill-btn:hover {
    background-color: #f9fafb;
    color: #111827;
    border-color: #d1d5db;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}


/* =========================================================
   RESPONSIVENESS 
========================================================= */
@media (max-width: 767px) {
    .confirmation-card {
        border-radius: 20px;
        padding: 30px 20px !important;
    }

    .product-summary-row {
        text-align: center !important;
        background-color: #f8f9fa; 
        border-radius: 16px;
    }

    .product-summary-row .d-flex {
        flex-direction: column;
        text-align: center;
    }
    .info-col {
        border-left: none;
        border-bottom: 1px solid #e5e7eb;
        padding-left: 0;
        padding-bottom: 20px;
        text-align: center;
    }

    .info-col:first-child {
        padding-left: 0;
    }

    .info-col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .divider-subtle {
        display: block; 
    }

    .w-md-auto {
        width: 100% !important;
    }
}
/* =========================================================
   404 ERROR SECTION 
========================================================= */

.error-404-section {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    min-height: 70vh; 
    padding: 100px 0;
}

/* --- Ambient Glow Blobs --- */
.glow-blob {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    opacity: 0.4;
    pointer-events: none; 
}

/* Left edge purple glow */
.left-side-blob {
    top: 50%;
    left: -250px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(205, 185, 255, 0.8) 0%, rgba(205, 185, 255, 0) 70%);
}

/* Right edge purple glow */
.right-side-blob {
    top: 50%;
    right: -250px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(205, 185, 255, 0.8) 0%, rgba(205, 185, 255, 0) 70%);
}

/* --- Typography --- */
.error-title {
    font-size: 5.5rem;
    letter-spacing: -2px;
    line-height: 1.1;
    color: #000000 !important;
}

.error-subtitle {
    font-size: 1rem;
    color: #4b5563 !important;
    max-width: 600px;
}

/* --- Action Button --- */
.btn-back-home {
    background-color: var(--blue, #0d6efd); 
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.btn-back-home:hover {
    background-color: #0b5ed7; 
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(13, 110, 253, 0.3);
}

/* =========================================================
   RESPONSIVENESS (Mobile & Tablet)
========================================================= */
@media (max-width: 768px) {
    .error-title {
        font-size: 3.5rem; 
        letter-spacing: -1px;
    }
    
    .error-404-section {
        min-height: 50vh;
        padding: 60px 0;
    }
    
    .glow-blob {
        width: 300px;
        height: 300px;
        filter: blur(80px);
    }
}

@media (max-width: 480px) {
    .error-title {
        font-size: 2.8rem; 
    }
}
/* =========================================================
   REGISTER / AUTH SECTION STYLING
========================================================= */

.auth-section {
    font-family: 'Poppins', sans-serif;
    background-color: #fdfdfd;
    min-height: 100vh;
}

/* --- Ambient Glow Blob (Right Side) --- */
.auth-glow-blob {
    position: absolute;
    top: 30%;
    right: -150px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(215, 205, 245, 0.6) 0%, rgba(215, 205, 245, 0) 70%);
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
}

/* --- Main Form Card --- */
.auth-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

/* --- Form Fields & Labels --- */
.auth-label {
    font-size: 0.85rem;
    color: #4b5563;
    font-weight: 500;
    margin-bottom: 6px;
}

/* Input Wrapper to hold absolute icons */
.input-with-icon {
    position: relative;
}

/* Left Icon (Person, Envelope, etc.) */
.auth-icon-left {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1.1rem;
    pointer-events: none; /* Prevents icon from blocking clicks */
}

/* Right Icon (Password Eye) */
.auth-icon-right {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.2s;
}

.auth-icon-right:hover {
    color: #4b5563;
}

/* The actual input field */
.auth-input {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px 16px 12px 45px; /* Extra left padding for the icon */
    font-size: 0.95rem;
    color: #374151;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

.auth-input::placeholder {
    color: #9ca3af;
}

.auth-input:focus {
    border-color: var(--blue, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1) !important;
}

/* --- Custom Checkbox --- */
.auth-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
}

.auth-checkbox:checked {
    background-color: var(--blue, #0d6efd);
    border-color: var(--blue, #0d6efd);
}

/* --- Buttons --- */
.auth-submit-btn {
    background-color: #0056b3; /* Deep blue matching the design */
    border: none;
    border-radius: 6px;
    transition: all 0.3s;
}

.auth-submit-btn:hover {
    background-color: #004494;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 86, 179, 0.25);
}

.auth-social-btn {
    background-color: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px;
    transition: all 0.2s;
}

.auth-social-btn:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

/* --- Divider line with text --- */
.auth-divider {
    position: relative;
    text-align: center;
    border-top: 1px solid #e5e7eb;
    margin-top: 25px;
}

.auth-divider-text {
    background-color: #ffffff;
    padding: 0 15px;
    position: relative;
    top: -12px;
}

/* =========================================================
   RESPONSIVENESS
========================================================= */
@media (max-width: 768px) {
    .auth-card {
        padding: 30px 20px !important;
    }
}
/* =========================================================
   LOGIN / AUTH SECTION STYLING
========================================================= */

.auth-section {
    font-family: 'Poppins', sans-serif;
    background-color: #fdfdfd;
    min-height: 100vh;
}

/* --- Ambient Glow Blob (Right Side) --- */
.auth-glow-blob {
    position: absolute;
    top: 20%;
    right: -100px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(215, 205, 245, 0.5) 0%, rgba(215, 205, 245, 0) 70%);
    filter: blur(120px);
    z-index: 0;
    pointer-events: none;
}

/* --- Main Form Card --- */
.auth-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

/* Small Uppercase Labels for Login */
.auth-label-sm {
    font-size: 0.75rem;
    color: #374151;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Input Wrapper & Icons */
.input-with-icon {
    position: relative;
}

.auth-icon-left {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1.1rem;
    pointer-events: none; 
}

.auth-icon-right {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.2s;
}

.auth-icon-right:hover {
    color: #4b5563;
}

/* Inputs */
.auth-input {
    background-color: #f8f9fa; /* Slightly lighter background inside inputs */
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px 16px 12px 45px; 
    font-size: 0.95rem;
    color: #374151;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

.auth-input::placeholder {
    color: #9ca3af;
}

.auth-input:focus {
    background-color: #ffffff;
    border-color: var(--blue, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1) !important;
}

/* --- Custom Checkbox --- */
.auth-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid #cbd5e1;
}

.auth-checkbox:checked {
    background-color: var(--blue, #0d6efd);
    border-color: var(--blue, #0d6efd);
}

/* --- Buttons --- */
.auth-submit-btn {
    background-color: #0b5ed7; /* Deep blue matching screenshot */
    border: none;
    border-radius: 6px;
    transition: all 0.3s;
}

.auth-submit-btn:hover {
    background-color: #094eb3;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(11, 94, 215, 0.25);
}

.auth-social-btn {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px;
    transition: all 0.2s;
}

.auth-social-btn:hover {
    background-color: #f8f9fa;
    border-color: #cbd5e1;
}

/* --- Divider line with text --- */
.auth-divider {
    position: relative;
    text-align: center;
    border-top: 1px solid #e5e7eb;
    margin-top: 25px;
}

.auth-divider-text {
    background-color: #ffffff;
    padding: 0 15px;
    position: relative;
    top: -10px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* =========================================================
   RESPONSIVENESS
========================================================= */
@media (max-width: 576px) {
    .auth-card {
        padding: 30px 20px !important;
    }
}
/* =========================================================
   ACCOUNT & PROFILE SECTION STYLING
========================================================= */

.account-profile-section {
    font-family: 'Poppins', sans-serif;
    background-color: #fdfdfd;
    min-height: 100vh;
}

/* --- Ambient Glow Blobs --- */
.glow-blob {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    opacity: 0.35;
    pointer-events: none;
}

.bottom-left-blob {
    bottom: -150px;
    left: -150px;
    background: radial-gradient(circle, rgba(205, 185, 255, 0.8) 0%, rgba(205, 185, 255, 0) 70%);
}

.bottom-right-blob {
    bottom: -150px;
    right: -150px;
    background: radial-gradient(circle, rgba(205, 185, 255, 0.8) 0%, rgba(205, 185, 255, 0) 70%);
}

/* --- Left Sidebar Styling --- */
.account-link {
    color: #6b7280; /* Muted grey */
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    display: inline-block;
}

.account-link:hover {
    color: #111827; /* Darker on hover */
    transform: translateX(3px); /* Slight movement */
}

/* Active state matching the screenshot */
.account-link.active {
    color: var(--blue, #0d6efd);
    font-weight: 500;
}

/* --- Profile Form Card --- */
.profile-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); /* Very subtle shadow */
}

.profile-label {
    font-size: 0.9rem;
    color: #111827;
    font-weight: 500;
}

/* Inputs with solid light grey background */
.profile-input {
    background-color: #f5f5f5 !important;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 0.95rem;
    color: #374151;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

.profile-input::placeholder {
    color: #9ca3af;
}

.profile-input:focus {
    background-color: #ffffff !important;
    border-color: var(--blue, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1) !important;
}

/* Button */
.profile-save-btn {
    background-color: var(--blue, #0d6efd);
    border: none;
    border-radius: 4px;
    transition: all 0.3s;
}

.profile-save-btn:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

/* Cancel Button Hover */
#cancelProfileChanges:hover {
    color: #ef4444 !important; /* Turns slightly red/dark on hover for UX */
}

/* =========================================================
   RESPONSIVENESS
========================================================= */
@media (max-width: 767px) {
    .account-sidebar {
        background: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    }
    
    .profile-card {
        padding: 30px 20px !important;
    }
}
/* =========================================================
   EXPANDED SEARCH PANEL STYLING
========================================================= */

.search-panel-section {
    font-family: 'Poppins', sans-serif;
    position: relative;
    /* Optional: Faint blue background around the card if used as a full section */
    background: radial-gradient(circle at 10% 50%, rgba(220, 240, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%);
}

/* Card Container (Useful if this is a dropdown) */
.search-panel-card {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); /* Soft shadow to make it float */
    border: 1px solid #f0f0f0;
}

/* Section Titles (Uppercase, Muted, Spaced) */
.search-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Left Column: Recent Searches --- */
.recent-search-list a {
    transition: all 0.2s ease;
}

.recent-search-list a:hover span {
    color: var(--blue, #0d6efd) !important;
}

/* --- Left Column: Top Categories --- */
.top-category-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    color: #4b5563;
    padding: 16px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.top-category-box i {
    font-size: 1.5rem;
    color: var(--blue, #0d6efd);
    transition: transform 0.2s;
}

.top-category-box span {
    font-size: 0.85rem;
    font-weight: 600;
}

.top-category-box:hover {
    background-color: #f8fafc;
}

.top-category-box:hover i {
    transform: translateY(-3px);
}

/* --- Right Column: Trending Products --- */
.search-view-all {
    font-size: 0.8rem;
    color: var(--blue, #0d6efd);
}

.search-view-all:hover {
    text-decoration: underline !important;
}

.trending-product-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px;
    border-radius: 12px;
    transition: background-color 0.2s ease;
}

.trending-product-card:hover {
    background-color: #f8fafc;
}

.tp-img-box {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.tp-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp-info {
    display: flex;
    flex-direction: column;
}

/* Dynamic Tags */
.tp-tag {
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.tag-blue { color: #0d6efd; }
.tag-green { color: #10b981; }
.tag-purple { color: #8b5cf6; }
.tag-cyan { color: #0dcaf0; }

.tp-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.tp-price {
    font-size: 0.85rem;
}

/* --- Right Column: Trade-in Banner --- */
.trade-in-banner {
    /* Soft light blue gradient exactly like the screenshot */
    background: linear-gradient(135deg, #f0f7ff 0%, #dbeafe 100%);
    border-radius: 12px;
    border: 1px solid #e0f2fe;
}

/* =========================================================
   RESPONSIVENESS
========================================================= */
@media (max-width: 991px) {
    /* Add border between left and right column on mobile/tablet */
    .search-panel-card > .row > .col-lg-8 {
        border-top: 1px solid #f0f0f0;
        padding-top: 2rem;
        margin-top: 1rem;
    }
    
    .trade-in-banner {
        flex-direction: column;
        text-align: center;
    }
    
    .trade-in-content {
        padding-right: 0 !important;
        margin-bottom: 1rem;
    }
    
    .trade-in-icon {
        display: none; /* Hide large icon on small screens to save space */
    }
}

.order-history-section{
  padding: 30px 0 60px;
}

/* ---- Breadcrumb ---- */
.oh-breadcrumb .breadcrumb{
  margin: 0 0 14px;
  font-size: 10.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.oh-breadcrumb .breadcrumb-item a{color: var(--oh-text-secondary); text-decoration: none;}
.oh-breadcrumb .breadcrumb-item a:hover{color: var(--oh-blue);}
.oh-breadcrumb .breadcrumb-item.active{color: var(--oh-text-main); font-weight:700;}

/* ---- Header ---- */
.oh-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.oh-title{
  font-size: 30px;
  font-weight: 800;
  color: var(--oh-text-main);
  margin: 0 0 6px;
}
.oh-subtitle{
  font-size: 13.5px;
  color: var(--oh-text-secondary);
  margin: 0;
}

.oh-filter-pills{
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.oh-pill{
  padding: 9px 18px;
  border-radius: 24px;
  border: none;
  background: transparent;
  color: var(--oh-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
}
.oh-pill:hover{color: var(--oh-text-main);}
.oh-pill.active{
  background: var(--oh-blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(37,99,235,.25);
}

/* ---- Order list ---- */
.oh-order-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.oh-order-card{
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--oh-border);
  border-radius: 16px;
  padding: 20px 26px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* left accent glow strip that grows in on hover */
.oh-order-card::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--oh-blue), #60a5fa);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}
.oh-order-card:hover::before{transform: scaleY(1);}

.oh-order-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(20,30,55,.09);
  border-color: #dfe8fb;
}

.oh-col{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oh-label{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #b6bcc8;
}

.oh-col-id{flex: 1.4; min-width: 150px;}
.oh-order-id{font-size: 14px; font-weight: 700; color: var(--oh-text-main);}
.oh-order-date{font-size: 12px; color: var(--oh-text-secondary);}

.oh-col-status{flex: 1; min-width: 110px;}
.oh-status-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
}
.oh-status-transit{
  background: var(--oh-blue-light);
  color: var(--oh-blue-dark);
}
.oh-status-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--oh-blue-dark);
  flex-shrink: 0;
}
.oh-status-delivered{
  background: var(--oh-green-light);
  color: var(--oh-green);
}
.oh-status-delivered i{font-size: 12px;}

.oh-col-items{flex: 1; min-width: 90px;}
.oh-item-thumbs{display: flex; gap: 6px;}
.oh-item-thumbs img{
  width: 42px; height: 42px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--oh-border);
}

.oh-col-actions{
  flex: 1.2;
  min-width: 160px;
  flex-direction: row;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.oh-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: .2s;
}
.oh-btn-primary{
  background: var(--oh-blue);
  color: #fff;
}
.oh-btn-primary:hover{background: var(--oh-blue-dark); color: #fff;}

.oh-btn-light{
  background: var(--oh-blue-light);
  color: var(--oh-blue-dark);
}
.oh-btn-light:hover{background: #d9e7fe;}

.oh-btn-outline{
  background: #fff;
  border-color: var(--oh-border);
  color: var(--oh-text-main);
}
.oh-btn-outline:hover{border-color: var(--oh-blue); color: var(--oh-blue);}

/* stack the two action buttons vertically like the reference */
.oh-col-actions{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.oh-col-actions .oh-btn{width: 100%;}

/* ---- Empty state ---- */
.oh-empty-state{
  text-align: center;
  padding: 60px 20px;
  color: var(--oh-text-secondary);
}
.oh-empty-state i{font-size: 40px; color: var(--oh-border); display: block; margin-bottom: 12px;}
.oh-empty-state p{margin: 0; font-size: 13.5px;}

/* ---- Responsive ---- */
@media (max-width: 991.98px){
  .oh-order-card{
    flex-wrap: wrap;
    row-gap: 16px;
  }
  .oh-col-id{flex: 1 1 50%;}
  .oh-col-status{flex: 1 1 40%;}
  .oh-col-items{flex: 1 1 40%;}
  .oh-col-actions{
    flex: 1 1 100%;
    flex-direction: row;
    justify-content: flex-start;
  }
  .oh-col-actions .oh-btn{width: auto;}
}

@media (max-width: 575.98px){
  .oh-title{font-size: 24px;}
  .oh-header{flex-direction: column; align-items: stretch;}
  .oh-filter-pills{overflow-x: auto; scrollbar-width: none;}
  .oh-filter-pills::-webkit-scrollbar{display:none;}
  .oh-order-card{padding: 16px 18px;}
  .oh-col-id, .oh-col-status, .oh-col-items{flex: 1 1 100%;}
  .oh-col-actions{flex-direction: column;}
  .oh-col-actions .oh-btn{width: 100%;}
}

.payment-methods-section{padding: 30px 0 60px;}

/* ---- Breadcrumb ---- */
.pm-breadcrumb .breadcrumb{
  margin: 0 0 14px;
  font-size: 10.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.pm-breadcrumb .breadcrumb-item a{color: var(--pm-text-secondary); text-decoration: none;}
.pm-breadcrumb .breadcrumb-item a:hover{color: var(--pm-blue);}
.pm-breadcrumb .breadcrumb-item.active{color: var(--pm-text-main); font-weight:700;}

/* ---- Header ---- */
.pm-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.pm-title{font-size: 28px; font-weight: 800; color: var(--pm-text-main); margin: 0 0 6px;}
.pm-subtitle{font-size: 13px; color: var(--pm-blue); margin: 0;}

.pm-new-card-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: none;
  border-radius: 24px;
  background: var(--pm-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
  box-shadow: 0 8px 18px rgba(37,99,235,.25);
}
.pm-new-card-btn:hover{background: var(--pm-blue-dark); transform: translateY(-2px);}

/* ---- Cards row ---- */
.pm-cards-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}

.pm-card{
  position: relative;
  border-radius: 16px;
  padding: 18px 20px;
  min-height: 150px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* Visual card style */
.pm-card-visual{
  background: linear-gradient(135deg, #f5f8ff 0%, #e9f0ff 60%, #dde9ff 100%);
  border: 1px solid #dce6fb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.pm-card-visual::after{
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 60%; height: 180%;
  background: radial-gradient(circle, rgba(37,99,235,.12), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
}
.pm-card-visual:hover::after{opacity: 1;}
.pm-card-visual:hover{
  transform: translateY(-5px);
  box-shadow: 0 18px 32px rgba(37,99,235,.14);
  border-color: #c3d6fb;
}

.pm-default-badge{
  position: absolute;
  top: 14px; right: 44px;
  background: var(--pm-blue);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 4px 10px;
  border-radius: 20px;
}
.pm-contactless{
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid #c9d6ef;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--pm-text-secondary);
  font-size: 12px;
}
.pm-chip{
  display: block;
  width: 34px; height: 24px;
  border-radius: 5px;
  background: linear-gradient(135deg, #fdfdfd, #dfe6f2);
  margin-bottom: 26px;
}

.pm-card-number{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--pm-text-main);
  margin-bottom: 14px;
}
.pm-card-number span{letter-spacing: 1px;}

.pm-card-footer{
  display: flex;
  align-items: center;
  gap: 22px;
}
.pm-card-label{
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #9aa6bd;
}

.pm-card-brand{
  margin-left: auto;
  display: flex;
  align-items: center;
}
.pm-brand-mastercard{position: relative; width: 34px; height: 22px;}
.pm-brand-mastercard span{
  position: absolute;
  top: 0; width: 22px; height: 22px;
  border-radius: 50%;
}
.pm-brand-mastercard span:first-child{left: 0; background: #eb001b;}
.pm-brand-mastercard span:last-child{left: 12px; background: #f79e1b; mix-blend-mode: multiply;}

/* Add new card */
.pm-card-add{
  background: #fff;
  border: 1.5px dashed var(--pm-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.pm-card-add:hover{
  border-color: var(--pm-blue);
  background: #f7faff;
  transform: translateY(-5px);
  box-shadow: 0 18px 32px rgba(37,99,235,.1);
}
.pm-add-icon{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--pm-blue);
  opacity: .12;
  display: flex; align-items: center; justify-content: center;
  color: var(--pm-blue);
  font-size: 16px;
  margin-bottom: 4px;
  transition: .2s;
}
.pm-card-add:hover .pm-add-icon{opacity: 1; background: var(--pm-blue); color: #fff;}
.pm-add-title{font-size: 13.5px; font-weight: 700; color: var(--pm-text-main);}
.pm-add-subtitle{font-size: 11.5px; color: var(--pm-text-secondary);}

/* ---- Other payment methods ---- */
.pm-section-title{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  color: var(--pm-text-main);
  margin-bottom: 14px;
}
.pm-section-title i{color: var(--pm-blue);}

.pm-method-list{list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px;}
.pm-method-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--pm-border);
  border-radius: 12px;
  background: #fff;
  transition: .25s;
}
.pm-method-item:hover{
  border-color: #dce6fb;
  box-shadow: 0 10px 24px rgba(20,30,55,.06);
  transform: translateY(-2px);
}

.pm-method-left{display: flex; align-items: center; gap: 12px;}
.pm-method-icon{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #f3f5f9;
  display: flex; align-items: center; justify-content: center;
  color: var(--pm-text-main);
  font-size: 16px;
  flex-shrink: 0;
}
.pm-method-name{font-size: 13.5px; font-weight: 700; color: var(--pm-text-main); margin: 0;}
.pm-method-detail{font-size: 11.5px; color: var(--pm-text-secondary); margin: 0;}

.pm-method-right{display: flex; align-items: center; gap: 16px;}
.pm-connected-status{
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-green);
}
.pm-delete-btn{
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--pm-border);
  background: #fff;
  color: var(--pm-text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: .2s;
}
.pm-delete-btn:hover{border-color: #f87171; color: #ef4444; background: #fef2f2;}

.pm-link-account-btn{
  width: 100%;
  padding: 13px;
  border: 1.5px dashed var(--pm-border);
  border-radius: 12px;
  background: #fff;
  color: var(--pm-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: .2s;
  margin-bottom: 40px;
}
.pm-link-account-btn:hover{border-color: var(--pm-blue); color: var(--pm-blue); background: #f7faff;}

/* ---- Security note ---- */
.pm-security-note{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f5f9ff, #eef4ff);
  border: 1px solid #e2ecfd;
}
.pm-security-icon{
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--pm-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.pm-security-text{flex: 1;}
.pm-security-text h6{font-size: 14px; font-weight: 700; color: var(--pm-text-main); margin: 0 0 4px;}
.pm-security-text p{font-size: 12.5px; color: var(--pm-text-secondary); margin: 0; line-height: 1.6;}
.pm-security-badges{display: flex; gap: 14px; flex-shrink: 0; color: #b0b9c8; font-size: 17px; align-self: center;}

/* ============ MODAL ============ */
.pm-modal .modal-content{border: none; border-radius: 16px; overflow: hidden;}
.pm-modal .modal-header{border-bottom: 1px solid var(--pm-border); padding: 18px 22px;}
.pm-modal .modal-title{font-size: 16px; font-weight: 800; color: var(--pm-text-main);}
.pm-modal .modal-body{padding: 22px;}
.pm-modal .modal-footer{border-top: 1px solid var(--pm-border); padding: 16px 22px;}

.pm-preview-card{
  background: linear-gradient(135deg, #1e3a8a, #2563eb 60%, #3b82f6);
  border-radius: 14px;
  padding: 18px 20px;
  color: #fff;
  margin-bottom: 22px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pm-preview-card .pm-chip{background: linear-gradient(135deg,#fef3c7,#fcd34d); margin-bottom: 18px;}
.pm-preview-number{font-size: 17px; font-weight: 700; letter-spacing: 2px;}
.pm-preview-footer{display: flex; justify-content: space-between; align-items: flex-end;}
.pm-preview-footer .pm-card-label{color: rgba(255,255,255,.65);}
.pm-preview-name, .pm-preview-expiry{display: block; font-size: 12.5px; font-weight: 600; margin-top: 2px; letter-spacing: .5px;}

.pm-field-label{font-size: 12px; font-weight: 600; color: var(--pm-text-main); margin-bottom: 6px; display: block;}
.pm-input{
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--pm-border);
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--pm-text-main);
  transition: .2s;
}
.pm-input:focus{outline: none; border-color: var(--pm-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12);}

.pm-checkbox{display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--pm-text-main); cursor: pointer;}
.pm-checkbox input{width: 16px; height: 16px; accent-color: var(--pm-blue); cursor: pointer;}

.pm-btn{
  padding: 11px 22px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: .2s;
}
.pm-btn-outline{background: #fff; border-color: var(--pm-border); color: var(--pm-text-main);}
.pm-btn-outline:hover{border-color: var(--pm-text-secondary);}
.pm-btn-primary{background: var(--pm-blue); color: #fff;}
.pm-btn-primary:hover{background: var(--pm-blue-dark);}
.pm-btn-primary.saved{background: var(--pm-green);}

/* ---- Responsive ---- */
@media (max-width: 991.98px){
  .pm-cards-row{grid-template-columns: repeat(2, 1fr);}
  .pm-card-add{grid-column: span 2;}
}

@media (max-width: 575.98px){
  .pm-cards-row{grid-template-columns: 1fr;}
  .pm-card-add{grid-column: span 1;}
  .pm-title{font-size: 22px;}
  .pm-header{flex-direction: column; align-items: stretch;}
  .pm-new-card-btn{justify-content: center;}
  .pm-method-item{flex-wrap: wrap; row-gap: 10px;}
  .pm-method-right{width: 100%; justify-content: space-between;}
  .pm-security-note{flex-direction: column;}
  .pm-security-badges{align-self: flex-start;}
}


.address-book-section{padding: 30px 0 60px;}

/* ---- Breadcrumb ---- */
.ab-breadcrumb .breadcrumb{
  margin: 0 0 14px;
  font-size: 10.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.ab-breadcrumb .breadcrumb-item a{color: var(--ab-text-secondary); text-decoration: none;}
.ab-breadcrumb .breadcrumb-item a:hover{color: var(--ab-blue);}
.ab-breadcrumb .breadcrumb-item.active{color: var(--ab-text-main); font-weight: 700;}

/* ---- Header ---- */
.ab-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ab-title{font-size: 26px; font-weight: 700; color: var(--ab-text-main); margin: 0 0 6px;}
.ab-subtitle{font-size: 13px; color: var(--ab-text-secondary); margin: 0;}

.ab-add-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--ab-border);
  border-radius: 24px;
  background: #fff;
  color: var(--ab-text-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
}
.ab-add-btn:hover{
  border-color: var(--ab-blue);
  color: var(--ab-blue);
  box-shadow: 0 8px 18px rgba(37,99,235,.12);
}

/* ---- Tabs ---- */
.ab-tabs{
  display: flex;
  gap: 26px;
  border-bottom: 1px solid var(--ab-border);
  margin-bottom: 20px;
}
.ab-tab{
  position: relative;
  background: none;
  border: none;
  padding: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ab-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color .2s ease;
}
.ab-tab:hover{color: var(--ab-text-main);}
.ab-tab.active{color: var(--ab-blue);}
.ab-tab.active::after{
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--ab-blue);
  border-radius: 2px;
}
.ab-tab-count{
  background: var(--ab-blue-light);
  color: var(--ab-blue-dark);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
}
.ab-tab:not(.active) .ab-tab-count{background: #f1f3f6; color: var(--ab-text-secondary);}

.ab-tab-panel{display: none;}
.ab-tab-panel.active{display: block;}

/* ---- Address cards ---- */
.ab-address-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 30px;
}

.ab-address-card{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--ab-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ab-address-card::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ab-blue);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s ease;
}
.ab-address-card:hover::before{transform: scaleY(1);}
.ab-address-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(20,30,55,.08);
  border-color: #dfe8fb;
}

.ab-address-icon{
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ab-icon-home{background: var(--ab-blue-light); color: var(--ab-blue);}
.ab-icon-office{background: #f1f3f6; color: var(--ab-text-secondary);}
.ab-icon-heart{background: #fdeef1; color: #ef4785;}

.ab-address-title-row{display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.ab-address-title{font-size: 13.5px; font-weight: 700; color: var(--ab-text-main); margin: 0;}
.ab-address-tag{
  font-size: 10px;
  font-weight: 600;
  color: var(--ab-text-secondary);
  background: #f1f3f6;
  padding: 2px 9px;
  border-radius: 12px;
}
.ab-tag-default{background: var(--ab-blue-light); color: var(--ab-blue-dark);}

.ab-address-line{font-size: 12.5px; color: var(--ab-text-secondary);}
.ab-address-city{color: var(--ab-text-main); font-weight: 500;}

.ab-address-actions{
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.ab-address-card:hover .ab-address-actions{opacity: 1; transform: translateX(0);}
.ab-action-btn{
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--ab-border);
  background: #fff;
  color: var(--ab-text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: .2s;
}
.ab-action-btn:hover{border-color: var(--ab-blue); color: var(--ab-blue); background: var(--ab-blue-light);}
.ab-action-danger:hover{border-color: #f87171; color: #ef4444; background: #fef2f2;}

/* ---- Empty state (billing tab) ---- */
.ab-empty-state{
  text-align: center;
  padding: 50px 20px;
  color: var(--ab-text-secondary);
  border: 1px dashed var(--ab-border);
  border-radius: 14px;
  margin-bottom: 30px;
}
.ab-empty-state i{font-size: 32px; color: var(--ab-border); display: block; margin-bottom: 10px;}
.ab-empty-state p{margin: 0; font-size: 13px;}

/* ---- Help box ---- */
.ab-help-box{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f6f9ff, #eef4ff);
  border: 1px solid #e2ecfd;
}
.ab-help-icon{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ab-blue-light);
  color: var(--ab-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.ab-help-text{flex: 1;}
.ab-help-text h6{font-size: 13.5px; font-weight: 700; color: var(--ab-text-main); margin: 0 0 3px;}
.ab-help-text p{font-size: 12px; color: var(--ab-text-secondary); margin: 0; line-height: 1.5;}
.ab-support-btn{
  flex-shrink: 0;
  padding: 9px 20px;
  border-radius: 24px;
  border: 1px solid var(--ab-border);
  background: #fff;
  color: var(--ab-text-main);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: .2s;
}
.ab-support-btn:hover{border-color: var(--ab-blue); color: var(--ab-blue);}

/* ============ MODAL ============ */
.ab-modal .modal-content{border: none; border-radius: 16px; overflow: hidden;}
.ab-modal .modal-header{border-bottom: 1px solid var(--ab-border); padding: 18px 22px;}
.ab-modal .modal-title{font-size: 16px; font-weight: 800; color: var(--ab-text-main);}
.ab-modal .modal-body{padding: 22px;}
.ab-modal .modal-footer{border-top: 1px solid var(--ab-border); padding: 16px 22px;}

.ab-field-label{font-size: 12px; font-weight: 600; color: var(--ab-text-main); margin-bottom: 6px; display: block;}
.ab-optional{color: var(--ab-text-secondary); font-weight: 400;}
.ab-input{
  width: 100%;
  padding: 10.5px 14px;
  border: 1px solid var(--ab-border);
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--ab-text-main);
  background: #fff;
  transition: .2s;
}
.ab-input:focus{outline: none; border-color: var(--ab-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12);}

.ab-type-group{display: flex; gap: 10px;}
.ab-type-btn{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--ab-border);
  border-radius: 9px;
  background: #fff;
  color: var(--ab-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
}
.ab-type-btn:hover{border-color: var(--ab-blue); color: var(--ab-blue);}
.ab-type-btn.active{background: var(--ab-blue-light); border-color: var(--ab-blue); color: var(--ab-blue-dark);}

.ab-checkbox{display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ab-text-main); cursor: pointer;}
.ab-checkbox input{width: 16px; height: 16px; accent-color: var(--ab-blue); cursor: pointer;}

.ab-btn{
  padding: 11px 22px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: .2s;
}
.ab-btn-outline{background: #fff; border-color: var(--ab-border); color: var(--ab-text-main);}
.ab-btn-outline:hover{border-color: var(--ab-text-secondary);}
.ab-btn-primary{background: var(--ab-blue); color: #fff;}
.ab-btn-primary:hover{background: var(--ab-blue-dark);}
.ab-btn-primary.saved{background: #16a34a;}

/* ---- Responsive ---- */
@media (max-width: 991.98px){
  .ab-address-card{
    grid-template-columns: auto 1fr;
    row-gap: 8px;
  }
  .ab-address-info{grid-column: 2;}
  .ab-address-line{grid-column: 2;}
  .ab-address-actions{
    grid-column: 1 / -1;
    justify-content: flex-end;
    opacity: 1;
    transform: none;
    border-top: 1px solid var(--ab-border);
    padding-top: 10px;
    margin-top: 4px;
  }
}

@media (max-width: 575.98px){
  .ab-title{font-size: 21px;}
  .ab-header{flex-direction: column; align-items: stretch;}
  .ab-add-btn{justify-content: center;}
  .ab-help-box{flex-direction: column; align-items: flex-start;}
  .ab-support-btn{align-self: stretch; text-align: center;}
  .ab-type-group{flex-direction: column;}
}


.returns-section{padding: 30px 0 60px;}

/* ---- Breadcrumb ---- */
.rs-breadcrumb .breadcrumb{
  margin: 0 0 14px;
  font-size: 10.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.rs-breadcrumb .breadcrumb-item a{color: var(--rs-text-secondary); text-decoration: none;}
.rs-breadcrumb .breadcrumb-item a:hover{color: var(--rs-blue);}
.rs-breadcrumb .breadcrumb-item.active{color: var(--rs-text-main); font-weight: 700;}

/* ---- Header ---- */
.rs-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.rs-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--rs-green);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.rs-title{font-size: 28px; font-weight: 800; color: var(--rs-text-main); margin: 0 0 6px;}
.rs-subtitle{font-size: 13px; color: var(--rs-text-secondary); margin: 0; max-width: 480px;}

.rs-new-return-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: none;
  border-radius: 24px;
  background: var(--rs-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
  box-shadow: 0 8px 18px rgba(37,99,235,.25);
  flex-shrink: 0;
}
.rs-new-return-btn:hover{background: var(--rs-blue-dark); transform: translateY(-2px);}

/* ---- Filter pills ---- */
.rs-filter-pills{
  display: flex;
  gap: 10px;
  margin-bottom: 26px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rs-filter-pills::-webkit-scrollbar{display: none;}
.rs-pill{
  flex-shrink: 0;
  padding: 9px 20px;
  border-radius: 24px;
  border: none;
  background: var(--rs-blue-light);
  color: var(--rs-blue-dark);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
}
.rs-pill:hover{background: #d9e7fe;}
.rs-pill.active{
  background: var(--rs-blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(37,99,235,.25);
}

/* ---- Return cards ---- */
.rs-return-list{display: flex; flex-direction: column; gap: 18px; margin-bottom: 36px;}

.rs-return-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--rs-border);
  border-radius: 16px;
  padding: 22px 24px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rs-return-card::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--rs-blue), #60a5fa);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}
.rs-return-card:hover::before{transform: scaleY(1);}
.rs-return-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(20,30,55,.09);
  border-color: #dfe8fb;
}

.rs-return-top{
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}
.rs-return-thumb{
  width: 84px; height: 84px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f3f5f9;
}
.rs-return-thumb img{width: 100%; height: 100%; object-fit: cover;}

.rs-return-info{flex: 1; min-width: 0;}
.rs-status-tag{
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 8px;
}
.rs-status-initiated{background: var(--rs-orange-light); color: var(--rs-orange);}
.rs-status-received{background: var(--rs-blue-light); color: var(--rs-blue-dark);}

.rs-return-title{font-size: 15.5px; font-weight: 700; color: var(--rs-text-main); margin: 0 0 6px;}
.rs-return-meta{font-size: 12px; color: var(--rs-text-secondary); margin: 0;}
.rs-return-meta strong{color: var(--rs-text-main); font-weight: 600;}

.rs-return-price{
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rs-price{font-size: 17px; font-weight: 800; color: var(--rs-text-main);}
.rs-refund-method{font-size: 10.5px; color: var(--rs-text-secondary); white-space: nowrap;}

/* progress bar */
.rs-progress-block{margin-bottom: 18px;}
.rs-progress-labels{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  margin-bottom: 8px;
}
.rs-step-orange{color: var(--rs-orange);}
.rs-step-blue{color: var(--rs-blue);}
.rs-progress-eta{color: var(--rs-text-secondary); font-weight: 500;}

.rs-progress-bar{
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background: #eef1f6;
  overflow: hidden;
}
.rs-progress-fill{
  height: 100%;
  border-radius: 6px;
  transition: width .6s ease;
}
.rs-fill-orange{background: linear-gradient(90deg, #f97316, var(--rs-orange));}
.rs-fill-blue{background: linear-gradient(90deg, #60a5fa, var(--rs-blue));}

/* action buttons */
.rs-return-actions{display: flex; gap: 12px; flex-wrap: wrap;}
.rs-btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--rs-border);
  text-decoration: none;
  transition: .2s;
}
.rs-btn-outline{background: #fff; color: var(--rs-text-main);}
.rs-btn-outline:hover{border-color: var(--rs-blue); color: var(--rs-blue);}
.rs-btn-solid-orange{background: var(--rs-orange); border-color: var(--rs-orange); color: #fff;}
.rs-btn-solid-orange:hover{background: #c2410c;}

/* ---- Empty state ---- */
.rs-empty-state{
  text-align: center;
  padding: 50px 20px;
  color: var(--rs-text-secondary);
  margin-bottom: 30px;
}
.rs-empty-state i{font-size: 34px; color: var(--rs-border); display: block; margin-bottom: 10px;}
.rs-empty-state p{margin: 0; font-size: 13.5px;}

/* ---- Info footer cards ---- */
.rs-info-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.rs-info-card{
  background: #fff;
  border: 1px solid var(--rs-border);
  border-radius: 14px;
  padding: 20px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rs-info-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(20,30,55,.08);
  border-color: #dfe8fb;
}
.rs-info-icon{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--rs-blue-light);
  color: var(--rs-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  margin-bottom: 12px;
}
.rs-info-card h6{font-size: 13.5px; font-weight: 700; color: var(--rs-text-main); margin: 0 0 6px;}
.rs-info-card p{font-size: 12px; color: var(--rs-text-secondary); margin: 0; line-height: 1.6;}

/* ---- Responsive ---- */
@media (max-width: 991.98px){
  .rs-info-row{grid-template-columns: repeat(3, 1fr); gap: 12px;}
}

@media (max-width: 767.98px){
  .rs-return-top{flex-wrap: wrap;}
  .rs-return-price{
    text-align: left;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-left: 100px;
  }
  .rs-info-row{grid-template-columns: 1fr;}
}

@media (max-width: 575.98px){
  .rs-title{font-size: 22px;}
  .rs-header{flex-direction: column; align-items: stretch;}
  .rs-new-return-btn{justify-content: center;}
  .rs-return-card{padding: 16px 18px;}
  .rs-return-thumb{width: 64px; height: 64px;}
  .rs-return-price{padding-left: 0; flex-direction: column; align-items: flex-start;}
  .rs-return-actions .rs-btn{flex: 1; justify-content: center;}
}


.cancelled-orders-section{padding: 30px 0 60px;}

/* ---- Breadcrumb ---- */
.co-breadcrumb .breadcrumb{
  margin: 0 0 14px;
  font-size: 10.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.co-breadcrumb .breadcrumb-item a{color: var(--co-text-secondary); text-decoration: none;}
.co-breadcrumb .breadcrumb-item a:hover{color: var(--co-blue);}
.co-breadcrumb .breadcrumb-item.active{color: var(--co-text-main); font-weight: 700;}

/* ---- Header ---- */
.co-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.co-title{font-size: 27px; font-weight: 800; color: var(--co-text-main); margin: 0 0 6px;}
.co-subtitle{font-size: 13px; color: var(--co-text-secondary); margin: 0;}

.co-toggle{
  display: flex;
  padding: 4px;
  border-radius: 10px;
  background: #f1f3f6;
  flex-shrink: 0;
}
.co-toggle-btn{
  padding: 8px 18px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--co-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
}
.co-toggle-btn.active{
  background: var(--co-dark);
  color: #fff;
  box-shadow: 0 6px 14px rgba(15,23,42,.2);
}

/* ---- Order cards ---- */
.co-order-list{display: flex; flex-direction: column; gap: 16px;}

.co-order-card{
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--co-border);
  border-radius: 16px;
  padding: 20px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.co-order-card::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--co-dark), #334155);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}
.co-order-card:hover::before{transform: scaleY(1);}
.co-order-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(20,30,55,.1);
  border-color: #dfe3ea;
}

.co-order-thumb{
  width: 96px; height: 96px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.co-order-thumb img{width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease;}
.co-order-card:hover .co-order-thumb img{transform: scale(1.06);}
.co-thumb-cream{background: #f2e9df;}
.co-thumb-dark{background: #0f172a;}
.co-thumb-slate{background: #4b5563;}

.co-order-body{flex: 1; min-width: 0;}
.co-order-top{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.co-status-tag{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 3px 10px;
  border-radius: 12px;
}
.co-status-processed{background: var(--co-green-light); color: var(--co-green);}
.co-status-pending{background: var(--co-yellow-light); color: var(--co-yellow);}
.co-order-id{font-size: 11px; color: var(--co-text-secondary);}

.co-order-title{
  font-size: 14.5px;
  font-weight: 700;
  color: var(--co-text-main);
  margin: 0 0 12px;
  line-height: 1.4;
}

.co-meta-row{
  display: flex;
  gap: 40px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.co-meta-block{display: flex; flex-direction: column; gap: 3px;}
.co-meta-label{
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #b6bcc8;
}
.co-meta-value{font-size: 12.5px; font-weight: 600; color: var(--co-text-main);}
.co-refund-amount{color: var(--co-blue); font-weight: 700;}

.co-reason-block{padding-top: 10px; border-top: 1px dashed var(--co-border);}
.co-reason-text{
  font-size: 12px;
  font-style: italic;
  color: var(--co-text-secondary);
  margin: 4px 0 0;
  line-height: 1.6;
}

.co-order-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  width: 160px;
}
.co-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--co-border);
  text-decoration: none;
  transition: .2s;
  white-space: nowrap;
}
.co-btn-dark{background: var(--co-dark); border-color: var(--co-dark); color: #fff;}
.co-btn-dark:hover{background: var(--co-dark-hover); color: #fff;}
.co-btn-outline{background: #fff; color: var(--co-text-main);}
.co-btn-outline:hover{border-color: var(--co-blue); color: var(--co-blue);}

/* ---- Empty state ---- */
.co-empty-state{
  text-align: center;
  padding: 50px 20px;
  color: var(--co-text-secondary);
}
.co-empty-state i{font-size: 34px; color: var(--co-border); display: block; margin-bottom: 10px;}
.co-empty-state p{margin: 0; font-size: 13.5px;}

/* ---- Responsive ---- */
@media (max-width: 767.98px){
  .co-order-card{flex-wrap: wrap;}
  .co-order-thumb{width: 76px; height: 76px;}
  .co-order-actions{
    flex-direction: row;
    width: 100%;
    padding-left: 96px;
  }
  .co-order-actions .co-btn{flex: 1;}
}

@media (max-width: 575.98px){
  .co-title{font-size: 21px;}
  .co-header{flex-direction: column; align-items: stretch;}
  .co-toggle{align-self: flex-start;}
  .co-order-card{padding: 16px;}
  .co-order-thumb{width: 64px; height: 64px;}
  .co-order-actions{padding-left: 0; flex-direction: column;}
  .co-meta-row{gap: 20px;}
}


.about-hero-section{
  padding: 24px 0 70px;
  overflow: hidden;
}

/* ---- Breadcrumb ---- */
.abt-breadcrumb .breadcrumb{
  margin: 0 0 30px;
  font-size: 11px;
}
.abt-breadcrumb .breadcrumb-item a{color: var(--abt-text-secondary); text-decoration: none;}
.abt-breadcrumb .breadcrumb-item a:hover{color: var(--abt-blue);}
.abt-breadcrumb .breadcrumb-item.active{color: var(--abt-text-main); font-weight: 600;}

/* ---- Hero content ---- */
.abt-hero-row{margin-bottom: 80px;}

.abt-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--abt-blue-light);
  color: var(--abt-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.abt-hero-title{
  font-size: 44px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--abt-text-main);
  margin: 0 0 20px;
}
.abt-highlight{color: var(--abt-blue);}

.abt-hero-text{
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--abt-text-secondary);
  max-width: 480px;
  margin: 0 0 30px;
}

.abt-hero-actions{display: flex; gap: 14px; flex-wrap: wrap;}
.abt-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: .25s;
}
.abt-btn-primary{
  background: var(--abt-blue);
  color: #fff;
  box-shadow: 0 10px 22px rgba(37,99,235,.25);
}
.abt-btn-primary:hover{background: #1d4ed8; transform: translateY(-2px); color:#fff;}
.abt-btn-outline{
  background: #fff;
  border-color: var(--abt-border);
  color: var(--abt-text-main);
}
.abt-btn-outline:hover{border-color: var(--abt-blue); color: var(--abt-blue); transform: translateY(-2px);}

/* ---- Hero visual ---- */
.abt-hero-visual{
  position: relative;
  max-width: 460px;
  margin: 0 auto;
}
.abt-hero-image{
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(20,30,55,.15);
  transition: transform .5s ease, box-shadow .5s ease;
}
.abt-hero-image img{
  width: 100%;
  height: 100%;
  aspect-ratio: 4/4.6;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.abt-hero-visual:hover .abt-hero-image{
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 40px 70px rgba(20,30,55,.2);
}
.abt-hero-visual:hover .abt-hero-image img{transform: scale(1.05);}

.abt-floating-badge{
  position: absolute;
  left: -24px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 12px 18px 12px 12px;
  box-shadow: 0 16px 32px rgba(20,30,55,.15);
  transition: transform .3s ease, box-shadow .3s ease;
}
.abt-hero-visual:hover .abt-floating-badge{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(20,30,55,.2);
}
.abt-badge-icon{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--abt-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.abt-floating-badge h6{font-size: 12.5px; font-weight: 700; color: var(--abt-text-main); margin: 0;}
.abt-floating-badge p{font-size: 11px; color: var(--abt-text-secondary); margin: 0;}

/* ---- Core principles ---- */
.abt-principles-heading{
  text-align: center;
  max-width: 560px;
  margin: 0 auto 40px;
}
.abt-principles-heading h2{
  font-size: 26px;
  font-weight: 800;
  color: var(--abt-text-main);
  margin: 0 0 10px;
}
.abt-principles-heading p{
  font-size: 13.5px;
  color: var(--abt-text-secondary);
  margin: 0;
  line-height: 1.6;
}

.abt-principle-card{
  height: 100%;
  background: #fff;
  border: 1px solid var(--abt-border);
  border-radius: 16px;
  padding: 26px 22px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.abt-principle-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(37,99,235,.12);
  border-color: #dbe6fc;
}
.abt-principle-icon{
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--abt-blue-light);
  color: var(--abt-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  margin: 0 auto 16px;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.abt-principle-card:hover .abt-principle-icon{
  background: var(--abt-blue);
  color: #fff;
  transform: scale(1.08) rotate(-6deg);
}
.abt-principle-card h6{
  font-size: 13.5px;
  font-weight: 700;
  color: var(--abt-text-main);
  margin: 0 0 8px;
}
.abt-principle-card p{
  font-size: 12px;
  color: var(--abt-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px){
  .abt-hero-title{font-size: 34px;}
  .abt-hero-visual{max-width: 380px; margin-top: 20px;}
  .abt-hero-row{margin-bottom: 60px;}
}

@media (max-width: 767.98px){
  .abt-hero-content{text-align: left;}
  .abt-hero-title{font-size: 30px;}
  .abt-floating-badge{left: 12px; bottom: 16px; padding: 10px 14px 10px 10px;}
}

@media (max-width: 575.98px){
  .abt-hero-title{font-size: 26px;}
  .abt-hero-actions{flex-direction: column; align-items: stretch;}
  .abt-btn{justify-content: center;}
  .abt-hero-visual{max-width: 100%;}
  .abt-principles-heading h2{font-size: 22px;}
}
:root{
  --lt-blue: #2563eb;
  --lt-text-main: #1a2233;
  --lt-text-secondary: #8891a0;
}

.leadership-team-section{padding: 50px 0 60px;}

.lt-heading{
  text-align: center;
  margin-bottom: 34px;
}
.lt-heading h2{
  font-size: 24px;
  font-weight: 800;
  color: var(--lt-text-main);
  margin: 0 0 8px;
}
.lt-heading p{
  font-size: 13px;
  color: var(--lt-text-secondary);
  margin: 0;
}

.lt-card{
  cursor: pointer;
}

/* image box: fixed aspect ratio, image always fully visible & uncropped/unstretched */
.lt-photo{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  border-radius: 16px;
  overflow: hidden;
  background: #eef1f6;
  margin-bottom: 14px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.lt-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills the box proportionally, no stretch */
  object-position: top;   /* keeps faces from being cropped off the top */
  display: block;
  transition: transform .5s ease;
}

.lt-card:hover .lt-photo{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(20,30,55,.16);
}
.lt-card:hover .lt-photo img{
  transform: scale(1.06);
}

.lt-name{
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lt-text-main);
  margin: 0 0 2px;
  text-align: center;
  transition: color .2s ease;
}
.lt-card:hover .lt-name{color: var(--lt-blue);}

.lt-role{
  font-size: 11.5px;
  color: var(--lt-blue);
  margin: 0;
  text-align: center;
}
.login-btn i{
  font-size: 20px;
}
.login-btn span {
    vertical-align: text-bottom;
    font-size: 15px;
    margin-left: 3px;
}
/* ---- Responsive ---- */
@media (max-width: 767.98px){
  .lt-heading h2{font-size: 20px;}
  .lt-name{font-size: 12.5px;}
  .lt-role{font-size: 11px;}
}

@media (max-width: 575.98px){
  .lt-photo{border-radius: 12px;}
}