@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');
@import url("daraz-cards.css?v=3");

/* Suleman Opticals — Absolute Black & Rich Gold Horology Theme */
:root {
  /* Specify user-defined color system */
  --cv-accent: #D4AF37;          /* Rich Gold */
  --site-bg: #ffffff;
  --site-surface: #ffffff;
  --site-surface-card: #ffffff;
  --site-ink: #111111;
  --site-ink-heading: #111111;
  --site-text-muted: #666666;
  --site-text-on-dark: #ffffff;
  --site-text-muted-on-dark: rgba(255, 255, 255, 0.7);
  --cv-accent-hover: #bfa032;
  --cv-accent-light: rgba(212, 175, 55, 0.08);
  --cv-accent-bright: #D4AF37;
  --cv-gold: #D4AF37;
  --cv-gold-rich: #D4AF37;
  --cv-gold-deep: #9d8126;
  --cv-gold-soft: #fcf9f2;

  /* Surfaces & Backgrounds */
  --site-bg: #ffffff;            /* Pure White Background */
  --site-surface: #ffffff;       /* Pure White Surface */
  --site-surface-card: #f8f9fa;  /* Soft White/Light Card Surface */
  --site-border: rgba(0, 0, 0, 0.1); /* Light Border */
  --site-hover: #f0f0f0;

  /* Typography */
  --site-ink: #111111;           /* Black text */
  --site-ink-heading: #111111;   /* Black headings */
  --site-text-muted: #555555;
  --site-text-on-gold: #111111;
  --site-text-on-white: #111111;

  /* Legacy aliases mapped to light spec */
  --cv-dark: #ffffff;
  --site-dark: #ffffff;
  --site-dark-warm: #f8f9fa;
  --site-dark-hover: #f0f0f0;
  --site-text-on-dark: #111111;
  --site-text-muted-on-dark: rgba(0, 0, 0, 0.7);
  --cv-nav-bg: rgba(255, 255, 255, 0.95);
  --cv-trust-bg: var(--site-surface);
  --cv-white: #ffffff;
  --cv-muted: var(--site-text-muted);
  --cv-header-h: 88px;
  --cv-header-top-h: 40px;
  --header-total-height: calc(var(--cv-header-top-h) + var(--cv-header-h));
  --header-height: var(--header-total-height);
  --cv-hero-header-offset: var(--header-total-height);

  /* Typography — Professional 2-Font System (Lenskart / Titan Eye+ style) */
  --font-primary:   'DM Serif Display', Georgia, serif;       /* Headings & display */
  --font-secondary: 'DM Sans', 'Segoe UI', system-ui, sans-serif; /* Body, UI, labels */

  /* Legacy aliases */
  --font-display: var(--font-primary);
  --font-sans:    var(--font-secondary);
  --font-body:    var(--font-secondary);
  --font-base:    var(--font-secondary);
  --font-mono:    var(--font-secondary);

  /* Premium Design Tokens */
  --premium-shadow-sm: 0 4px 14px 0 rgba(0, 0, 0, 0.08);
  --premium-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);
  --premium-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.16);
  --premium-transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --premium-transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --premium-radius-sm: 8px;      /* Standard rounded corners for buttons/small tags */
  --premium-radius-md: 16px;     /* Rounded corners for cards */
  --premium-radius-lg: 20px;     /* Rounded corners for large content blocks */

  --section-space-y: clamp(1.5rem, 3.5vw, 2.5rem);     /* Compacted whitespace */
  --section-space-y-sm: clamp(1rem, 2.5vw, 1.75rem);
  --page-max-width: 1360px;
  --page-inline: clamp(1.5rem, 5vw, 3.75rem);
  --header-inline: var(--page-inline);
  --transition: var(--premium-transition);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* overflow removed for sticky */
  max-width: 100%;
}

body {
  margin: 0;
  font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--site-ink);
  background: var(--site-bg);
  background-image: none;
  background-attachment: scroll;
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: rgba(212, 175, 55, 0.035);
  border-radius: 50%;
  pointer-events: none;
  z-index: -2;
}

body::after {
  content: '';
  position: fixed;
  bottom: -150px;
  right: -150px;
  width: 450px;
  height: 450px;
  background: rgba(212, 175, 55, 0.025);
  border-radius: 50%;
  pointer-events: none;
  z-index: -2;
}

