/**
 * theme-overrides.css — Suleman Opticals
 * LOADS LAST — overrides everything with the black & gold dark theme.
 */

/* =========================================================
   ABOUT US - DIVI LAYOUT
========================================================= */

.about-divi-layout {
  background-color: #050505;
  color: #fff;
  font-family: var(--font-secondary);
}

.about-divi-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

/* 1. Hero Section */
.about-divi-hero {
  background: #000;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(212,175,55,0.1);
}

.about-divi-hero .about-divi-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  min-height: 80vh;
}

.about-divi-hero-content {
  flex: 1 1 500px;
}

.about-divi-eyebrow {
  display: inline-block;
  color: #D4AF37;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  position: relative;
  text-transform: uppercase;
}
.about-divi-eyebrow::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 50%;
  width: 30px;
  height: 2px;
  background: #D4AF37;
}

.about-divi-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: #fff;
}

.about-divi-desc {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #aaa;
  margin-bottom: 2.5rem;
}

.about-divi-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.about-divi-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 2rem;
  background: #D4AF37;
  color: #000;
  text-decoration: none;
  font-weight: 700;
  border-radius: 50px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.about-divi-btn-primary:hover {
  background: #e5c354;
  color: #000;
  transform: translateY(-2px);
}

.about-divi-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 2rem;
  background: transparent;
  color: #fff;
  border: 2px solid #333;
  text-decoration: none;
  font-weight: 700;
  border-radius: 50px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.about-divi-btn-secondary:hover {
  border-color: #D4AF37;
  color: #D4AF37;
}

.about-divi-hero-image {
  flex: 1 1 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.about-divi-hero-image img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
}

/* 2. Features Grid */
.about-divi-features {
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.about-divi-section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 3rem;
  color: #fff;
}
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

.about-divi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
  margin-top: 3rem;
}

.about-divi-card {
  background: transparent;
  padding: 1rem 0;
  text-align: center;
  border: none;
  transition: transform 0.3s ease;
}
.about-divi-card:hover {
  transform: translateY(-5px);
}

.about-divi-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  margin: 0 auto 1.5rem auto; /* Centered */
}

.about-divi-card h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #fff;
  font-weight: 600;
}
.about-divi-card p {
  color: #888;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Responsive Rules for Mobile */
@media (max-width: 991px) {
  .about-divi-hero .about-divi-container,
  .about-divi-focus .about-divi-container {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
  
  .about-divi-hero-actions {
    justify-content: center;
  }
  
  .about-divi-eyebrow::before {
    display: none; /* Hide the line on mobile so it centers nicely */
  }
}

/* 3. Our Focus Section */
.about-divi-focus {
  background: #0a0a0a;
}
.about-divi-focus .about-divi-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4rem;
}
.about-divi-focus-image {
  flex: 1 1 400px;
}
.about-divi-focus-image img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.about-divi-focus-content {
  flex: 1 1 400px;
}
.about-divi-progress-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.about-divi-progress-item {
  width: 100%;
}
.about-divi-progress-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #ddd;
}
.about-divi-progress-bar {
  width: 100%;
  height: 10px;
  background: #222;
  border-radius: 5px;
  overflow: hidden;
}
.about-divi-progress-fill {
  height: 100%;
  border-radius: 5px;
}

/* 4. CTA Section */
.about-divi-cta {
  background: linear-gradient(135deg, #111 0%, #000 100%);
  padding: 6rem 0;
  border-top: 1px solid rgba(212,175,55,0.1);
  position: relative;
}
.about-divi-cta::before,
.about-divi-cta::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  background: #D4AF37;
  opacity: 0.05;
  border-radius: 50%;
  z-index: 0;
}
.about-divi-cta::before {
  top: -50px; left: -50px;
}
.about-divi-cta::after {
  bottom: -50px; right: -50px;
}
.about-divi-cta .about-divi-container {
  position: relative;
  z-index: 1;
}

@keyframes csSkel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   BASE LIGHT THEME
   ============================================================ */
body {
  background: #ffffff !important;
  background-image: none !important;
  color: #111111 !important;
}
body::before,
body::after {
  display: none !important;
}

main,
.explore-brands,
.brand-arch,
.cat-grid-section,
.bestseller-products,
.trending-products,
#trending-section,
#bestsellers,
#explore-by-brands {
  background-color: #ffffff !important;
}

.cv-header,
.cv-navbar,
.cv-navbar__inner,
.cv-navbar__collapse,
.cv-header .cv-navbar,
.cv-header .cv-navbar a,
.cv-header .cv-navbar span:not(.cv-cart-badge):not(.online-indicator),
.cv-header .cv-navbar i,
.cv-header .cv-nav__link,
.cv-header .cv-brand__name,
.cv-footer,
.cv-footer * {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Style top header bar luxury dark */
.cv-header__top,
.cv-header__top-inner {
  background: #0a0a0d !important;
  background-color: #0a0a0d !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.cv-header__top *,
.cv-header__phone,
.cv-header__phone *,
.cv-header__social a {
  background: transparent !important;
  color: #D4AF37 !important;
}

/* USER ACCOUNT HEADER BUTTON WITH USERNAME */
#userAccountBtn {
  width: auto !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  overflow: visible !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

#userAccountBtn:hover {
  background: rgba(212, 175, 55, 0.2) !important;
  border-color: #D4AF37 !important;
}

#userAccountName {
  display: inline-block !important;
  color: #D4AF37 !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}

.cv-header .cv-navbar a:hover,
.cv-header .cv-navbar a:hover *,
.cv-header .cv-nav__link:hover,
.cv-header .cv-nav__link.active,
.cv-header .cv-brand__name:hover,
.cv-footer a:hover {
  color: var(--cv-accent, #D4AF37) !important;
}

/* ============================================================
   SECTION HEADINGS — Trending / Best Selling / All sections
   ============================================================ */
.section-header-split__title,
.section-header-split__subtitle,
.section-header-split__eyebrow,
.section-header-split__link,
.section-header-split__cta {
  color: #111111 !important;
  text-shadow: none !important;
}
.section-header-split__eyebrow,
.section-header-split__link,
.section-header-split__cta {
  color: #D4AF37 !important;
}
.section-header-split__subtitle {
  color: rgba(0,0,0,0.65) !important;
}
.section-header-split__cta {
  background: transparent !important;
  border-color: rgba(212,175,55,0.4) !important;
}
.section-header-split__cta:hover {
  background: #D4AF37 !important;
  color: #ffffff !important;
  border-color: #D4AF37 !important;
}

/* ============================================================
   PRODUCT CARD TEXT — modern-product-card (Trending & Bestsellers)
   ============================================================ */
.modern-product-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #111111 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}
.modern-product-card:hover {
  border-color: rgba(212,175,55,0.6) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
.modern-product-card__media {
  background: #f8f9fa !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
.modern-product-card__title {
  color: #111111 !important;
}
.modern-product-card__rating .stars {
  color: #D4AF37 !important;
}
.modern-product-card__rating .reviews {
  color: rgba(0,0,0,0.5) !important;
}
.modern-product-card__price-row .price-current {
  color: #111111 !important;
  font-weight: 700 !important;
}
.modern-product-card__price-row .price-old {
  color: rgba(0,0,0,0.4) !important;
}
.stock-bar {
  background: rgba(0,0,0,0.08) !important;
}
.stock-progress {
  background: #D4AF37 !important;
}
.stock-text {
  color: rgba(0,0,0,0.6) !important;
}
.stock-text strong {
  color: #111111 !important;
}
.modern-products-section {
  background: transparent !important;
}

/* ============================================================
   CUSTOMER TESTIMONIALS / STORIES SECTION
   ============================================================ */
.cs-section {
  background: #ffffff !important;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  position: relative;
  overflow: hidden;
}
.cs-header__eyebrow,
.cs-header__link {
  color: #D4AF37 !important;
}
.cs-header__title {
  color: #111111 !important;
  font-weight: 800;
}
.cs-header__subtitle {
  color: rgba(0,0,0,0.65) !important;
}
.cs-card {
  position: relative !important;
  display: block !important;
  aspect-ratio: 3 / 4 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.cs-card__bg {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 0 !important;
}
.cs-card__name {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important;
}
.cs-card__role {
  color: rgba(255,255,255,0.75) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important;
}
.cs-badge {
  color: #111111 !important;
  z-index: 3 !important;
}
.cs-badge--yt {
  color: #ffffff !important;
  z-index: 3 !important;
}
/* Empty state */
.cs-empty-slide {
  color: rgba(0,0,0,0.5);
  text-align: center;
  padding: 3rem 1rem;
}

/* Remove top and bottom margins/paddings completely for non-specified sections */
.brand-arch {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Restored old full-width layout for Customer Stories */
.cs-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin-bottom: 2rem !important;
  text-align: left !important;
}

.cs-header div {
  text-align: left !important;
}

.cs-header__link {
  margin-left: auto !important;
  align-self: flex-end !important;
}

/* Add comfortable spacing (2.2rem) on top and bottom for face shape, explore brands, trending, bestselling, and testimonials */
.shop-shapes,
#shapes,
.explore-brands,
#explore-by-brands,
.cs-section,
#testimonials,
.trending-products,
.bestseller-products,
.modern-products-section,
#trending-section,
#bestsellers {
  padding-top: 2.2rem !important;
  padding-bottom: 2.2rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ============================================================
   ALL SECTION BG — light theme
   ============================================================ */
body,
main,
section,
.explore-brands,
.brand-arch,
.cat-grid-section,
.bestseller-products,
.trending-products,
#trending-section,
#bestsellers,
#explore-by-brands {
  background-color: #ffffff !important;
}

/* ============================================================
   PRODUCT CARDS LIGHT THEME & BORDERS
   ============================================================ */
.product-card,
.daraz-card,
.shop-cats__card,
.eb-card,
.pixio-category-card {
  background-color: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #111111 !important;
}
.product-card:hover,
.daraz-card:hover,
.shop-cats__card:hover,
.eb-card:hover,
.pixio-category-card:hover {
  border-color: rgba(212,175,55,0.6) !important;
}

/* Category card names visible */
.shop-cats__card-name {
  color: #111111 !important;
}
.shop-cats__card-cta {
  color: #D4AF37 !important;
}

/* ============================================================
   FILTER PILLS / TAGS LIGHT
   ============================================================ */
.filter-size-pill,
.filter-tag {
  border: 1.5px solid rgba(0,0,0,0.15) !important;
  color: #333333 !important;
  background: #ffffff !important;
}
.filter-size-pill:hover,
.filter-size-pill.is-active,
.filter-tag:hover,
.filter-tag.is-active {
  border-color: #D4AF37 !important;
  color: #D4AF37 !important;
  background: rgba(212,175,55,0.08) !important;
}
.filter-group__title,
.filter-label {
  color: #111111 !important;
}

/* ============================================================
   MISC — light theme cards
   ============================================================ */
.eb-card__info,
.eb-card {
  background: #ffffff !important;
}
.eb-card__category {
  color: rgba(0,0,0,0.6) !important;
}
.eb-card__discount,
.eb-card__name {
  color: #111111 !important;
}

/* ============================================================
   PAGE SPECIFIC & INLINE HARDCODED LIGHT MODE OVERRIDES
   ============================================================ */
/* Contact Us Page */
.contact-v2-body,
.contact-v2-body * {
  background-color: transparent;
}
.contact-v2-details__title,
.contact-v2-body h2,
.contact-v2-body h3,
.contact-v2-body h4 {
  color: #111111 !important;
}
.contact-v2-details__text,
.contact-v2-body p,
.contact-v2-body span {
  color: #444444 !important;
}
.col-lg-6 > div[style*="background: #0f0f0f"],
.contact-v2-body div[style*="background: #0f0f0f"] {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}
#contact-form input,
#contact-form textarea,
#contact-form select {
  background: #f8f9fa !important;
  color: #111111 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* About Us Page */
.about-page-custom-dark,
.about-page-custom-dark main,
.about-page-custom-dark section {
  background-color: #ffffff !important;
  color: #111111 !important;
}
.about-page-custom-dark h1,
.about-page-custom-dark h2,
.about-page-custom-dark h3,
.about-page-custom-dark h4 {
  color: #111111 !important;
}
.about-page-custom-dark p,
.about-page-custom-dark span {
  color: #444444 !important;
}
.about-page-custom-dark section[style*="background: #080808"],
.about-page-custom-dark section[style*="background:#080808"] {
  background: #f8f9fa !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* All Dropdowns */
.user-dropdown-menu,
.cv-dropdown {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}
.user-dropdown-menu a {
  color: #111111 !important;
}

/* General Product Cards Global Override */
.product-card,
.product-card__body,
.product-card__media,
.daraz-card,
.daraz-card__body,
.daraz-card__media {
  background: #ffffff !important;
  color: #111111 !important;
}
.product-card__title,
.daraz-card__title {
  color: #111111 !important;
}

/* ============================================================
   TOP FULL-WIDTH HERO VIDEO BANNER
   ============================================================ */
.top-hero-video-section {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  background: #000000;
  overflow: hidden;
}

.top-hero-video-wrap {
  position: relative;
  width: 100%;
  height: clamp(380px, 60vh, 600px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-hero-video-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.top-hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 100%);
  z-index: 2;
}

.top-hero-video-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 800px;
  padding: 2rem 1.5rem;
  color: #ffffff;
}

.top-hero-badge {
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #D4AF37;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  background: rgba(0,0,0,0.4);
  padding: 0.35rem 1rem;
  border-radius: 100px;
  border: 1px solid rgba(212,175,55,0.4);
}

.top-hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: #ffffff !important;
  line-height: 1.15;
  margin: 0 0 1rem 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.top-hero-subtitle {
  font-family: var(--font-secondary);
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 auto 1.75rem auto;
  max-width: 600px;
  line-height: 1.5;
}

.top-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.nike-hero-section {
  padding: 1.5rem 1rem 2rem;
  background: #ffffff !important;
}

.nike-hero-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.nike-hero-slider .swiper-slide {
  height: auto;
}

.nike-hero-card {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

/* Left side: Action/Lifestyle Image */
.nike-hero-left {
  flex: 1.1;
  position: relative;
  min-height: 320px;
  overflow: hidden;
}

.nike-hero-left img,
.nike-hero-left video,
.nike-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.nike-hero-card:hover .nike-hero-left img {
  transform: scale(1.04);
}

/* Right side: Promo Banner Content */
.nike-hero-right {
  flex: 1;
  background: #f2f3f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 2.5rem;
  text-align: center;
  position: relative;
}

/* Brand Banner Bar */
.nike-hero-brand-bar {
  width: 100%;
  background: #11283d;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  border-radius: 4px;
}

.nike-hero-brand-bar img,
.nike-hero-brand-bar svg,
.nike-hero-brand-bar h2 {
  height: 36px;
  max-width: 220px;
  object-fit: contain;
  margin: 0;
  color: #ffffff;
}

.nike-hero-brand-name {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: 2.2rem;
  letter-spacing: 0.1em;
  color: #ffffff !important;
  text-transform: uppercase;
  font-style: italic;
}

.nike-hero-offer {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  color: #0b0c10 !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 1.5rem 0;
}

.nike-hero-cta {
  display: inline-block;
  background: #0b0c10;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.7rem 2rem;
  border-radius: 100px;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.25s ease;
}

.nike-hero-cta:hover {
  background: #D4AF37;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.nike-hero-tc {
  position: absolute;
  bottom: 0.8rem;
  right: 1.5rem;
  font-size: 0.7rem;
  color: #888888;
  font-weight: 600;
}

/* Custom Controls & Pagination */
.nike-hero-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0 0.5rem;
}

.nike-pagination-capsules {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0;
  scrollbar-width: none;
}

.nike-pagination-capsules::-webkit-scrollbar {
  display: none;
}

.nike-capsule {
  width: 32px;
  height: 12px;
  border: 1.5px solid #111111;
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.nike-capsule.active {
  background: #111111;
  width: 44px;
}

.nike-nav-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nike-nav-btn {
  width: 36px;
  height: 36px;
  background: #222222;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s ease;
}

.nike-nav-btn:hover {
  background: #D4AF37;
}

/* Responsive overrides removed to keep dynamic banner card styling clean */

/* ============================================================
   RESPONSIVE HERO LAYOUT OVERRIDES (AJIO ASPECT RATIO AUTO SCALING)
   ============================================================ */
.cv-hero {
  height: calc(100vh + 20vh) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.cv-hero__split-grid {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.cv-hero__video-pane {
  height: 60% !important;
  min-height: 60% !important;
  width: 100% !important;
  max-width: 100% !important;
  order: 1 !important;
  flex: none !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.cv-hero__video-pane .cv-hero__media {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.cv-hero__video-pane .cv-hero__video {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1.02) !important; /* Scale up slightly and center to cover any potential border gaps */
  object-fit: cover !important; /* Stretch full-width without black sides globally */
  display: block !important;
  z-index: 1 !important;
}

.cv-hero__video-pane .cv-hero__youtube {
  position: absolute !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  min-width: 100% !important;
  object-fit: cover !important; /* Stretch full-width without black sides globally */
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(1.3) !important;
}
.cv-hero__carousel-pane {
  height: 40% !important;
  min-height: 40% !important;
  width: 100% !important;
  max-width: 100% !important;
  order: 2 !important;
  flex: none !important;
  background: #ffffff !important;
}
.hero-card-swiper {
  height: 100% !important;
  width: 100% !important;
  background: #ffffff !important;
}

/* Ensure slide images inside cards cover and scale nicely without getting cropped on mobile/tablet */
.nike-hero-card {
  height: 100% !important;
  max-height: 100% !important;
  border: none !important;
  box-shadow: none !important;
}

.nike-hero-left {
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

.nike-hero-video {
  height: 100% !important;
  width: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Explore Brands Card Styles (Ajio-style below-image labels) */
.explore-brands__card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: transform 0.3s ease !important;
}

.explore-brands__card:hover {
  transform: translateY(-4px) !important;
}

.explore-brands__img-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1.3 !important; /* Widescreen portrait rectangle scaling */
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
  transition: box-shadow 0.3s ease !important;
}

.explore-brands__card:hover .explore-brands__img-wrap {
  box-shadow: 0 10px 24px rgba(0,0,0,0.12) !important;
}

.explore-brands__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.explore-brands__card:hover .explore-brands__img {
  transform: scale(1.04) !important;
}

.explore-brands__overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 40%) !important;
  z-index: 1 !important;
}

.explore-brands__content {
  position: relative !important;
  width: 100% !important;
  padding: 0.85rem 0 0.5rem 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: transparent !important;
}

.explore-brands__category {
  color: #666666 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin: 0 0 0.35rem 0 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.2 !important;
  display: block !important;
}

.explore-brands__discount {
  color: #111111 !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  display: block !important;
}

/* Reset outer container margins/padding on mobile to guarantee full width layout */
body, html {
  /* overflow-x: hidden !important; removed to fix sticky */
  width: 100% !important;
}

#hero {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  left: 0 !important;
  position: relative !important;
}

/* Force video elements and all intermediate wrappers to stretch edge-to-edge with no gaps */
.cv-hero,
.cv-hero__split-grid,
.cv-hero__video-pane,
.cv-hero__media,
.cv-hero__video,
.cv-hero__youtube {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

.cv-hero__video-pane .cv-hero__media,
.cv-hero__video-pane .cv-hero__video {
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1.03) !important; /* Center and expand slightly to prevent sidebars */
}

.cv-hero__video-pane .cv-hero__youtube {
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1.3) !important;
}

/* ============================================================
   BRAND NEW SULEMAN OPTICALS HERO SECTION DESIGN SYSTEM
   ============================================================ */
/* ============================================================
   BRAND NEW SULEMAN OPTICALS HERO SECTION DESIGN SYSTEM
   ============================================================ */
.so-hero {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #050507 !important;
  /* overflow-x: hidden !important; removed to fix sticky */
}

/* TOP VIDEO CONTAINER */
.so-hero-video-wrap {
  width: 100% !important;
  max-width: 100% !important;
  height: 80vh !important;
  min-height: 520px !important;
  max-height: 820px !important;
  position: relative !important;
  overflow: hidden !important;
  background: #000000 !important;
}

.so-video-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

.so-video-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.so-video-element {
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1.05) !important;
}

.so-video-iframe {
  width: 177.77vh !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 56.25vw !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1.35) !important;
  border: none !important;
  object-fit: cover !important;
}

.so-video-poster {
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
}

.so-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%) !important;
  z-index: 2 !important;
}