body:has(.cv-header), body:has(.light-header) {
  padding-top: var(--header-total-height);
}

/* Site-wide horizontal gutters — overrides Bootstrap .container-fluid */
.container-fluid {
  width: min(100%, var(--page-max-width));
  margin-inline: auto;
  padding-inline: max(var(--page-inline), env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  min-width: 0;
}

main,
.cv-footer {
  max-width: 100%;
  /* overflow removed for sticky */
}

section {
  border-bottom: 1px solid rgba(212, 175, 55, 0.08) !important;
}

.cv-header {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--site-ink-heading);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--cv-accent);
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Section headers */
[class$='__badge']:not(.cv-cart-badge):not(.product-card__badge):not(.navbar-action-box__badge) {
  display: inline-block;
  margin-bottom: 1.15rem;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cv-accent);
  background: transparent;
}

[class$='__title'] {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--site-ink-heading);
}

[class$='__title-accent'] {
  color: var(--cv-accent);
  font-weight: 400;
}

[class$='__subtitle'] {
  margin: 0;
  max-width: clamp(15rem, 28vw, 24rem);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--site-text-muted);
}

.section-header-centered {
  text-align: center;
  margin-bottom: 2rem;
}

.section-header-centered__title {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1rem 0;
  color: #111;
}

.section-header-centered__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #999;
}

.section-header-centered__tabs span {
  cursor: pointer;
  transition: color 0.3s ease;
}

.section-header-centered__tabs span:hover,
.section-header-centered__tabs span.active {
  color: #111;
}

/* Base section header (split style) */
[class$='__header'] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(15rem, 30vw, 24rem));
  column-gap: clamp(1.25rem, 4vw, 3rem);
  row-gap: 0.45rem;
  align-items: start;
  text-align: left;
  max-width: 100%;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}

[class$='__header'] [class$='__badge'] {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

[class$='__header'] [class$='__title'] {
  grid-column: 1;
  grid-row: 2;
  margin-bottom: 0;
}

[class$='__header'] [class$='__subtitle'] {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
  text-align: right;
}

.cv-hero [class$='__title'] {
  color: #fff;
}

.cv-hero [class$='__badge'] {
  color: var(--cv-accent);
}

.cv-hero .cv-btn--outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.25);
}

.cv-hero .cv-btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

/* Header navbar links stay dark on the header */
.cv-header,
.cv-navbar,
.cv-navbar a,
.cv-navbar a *,
.cv-nav__link,
.cv-nav__link *,
.cv-brand__name,
.cv-footer,
.cv-footer * {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}

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