.so-video-controls {
  position: absolute !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  z-index: 4 !important;
  display: flex !important;
  gap: 0.5rem !important;
}

.so-ctrl-btn {
  background: rgba(0,0,0,0.65) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(6px) !important;
}

.so-ctrl-btn:hover {
  background: #D4AF37 !important;
  color: #000000 !important;
  border-color: #D4AF37 !important;
  transform: scale(1.1) !important;
}

.so-video-content {
  position: absolute !important;
  bottom: 2.5rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 900px !important;
  z-index: 3 !important;
  text-align: center !important;
  color: #ffffff !important;
}

.so-video-badge {
  display: inline-block !important;
  background: rgba(212, 175, 55, 0.2) !important;
  border: 1px solid rgba(212, 175, 55, 0.6) !important;
  color: #D4AF37 !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  padding: 0.3rem 0.9rem !important;
  border-radius: 50px !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.75rem !important;
}

.so-video-title {
  font-size: clamp(1.8rem, 4vw, 3.2rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 0.6rem !important;
  line-height: 1.2 !important;
  text-shadow: 0 3px 12px rgba(0,0,0,0.9) !important;
}

.so-video-desc {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem) !important;
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 1.2rem !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8) !important;
  max-width: 750px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.so-video-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  background: linear-gradient(135deg, #D4AF37 0%, #F3E5AB 100%) !important;
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  padding: 0.65rem 1.6rem !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
}

.so-video-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6) !important;
  color: #000000 !important;
}

/* BOTTOM CAROUSEL SECTION (FULL-WIDTH EDGE-TO-EDGE NO CURVES NO BLACK GAPS) */
.so-hero-cards-wrap {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  /* overflow-x: hidden !important; removed to fix sticky */
}

.so-bms-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.so-bms-swiper {
  width: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.so-bms-card {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: clamp(380px, 40vw, 650px) !important;
  text-decoration: none !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

.so-bms-card-bg {
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: top center !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.so-bms-card:hover .so-bms-card-bg {
  transform: scale(1.04) !important;
}

.so-bms-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%) !important;
  z-index: 1 !important;
}

.so-bms-card-body {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 1.75rem 2.25rem !important;
  z-index: 2 !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.so-bms-badge {
  background: linear-gradient(135deg, #D4AF37 0%, #F3E5AB 100%) !important;
  color: #000000 !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  padding: 0.3rem 0.8rem !important;
  border-radius: 50px !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 0.6rem !important;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4) !important;
}

.so-bms-title {
  font-size: clamp(1.3rem, 2.5vw, 2rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 0.35rem !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9) !important;
  line-height: 1.2 !important;
}

.so-bms-desc {
  font-size: clamp(0.85rem, 1.2vw, 1.05rem) !important;
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 1rem !important;
  max-width: 650px !important;
  line-height: 1.4 !important;
}

.so-bms-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 0.55rem 1.4rem !important;
  border-radius: 30px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
}

.so-bms-card:hover .so-bms-btn {
  background: #D4AF37 !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5) !important;
}

/* Swiper navigation buttons */
.so-bms-prev,
.so-bms-next {
  color: #ffffff !important;
  background: rgba(0,0,0,0.65) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  transition: all 0.3s ease !important;
}

.so-bms-prev:after,
.so-bms-next:after {
  font-size: 1.2rem !important;
  font-weight: bold !important;
}

.so-bms-prev:hover,
.so-bms-next:hover {
  background: #D4AF37 !important;
  color: #000000 !important;
  border-color: #D4AF37 !important;
  transform: scale(1.1) !important;
}

.so-bms-pagination {
  bottom: 12px !important;
}

.so-bms-pagination .swiper-pagination-bullet {
  background: rgba(255,255,255,0.4) !important;
  opacity: 1 !important;
  transition: all 0.3s ease !important;
}

.so-bms-pagination .swiper-pagination-bullet-active {
  background: #D4AF37 !important;
  width: 28px !important;
  border-radius: 6px !important;
}

@media (max-width: 991px) {
  .so-bms-card {
    height: 320px !important;
  }
  .so-hero-video-wrap {
    height: 60vh !important;
    min-height: 400px !important;
  }
}

@media (max-width: 768px) {
  .so-hero-video-wrap {
    height: 52vh !important;
    min-height: 360px !important;
  }
  .so-video-content {
    bottom: 1.25rem !important;
    width: 95% !important;
    padding: 0 0.5rem !important;
  }
  .so-video-title {
    font-size: 1.45rem !important;
    margin-bottom: 0.3rem !important;
  }
  .so-video-desc {
    font-size: 0.825rem !important;
    margin-bottom: 0.75rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .so-video-badge {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.65rem !important;
    margin-bottom: 0.4rem !important;
  }
  .so-video-btn {
    font-size: 0.75rem !important;
    padding: 0.45rem 1.1rem !important;
  }
  .so-video-controls {
    bottom: 0.75rem !important;
    right: 0.75rem !important;
  }
  .so-ctrl-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.8rem !important;
  }
  .so-bms-card {
    height: 230px !important;
  }
  .so-bms-card-bg {
    background-size: cover !important;
    background-position: center center !important;
  }
  .so-bms-card-body {
    padding: 0.85rem 1rem !important;
  }
  .so-bms-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.15rem !important;
  }
  .so-bms-desc {
    font-size: 0.75rem !important;
    margin-bottom: 0.4rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .so-bms-badge {
    font-size: 0.6rem !important;
    padding: 0.15rem 0.5rem !important;
    margin-bottom: 0.25rem !important;
  }
  .so-bms-btn {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.8rem !important;
  }
  .so-bms-prev,
  .so-bms-next {
    width: 34px !important;
    height: 34px !important;
  }
  .so-bms-prev:after,
  .so-bms-next:after {
    font-size: 0.85rem !important;
  }
}

/* HIDE MOBILE BOTTOM APP BAR COMPLETELY */
.mobile-bottom-nav,
.mobile-app-nav,
nav.mobile-bottom-nav,
[class*="mobile-bottom-nav"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
}

@media (min-width: 992px) {
  .so-drawer-header {
    display: none !important;
  }
}

/* ============================================================
   MOBILE & TABLET SIDE DRAWER NAVIGATION (<= 991px)
   ============================================================ */
@media (max-width: 991px) {
  /* HIDE FLOATING CHAT / ASSISTANT BUTTONS WHEN DRAWER IS OPEN */
  body.menu-open .scroll-top,
  body.menu-open #siteAssistantBtn,
  body.menu-open .whatsapp-btn,
  body.menu-open [class*="assistant"],
  body.menu-open [class*="chat-"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .cv-navbar__toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    color: #ffffff !important;
    font-size: 1.25rem !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    transition: all 0.25s ease !important;
  }

  .cv-navbar__toggle i {
    pointer-events: none !important;
  }

  .cv-navbar__toggle:hover {
    background: #D4AF37 !important;
    color: #000000 !important;
    border-color: #D4AF37 !important;
  }

  /* FULL-WIDTH MOBILE MENU PANEL */
  .cv-navbar__collapse,
  #mainNav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #0a0a0e !important;
    background-color: #0a0a0e !important;
    z-index: 999999 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
    display: none !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 1.5rem 1.5rem 2.5rem 1.5rem !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    border-right: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  .cv-navbar__collapse.is-open,
  .cv-navbar__collapse.show,
  #mainNav.is-open,
  #mainNav.show {
    left: 0 !important;
    transform: translateX(0) !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* DRAWER TOP HEADER WITH LOGO IMAGE & CLOSE BUTTON */
  .so-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-bottom: 1.25rem !important;
    margin-bottom: 1.5rem !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
  }

  .so-drawer-brand {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #D4AF37 !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: 0.04em !important;
  }

  .so-drawer-logo-img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid #D4AF37 !important;
    object-fit: cover !important;
    margin-right: 0.75rem !important;
  }

  .so-drawer-close {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    color: #ffffff !important;
    font-size: 1.2rem !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
  }

  .so-drawer-close:hover {
    background: #dc3545 !important;
    color: #ffffff !important;
    border-color: #dc3545 !important;
    transform: rotate(90deg) !important;
  }

  .so-drawer-close:hover {
    background: #dc3545 !important;
    color: #ffffff !important;
    border-color: #dc3545 !important;
  }

  /* BACKDROP OVERLAY — TRANSPARENT OPACITY 0 */
  .cv-nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: transparent !important;
    z-index: 999990 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  .cv-nav-backdrop.is-open {
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .cv-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    position: relative !important;
    z-index: 999999 !important;
  }

  /* TRANSPARENT LINK BACKGROUNDS & HIGH CONTRAST TEXT */
  .cv-navbar__collapse .cv-nav__link,
  #mainNav .cv-nav__link,
  .cv-nav__link {
    background: transparent !important;
    background-color: transparent !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    padding: 0.8rem 1rem !important;
    border-radius: 8px !important;
    display: block !important;
    transition: all 0.2s ease !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    position: relative !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
    filter: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }

  /* YELLOW/GOLD COLOR ON HOVER AND ACTIVE PAGE LINK */
  .cv-navbar__collapse .cv-nav__link:hover,
  .cv-navbar__collapse .cv-nav__link.active,
  #mainNav .cv-nav__link:hover,
  #mainNav .cv-nav__link.active,
  .cv-nav__link:hover,
  .cv-nav__link.active,
  .cv-header .cv-nav__link:hover,
  .cv-header .cv-nav__link.active {
    background: rgba(212, 175, 55, 0.15) !important;
    color: #D4AF37 !important;
    padding-left: 1.25rem !important;
    border-left: 3px solid #D4AF37 !important;
  }

  .cv-navbar__actions {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-top: auto !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

/* =========================================================
   FULL-SCREEN MINIMALIST MOBILE MENU (Centered Design)
========================================================= */
@media (max-width: 991px) {
  /* Hide injected mobile icons */
  .cv-navbar__collapse .cv-nav__link i.mobile-icon {
    display: none !important;
  }

  /* Ensure the original navbar sits behind the full-screen drawer */
  .cv-navbar__inner {
    display: flex !important;
    justify-content: center !important; /* Center the logo */
    align-items: center !important;
    min-height: 70px !important;
  }
  
  /* Move hamburger to the right */
  .cv-navbar__toggle {
    position: absolute !important;
    right: 1rem !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* Reset aggressive backgrounds, but keep things dark */
  .cv-navbar__collapse,
  .cv-navbar__collapse *,
  #mainNav,
  #mainNav * {
    background-color: transparent !important;
    background: transparent !important;
    color: #ffffff !important;
  }

  /* The Full-Screen Menu */
  .cv-navbar__collapse,
  #mainNav {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    border: none !important;
    padding: 1.5rem !important; /* Reset padding to be normal */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 999999 !important;
    text-align: center !important;
  }

  /* Style the drawer internal header */
  .cv-navbar__collapse .so-drawer-header {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    margin-bottom: 3rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }

  .cv-navbar__collapse .so-drawer-close {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    background: transparent !important;
    border: none !important;
    font-size: 1.5rem !important;
    padding: 0.5rem !important;
    color: #ffffff !important;
  }
  
  .cv-navbar__collapse .so-drawer-brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #ffffff !important;
  }

  .cv-navbar__collapse .so-drawer-brand img {
    height: 35px !important;
  }

  /* Hide the previously injected "Menu" pseudo-element */
  .cv-navbar__collapse::before,
  #mainNav::before {
    display: none !important;
  }

  /* Main Navigation List */
  .cv-navbar__collapse .cv-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
    width: 100% !important;
    margin-bottom: 3rem !important;
  }

  /* Link Items */
  .cv-navbar__collapse .cv-nav__link {
    display: block !important;
    padding: 0.5rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    transition: color 0.2s ease !important;
  }
  
  .cv-navbar__collapse .cv-nav__link:hover {
    color: var(--cv-accent, #D4AF37) !important;
    background: transparent !important;
  }

  /* Action Buttons Container */
  .cv-navbar__collapse .cv-navbar__actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    border-top: none !important;
    padding: 0 !important;
    gap: 1rem !important;
    margin-bottom: auto !important;
  }

  /* Horizontal line above actions, and style as row */
  .cv-navbar__collapse .cv-navbar__actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 90% !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    padding-top: 1.5rem !important;
    margin-top: auto !important;
    gap: 1.5rem !important;
  }

  /* Action links with icons and text stacked */
  .cv-navbar__collapse .cv-navbar__actions > a,
  .cv-navbar__collapse .cv-navbar__actions .nav-auth-wrap > a {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    padding: 0.5rem !important;
    font-size: 0.65rem !important; /* Small label text */
    font-weight: 600 !important;
    color: rgba(255,255,255,0.7) !important;
    background: transparent !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    gap: 0.4rem !important; /* Space between icon and text */
  }

  .cv-navbar__collapse .cv-navbar__actions > a:hover,
  .cv-navbar__collapse .cv-navbar__actions .nav-auth-wrap > a:hover {
    color: #ffffff !important;
  }

  /* Make sure icons are visible and sized right */
  .cv-navbar__collapse .cv-navbar__actions i {
    display: inline-block !important;
    font-size: 1.4rem !important;
  }

  /* Add text labels via pseudo-elements so we don't need HTML changes */
  .cv-navbar__collapse .cv-cart-btn::after { content: "Cart"; }
  .cv-navbar__collapse a[href="notify.html"]::after { content: "Alerts"; }
  .cv-navbar__collapse #standaloneOrdersBtn::after { content: "Orders"; }
  .cv-navbar__collapse #userAccountBtn::after { content: "Account"; }
  .cv-navbar__collapse #standaloneLogoutBtn::after { content: "Logout"; }

  .cv-navbar__collapse .cv-cart-badge,
  .cv-navbar__collapse .online-indicator {
    display: none !important; /* Keep badges hidden for minimal look */
  }

  /* Specific styling for Log Out button */
  .cv-navbar__collapse #standaloneLogoutBtn {
    color: #ff4d4f !important;
  }
}