/* Premium User Panel dropdown overrides */
.user-dropdown-menu {
  background: rgba(18, 18, 18, 0.95) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  border-radius: 12px !important;
}
.user-dropdown-menu li a {
  color: #f0f0f0 !important;
  transition: all 0.2s ease;
}
.user-dropdown-menu li a:hover {
  background: var(--cv-accent, #D4AF37) !important;
  color: #111 !important;
}
.user-dropdown-menu #dropdownUsername {
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Premium Auth Modal overrides */
.auth-modal__inner {
  background: #121212 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}
.auth-modal__head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #161616 !important;
}
.auth-modal__head h2 {
  color: #ffffff !important;
}
.auth-modal__tab {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #a0a0a0 !important;
}
.auth-modal__tab.is-active {
  background: var(--cv-gold, #D4AF37) !important;
  border-color: var(--cv-gold, #D4AF37) !important;
  color: #111 !important;
}
.auth-input {
  background: #181818 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
.auth-input:focus {
  border-color: var(--cv-accent, #D4AF37) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
}
.auth-btn--outline {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  color: #ffffff !important;
}
.auth-btn--outline:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
.auth-btn--primary {
  background: var(--cv-gold, #D4AF37) !important;
  color: #111 !important;
}
.auth-btn--primary:hover {
  background: var(--cv-accent-hover, #bfa032) !important;
  color: #000000 !important;/* Premium User Panel dropdown overrides */
.user-dropdown-menu {
  background: rgba(18, 18, 18, 0.95) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  border-radius: 12px !important;
}
.user-dropdown-menu li a {
  color: #f0f0f0 !important;
  transition: all 0.2s ease;
}
.user-dropdown-menu li a:hover {
  background: var(--cv-accent, #D4AF37) !important;
  color: #111 !important;
}
.user-dropdown-menu #dropdownUsername {
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Premium Auth Modal overrides */
.auth-modal__inner {
  background: #121212 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}
.auth-modal__head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #161616 !important;
}
.auth-modal__head h2 {
  color: #ffffff !important;
}
.auth-modal__tab {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #a0a0a0 !important;
}
.auth-modal__tab.is-active {
  background: var(--cv-gold, #D4AF37) !important;
  border-color: var(--cv-gold, #D4AF37) !important;
  color: #111 !important;
}
.auth-input {
  background: #181818 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
.auth-input:focus {
  border-color: var(--cv-accent, #D4AF37) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
}
.auth-btn--outline {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  color: #ffffff !important;
}
.auth-btn--outline:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
.auth-btn--primary {
  background: var(--cv-gold, #D4AF37) !important;
  color: #111 !important;
}
.auth-btn--primary:hover {
  background: var(--cv-accent-hover, #bfa032) !important;
  color: #000000 !important;
}

/* Premium Card Overrides & Theme Compatibility */
.feature-icon-box,
.daraz-card,
.product-card,
.contact-v2-card,
.cv-trust-badge,
.sc-banner,
.pixio-category-card,
.contact-form-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 8px !important;
}

.feature-icon-box:hover,
.daraz-card:hover,
.product-card:hover,
.contact-v2-card:hover,
.cv-trust-badge:hover,
.sc-banner:hover,
.pixio-category-card:hover {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}

/* Global Text Visibility fixes */
p, 
span, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
a, 
label, 
li,
input,
textarea,
select,
.daraz-card__title,
.daraz-card__price,
.daraz-card__sold,
.product-card__title,
.product-card__price,
.contact-v2-card__value,
.contact-v2-card__label,
.cv-trust-badge__title,
.cv-trust-badge__desc,
.sc-banner__title,
.sc-banner__desc,
.pixio-about-intro__title,
.pixio-about-intro__desc,
.about-checklist-item {
  color: #111111 !important;
}

/* Muted subtexts */
.contact-v2-details__text,
.cv-trust-badge__desc,
.daraz-card__sold,
.about-page-custom-dark p {
  color: #666666 !important;
}

/* Brand Gold Overrides (ensure they stand out in Gold) */
.about-checklist-item i,
.feature-icon-box i,
.daraz-card__badge,
.contact-v2-card__icon i,
.contact-v2-socials__link i,
.scroll-top i,
.daraz-card__price::before,
.cv-brand__mark,
.daraz-price-sale,
.product-card__price {
  color: var(--cv-accent, #D4AF37) !important;
}

/* Form controls font color */
.form-control,
input,
textarea {
  color: #111111 !important;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(17, 17, 17, 0.45) !important;
}

/* Header Navbar Links (White text on dark navy) */
.cv-navbar a,
.cv-navbar a *,
.cv-nav__link,
.cv-nav__link *,
.cv-brand__name {
  color: #ffffff !important;
}
.cv-navbar a:hover,
.cv-navbar a:hover *,
.cv-nav__link:hover,
.cv-brand__name:hover {
  color: var(--cv-accent, #D4AF37) !important;
}

/* Seamless section-to-section background sync */
section, 
main,
.contact-v2-body,
.about-page-custom-dark,
.services-section,
.info-section,
.cv-subscriber-bar,
.pixio-about-partners,
.pixio-about-intro,
.contact-v2-faq,
.cv-trust-badges,
.store-products,
.trending-products,
.bestseller-products,
.info-section__inner {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.daraz-card__body, 
.daraz-card__media {
  background: transparent !important;
}

/* =====================================================
   GLOBAL BLACK & GOLD OVERRIDE — no white backgrounds
   ===================================================== */

/* Force all user-facing panels, cards, wrappers to light spec */
.user-dropdown-menu,
.cv-dropdown,
.auth-modal__inner,
.auth-modal,
.modal-content,
.modal-body,
.modal-header,
.modal-footer,
.popover,
.popover-body,
.popover-header,
.tooltip,
.tooltip-inner,
.dropdown-menu,
.card,
.card-body,
.card-header,
.card-footer,
.list-group-item,
.accordion-body,
.accordion-header,
.tab-content,
.nav-tabs,
.table,
thead,
tbody,
tr,
td,
th {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111111 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Notification page & order page panels */
#notifications-list,
#notifications-empty,
.order-card,
.order-item,
.order-summary,
.cart-item,
.cart-summary,
.checkout-form,
.checkout-section,
.place-order-form {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #111111 !important;
}

/* Gold hover states for user dropdown links */
.user-dropdown-menu li a:hover,
.dropdown-menu li a:hover,
.dropdown-item:hover {
  background: rgba(212, 175, 55, 0.15) !important;
  color: #D4AF37 !important;
}

/* Gold separators */
.user-dropdown-menu li a,
.dropdown-item {
  color: #f0f0f0 !important;
}

/* Form inputs in dark pages */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background: #181818 !important;
  background-color: #181818 !important;
  border: 1px solid rgba(212, 175, 55, 0.15) !important;
  color: #f0f0f0 !important;
}
input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.3) !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #D4AF37 !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12) !important;
  outline: none !important;
}

/* =====================================================
   SECTION-SPECIFIC BLACK OVERRIDES
   Trending, Bestseller, Explore Brands, eb-card
   ===================================================== */

/* Section wrappers — no white */
.modern-products-section,
.trending-products,
.bestseller-products,
.explore-brands,
.brand-arch,
.cat-grid-section,
.cs-section,
#explore-by-brands,
#trending-section,
#bestsellers {
  background: transparent !important;
  background-color: transparent !important;
}

/* Product cards — light with dark text */
.modern-product-card,
.modern-product-card__media {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #111111 !important;
}

.modern-product-card:hover {
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
}

.modern-product-card__media {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

/* Brand cards in Explore Brands */
.eb-card,
.eb-card__info {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.eb-card:hover {
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
}

.eb-card__category {
  color: #666666 !important;
}

.eb-card__discount,
.eb-card__name,
.eb-card__brand {
  color: #111111 !important;
}

/* Customer stories / Skeleton loaders */
.cs-header__title,
.section-header-split__title {
  color: #ffffff !important;
}

.cs-header__subtitle,
.section-header-split__subtitle {
  color: rgba(255,255,255,0.6) !important;
}

/* Arrow nav icons color inside dark bg */
.eb-prev::after, 
.eb-next::after {
  color: #D4AF37 !important;
}

/* =====================================================
   CUSTOMER STORIES / TESTIMONIALS SECTION
   ===================================================== */
.cs-section {
  background: var(--site-bg) !important;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  position: relative;
  overflow: hidden;
}
.cs-section::before {
  content: '';
  position: absolute;
  top: -100px; left: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.cs-section .container-fluid { position: relative; z-index: 1; }

.cs-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.cs-header__eyebrow {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cv-accent); margin: 0 0 0.4rem;
}
.cs-header__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800; color: #ffffff; margin: 0; line-height: 1.1;
}
.cs-header__subtitle {
  font-size: 0.9rem; color: rgba(255,255,255,0.55); margin: 0.4rem 0 0;
}
.cs-header__link {
  font-size: 0.82rem; font-weight: 600; color: var(--cv-accent);
  text-decoration: none; display: flex; align-items: center;
  gap: 0.4rem; white-space: nowrap; transition: opacity 0.2s;
}
.cs-header__link:hover { opacity: 0.75; }

.cs-swiper-wrap { position: relative; }
.cs-swiper { overflow: hidden; padding-bottom: 3rem !important; }

/* Portrait Card */
.cs-card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--site-surface-card);
  aspect-ratio: 3 / 4;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  border: 1px solid var(--site-border);
}
.cs-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.5);
  border-color: rgba(212,175,55,0.3);
}
.cs-card__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.45s ease;
}
.cs-card:hover .cs-card__bg { transform: scale(1.05); }

.cs-card__no-img {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--site-surface) 0%, var(--site-surface-card) 100%);
  color: rgba(255,255,255,0.15); font-size: 4.5rem;
}
.cs-card__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 35%, transparent 60%);
  pointer-events: none; z-index: 1;
}
/* Pill badge */
.cs-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: rgba(212,175,55,0.9);
  color: #111;
  font-family: var(--font-display);
  font-size: 0.65rem; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.cs-badge--yt { background: #ff0000; color: #fff; }
.cs-badge--vid { background: rgba(212,175,55,0.9); color: #111; }

/* Footer info */
.cs-card__foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1rem;
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 0.5rem;
}
.cs-card__info { overflow: hidden; min-width: 0; }
.cs-card__name {
  font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 700; color: #fff;
  margin: 0; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.cs-card__role {
  font-size: 0.7rem; font-weight: 500;
  color: rgba(255,255,255,0.75); margin: 0.15rem 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Play button */
.cs-play-btn {
  flex-shrink: 0; align-self: flex-end;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.7rem; padding-left: 2px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cs-card:hover .cs-play-btn {
  background: var(--cv-accent);
  color: #111; transform: scale(1.1);
}
/* Skeleton */
.cs-skel {
  border-radius: 12px; aspect-ratio: 3 / 4;
  background: linear-gradient(90deg, var(--site-surface) 25%, var(--site-surface-card) 50%, var(--site-surface) 75%);
  background-size: 200% 100%;
  animation: csSkel 1.4s ease infinite;
}
@keyframes csSkel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Nav arrows */
.cs-prev, .cs-next {
  width: 40px !important; height: 40px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(212,175,55,0.25) !important;
  border-radius: 50%; top: 44% !important;
  transition: background 0.22s ease, transform 0.22s ease;
}
.cs-prev::after, .cs-next::after { font-size: 11px !important; font-weight: 900; color: var(--cv-accent) !important; }
.cs-prev:hover, .cs-next:hover { background: var(--cv-accent) !important; border-color: transparent !important; transform: scale(1.1); }
.cs-prev:hover::after, .cs-next:hover::after { color: #111 !important; }

/* Pagination */
.cs-pagination .swiper-pagination-bullet {
  background: rgba(255,255,255,0.25) !important;
  opacity: 1; width: 7px; height: 7px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.cs-pagination .swiper-pagination-bullet-active {
  background: var(--cv-accent) !important;
  transform: scale(1.5);
}

/* =====================================================
   TRENDING & BESTSELLING PRODUCT CARDS — DEFINITIVE OVERRIDE
   ===================================================== */
.modern-products-section,
.modern-products-section * {
  background-color: transparent;
}

.modern-product-card {
  background: var(--site-surface-card) !important;
  background-color: var(--site-surface-card) !important;
  border: 1px solid var(--site-border) !important;
  color: var(--site-ink) !important;
}
.modern-product-card:hover {
  border-color: rgba(212,175,55,0.35) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55) !important;
}
.modern-product-card__media,
.modern-product-card__media *:not(img) {
  background: var(--site-surface-card) !important;
  background-color: var(--site-surface-card) !important;
  border-bottom-color: var(--site-border) !important;
}
.modern-product-card__title,
.modern-product-card__name,
.modern-product-card__price,
.modern-product-card__brand {
  color: var(--site-ink) !important;
}
.modern-product-card__category,
.modern-product-card__muted {
  color: rgba(255,255,255,0.5) !important;
}

/* Remaining warm/cream/beige tones override */
.shop-cats__card-media,
[class*="card-media"],
[class*="product-media"] {
  background: var(--site-surface-card) !important;
}

/* =====================================================
   GOLD BORDERS — PRODUCT CARDS & FILTER SECTIONS
   ===================================================== */

/* ── All product card types — gold border ── */
.product-card,
.daraz-card,
.pixio-category-card,
.shop-cats__card,
.modern-product-card,
.eb-card,
.arch-card__frame,
.warranty-card,
.optical-service-card,
.feature-icon-box,
.contact-v2-card,
.cv-trust-badge,
.sc-banner,
.contact-form-card,
.cs-card {
  border: 1px solid var(--cv-gold, #D4AF37) !important;
  border-color: rgba(212, 175, 55, 0.22) !important;
}

/* ── Hover: brighter gold glow ── */
.product-card:hover,
.daraz-card:hover,
.pixio-category-card:hover,
.shop-cats__card:hover,
.modern-product-card:hover,
.eb-card:hover,
.warranty-card:hover,
.optical-service-card:hover,
.feature-icon-box:hover,
.cs-card:hover {
  border-color: rgba(212, 175, 55, 0.65) !important;
  box-shadow: 0 0 0 1px rgba(212,175,55,0.12), 0 8px 28px rgba(0,0,0,0.5) !important;
}

/* ── Filter sidebar / panel ── */
.filter-panel,
.filter-sidebar,
.shop-filter,
.filters-wrap,
.filter-section,
.filter-group,
[class*="filter-panel"],
[class*="filter-sidebar"],
[id*="filter"] {
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
  border-radius: 10px;
  background: var(--site-surface-card) !important;
}

/* ── Filter pills / size chips ── */
.filter-size-pill,
.filter-tag,
[class*="filter-chip"],
[class*="filter-btn"],
[class*="size-pill"],
[class*="filter-pill"] {
  border: 1.5px solid rgba(212, 175, 55, 0.2) !important;
  color: rgba(255,255,255,0.75) !important;
  background: var(--site-surface) !important;
  border-radius: 6px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.filter-size-pill:hover,
.filter-size-pill.is-active,
.filter-tag:hover,
.filter-tag.is-active,
[class*="filter-chip"]:hover,
[class*="filter-chip"].active,
[class*="filter-btn"]:hover,
[class*="filter-btn"].active {
  border-color: var(--cv-gold, #D4AF37) !important;
  color: var(--cv-gold, #D4AF37) !important;
  background: rgba(212, 175, 55, 0.1) !important;
}

/* ── Filter color swatches — gold ring on active ── */
.filter-color-swatch.is-active,
[class*="color-swatch"].active {
  outline: 2px solid var(--cv-gold, #D4AF37) !important;
  outline-offset: 2px !important;
}

/* ── Filter headings / labels ── */
.filter-group__title,
.filter-label,
[class*="filter-title"],
[class*="filter-heading"] {
  color: var(--cv-gold, #D4AF37) !important;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ── Shop page filter range slider track ── */
input[type="range"] {
  accent-color: var(--cv-gold, #D4AF37) !important;
}

/* ── Daraz card inner dividers ── */
.daraz-card__footer,
.daraz-card__header,
.modern-product-card__footer,
.modern-product-card__header {
  border-color: rgba(212, 175, 55, 0.1) !important;
}

/* =====================================================
   TEXT COLOR FIXES — TRENDING & BEST SELLING SECTIONS
   ===================================================== */

/* Section headings */
.section-header-split__title,
.modern-products-section .section-header-split__title {
  color: #ffffff !important;
}

.section-header-split__subtitle,
.modern-products-section .section-header-split__subtitle {
  color: rgba(255,255,255,0.55) !important;
}

/* CTA "View All" link */
.section-header-split__link,
.section-header-split__cta {
  color: var(--cv-accent) !important;
  border-color: rgba(212,175,55,0.35) !important;
  background: transparent !important;
}
.section-header-split__link:hover,
.section-header-split__cta:hover {
  background: var(--cv-accent) !important;
  color: #111 !important;
  border-color: var(--cv-accent) !important;
}

/* Product title */
.modern-product-card__title {
  color: #f0f0f0 !important;
}

/* Rating */
.modern-product-card__rating .stars {
  color: var(--cv-accent) !important;
}
.modern-product-card__rating .reviews {
  color: rgba(255,255,255,0.45) !important;
}

/* Price */
.modern-product-card__price-row .price-current {
  color: var(--cv-accent) !important;
}
.modern-product-card__price-row .price-old {
  color: rgba(255,255,255,0.35) !important;
}

/* Stock text */
.stock-text {
  color: rgba(255,255,255,0.5) !important;
}
.stock-text strong {
  color: var(--cv-accent) !important;
}

/* Stock bar */
.stock-bar {
  background: rgba(255,255,255,0.08) !important;
}
.stock-progress {
  background: var(--cv-accent) !important;
}

/* Buttons inside card */
.modern-btn--outline {
  border-color: rgba(212,175,55,0.3) !important;
  color: #f0f0f0 !important;
  background: transparent !important;
}
.modern-btn--outline:hover {
  border-color: var(--cv-accent) !important;
  color: var(--cv-accent) !important;
}
.modern-btn--solid {
  background: var(--cv-accent) !important;
  border-color: var(--cv-accent) !important;
  color: #111 !important;
}
.modern-btn--solid:hover {
  background: var(--cv-accent-hover) !important;
  border-color: var(--cv-accent-hover) !important;
}

/* Shop category card names (category carousel) */
.shop-cats__card-name {
  color: #f0f0f0 !important;
}
.shop-cats__card-cta {
  color: var(--cv-accent) !important;
}

/* --- Premium User Dropdown Overrides --- */
.user-dropdown-menu {
  background: rgba(18, 18, 18, 0.65) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(212, 175, 55, 0.1) inset !important;
  border-radius: 16px !important;
  padding: 12px 0 !important;
  min-width: 230px !important;
  overflow: hidden !important;
  animation: dropdownFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  transform-origin: top right !important;
  margin-top: 12px !important;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.user-dropdown-menu li {
  margin: 0 !important;
  padding: 0 !important;
}

.user-dropdown-menu li a {
  display: flex !important;
  align-items: center !important;
  padding: 14px 24px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  gap: 12px;
}

.user-dropdown-menu li a i {
  font-size: 1.1rem;
  color: #D4AF37;
  width: 20px;
  text-align: center;
  transition: transform 0.3s ease;
}

.user-dropdown-menu li a:hover {
  background: rgba(212, 175, 55, 0.15) !important;
  color: #D4AF37 !important;
  padding-left: 32px !important;
}

.user-dropdown-menu li a:hover i {
  transform: scale(1.1);
}

#dropdownUsername {
  padding: 20px 24px 16px !important;
  color: #D4AF37 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.03em !important;
  background: transparent !important;
  text-shadow: 0 2px 10px rgba(212, 175, 55, 0.2) !important;
}

#logoutBtn {
  color: #ff4d4f !important;
  margin-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#logoutBtn i {
  color: #ff4d4f !important;
}

#logoutBtn:hover {
  background: rgba(255, 77, 79, 0.15) !important;
  color: #ff7875 !important;
}

/* --- Accessories Page Premium UI --- */
.accessories-page__content {
  padding: 3rem 5%;
  background: var(--site-surface, #f8f9fa);
}

.accessories-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  margin-bottom: 3rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .accessories-page__content { background: var(--site-bg, #050505); }
  .accessories-list-header {
    background: rgba(20, 20, 20, 0.6);
    border-color: rgba(212, 175, 55, 0.15);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  }
}

.accessories-list-header__title {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-primary, #111);
  margin: 0;
}
@media (prefers-color-scheme: dark) {
  .accessories-list-header__title { color: #fff; }
}

.accessories-list-header__right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.shop-accessories__cats {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.shop-accessories__cat {
  background: transparent;
  border: 1px solid rgba(136, 136, 136, 0.3);
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary, #555);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  .shop-accessories__cat { color: #bbb; border-color: rgba(255,255,255,0.1); }
}

.shop-accessories__cat:hover, .shop-accessories__cat.is-active {
  background: var(--cv-accent, #D4AF37);
  border-color: var(--cv-accent, #D4AF37);
  color: #111;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  transform: translateY(-2px);
}

.accessories-page__sort-select {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(136, 136, 136, 0.3) !important;
  padding: 0.6rem 2.5rem 0.6rem 1rem !important;
  border-radius: 50px !important;
  font-size: 0.9rem !important;
  color: var(--text-primary, #111);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  transition: all 0.3s ease;
}

@media (prefers-color-scheme: dark) {
  .accessories-page__sort-select { 
    color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

.accessories-page__sort-select:focus {
  outline: none;
  border-color: var(--cv-accent, #D4AF37) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

@media (max-width: 768px) {
  .accessories-list-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.2rem;
  }
  .accessories-list-header__right {
    width: 100%;
    justify-content: space-between;
  }
  .shop-accessories__cats {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }
  .shop-accessories__cats::-webkit-scrollbar {
    display: none;
  }
  .shop-accessories__cat {
    flex-shrink: 0;
  }
}