/*

End

of

overrides

*/


/* Modern Footer Responsive Adjustments */
.cv-footer__grid { grid-template-columns: 1.8fr 1fr 1fr 1.2fr 1.5fr !important; }
@media (max-width: 1200px) { .cv-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.5fr !important; } .cv-footer__col:last-child { grid-column: span 2; } }
@media (max-width: 991px) { .cv-footer__grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; } .cv-footer__col:last-child { grid-column: span 2; } .cv-footer__brand-col { grid-column: span 2; padding-right: 0 !important; margin-bottom: 1rem; } }
@media (max-width: 576px) { .cv-footer__grid { grid-template-columns: 1fr !important; gap: 2rem !important; } .cv-footer__col:last-child, .cv-footer__brand-col { grid-column: auto; } .cv-footer__bottom-inner { flex-direction: column; text-align: center; gap: 1rem !important; } }

/* Product Detail Layout Redesign */

/* Hero Split */
.ecom-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

/* Gallery */
.ecom-product__gallery {
  display: flex;
  gap: 1.5rem;
  height: 100%;
  width: 100%;
  min-width: 0;
}

.ecom-product__thumbs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 90px;
}

.ecom-product__thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  background: #f9f9f9;
}

.ecom-product__thumb.active {
  border-color: #d39859;
}

.ecom-product__main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  aspect-ratio: 4/5;
  background: #f4f1ed; /* matching mockup background */
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.ecom-product__main-overlay {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  font-family: 'Playfair Display', serif; /* or similar cursive/serif from mockup */
  font-size: 2.5rem;
  line-height: 1.1;
  color: #111;
  font-style: italic;
}

.ecom-product__gallery-prev,
.ecom-product__gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  color: #333;
}

.ecom-product__gallery-prev { left: 1rem; }
.ecom-product__gallery-next { right: 1rem; }

.ecom-product__gallery-expand {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  color: #333;
}

/* Info Column */
.ecom-product__info {
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
}

.ecom-product__brand-logo {
  margin-bottom: 1rem;
}

.ecom-product__brand-logo img {
  height: 30px;
  width: auto;
}

.ecom-product__title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #111;
}

.ecom-product__subtitle {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 1rem;
}

.ecom-product__rating-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.ecom-product__stars {
  color: #d39859;
}

.ecom-product__write-review {
  margin-left: 1rem;
  color: #666;
  text-decoration: underline;
  font-size: 0.9rem;
}

.ecom-product__description-short {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
  margin-bottom: 1.5rem;
}

.ecom-product__pricing-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ecom-product__pricing {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ecom-product__price {
  font-size: 1.8rem;
  font-weight: 700;
  color: #111;
}

.ecom-product__price-old {
  font-size: 1.2rem;
  color: #999;
  text-decoration: line-through;
}

.ecom-product__discount-badge {
  background: #025939; /* dark green */
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.ecom-product__tax-note {
  font-size: 0.85rem;
  color: #666;
}

.ecom-product__divider {
  border: none;
  border-top: 1px solid #eee;
  margin: 1.5rem 0;
}

/* Pickers */
.ecom-picker {
  margin-bottom: 1.5rem;
}

.ecom-picker__label {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  color: #333;
}

.ecom-picker__pills {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ecom-picker__pills--image .ecom-picker__pill {
  width: 70px;
  height: auto;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  background: #fdfdfd;
}

.ecom-picker__pills--image .ecom-picker__pill img {
  width: 100%;
  height: auto;
}

.ecom-picker__pills--image .ecom-picker__pill span {
  font-size: 0.75rem;
  color: #666;
  text-align: center;
}

.ecom-picker__pills--image .ecom-picker__pill.selected {
  border-color: #025939;
  box-shadow: 0 0 0 1px #025939;
}

.ecom-picker__pills--image .ecom-picker__pill.selected span {
  color: #025939;
  font-weight: 600;
}

/* Size Pills */
.ecom-picker__pill {
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.ecom-picker__pill.selected {
  border-color: #025939;
  color: #025939;
  font-weight: 600;
  box-shadow: 0 0 0 1px #025939;
}

.size-guide-link {
  font-size: 0.9rem;
  color: #666;
  text-decoration: underline;
}

/* Actions */
.ecom-product__actions-row--split {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.ecom-btn {
  flex: 1;
  padding: 1rem;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  transition: all 0.3s;
}

.ecom-btn--add {
  background: #025939; /* dark green */
  color: #fff;
}

.ecom-btn--add:hover { background: #014229; }

.ecom-btn--buy {
  background: #d39859; /* gold */
  color: #fff;
}

.ecom-btn--buy:hover { background: #be864b; }

.ecom-btn--wishlist {
  flex: 0 0 50px;
  background: #fff;
  border: 1px solid #ddd;
  color: #333;
}

.ecom-btn--wishlist:hover { border-color: #999; }

/* Trust Grid */
.ecom-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
}

.ecom-trust-grid__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #555;
}

.ecom-trust-grid__item i {
  font-size: 1.2rem;
  color: #025939;
}

.ecom-trust-grid__item div {
  display: flex;
  flex-direction: column;
}

.ecom-trust-grid__item strong {
  color: #333;
  font-weight: 600;
}

/* Feature Banner */
.ecom-feature-banner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #f4f6f3; /* subtle green tint */
  padding: 2.5rem;
  border-radius: 8px;
  gap: 2rem;
  margin-bottom: 4rem;
}

.ecom-feature-banner__item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ecom-feature-banner__item .icon-circle {
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #025939;
  font-size: 1.2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.ecom-feature-banner__item h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: #111;
}

.ecom-feature-banner__item p {
  font-size: 0.85rem;
  color: #666;
  margin: 0;
}

/* Tabs Section */
.ecom-tabs-section {
  margin-bottom: 5rem;
}

.ecom-tabs-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  border-bottom: 2px solid #eee;
}

.ecom-tabs-nav li {
  padding: 1rem 2rem;
  cursor: pointer;
  font-weight: 600;
  color: #777;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.ecom-tabs-nav li.active {
  color: #025939;
  border-bottom-color: #025939;
}

.ecom-tab-pane {
  display: none;
}

.ecom-tab-pane.active {
  display: block;
}

.ecom-tab-pane__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.ecom-tab-pane__text h3 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #111;
}

.ecom-tab-pane__text p {
  line-height: 1.7;
  color: #555;
  margin-bottom: 1.5rem;
}

.ecom-tab-pane__list {
  list-style: none;
  padding: 0;
}

.ecom-tab-pane__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: #444;
}

.ecom-tab-pane__list i {
  color: #d39859;
  margin-top: 0.2rem;
}

.ecom-tab-pane__image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 400px;
}

.ecom-tab-pane__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ecom-tab-pane__image-overlay {
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: right;
  line-height: 1.3;
}

/* Trust Banner Bottom */
.ecom-trust-banner {
  background: #f4f6f3;
  padding: 4rem 0;
  border-top: 1px solid #e2e8e4;
}

.ecom-trust-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ecom-trust-banner__title-col h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #025939;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.ecom-trust-banner__title-col p {
  color: #555;
  margin: 0;
}

.ecom-trust-banner__features {
  display: flex;
  gap: 3rem;
}

.ecom-trust-banner__features .item {
  text-align: center;
}

.ecom-trust-banner__features .item i {
  font-size: 2rem;
  color: #025939;
  margin-bottom: 1rem;
}

.ecom-trust-banner__features .item h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.ecom-trust-banner__features .item p {
  font-size: 0.85rem;
  color: #666;
  margin: 0;
}

/* Responsive Overrides */
@media (max-width: 991px) {
  .ecom-product,
  .ecom-tab-pane__split,
  .ecom-trust-banner__inner {
    grid-template-columns: 1fr;
    flex-direction: column;
  }
  
  .ecom-product__gallery {
    flex-direction: column-reverse;
  }
  
  .ecom-product__thumbs {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
  }
  
  .ecom-product__thumb {
    width: 80px;
    flex-shrink: 0;
  }
  
  .ecom-feature-banner,
  .ecom-trust-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .ecom-trust-banner__features {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
  }
}

@media (max-width: 576px) {
  .ecom-feature-banner,
  .ecom-trust-grid {
    grid-template-columns: 1fr;
  }
  .ecom-tabs-nav {
    flex-wrap: wrap;
  }
  .ecom-tabs-nav li {
    width: 100%;
    text-align: center;
  }
}

/* Product Card Fixes */
.product-related .daraz-card,
.product-related .product-card,
#product-related-section .daraz-card {
  border: 1px solid #eaeaea;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

#product-related-section .daraz-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.product-related .daraz-card__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-related .daraz-card__title {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 0 !important;
}

.product-related .daraz-card__rating {
  margin-bottom: 0.25rem;
}

.product-related .daraz-card__price-row {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.product-related .daraz-price-sale {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111;
}

.product-related .daraz-price-old {
  font-size: 0.9rem;
  color: #888;
  text-decoration: line-through;
}

.product-related .daraz-card__stock {
  font-size: 0.8rem;
  color: #666;
  text-align: center;
  margin-bottom: 0.5rem;
}

.product-related .daraz-card__add {
  background: #025939;
  color: #fff;
  border: none;
  padding: 0.75rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  width: 100%;
}

.product-related .daraz-card__add:hover {
  background: #014229;
}

/* ========================================================
   PRODUCT DETAILS V2 (Airy/Premium Layout)
   ======================================================== */

.ecom-product-v2 {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 4rem;
  margin-bottom: 2rem;
}

/* GALLERY V2 */
.ecom-product-v2__gallery {
  display: flex;
  gap: 1.5rem;
  height: 600px;
}

.ecom-product-v2__thumbs-col {
  display: flex;
  flex-direction: column;
  width: 90px;
}

.ecom-product-v2__explore-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  line-height: 1.4;
  color: #333;
}

.ecom-product-v2__thumbs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ecom-product-v2__thumbs::-webkit-scrollbar { display: none; }

.ecom-product-v2__thumb-scroll-down {
  margin-top: 1rem;
  background: #fff;
  border: 1px solid #eee;
  width: 100%;
  padding: 0.5rem 0;
  border-radius: 20px;
  cursor: pointer;
  color: #555;
  transition: all 0.3s;
}
.ecom-product-v2__thumb-scroll-down:hover { background: #f9f9f9; }

.ecom-product-v2__main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: #fdfaf6;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ecom-product-v2__main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2rem;
}

.ecom-product-v2__text-overlay {
  position: absolute;
  top: 3rem;
  left: 3rem;
  color: #024a35;
}

.ecom-product-v2__text-overlay h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 600;
  margin: 0 0 1rem;
}

.ecom-product-v2__text-overlay p {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  margin: 0;
  position: relative;
  padding-top: 1rem;
}
.ecom-product-v2__text-overlay p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: #024a35;
}

.ecom-product-v2__badge-overlay {
  position: absolute;
  top: 3rem;
  right: 3rem;
  width: 80px;
  height: 80px;
  animation: spin 10s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

.ecom-product-v2__badge-icon {
  position: absolute;
  font-size: 1.2rem;
  color: #111;
}

.ecom-product-v2__controls {
  position: absolute;
  bottom: 2rem;
  left: 3rem;
  right: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ecom-product-v2__pagination {
  display: flex;
  gap: 8px;
}
.ecom-product-v2__pagination span {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(0,0,0,0.2);
  transition: all 0.3s;
}
.ecom-product-v2__pagination span.active {
  background: #111;
  width: 30px;
}

.ecom-product-v2__nav {
  display: flex;
  gap: 10px;
}
.ecom-product-v2__nav button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #333;
}


/* INFO COLUMN V2 */
.ecom-product-v2__info {
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
}

.ecom-product-v2__top-badge {
  display: inline-block;
  align-self: flex-start;
  background: #f0f5f2;
  color: #025939;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}

.ecom-product-v2__title {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: #023625;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.ecom-product-v2__rating-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.ecom-product-v2__stars { color: #f5a623; font-size: 0.9rem; }
.ecom-product-v2__reviews-text { font-size: 0.85rem; color: #555; }

.ecom-product-v2__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1.5rem;
}

.ecom-product-v2__pricing {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.ecom-product-v2__price {
  font-size: 1.8rem;
  font-weight: 700;
  color: #111;
}
.ecom-product-v2__price-old {
  font-size: 1.1rem;
  color: #999;
  text-decoration: line-through;
}
.ecom-product-v2__discount {
  background: #2e4334;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
}

/* Pickers V2 */
.ecom-picker-v2 { margin-bottom: 1.5rem; }
.ecom-picker-v2__label {
  display: block;
  font-size: 0.85rem;
  color: #333;
  margin-bottom: 0.75rem;
}
.ecom-picker-v2__swatches-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ecom-picker-v2__swatches {
  display: flex;
  gap: 12px;
}
.ecom-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #ddd;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
}
.ecom-swatch.active { box-shadow: 0 0 0 2px #024a35; }
.ecom-picker-v2__size-guide {
  font-size: 0.85rem;
  color: #666;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ecom-picker-v2__size-guide:hover { color: #111; }

/* Actions V2 */
.ecom-product-v2__actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.ecom-btn-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}
.ecom-btn-v2--add {
  flex: 1;
  background: #2e4334;
  color: #fff;
  padding: 1rem 1.5rem;
  font-size: 1rem;
}
.ecom-btn-v2--add:hover { background: #1a2a20; }
.ecom-btn-v2--wishlist {
  width: 54px;
  height: 54px;
  background: #fff;
  border: 1px solid #eaeaea;
  color: #333;
}
.ecom-btn-v2--wishlist:hover { border-color: #999; }

/* FEATURES BANNER V2 */
.ecom-features-v2 {
  background: #e1e3e0;
  border-radius: 16px;
  padding: 2rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4rem;
}
.ecom-features-v2__icons {
  display: flex;
  gap: 3rem;
}
.ecom-features-v2__icons .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 0.75rem;
  color: #555;
}
.ecom-features-v2__icons .item i {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 0.5rem;
}
.ecom-features-v2__icons .item strong {
  color: #111;
  font-weight: 700;
}

.ecom-features-v2__quote {
  text-align: center;
  position: relative;
  padding: 0 2rem;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.ecom-features-v2__quote i {
  color: #025939;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.ecom-features-v2__quote p {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: #333;
  margin: 0;
  line-height: 1.3;
}

.ecom-features-v2__banner-img {
  width: 280px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.ecom-features-v2__banner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ecom-features-v2__banner-img .share-btn {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 991px) {
  .ecom-product-v2 { grid-template-columns: 1fr; }
  .ecom-product-v2__gallery { flex-direction: column-reverse; height: auto; }
  .ecom-product-v2__thumbs-col { flex-direction: row; width: 100%; align-items: center; justify-content: space-between; }
  .ecom-product-v2__thumbs { flex-direction: row; }
  .ecom-features-v2 { flex-direction: column; gap: 2rem; }
  .ecom-features-v2__quote { border: none; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 2rem 0; }
}

.ecom-btn-v2--buy {
  flex: 1;
  background: #cda567;
  color: #fff;
  padding: 1rem 1.5rem;
  font-size: 1rem;
}
.ecom-btn-v2--buy:hover { background: #b89359; }

/* ========================================================
   CART REDESIGN (Airy & Premium)
   ======================================================== */

.ecom-cart-page {
  font-family: 'Inter', sans-serif;
  background: #fff;
  padding-bottom: 4rem;
}

/* HERO */
.ecom-cart-hero {
  background-image: url('../images/bg/carrtheroimage.png');
  background-size: cover;
  background-position: center;
  padding: 4rem 5%;
  min-height: 250px;
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
  background-color: #f7f4ee;
}

.ecom-cart-hero__content {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.ecom-cart-hero__breadcrumb {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 1rem;
}
.ecom-cart-hero__breadcrumb a {
  color: #025939;
  text-decoration: none;
}
.ecom-cart-hero__breadcrumb span { margin: 0 0.5rem; }

.ecom-cart-hero__title {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: #024a35;
  margin: 0 0 0.5rem;
}

.ecom-cart-hero__subtitle {
  font-size: 1.1rem;
  color: #2c4234;
  margin: 0;
}

/* LAYOUT */
.ecom-cart-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3rem;
  max-width: 1440px;
  margin: 0 auto 4rem;
  align-items: start;
}

/* CART HEADER */
.ecom-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 2px solid #eee;
  margin-bottom: 1.5rem;
}
.ecom-cart-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: #111;
  margin: 0;
}
.ecom-cart-clear {
  background: none;
  border: none;
  color: #666;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.ecom-cart-clear:hover { color: #d32f2f; }

/* CART ITEM CARDS */
.ecom-cart-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ecom-cart-item {
  display: grid;
  grid-template-columns: 120px 1fr auto auto;
  gap: 1.5rem;
  align-items: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #eee;
}

.ecom-cart-item__img-wrap {
  background: #fdfaf6;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
}
.ecom-cart-item__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ecom-cart-item__details h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #111;
  margin: 0 0 0.25rem;
}

.ecom-cart-item__meta {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.75rem;
}

.ecom-cart-item__pricing {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ecom-cart-item__price {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111;
}
.ecom-cart-item__old-price {
  font-size: 0.9rem;
  color: #888;
  text-decoration: line-through;
}
.ecom-cart-item__discount {
  background: #025939;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
}

/* STEPPER */
.ecom-cart-stepper {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  height: 40px;
}
.ecom-cart-stepper button {
  background: #fff;
  border: none;
  width: 32px;
  height: 100%;
  font-size: 1.1rem;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ecom-cart-stepper button:hover { background: #f9f9f9; color: #111; }
.ecom-cart-stepper input {
  width: 40px;
  height: 100%;
  border: none;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: #111;
  pointer-events: none;
}

/* ITEM ACTIONS */
.ecom-cart-item__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}
.ecom-cart-item__btn {
  background: none;
  border: none;
  color: #555;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ecom-cart-item__btn:hover { color: #111; }
.ecom-cart-item__btn--remove:hover { color: #d32f2f; }

/* SUMMARY BOX */
.ecom-cart-summary {
  background: #f7f9f7;
  border-radius: 16px;
  padding: 2rem;
}
.ecom-cart-summary__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #024a35;
  margin-bottom: 1.5rem;
}
.ecom-cart-summary__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.ecom-cart-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #555;
}
.ecom-cart-summary__row--discount span:last-child {
  color: #025939;
  font-weight: 700;
}

.ecom-cart-summary__total-box {
  background: #eef2ef;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.ecom-cart-summary__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #111;
}
.ecom-cart-summary__total-row strong {
  font-size: 1.8rem;
}
.ecom-cart-summary__savings {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: #025939;
  text-align: right;
  font-weight: 600;
}

.ecom-cart-summary__checkout {
  width: 100%;
  background: #024a35;
  color: #fff;
  border: none;
  padding: 1rem;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s;
}
.ecom-cart-summary__checkout:hover { background: #013324; }

.ecom-cart-summary__divider {
  text-align: center;
  position: relative;
  margin: 1.5rem 0;
  color: #888;
  font-size: 0.85rem;
}
.ecom-cart-summary__divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #ddd;
  z-index: 1;
}
.ecom-cart-summary__divider span {
  background: #f7f9f7;
  padding: 0 1rem;
  position: relative;
  z-index: 2;
}

.ecom-cart-summary__continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 30px;
  background: #fff;
  color: #333;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
  margin-bottom: 2rem;
}
.ecom-cart-summary__continue:hover { background: #f9f9f9; }

.ecom-cart-trust {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.ecom-cart-trust__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  color: #555;
}
.ecom-cart-trust__item i {
  font-size: 1.2rem;
  color: #025939;
}
.ecom-cart-trust__item div {
  display: flex;
  flex-direction: column;
}

/* RELATED ITEMS CAROUSEL */
.ecom-cart-related {
  max-width: 1440px;
  margin: 0 auto 4rem;
}
.ecom-cart-related__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem;
}
.ecom-cart-related__header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #111;
  margin: 0 0 0.5rem;
}
.ecom-cart-related__header p { margin: 0; color: #555; font-size: 0.9rem; }
.ecom-cart-related__view-all {
  font-weight: 600;
  color: #111;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ecom-cart-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.ecom-related-card {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1.5rem;
  position: relative;
  transition: box-shadow 0.3s;
}
.ecom-related-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); }

.ecom-related-card__wishlist {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: #999;
  font-size: 1.1rem;
  cursor: pointer;
}
.ecom-related-card__img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  margin-bottom: 1rem;
}
.ecom-related-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin: 0 0 0.2rem;
}
.ecom-related-card__cat {
  font-size: 0.75rem;
  color: #666;
  margin: 0 0 0.5rem;
}
.ecom-related-card__rating {
  font-size: 0.75rem;
  color: #f5a623;
  margin-bottom: 1rem;
}
.ecom-related-card__rating span { color: #888; margin-left: 4px; }

.ecom-related-card__price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.ecom-related-card__price {
  display: block;
  font-weight: 700;
  color: #111;
}
.ecom-related-card__old {
  display: block;
  font-size: 0.8rem;
  color: #888;
  text-decoration: line-through;
}
.ecom-related-card__add {
  background: #025939;
  color: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ecom-related-card__add:hover { background: #013324; }

/* BOTTOM BANNER */
.ecom-cart-bottom-banner {
  background-image: url('../images/bg/cartbtimg.png');
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  max-width: 1440px;
  margin: 0 auto 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3rem 4rem;
  position: relative;
  overflow: hidden;
}
/* Fallback if image has issues */
.ecom-cart-bottom-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f7f9f7 40%, transparent);
  z-index: 1;
}

.ecom-cart-bottom-banner__content {
  position: relative;
  z-index: 2;
  max-width: 400px;
}
.ecom-cart-bottom-banner__content h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: #024a35;
  margin: 0 0 1rem;
  line-height: 1.2;
}
.ecom-cart-bottom-banner__content p {
  color: #2c4234;
  margin: 0 0 1.5rem;
}
.ecom-cart-bottom-banner__btn {
  background: #d4af37;
  color: #fff;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ecom-cart-bottom-banner__icons {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 3rem;
}
.ecom-cart-bottom-banner__icons .icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #024a35;
}
.ecom-cart-bottom-banner__icons .icon-box i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.ecom-cart-bottom-banner__icons .icon-box span {
  font-weight: 600;
  font-size: 0.85rem;
}

@media (max-width: 991px) {
  .ecom-cart-layout { grid-template-columns: 1fr; }
  .ecom-cart-item { grid-template-columns: 100px 1fr; }
  .ecom-cart-item__actions { grid-column: span 2; flex-direction: row; justify-content: space-between; }
  .ecom-cart-related__grid { grid-template-columns: 1fr 1fr; }
  .ecom-cart-bottom-banner { flex-direction: column; text-align: center; }
  .ecom-cart-bottom-banner::before { background: rgba(247,249,247,0.9); }
  .ecom-cart-bottom-banner__content { margin-bottom: 2rem; max-width: 100%; }
}
@media (max-width: 576px) {
  .ecom-cart-related__grid { grid-template-columns: 1fr; }
  .ecom-cart-trust { flex-direction: column; gap: 1rem; }
  .ecom-cart-bottom-banner__icons { flex-direction: column; gap: 1.5rem; }
}