/* ============================================================

   1. GOOGLE FONTS — Mufti-Style Condensed Luxury Typography

   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Roboto+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,700&display=swap');



/* ============================================================

   2. GLOBAL TYPOGRAPHY DESIGN TOKENS

   ============================================================ */

:root {

  --font-heading: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-display: 'Bree Serif', 'Roboto Condensed', serif;

  --font-flourish: 'Roboto Condensed', sans-serif;

  --font-body: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;



  --radius-sm: 4px;

  --radius-md: 8px;

  --radius-lg: 16px;

  --radius-pill: 9999px;



  --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.10);

  --shadow-medium: 0 6px 24px rgba(0, 0, 0, 0.14);

  --shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.18);



  --transition-fast: 0.18s ease;

  --transition-normal: 0.28s ease;

  --transition-slow: 0.45s ease;



  --spacing-xs: 4px;

  --spacing-sm: 8px;

  --spacing-md: 16px;

  --spacing-lg: 32px;

  --spacing-xl: 64px;

}



/* ============================================================

   2B. ULTRA-FAST PERFORMANCE & CLS ZERO-SHAKE STABILITY BOOST

   ============================================================ */

html {

  scroll-behavior: smooth;

  text-rendering: optimizeSpeed;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



body {

  overflow-x: hidden;

}



/* Prevent layout shifts & image load shaking */

img {

  content-visibility: auto;

}



.product-default figure {

  aspect-ratio: 3 / 4 !important;

  contain-intrinsic-size: 300px 400px;

  content-visibility: auto;

  transform: translateZ(0);

  backface-visibility: hidden;

}



.lux-gallery-wrap {

  aspect-ratio: 4 / 5 !important;

  contain-intrinsic-size: 580px 640px;

  content-visibility: auto;

  transform: translateZ(0);

  backface-visibility: hidden;

}



/* Hardware accelerated sticky elements for jitter-free scrolling */

.header-sticky.sticky-header,

.sticky-navbar,

.lux-breadcrumb-bar,

.lux-thumb-rail-wrapper,

.lux-gallery-col {

  transform: translateZ(0);

  backface-visibility: hidden;

  will-change: transform;

}



/* ============================================================

   3. UNIVERSAL TYPOGRAPHY APPLICATION

   ============================================================ */

body,

html,

p,

a,

span,

div,

strong,

em,

li,

td,

th,

label,

input,

select,

textarea,

.form-control,

.nav-link,

.menu,

.dropdown-menu,

.toolbox,

.breadcrumb-item,

.product-title,

.product-title a,

.price-box,

.product-price,

.old-price,

.new-price,

.btn,

.badge,

.cart-count,

.table,

.footer-copyright,

.mobile-cart {

  font-family: var(--font-body) !important;

}



i, [class^="icon-"], [class*=" icon-"], .fa, .fas, .far, .fab {

  font-family: inherit; /* Let icons be icons, we fix this later if needed, but actually best to leave icon families alone */

}



h1,

h2,

h3,

h4,

h5,

h6,

.h1,

.h2,

.h3,

.h4,

.h5,

.h6,

.section-title,

.banner-title,

.hero-title,

.page-title,

.collection-title,

.widget-title,

.display-title,

.brand-title,

.heading-luxury,

.card-title,

.modal-title {

  font-family: var(--font-heading) !important;

}



/* Fix icons */

.ratings::before,

.product-ratings::before,

.ratings::after,

.product-ratings::after,

[class*='icon-']::before,

[class*='icon-']::after,

.fa,

.fas,

.fab,

.far {

  font-family: 'Font Awesome 5 Free', 'porto' !important;

}



.icon-export::before {

  font-family: 'porto' !important;

  content: '\e81a';

}



/* Reduce space below image */

.product-default figure {

  margin-bottom: 5px !important;

}



.product-details {

  padding-top: 0 !important;

}



/* ============================================================

   3. BASE / GLOBAL TYPOGRAPHY

   ============================================================ */

body {

  font-size: 15px;

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  color: #111827;

  background-color: #ffffff;

}



/* Header offset applied via class */

body.has-header-offset {

  padding-top: 80px;

}



/* Luxury Serif Display Headings (Cormorant Garamond aesthetic) */

h1,

.h1 {

  font-size: 2.6rem !important;

  line-height: 1.2;

  font-weight: 600 !important;

}



h2,

.h2 {

  font-size: 2.1rem !important;

  line-height: 1.25;

  font-weight: 600 !important;

}



h3,

.h3 {

  font-size: 1.65rem !important;

  line-height: 1.3;

  font-weight: 600 !important;

}



h4,

.h4 {

  font-size: 1.35rem !important;

  line-height: 1.35;

  font-weight: 600 !important;

}



h5,

.h5 {

  font-size: 1.15rem !important;

  line-height: 1.4;

  font-weight: 600 !important;

}



h6,

.h6 {

  font-size: 1.0rem !important;

  line-height: 1.4;

  font-weight: 600 !important;

}



.section-title,

.banner-title,

.hero-title,

.page-title,

.collection-title,

.widget-title,

.display-title,

.brand-title,

.heading-luxury {

  letter-spacing: 0.01em !important;

  color: #111827;

}



.product-title {

  font-size: 0.98rem !important;

  font-weight: 600 !important;

  letter-spacing: 0.01em !important;

  color: #111827 !important;

}



/* Luxury Italic Flourish Accents (Transcity signature look) */

.font-luxury-italic,

.italic-flourish,

.hero-subtitle,

.subtitle-serif,

.heading-accent-italic {



  font-style: italic !important;

  font-weight: 400 !important;

}



.btn,

.nav-tabs .nav-link,

.header-middle,

.breadcrumb-item,

.toolbox,

label,

.dropdown-cart-header {}



/* ============================================================

   4. HEADER ENHANCEMENTS

   ============================================================ */



/* Top notice bar — subtle gradient depth */

.top-notice.bg-dark {

  background: linear-gradient(135deg, #1A1715 0%, #1A1715 100%) !important;

  letter-spacing: 0.04em;

  font-size: 1.25rem;

}



.top-notice {

  height: 30px !important;

  padding-top: 0 !important;

  padding-bottom: 0 !important;

  margin: 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  box-sizing: border-box !important;

  border-bottom: none !important;

  box-shadow: none !important;

}



/* Remove any top borders that show up as lines directly under the top notice */

.header,

.header-top,

.header-middle,

.sticky-header {

  border-top: none !important;

}











.top-notice .category {

  border-radius: var(--radius-sm);

  padding: 0.25em 0.9em;

  font-size: 1rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  transition: opacity var(--transition-fast);

}



.top-notice .category:hover {

  opacity: 0.82;

}



/* Header wrapper — clean card-like feel */

.header {

  background-color: #fff;

  border-bottom: none;

  /* removed line */

  /* Dusty Rose */

  height: 70px !important;

  /* fixed height */

}



/* Header top — refined spacing */

.header-top {

  display: none !important;

}



/* Sticky header — drop shadow and solid background on scroll */

.sticky-header.fixed {

  background-color: #ffffff !important;

  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.10) !important;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

}



/* Header middle */

.header-middle {

  background-color: #ffffff !important;

  height: 70px !important;

  padding: 0 !important;

  border-bottom: none !important;

  /* removed white line */

}



/* Duplicate header styles removed */



.header-middle .container {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  height: 100% !important;

  min-height: 100% !important;

}



/* ============================================================

   ADMIN PRODUCT VARIATIONS & INVENTORY CARD

   ============================================================ */

.var-section-card {

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 12px !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;

  overflow: hidden !important;

  margin-bottom: 24px !important;

}



.var-dark-header {

  background: #000000 !important;

  color: #ffffff !important;

  padding: 14px 20px !important;

  border-top-left-radius: 12px !important;

  border-top-right-radius: 12px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

}



.var-dark-header h5 {

  color: #ffffff !important;

  font-size: 15px !important;

  font-weight: 700 !important;

  margin: 0 !important;

  display: flex !important;

  align-items: center !important;

}



.var-hdr-add-btn {

  font-size: 12px !important;

  font-weight: 700 !important;

  border-radius: 8px !important;

  padding: 7px 16px !important;

  background: #ffffff !important;

  color: #000000 !important;

  border: none !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  display: inline-flex !important;

  align-items: center !important;

  line-height: 1 !important;

}



.var-hdr-add-btn:hover {

  background: #f8fafc !important;

  color: #000000 !important;

}



.var-hdr-save-btn {

  font-size: 12px !important;

  font-weight: 700 !important;

  border-radius: 8px !important;

  padding: 7px 16px !important;

  background: #142e23 !important;

  color: #ffffff !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  display: inline-flex !important;

  align-items: center !important;

  line-height: 1 !important;

}



.var-hdr-save-btn:hover {

  background: #1c3d2f !important;

  color: #ffffff !important;

}



.header-left {

  display: flex !important;

  align-items: center !important;

  height: 100% !important;

  gap: 22px !important;

}



.header-left .logo {

  display: flex !important;

  align-items: center !important;

  height: 100% !important;

}



.header-left .logo img {

  height: 16px !important;

  max-height: 16px !important;

  width: auto !important;

  object-fit: contain !important;

  display: block !important;

}



.header-right {

  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  height: 100% !important;

  gap: 32px !important;

}



/* Centering interactive containers */

.header-middle .header-search-inline,

.header-middle .user-dropdown-container,

.header-middle .user-dropdown-trigger,

.header-middle .header-contact,

.header-middle .header-icon,

.header-middle .cart-dropdown,

.header-middle .cart-toggle {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  height: 100% !important;

  margin: 0 !important;

  padding: 0 !important;

}



@media (max-width: 991px) {

  .header-middle .header-contact,

  .header-contact,

  .user-info-name {

    display: none !important;

  }

}



/* Normalizing icons to prevent rogue line-height offsets */

.header-middle i[class^="icon-"],

.header-middle i[class*=" icon-"],

.header-middle i.fas,

.header-middle i.far {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  line-height: 1 !important;

  height: auto !important;

  width: auto !important;

  margin: 0 !important;

}



/* Badge styling */

.header-middle .badge-circle {

  position: absolute !important;

  top: 10px !important;

  right: -8px !important;

  background: #000000 !important;

  color: #FFFFFF !important;

  font-size: 10px !important;

  font-weight: 700 !important;

  width: 16px !important;

  height: 16px !important;

  border-radius: 50% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  line-height: 1 !important;

  border: 1px solid #FFFFFF !important;

}



/* ============================================================

   PERFECT MOBILE HEADER — Logo centred, Hamburger left, Cart right

   ============================================================ */

@media (max-width: 991px) {



  /* Container: relative so logo can be absolutely centred */

  .header-middle .container {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    height: 100% !important;

    padding-left: 12px !important;

    padding-right: 12px !important;

  }



  /* ── LEFT: hamburger button & search trigger ── */

  .header-left {

    display: flex !important;

    align-items: center !important;

    position: static !important;

    z-index: 100 !important;

    flex: 0 0 auto !important;

    gap: 8px !important;

  }



  /* Hamburger button — correct size & touch target */

  .header-left .mobile-menu-toggler {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 40px !important;

    height: 40px !important;

    background: none !important;

    border: none !important;

    padding: 0 !important;

    margin: 0 !important;

    cursor: pointer !important;

    color: #1A1715 !important;

    font-size: 2rem !important;

    line-height: 1 !important;

  }



  /* ── Mobile Search Container & Trigger ── */

  .header-search-inline-container {

    display: inline-flex !important;

    align-items: center !important;

    height: 100% !important;

  }



  .header-search-click-trigger {

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    color: #1A1715 !important;

    margin-left: -20px !important;

  }



  .header-search-click-trigger span {

    font-size: 1.05rem !important;

    letter-spacing: 0.08em !important;

  }



  /* ── Active Search State (Full Width Bar) ── */

  .mobile-search-active .header-middle .logo {

    display: none !important;

  }



  .mobile-search-active .header-left .mobile-menu-toggler {

    display: none !important;

  }



  .mobile-search-active .header-right {

    display: none !important;

  }



  .mobile-search-active .header-left {

    flex: 1 1 100% !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 8px !important;

  }



  .mobile-search-active .header-search-inline-container {

    width: 100% !important;

    display: flex !important;

  }



  .mobile-search-active .header-search-inline-form {

    display: flex !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 100% !important;

    height: 40px !important;

    border-radius: 20px !important;

    border: 1.5px solid #000000 !important;

    margin: 0 !important;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;

  }



  .mobile-search-active .search-inline-results-container {

    left: 8px !important;

    right: 8px !important;

    width: calc(100% - 16px) !important;

    min-width: auto !important;

  }



  /* ── CENTRE: logo — absolute so it cannot be pushed by icons ── */

  .header-middle .logo {

    position: absolute !important;

    left: 50% !important;

    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    margin: 0 !important;

    padding: 0 !important;

    z-index: 1001 !important;

    pointer-events: auto !important;

  }



  .header-middle .logo img {

    height: 20px !important;

    max-height: 20px !important;

    width: auto !important;

    object-fit: contain !important;

    display: block !important;

  }



  /* ── RIGHT: cart and profile dropdown group ── */

  .header-right {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    flex: 0 0 auto !important;

    height: 100% !important;

    z-index: 100 !important;

    gap: 20px !important;

  }



  /* ── HIDE old elements, show new mobile profile dropdown ── */



  /* 1. Desktop user account text block */

  .header-middle .header-contact {

    display: none !important;

  }



  /* 2. Old plain-anchor mobile user icon — now replaced by .mobile-user-dropdown */

  .header-middle a.header-icon.d-lg-none,

  .header-middle a.d-lg-none.header-icon,

  .header-middle a[title="My Account"],

  .header-middle a.header-icon[title="My Account"] {

    display: none !important;

    visibility: hidden !important;

    width: 0 !important;

    overflow: hidden !important;

  }



  /* 3. Wishlist icon — hidden on mobile */

  .header-middle a[href="wishlist.php"],

  .header-middle a.header-icon.position-relative[href*="wishlist"],

  .header-middle a.header-icon[href*="wishlist"] {

    display: none !important;

    visibility: hidden !important;

    width: 0 !important;

    overflow: hidden !important;

  }



  /* 4. New mobile user dropdown & Cart dropdown — equal container sizing & center alignment */

  .header-middle .mobile-user-dropdown,

  .header-middle .cart-dropdown {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    position: relative !important;

    margin-right: 0 !important;

    height: 36px !important;

    width: 36px !important;

    vertical-align: middle !important;

  }



  .header-middle .cart-toggle {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    height: 100% !important;

    position: relative !important;

    padding: 0 !important;

    margin: 0 !important;

  }



  .header-middle .cart-toggle i {

    font-size: 2.35rem !important;

    color: #1A1715 !important;

    line-height: 1 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    transform: translateY(-1px) !important;

  }



  /* Badge — clean compact black circle positioned at top-right with no white ring */

  .header-middle .badge-circle,

  .cart-count.badge-circle,

  .cart-count,

  .badge-circle {

    position: absolute !important;

    top: 3px !important;

    right: 1px !important;

    background: #000000 !important;

    background-color: #000000 !important;

    color: #ffffff !important;

    font-size: 0.75rem !important;

    font-weight: 700 !important;

    min-width: 14px !important;

    width: 14px !important;

    height: 14px !important;

    line-height: 14px !important;

    border-radius: 50% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    z-index: 10 !important;

    box-shadow: none !important;

    -webkit-box-shadow: none !important;

    border: none !important;

    outline: none !important;

    filter: none !important;

    -webkit-filter: none !important;

    padding: 0 !important;

    margin: 0 !important;

    transform: none !important;

  }



  .cart-count::before,

  .cart-count::after,

  .badge-circle::before,

  .badge-circle::after {

    display: none !important;

    content: none !important;

    border: none !important;

    box-shadow: none !important;

    background: transparent !important;

  }

}



/* ── SMALL SHIELD OVERRIDES: prevents overlapping on narrow screens (like 350px width) ── */

@media (max-width: 480px) {



  /* Hide search text on small viewports, show only search icon */

  .header-search-click-trigger span {

    display: none !important;

  }



  /* Tighten spacing on small viewports */

  .header-right {

    gap: 12px !important;

  }

}



@media (max-width: 360px) {



  /* Slightly scale down logo height to fit perfectly on very narrow screens */

  .header-middle .logo img {

    height: 15px !important;

    max-height: 15px !important;

  }

}



/* ============================================================

   PREMIUM MOBILE USER DROPDOWN

   ============================================================ */



/* Wrapper */

.mobile-user-dropdown {

  display: none;

  position: relative;

  align-items: center;

  justify-content: center;

}



/* ── Trigger button — transparent, clean icon ── */

.mobile-user-trigger {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  padding: 0 !important;

  margin: 0 !important;

  cursor: pointer !important;

  color: #1A1715 !important;

  line-height: 1 !important;

  height: 36px !important;

  width: 36px !important;

  border-radius: 0 !important;

  transition: transform 0.15s ease, color 0.2s ease !important;

  -webkit-tap-highlight-color: transparent !important;

}



.mobile-user-trigger:hover,

.mobile-user-trigger:focus {

  background: transparent !important;

  border-color: transparent !important;

  outline: none !important;

  color: #000000 !important;

}



.mobile-user-trigger.active {

  background: transparent !important;

  border-color: transparent !important;

  color: #000000 !important;

  transform: scale(0.95) !important;

}



.mobile-user-trigger i {

  font-size: 1.85rem !important;

  line-height: 1 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  color: #1A1715 !important;

  transition: color 0.2s ease !important;

  transform: translateY(0px) !important;

}



.mobile-user-trigger.active i {

  color: #000000 !important;

}



/* ── Dropdown panel — premium dark ── */

/* ── Dropdown panel — premium minimal black & white ── */

.mobile-user-menu {

  display: none;

  position: absolute;

  top: calc(100% + 10px);

  right: 0;

  width: 200px;

  background: #ffffff;

  border-radius: 12px;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);

  z-index: 10000;

  overflow: hidden;

  border: 1px solid #000000;

}



.mobile-user-menu.open {

  display: block;

  animation: premiumMenuIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);

}



@keyframes premiumMenuIn {

  from {

    opacity: 0;

    transform: translateY(-8px) scale(0.96);

  }



  to {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}



/* ── Greeting header ── */

.mobile-user-menu-header {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 12px 14px;

  background: #fcfcfc;

  border-bottom: 1px solid #000000;

}



/* Avatar circle with initials */

.mobile-user-menu-header::before {

  content: attr(data-initial);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 30px;

  height: 30px;

  min-width: 30px;

  border-radius: 50%;

  background: #000000;

  color: #ffffff;

  font-size: 1.25rem;

  font-weight: 700;



  letter-spacing: 0;

}



.mobile-user-greeting {

  display: block;

  font-size: 0.9rem;

  color: #777777;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-weight: 500;



  line-height: 1;

}



.mobile-user-name {

  display: block;

  font-size: 1.25rem;

  font-weight: 700;

  color: #000000;



  margin-top: 2px;

  line-height: 1.2;

  letter-spacing: -0.01em;

}



/* ── Menu items ── */

.mobile-user-menu-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 11px 14px;

  font-size: 1.25rem;



  font-weight: 500;

  color: #000000;

  text-decoration: none;

  transition: background 0.14s ease, color 0.14s ease, padding-left 0.14s ease;

  border-bottom: 1px solid #f0f0f0;

  letter-spacing: 0.01em;

}



.mobile-user-menu-item:last-child {

  border-bottom: none;

}



.mobile-user-menu-item i {

  width: 16px;

  text-align: center;

  font-size: 1.1rem;

  color: #666666;

  flex-shrink: 0;

  transition: color 0.14s ease;

}



.mobile-user-menu-item:hover,

.mobile-user-menu-item:focus {

  background: #000000 !important;

  color: #ffffff !important;

  text-decoration: none;

  padding-left: 18px;

}



.mobile-user-menu-item:hover i,

.mobile-user-menu-item:focus i {

  color: #ffffff !important;

}



/* ── Login/Sign-in accent ── */

.mobile-user-menu-signin {

  color: #000000;

  font-weight: 700;

  letter-spacing: 0.02em;

}



.mobile-user-menu-signin i {

  color: #000000;

}



.mobile-user-menu-signin:hover {

  background: #000000 !important;

  color: #ffffff !important;

}



/* ── Logout accent ── */

.mobile-user-menu-logout {

  color: #000000;

  border-top: 1px solid #000000 !important;

  margin-top: 0;

}



.mobile-user-menu-logout i {

  color: #000000;

}



.mobile-user-menu-logout:hover {

  background: #000000 !important;

  color: #ffffff !important;

}



.mobile-user-menu-logout:hover i {

  color: #ffffff !important;

}





.header-left .logo img {

  height: 16px !important;

  max-height: 16px !important;

  width: auto !important;

  transition: opacity var(--transition-fast);

}



.header-left .logo:hover img {

  opacity: 0.88;

}



/* Search bar — Clean Capsule Design */

.header-search-wrapper {

  display: flex !important;

  align-items: center !important;

  background: transparent !important;

  box-shadow: none !important;

  height: 40px !important;

  overflow: visible !important;

  /* allow button scaling */

  position: relative !important;

  padding: 0 !important;

  margin: 0 !important;

  width: 100% !important;

}



.header-search-wrapper .form-control {

  flex: 1 !important;

  height: 100% !important;

  border: none !important;

  background: transparent !important;

  font-size: 1.4rem !important;

  color: #1A1715 !important;

  padding-left: 1.8rem !important;

  /* adjust padding for capsule shape */

  padding-right: 0.5rem !important;

  margin: 0 !important;

  box-shadow: none !important;

}



.header-search-wrapper .form-control::placeholder {

  color: #999 !important;

  font-weight: 300 !important;

}



.header-search-wrapper .btn {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  position: relative !important;

  top: auto !important;

  right: auto !important;

  bottom: auto !important;

  left: auto !important;

  height: 100% !important;

  min-width: 44px !important;

  background: transparent !important;

  /* transparent flat button */

  color: #000000 !important;

  /* primary color default */

  border: none !important;

  border-radius: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  font-size: 1.6rem !important;

  cursor: pointer !important;

  transition: color 0.25s ease, transform 0.25s ease !important;

}



.header-search-wrapper .btn:hover {

  background: transparent !important;

  color: #000000 !important;

  /* brand red color on hover */

  transform: scale(1.15) !important;

  /* micro-animation scale */

}



/* Cart / wishlist badge */

.badge-circle {

  border-radius: 50%;

  font-size: 1rem;

  font-weight: 700;

  min-width: 17px;

  min-height: 17px;

  line-height: 1.7rem;

  letter-spacing: 0;

}



/* Cart dropdown — right side panel */

.cart-dropdown .mobile-cart {

  position: fixed !important;

  top: 0 !important;

  right: -400px !important;

  left: auto !important;

  bottom: 0 !important;

  width: 320px !important;

  max-width: 90vw;

  height: 100vh !important;

  max-height: 100vh !important;

  border-radius: 0 !important;

  box-shadow: -4px 0 30px rgba(0, 0, 0, 0.18);

  overflow-y: auto;

  display: block !important;

  visibility: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

  z-index: 9999;

  transition: right 0.3s ease, visibility 0.3s ease, opacity 0.2s ease;

  background: #fff;

}



.cart-dropdown.show .mobile-cart,

.cart-dropdown.open .mobile-cart,

.cart-opened .cart-dropdown .mobile-cart,

body.cart-opened .mobile-cart {

  right: 0 !important;

  visibility: visible !important;

  opacity: 1 !important;

  pointer-events: auto !important;

}



.dropdown-cart-action .btn {

  border-radius: var(--radius-md) !important;

  font-weight: 600;

  letter-spacing: 0.02em;

  transition: all var(--transition-fast);

}



.dropdown-cart-action .view-cart {

  background: #f0f2f5 !important;

  color: #1A1715 !important;

}



.dropdown-cart-action .view-cart:hover {

  background: #CBD5E1 !important;

  /* Dusty Rose */

}



/* ============================================================

   PREMIUM HEADER SEARCH INLINE TRIGGER

   ============================================================ */

.header-search-inline-container {

  display: inline-flex !important;

  align-items: center !important;

  gap: 0 !important;

  height: 100% !important;

}



/* Search trigger — flat text link, no button */

.header-search-click-trigger {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  height: auto !important;

  padding: 0 !important;

  background: none !important;

  border: none !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  text-decoration: none !important;

  color: #1A1715 !important;

  transition: color 0.18s ease !important;

  cursor: pointer !important;

}



.header-search-click-trigger:hover {

  background: none !important;

  border: none !important;

  box-shadow: none !important;

  text-decoration: none !important;

  color: #000 !important;

}



/* Search icon inside trigger */

.header-search-click-trigger i {

  font-size: 1.45rem !important;

  color: #555 !important;

  line-height: 1 !important;

}



/* SEARCH text — premium Inter font, tight tracking */

.header-search-click-trigger span {



  font-size: 1.15rem !important;

  font-weight: 600 !important;

  letter-spacing: 0.12em !important;

  text-transform: uppercase !important;

  color: #333 !important;

  line-height: 1 !important;

}



/* Search inline form — hidden by default, shown with .active */

.header-search-inline-form {

  display: none !important;

  align-items: center !important;

  height: 38px !important;

  border: 1px solid #cbd5e1 !important;

  border-radius: 20px !important;

  overflow: hidden !important;

  background: #ffffff !important;

  min-width: 240px !important;

  padding: 0 8px 0 14px !important;

  gap: 4px !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;

  transition: all 0.2s ease !important;

}



.header-search-inline-form:focus-within {

  border-color: #0f172a !important;

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;

}



.header-search-inline-form.active {

  display: flex !important;

}



.header-search-inline-form input[type="search"] {

  flex: 1 !important;

  border: none !important;

  outline: none !important;

  background: transparent !important;

  font-size: 0.85rem !important;

  font-weight: 400 !important;

  color: #0f172a !important;

  padding: 0 !important;

  box-shadow: none !important;

  letter-spacing: 0.01em !important;

}



.header-search-inline-form input[type="search"]::placeholder {

  color: #94a3b8 !important;

  font-weight: 400 !important;

  font-style: normal !important;

}



.search-inline-submit,

.search-inline-close {

  background: none !important;

  border: none !important;

  cursor: pointer !important;

  color: #64748b !important;

  font-size: 1rem !important;

  padding: 0 4px !important;

  line-height: 1 !important;

  transition: color 0.18s ease !important;

  display: flex !important;

  align-items: center !important;

}



.search-inline-submit:hover,

.search-inline-close:hover {

  color: #000 !important;

}



/* Autocomplete results */

.search-inline-results-container {

  position: absolute !important;

  top: calc(100% + 6px) !important;

  left: 0 !important;

  min-width: 240px !important;

  background: #fff !important;

  border: 1px solid #e0e0e0 !important;

  border-radius: 10px !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13) !important;

  z-index: 9999 !important;

  overflow: hidden !important;

  display: none;

}



.search-result-item {

  display: block !important;

  padding: 10px 16px !important;



  font-size: 1.25rem !important;

  color: #333 !important;

  text-decoration: none !important;

  transition: background 0.15s ease !important;

  text-transform: capitalize !important;

}



.search-result-item:hover {

  background: #f5f5f5 !important;

  color: #000 !important;

  text-decoration: none !important;

}



/* ============================================================

   WISHLIST ICON — Remove underlines & unwanted lines

   ============================================================ */

a.header-icon[href*="wishlist"],

.header-middle a.header-icon[href*="wishlist"] {

  text-decoration: none !important;

  border: none !important;

  outline: none !important;

  padding: 0 4px !important;

  margin: 0 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  position: relative !important;

  height: auto !important;

  line-height: 1 !important;

  color: #1A1715 !important;

  background: transparent !important;

}



a.header-icon[href*="wishlist"]:hover,

.header-middle a.header-icon[href*="wishlist"]:hover {

  text-decoration: none !important;

  color: #000 !important;

}



a.header-icon[href*="wishlist"]::before,

a.header-icon[href*="wishlist"]::after {

  display: none !important;

  content: none !important;

}



/* Remove any underlines from all header icon links */

.header-middle .header-right a,

.header-middle .header-right a:hover,

.header-middle .header-right a:focus {

  text-decoration: none !important;

}



/* ============================================================

   5. NAVIGATION / MOBILE MENU

   ============================================================ */



/* Mobile menu overlay — smoother */

.mobile-menu-container {

  background: linear-gradient(180deg, #1A1715 0%, #1A1715 100%);

  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.22);

}



.mobile-menu li:not(:last-child) {

  border-bottom-color: rgba(255, 255, 255, 0.07);

}



.mobile-menu li a {

  font-size: 1.35rem;

  letter-spacing: 0.01em;

  padding: 1.15rem 0 1.15rem 0.7rem;

}



/* ============================================================

   6. BREADCRUMB

   ============================================================ */

.breadcrumb-nav {

  background: transparent;

  border-bottom: none;

}



.breadcrumb {

  padding: 1.2rem 0 0.8rem 0;

}



.breadcrumb-item {

  font-size: 1.2rem;

  font-weight: 500;

  text-transform: none;

  letter-spacing: 0.01em;

}



.breadcrumb-item a {

  color: #777;

  transition: color var(--transition-fast);

}



.breadcrumb-item a:hover {

  color: #000000;

  text-decoration: none;

}



.breadcrumb-item.active {

  color: #111111;

  font-weight: 600;

}



.breadcrumb-item+.breadcrumb-item::before {

  color: rgba(0, 0, 0, 0.35);

}



/* ============================================================

   7. PRODUCT CARDS — Elevated visual refinement

   ============================================================ */



.product-default {

  border-radius: var(--radius-md);

  overflow: hidden;

  transition: box-shadow var(--transition-normal), transform var(--transition-normal);

  background: #fff;

}



.product-default:hover {

  box-shadow: var(--shadow-hover) !important;

  transform: translateY(-3px);

}



/* Product image container - fixed height so both images are same size */

.product-default figure {

  border-radius: var(--radius-md) var(--radius-md) 0 0;

  overflow: hidden;

  background: #f0f0f0;

  position: relative;

  height: 419px;

}



.product-default figure a {

  display: block;

  height: 100%;

  position: relative;

}



.product-default figure img {

  transition: opacity var(--transition-normal), transform var(--transition-slow) !important;

  object-fit: cover !important;

  object-position: center top !important;

  width: 100% !important;

  height: 419px !important;

  background: #f0f0f0;

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

}



.product-default figure img:first-child {

  opacity: 1;

  z-index: 1;

}



.product-default figure img:last-child {

  opacity: 0;

  z-index: 2;

}



.product-default:hover figure img:first-child {

  opacity: 0;

}



.product-default:hover figure img:last-child {

  opacity: 1;

}



/* Product labels */

.product-default .product-label {

  border-radius: var(--radius-pill);

  font-size: 1rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  padding: 5px 12px;

}



.product-default .product-label.label-hot {

  background: #3F7A52;

}



.product-default .product-label.label-sale {

  background: #C81E2A;

}



/* Product details area */

.product-default .product-details {

  padding: 1.2rem 1.4rem 1.4rem;

  background: #fff;

}



/* Product title */

.product-default .product-title {

  font-size: 1.4rem;

  font-weight: 600;



  margin-bottom: 0.4rem;

  letter-spacing: -0.01em;

}



/* Category tag */

.product-default .category-list {

  font-size: 1rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  opacity: 0.65;

  margin-bottom: 0.3rem;

}



/* Price box */

.product-default .price-box {

  margin-bottom: 1.2rem;

}



.product-price {

  font-size: 1.7rem !important;

  font-weight: 700;

  letter-spacing: -0.01em;

}



.old-price {

  font-size: 1.3rem !important;

  color: #4b5563;

  opacity: 1;

}



/* Add to cart button */

.product-default .btn-add-cart {

  border-radius: var(--radius-sm);

  font-size: 1.15rem;

  font-weight: 600;

  letter-spacing: 0.04em;

  padding: 0 1.6rem;

  height: 36px;

  line-height: 36px;

  transition: all var(--transition-fast);

}



.product-default:hover .btn-add-cart {

  background: #111111 !important;

  border-color: #111111 !important;

  color: #ffffff !important;

}



/* Wishlist & quickview icons */

.product-default .btn-icon-wish,

.product-default .btn-quickview {

  border-radius: 50%;

  transition: all var(--transition-fast);

}



.product-default .btn-icon-wish:hover,

.product-default .btn-quickview:hover {

  background: #000000 !important;

  color: #fff !important;

  border-color: #000000 !important;

}



/* ============================================================

   8. RATINGS

   ============================================================ */

.ratings-container .ratings:before {

  color: #111111;

}



.ratings-container .product-ratings:before {

  color: rgba(0, 0, 0, 0.15);

}



/* ============================================================

   9. BUTTONS — Refined shape & interaction

   ============================================================ */



.btn {

  border-radius: var(--radius-sm);



  font-weight: 600;

  letter-spacing: 0.04em;

  transition: all var(--transition-fast);

}



/* Primary */

.btn-primary {

  background: #000000 !important;

  border-color: #000000 !important;

  color: #fff !important;

}



.btn-primary:hover,

.btn-primary:focus {

  background: #444444 !important;

  border-color: #444444 !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;

}



/* Secondary */

.btn-secondary {

  background: #000000 !important;

  border-color: #000000 !important;

}



.btn-secondary:hover,

.btn-secondary:focus {

  background: #444444 !important;

  border-color: #444444 !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20) !important;

}



/* Dark */

.btn-dark {

  border-radius: var(--radius-sm);

}



.btn-dark:hover {

  box-shadow: 0 4px 14px rgba(34, 37, 41, 0.26) !important;

}



/* Gray */

.btn-gray {

  border-radius: var(--radius-sm);

}



.btn-gray:hover {

  background: #000000 !important;

  border-color: #000000 !important;

  color: #fff !important;

}



/* Pill variant helper */

.btn-pill {

  border-radius: var(--radius-pill) !important;

}



/* ============================================================

   10. FORMS & INPUTS

   ============================================================ */

.form-control {

  border-radius: var(--radius-sm);

  border: 1px solid #CBD5E1;

  /* Dusty Rose */



  font-size: 1.3rem;

  color: #555;

  background: #fff;

  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

}



.form-control:focus,

.form-input:focus {

  border-color: #000000 !important;

  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;

  background: #fff !important;

}



/* Select custom */

.select-custom:after {

  color: #000000;

}



/* ============================================================

   11. CARDS / PANELS

   ============================================================ */

.card {

  border-radius: var(--radius-md);

  border: 1px solid #CBD5E1;

  /* Dusty Rose */

  box-shadow: var(--shadow-soft);

}



.card-header {

  border-radius: var(--radius-md) var(--radius-md) 0 0;

  background: #f4f4f4;

  /* Blush-Beige */

  border-color: #CBD5E1;

  /* Dusty Rose */

}



/* ============================================================

   12. SIDEBAR SHOP

   ============================================================ */

.sidebar-shop .widget {

  background: #fffdf9;

  border-radius: var(--radius-md);

  border: 1px solid rgba(203, 213, 225, 0.25);

  overflow: hidden;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);

  margin-bottom: 2rem;

  padding: 2.2rem 2rem !important;

}



.sidebar-shop .widget:not(:last-child) {

  border-bottom: 1px solid rgba(203, 213, 225, 0.25) !important;

}



.sidebar-shop .widget-title {



  font-size: 1.35rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #1A1715;

}



/* Size filter */

.config-size-list a {

  border-radius: var(--radius-sm);



  font-weight: 500;

  transition: all var(--transition-fast);

}



.config-size-list a:hover,

.config-size-list a.active {

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);

}



/* Price slider */

.noUi-handle {

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24) !important;

}



.noUi-connect {

  background: rgba(0, 0, 0, 0.3) !important;

}



/* ============================================================

   13. TOOLBOX (Sort / Filter bar)

   ============================================================ */

.toolbox {

  background: #fffdf9;

  border: 1px solid rgba(203, 213, 225, 0.25);

  border-radius: var(--radius-md);

  padding: 1rem 1.5rem;

  margin-bottom: 2.2rem;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);

}



.toolbox .form-control {

  border: 1px solid rgba(203, 213, 225, 0.35) !important;

  border-radius: 4px;

  background-color: #fff !important;

  color: #555 !important;

  font-weight: 500;

  transition: all var(--transition-fast);

}



.toolbox .form-control:focus {

  border-color: #000000 !important;

  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;

}



.layout-btn {

  border-radius: var(--radius-sm);

  border: 1px solid rgba(0, 0, 0, 0.12) !important;

  color: #555555 !important;

  background: transparent !important;

  transition: all var(--transition-fast) !important;

}



.layout-btn:hover,

.layout-btn.active {

  background: #f4f4f4 !important;

  /* Blush-Beige */

  color: #000000 !important;

  /* Primary Red */

  border-color: #CBD5E1 !important;

  /* Dusty Rose */

}



/* ============================================================

   14. PAGINATION

   ============================================================ */

.page-item>.page-link:not(span) {

  border-radius: var(--radius-sm) !important;

  font-weight: 600;

  transition: all var(--transition-fast);

}



.page-item.active .page-link {

  background: #000000 !important;

  border-color: #000000 !important;

  color: #fff !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

}



.page-link:hover {

  background: #f0f3f6 !important;

  border-color: #000000 !important;

}



/* ============================================================

   15. TABS

   ============================================================ */

.nav-tabs {

  border-bottom: 2px solid #CBD5E1;

  /* Dusty Rose */

}



.nav-tabs .nav-link {



  font-size: 1.3rem;

  font-weight: 600;

  letter-spacing: 0.03em;

  padding: 1rem 0;

  border-bottom: 2px solid transparent;

  margin-bottom: -2px;

  transition: color var(--transition-fast), border-color var(--transition-fast);

}



.nav-tabs .nav-link:hover {

  color: #000000;

}



.nav-tabs .nav-item .nav-link.active {

  color: #000000;

  border-bottom-color: #000000;

}



/* ============================================================

   16. PRODUCT SINGLE PAGE

   ============================================================ */



/* Image gallery */

.product-single-gallery {

  border-radius: var(--radius-lg);

  overflow: hidden;

}



/* Thumbnails */

.prod-thumbnail>.owl-dot img {

  border-radius: var(--radius-sm);

  border: 2px solid transparent;

  transition: border-color var(--transition-fast);

}



.prod-thumbnail .owl-dot.active img,

.prod-thumbnail img:hover {

  border: 2px solid #000000 !important;

}



/* Product title */

.product-single-details .product-title {

  font-size: 2.8rem;



  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -0.02em;

}



/* Prices */

.product-single-details .product-price,

.product-single-details .new-price {

  font-size: 2.6rem !important;



  font-weight: 700;

}



/* Action area */

.product-single-details .product-action {

  border-top: none;

  padding-top: 0;

}



/* Add to cart button */

.add-cart {

  border-radius: var(--radius-sm) !important;



  font-weight: 700;

  letter-spacing: 0.03em;

  padding: 14px 28px 13px !important;

  transition: all var(--transition-fast) !important;

}



.add-cart:hover {

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important;

  transform: translateY(-1px);

}



/* Wishlist / Share */

.add-wishlist {

  border-radius: var(--radius-sm);

  transition: background var(--transition-fast), color var(--transition-fast);

}



.add-wishlist:hover {

  background: #f5f7fa;

}



/* Filter labels (Color, Size) */

.product-single-filter label {



  font-weight: 600;

  font-size: 1.15rem;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}



/* Size list in PDP */

.product-single-filter .config-size-list li a {

  border-radius: var(--radius-sm);



  font-weight: 600;

  transition: all var(--transition-fast);

}



.product-single-filter .config-size-list li a:hover {

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);

}



/* Quantity input */

.product-single-qty .bootstrap-touchspin .form-control {

  border-radius: var(--radius-sm);

  font-weight: 700;

}



/* ============================================================

   17. SINGLE INFO LIST (SKU, Category, Tags)

   ============================================================ */

.single-info-list {

  font-size: 1.25rem;

  letter-spacing: 0;

  text-transform: none;

}



.single-info-list li strong {

  font-weight: 700;

}



/* ============================================================

   18. CART PAGE

   ============================================================ */

.cart-message {

  font-size: 1.5rem;



}



/* ============================================================

   19. CHECKOUT

   ============================================================ */

.checkout .card {

  border-radius: var(--radius-md);

}



/* ============================================================

   20. FOOTER

   ============================================================ */

footer {

  background: #000000 !important;

  /* Primary Red matching header */

  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;

}



footer .widget-title {



  font-size: 1.3rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  font-weight: 700;

  margin-bottom: 1.8rem;

  position: relative;

  padding-bottom: 0.8rem;

  color: #ffffff !important;

}



footer .widget-title::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 0;

  width: 28px;

  height: 2px;

  background: #ffffff !important;

  /* White contrast line */

  border-radius: var(--radius-pill);

}



footer .links li a,

footer .widget-content ul li a {

  font-size: 1.3rem;



  transition: color var(--transition-fast), padding-left var(--transition-fast);

  color: rgba(255, 255, 255, 0.85) !important;

}



footer .links li a:hover,

footer .widget-content ul li a:hover {

  color: #ffffff !important;

  /* Warm Ivory hover */

  padding-left: 4px;

}



footer .social-icon {

  border-radius: 50% !important;

  width: 36px !important;

  height: 36px !important;

  line-height: 36px !important;

  font-size: 1.3rem !important;

  transition: all var(--transition-fast) !important;

  background-color: rgba(255, 255, 255, 0.1) !important;

  color: #ffffff !important;

  border: 1px solid rgba(255, 255, 255, 0.3) !important;

}



footer .social-icon:hover {

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  background-color: #ffffff !important;

  color: #000000 !important;

  border-color: #ffffff !important;

}



footer .footer-bottom {

  background: #000000 !important;

  /* Deep red matching header depth */

  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

  padding-top: 2.4rem;

  padding-bottom: 2.4rem;

}



footer .footer-copyright {

  font-size: 1.2rem;



  color: rgba(255, 255, 255, 0.8) !important;

}



/* Payment icons */

footer .payment-icon {

  border-radius: var(--radius-sm) !important;

  transition: opacity var(--transition-fast);

}



footer .payment-icon:hover {

  opacity: 0.75;

}



/* ============================================================

   21. BANNERS

   ============================================================ */

.banner img {

  transition: transform var(--transition-slow);

  border-radius: var(--radius-md);

}



.banner:hover img {

  transform: scale(1.02);

}



.banner-layer h2,

.banner-layer h3,

.banner-layer h4 {}



/* ============================================================

   22. INFO BOXES (Shipping, Support etc.)

   ============================================================ */

.info-box {

  padding: 2.8rem 2rem;

  border-radius: var(--radius-md);

  background: #f4f4f4;

  /* Blush-Beige */

  border: 1px solid #CBD5E1;

  /* Dusty Rose */

  box-shadow: var(--shadow-soft);

  transition: box-shadow var(--transition-fast), transform var(--transition-fast);

}



.info-box:hover {

  box-shadow: var(--shadow-medium);

  transform: translateY(-2px);

}



.info-box h4 {



  font-size: 1.4rem;

  font-weight: 600;

  letter-spacing: -0.01em;

}



/* ============================================================

   23. SECTION HEADINGS

   ============================================================ */

.section-title {



  font-size: 2.2rem !important;

  font-weight: 700;

  letter-spacing: -0.01em;

  text-transform: none !important;

  color: #1A1715;

}



.products-section h2 {



  font-size: 1.7rem !important;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase !important;

  color: #1A1715;

}



/* ============================================================

   24. PAGE HEADER

   ============================================================ */

.page-header {

  background: linear-gradient(135deg, #ffffff 0%, #f4f4f4 100%);

  /* Warm Ivory to Blush-Beige */

  border-bottom: 1px solid #CBD5E1;

  /* Dusty Rose */

  padding: 4rem 0 4.2rem;

}



.page-title,

.page-header h1 {



  font-size: 3rem !important;

  font-weight: 700;

  letter-spacing: -0.02em;

}



/* ============================================================

   25. MODALS

   ============================================================ */

.modal-content {

  border-radius: var(--radius-lg);

  border: none;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);

}



.modal-header,

.modal-footer {

  border-radius: var(--radius-lg) var(--radius-lg) 0 0;

  border-color: #CBD5E1;

  /* Dusty Rose */

}



.modal-footer {

  border-radius: 0 0 var(--radius-lg) var(--radius-lg);

}



/* Add-to-cart mini-modal */

.add-cart-box {

  border-radius: var(--radius-md) !important;

  border-top: 3px solid #000000 !important;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14) !important;

}



/* ============================================================

   26. SCROLL-TO-TOP BUTTON

   ============================================================ */

#scroll-top {

  border-radius: var(--radius-md) !important;

  transition: all var(--transition-fast) !important;

}



#scroll-top.fixed:hover {

  background: #000000 !important;

  transform: translateY(-2px);

}



/* ============================================================

   27. LOADING OVERLAY

   ============================================================ */

.bounce-loader .bounce1,

.bounce-loader .bounce2,

.bounce-loader .bounce3 {

  background: #000000 !important;

}



/* ============================================================

   28. MINI POPUP (Added to cart)

   ============================================================ */

.minipopup-box {

  border-radius: var(--radius-md);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14) !important;

  border-top: 3px solid #000000;

}



.minipopup-box .product-action .btn {

  border-radius: var(--radius-sm);

  font-weight: 600;

}



/* ============================================================

   29. WISHLIST POPUP

   ============================================================ */

.wishlist-popup {

  border-radius: var(--radius-md);

  border-top: 3px solid #000000;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);

}



/* ============================================================

   30. HOMEPAGE — GRID SECTIONS

   ============================================================ */



/* section headings already styled in index.php inline styles,

   but enhance global .section-heading class if present */

.section-heading {



  font-weight: 700;

  letter-spacing: -0.01em;

  color: #1A1715;

}



/* square-box images */

.square-box {

  border-radius: var(--radius-lg) !important;

  box-shadow: var(--shadow-soft);

  transition: box-shadow var(--transition-normal), transform var(--transition-normal);

}



.square-box:hover {

  box-shadow: var(--shadow-hover);

  transform: translateY(-4px);

}



/* ============================================================

   31. CAROUSEL DOTS & ARROWS — refined

   ============================================================ */

.owl-theme .owl-dots .owl-dot,

.owl-theme .owl-dots .owl-dot.active,

.owl-theme .owl-dots .owl-dot:hover {

  border: none !important;

  background: transparent !important;

  outline: none !important;

  border-radius: 50% !important;

}



.owl-theme .owl-dots .owl-dot span {

  width: 12px !important;

  height: 12px !important;

  margin: 5px 6px !important;

  background: #D6D6D6 !important;

  border: none !important;

  border-radius: 50% !important;

  display: block !important;

  transition: all var(--transition-fast) !important;

}



.owl-theme .owl-dots .owl-dot.active span,

.owl-theme .owl-dots .owl-dot:hover span {

  background: #000000 !important;

  border: none !important;

}



.owl-theme .owl-dots .owl-dot span:before,

.owl-theme .owl-dots .owl-dot span:after {

  display: none !important;

}



/* Arrow buttons */

.owl-theme .owl-nav [class*=owl-] {

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.92) !important;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);

  width: 40px;

  height: 40px;

  display: flex !important;

  align-items: center;

  justify-content: center;

  transition: all var(--transition-fast);

}



.owl-theme .owl-nav [class*=owl-]:hover {

  background: #000000 !important;

  color: #fff !important;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);

}



/* ============================================================

   32. PRODUCT QUICK VIEW

   ============================================================ */

.product-quick-view {

  border-radius: var(--radius-lg);

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);

}



/* ============================================================

   33. COUPON / DISCOUNT BANNER

   ============================================================ */

.coupon-sale-text {

  border-radius: var(--radius-sm);

}



/* ============================================================

   34. RESPONSIVE TWEAKS

   ============================================================ */

@media (max-width: 991px) {

  .header-middle {

    padding-bottom: 1.4rem;

  }



  .product-single-details .product-title {

    font-size: 2.2rem;

  }



  .section-title {

    font-size: 1.9rem !important;

  }

}



@media (max-width: 767px) {

  body {

    font-size: 13px;

  }



  .top-notice {

    font-size: 1.1rem;

  }



  .section-title {

    font-size: 1.7rem !important;

  }



  .page-title,

  .page-header h1 {

    font-size: 2.4rem !important;

  }



  .info-box {

    padding: 2rem 1.4rem;

  }



  footer .widget-title {

    font-size: 1.25rem;

  }

}



@media (max-width: 575px) {

  .product-default .product-title {

    font-size: 1.3rem;

  }



  .product-price {

    font-size: 1.5rem !important;

  }



  .btn {

    font-size: 1.2rem;

  }

}



a:focus,

button:focus,

input:focus,

select:focus,

textarea:focus,

.btn:focus {

  outline: none !important;

  box-shadow: none !important;

}



a:focus-visible,

button:focus-visible,

input:focus-visible,

select:focus-visible,

textarea:focus-visible,

.btn:focus-visible {

  outline: none !important;

  box-shadow: none !important;

}



.text-primary {

  color: #000000 !important;

}



.text-primary:hover,

.text-primary:focus {

  color: #000000 !important;

}



/* ============================================================

   36. REDUCED MOTION

   ============================================================ */

@media (prefers-reduced-motion: reduce) {



  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

}



/* ============================================================

   37. BIG SALE BANNER — Red Gradient Overlay

   ============================================================ */

.banner-big-sale {

  background: linear-gradient(135deg, rgba(211, 47, 47, 0.88) 0%, rgba(211, 47, 47, 0.96) 100%), url('../images/demoes/demo37/banners/banner.jpg') center/cover !important;

}



/* ============================================================

   38. HOME BANNER IMAGE ALIGNMENT

   ============================================================ */

.home-slider .slide-bg {

  object-fit: cover !important;

  object-position: 55% top !important;

}



/* ============================================================

   39. PRODUCT ACTION BUTTONS & ALIGNMENT

   ============================================================ */

.product-default .product-action {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  height: 38px !important;

  margin-bottom: 1.5rem !important;

  overflow: visible !important;

}



.product-default .btn-add-cart {

  position: relative !important;

  margin: 0 !important;

  vertical-align: middle !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  height: 36px !important;

  line-height: 36px !important;

}



.product-default .btn-icon-wish,

.product-default .btn-quickview {

  position: static !important;

  opacity: 0 !important;

  visibility: hidden !important;

  width: 0 !important;

  height: 36px !important;

  margin: 0 !important;

  padding: 0 !important;

  overflow: hidden !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 50% !important;

  background: #f4f4f4 !important;

  color: #8C7A72 !important;

  border: none !important;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.product-default .btn-icon-wish i,

.product-default .btn-quickview i {

  margin: 0 !important;

  padding: 0 !important;

  font-size: 1.4rem !important;

  line-height: 1 !important;

  display: inline-block !important;

}



.product-default:hover .btn-icon-wish,

.product-default:hover .btn-quickview {

  opacity: 1 !important;

  visibility: visible !important;

  width: 36px !important;

  border: 1px solid #f4f4f4 !important;

}



.product-default .btn-icon-wish:hover,

.product-default .btn-quickview:hover {

  background: #000000 !important;

  color: #fff !important;

  border-color: #000000 !important;

}



/* ============================================================

   40. TOP BAR MARQUEE TICKER

   ============================================================ */











/* Global Owl Carousel Arrow Override */

.owl-theme .owl-nav [class*='owl-'] {

  background-color: #000000 !important;

  color: #fff !important;

  border-color: #000000 !important;

}



.owl-theme .owl-nav [class*='owl-']:hover {

  background-color: #000000 !important;

  border-color: #000000 !important;

}



/* --- Extracted Split Feature Section Styles --- */



.split-feature-section {

  position: relative;

  padding: 80px 5%;

  /* Reduced padding from 120px */

  background-color: #000000;

  /* Base deep red covering entire section now */

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  margin: 40px 0;

}



/* Full Section Organic "Paper Flowing" Background */

.paper-wave {

  position: absolute;

  width: 150%;

  height: 150%;

  border-radius: 40% 45% 42% 47%;

  animation: paperFlow 25s infinite linear;

  z-index: 0;

  transform-origin: 50% 50%;

  pointer-events: none;

}



.wave1 {

  top: -50%;

  left: -20%;

  background: rgba(255, 255, 255, 0.03);

  animation-duration: 30s;

}



.wave2 {

  bottom: -60%;

  right: -30%;

  background: rgba(0, 0, 0, 0.06);

  animation-duration: 35s;

  animation-direction: reverse;

  border-radius: 45% 40% 48% 42%;

}



.wave3 {

  top: -20%;

  left: 20%;

  width: 120%;

  height: 120%;

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.04));

  animation-duration: 40s;

  border-radius: 42% 48% 45% 40%;

}



@keyframes paperFlow {

  0% {

    transform: rotate(0deg) scale(1);

  }



  50% {

    transform: rotate(180deg) scale(1.05);

  }



  100% {

    transform: rotate(360deg) scale(1);

  }

}



/* Modern Arch / Pill Layout Container */

.modern-arch-container {

  display: flex;

  align-items: center;

  position: relative;

  z-index: 2;

  max-width: 1400px;

  width: 100%;

  gap: 8%;

}



.modern-arch-image {

  flex: 0 0 40%;

  aspect-ratio: 1 / 1;

  height: auto;

  min-height: auto;

  overflow: hidden;

  /* This creates a premium circular shape */

  border-radius: 50%;

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);

  border: 12px solid rgba(255, 255, 255, 0.05);

  transition: border-color 0.4s ease, filter 0.4s ease;



  /* Continuous floating and shadow pulse animation */

  animation: imageFloat 6s ease-in-out infinite;

}



.modern-arch-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center top;

  display: block;

}



@keyframes imageFloat {

  0% {

    transform: translateY(0px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 rgba(255, 255, 255, 0);

  }



  50% {

    transform: translateY(-25px);

    /* Shadow gets larger and darker as it floats up, plus a subtle white outer glow */

    box-shadow: 0 45px 70px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 255, 255, 0.1);

  }



  100% {

    transform: translateY(0px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 rgba(255, 255, 255, 0);

  }

}



.modern-arch-image:hover {

  /* Pause the float and highlight the border/brightness */

  animation-play-state: paused;

  border-color: rgba(255, 255, 255, 0.2);

  filter: brightness(1.08);

}



.modern-arch-content {

  flex: 1;

  color: #fff;

  text-align: left;

}



.arch-tag {

  font-size: 13px;

  letter-spacing: 4px;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.7);

  margin-bottom: 25px;

  display: inline-block;

  padding: 8px 20px;

  border: 1px solid rgba(255, 255, 255, 0.3);

  border-radius: 30px;

  font-weight: 600;

}



.arch-title {



  font-size: 48px;

  /* Slightly smaller for reduced height */

  font-weight: 400;

  margin-bottom: 25px;

  letter-spacing: 1px;

  line-height: 1.15;

  text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}



.arch-desc {



  font-size: 16px;

  line-height: 1.8;

  max-width: 500px;

  margin-bottom: 35px;

  color: rgba(255, 255, 255, 0.85);

}



.arch-btn {

  display: inline-flex;

  align-items: center;

  padding: 14px 45px;

  background: #fff;

  color: #000000;

  text-transform: uppercase;

  letter-spacing: 2px;

  font-size: 13px;

  font-weight: 700;

  text-decoration: none;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  border-radius: 50px;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.arch-btn i {

  margin-left: 15px;

  transition: transform 0.3s ease;

}



.arch-btn:hover {

  transform: translateY(-5px);

  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

  color: #000000;

}



.arch-btn:hover i {

  transform: translateX(5px);

}



@media (max-width: 992px) {

  .modern-arch-container {

    flex-direction: column;

    text-align: center;

  }



  .modern-arch-image {

    width: 80%;

    max-width: 350px;

    height: auto;

    aspect-ratio: 1 / 1;

    min-height: auto;

    overflow: hidden;

    border-radius: 50%;

    margin-bottom: 40px;

  }



  .modern-arch-content {

    text-align: center;

  }



  .arch-title {

    font-size: 36px;

  }



  .arch-desc {

    margin: 0 auto 35px auto;

  }

}



/* =========================================

   LUX COLLECTION SECTION — Balenciaga Style

   ========================================= */

.lux-collection-section {

  background: #f5f3f0 !important;

  padding: 60px 0 80px !important;

  margin: 0 !important;

}



.lux-collection-container {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 40px;

  position: relative;

}



.lux-collection-title {



  font-size: 13px !important;

  font-weight: 600 !important;

  letter-spacing: 3px !important;

  text-transform: uppercase !important;

  color: #111 !important;

  margin-bottom: 40px !important;

}



/* Card */

.lux-card-link {

  display: block !important;

  text-decoration: none !important;

  color: inherit !important;

}



.lux-card-img-wrap {

  position: relative !important;

  background: #eeece8 !important;

  overflow: hidden !important;

  aspect-ratio: 3 / 4;

}



.lux-card-img-wrap img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  object-position: center top !important;

  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;

  display: block !important;

}



.lux-card-link:hover .lux-card-img-wrap img {

  transform: scale(1.04) !important;

}



/* Card wrapper */

.lux-card-wrap {

  position: relative !important;

}



/* Bookmark button */

.lux-bookmark-btn {

  position: absolute !important;

  top: 14px !important;

  right: 14px !important;

  background: rgba(255, 255, 255, 0.9) !important;

  border: none !important;

  cursor: pointer !important;

  padding: 7px !important;

  border-radius: 50% !important;

  color: #111 !important;

  z-index: 10 !important;

  transition: all 0.2s ease !important;

  line-height: 1 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 34px !important;

  height: 34px !important;

  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1) !important;

}



.lux-bookmark-btn:hover {

  background: #fff !important;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;

}



/* Wishlist ACTIVE state — filled black bookmark */

.lux-bookmark-btn.active .lux-bm-icon path {

  fill: #111 !important;

  stroke: #111 !important;

}



.lux-bookmark-btn .lux-bm-icon path {

  fill: none !important;

  stroke: currentColor !important;

  transition: fill 0.2s ease, stroke 0.2s ease !important;

}



/* Active Wishlist Heart icon for Porto theme cards */

.btn-icon-wish.active,

.btn-icon-wish.active i,

.btn-icon-wish i.active {

  color: #e53935 !important;

}



/* Card info below image */

.lux-card-info {

  padding: 14px 0 10px !important;

}



.lux-card-title {

  font-size: 11px !important;

  font-weight: 600 !important;

  letter-spacing: 1.5px !important;

  text-transform: none !important;

  color: #111 !important;

  margin: 0 0 6px !important;

  line-height: 1.4 !important;



}



.lux-card-price {

  font-size: 12px !important;

  font-weight: 500 !important;

  color: #111 !important;

  margin: 0 !important;

  letter-spacing: 0.5px !important;

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

}



.lux-card-old-price {

  color: #999 !important;

  text-decoration: line-through !important;

  font-size: 11px !important;

}



/* Arrow Nav — Left & Right sides of carousel */

.lux-collection-container {

  position: relative !important;

}



.lux-products-carousel .owl-nav {

  position: absolute !important;

  top: 42% !important;

  left: 0 !important;

  right: 0 !important;

  width: 100% !important;

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  margin: 0 !important;

  transform: translateY(-50%) !important;

  pointer-events: none !important;

  z-index: 10 !important;

}



.lux-nav-arrow {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 18px !important;

  color: #111 !important;

  cursor: pointer !important;

  width: 44px !important;

  height: 44px !important;

  background: rgba(255, 255, 255, 0.92) !important;

  border: 1px solid #d0ccc7 !important;

  border-radius: 50% !important;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;

  transition: all 0.2s ease !important;

  line-height: 1 !important;

  user-select: none !important;

  pointer-events: auto !important;

}



.lux-nav-arrow:hover {

  background: #111 !important;

  border-color: #111 !important;

  color: #fff !important;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14) !important;

}



.lux-products-carousel .owl-nav .owl-prev {

  background: none !important;

  border: none !important;

  padding: 0 !important;

  margin-left: -22px !important;

  pointer-events: auto !important;

}



.lux-products-carousel .owl-nav .owl-next {

  background: none !important;

  border: none !important;

  padding: 0 !important;

  margin-right: -22px !important;

  pointer-events: auto !important;

}



.lux-products-carousel .owl-nav .owl-prev.disabled .lux-nav-arrow,

.lux-products-carousel .owl-nav .owl-next.disabled .lux-nav-arrow {

  opacity: 0.35 !important;

  cursor: default !important;

}



/* Custom Owl Dots for this section - Hidden */

.modern-product-section .owl-dots,

.lux-collection-section .owl-dots {

  display: none !important;

}



/* Mobile responsive styling for Modern Product Section & Cards */

@media (max-width: 991px) {

  .modern-product-section {

    padding: 30px 0 !important;

    margin: 20px 0 !important;

  }



  .modern-product-card,

  .modern-product-card.item {

    padding: 0 10px !important;

  }



  .modern-product-card .card-img-wrapper img {

    height: 520px !important;

  }

}



@media (max-width: 575px) {

  .modern-product-section {

    padding: 30px 0 !important;

    margin: 15px 0 !important;

  }



  .modern-product-card,

  .modern-product-card.item {

    padding: 0 5px !important;

  }



  .modern-product-card .card-img-wrapper img {

    height: 480px !important;

  }



  .modern-product-section .section-title {

    font-size: 20px !important;

    margin-bottom: 20px !important;

  }

}







/* --- Extracted from index.php --- */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



/* SECTION HEADING */

.section-heading {

  text-align: center;

  font-size: 30px;

  font-weight: 700;

  letter-spacing: 1px;

  margin: 30px 0 20px;

  text-transform: uppercase;

}



/* 2x2 SQUARE GRID */

.grid-square {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px;

  padding: 0 0 10px;

  width: 100%;

  max-width: 100%;

  margin: 0;

  box-sizing: border-box;

}



/* BOX */

.square-box {

  position: relative;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  border-radius: 12px;

}



/* Increase grid image height for the 4-image section */

.grid-square .square-box {

  height: 600px;

  min-height: 0;

}



@media (max-width: 992px) {

  .grid-square {

    width: 100%;

    max-width: 100%;

    padding: 0;

  }

}



@media (max-width: 768px) {

  .grid-square {

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

    padding: 0 10px;

  }



  .grid-square .square-box {

    height: auto;

    aspect-ratio: 1 / 1;

  }

}



/* IMAGE (Clarity Enhanced) */

.square-box img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  image-rendering: auto;

  transition: 0.4s ease-in-out;

}



.square-box:hover img {

  transform: scale(1.06);

}



/* TEXT BLOCK */

.text-block {

  position: absolute;

  bottom: 18px;

  left: 50%;

  transform: translateX(-50%);

  text-align: center;

  color: #fff;

}



.text-block h3 {

  font-size: 18px;

  text-transform: uppercase;

  margin-bottom: 6px;

}



.text-block a {

  color: white;

  font-size: 16px;

  text-decoration: none;

  border-bottom: 2px solid #fff;

  padding-bottom: 3px;

}



.h6-hed-con-he {

  text-align: center;

}



/* CAROUSEL WRAPPER */

.carousel-container {

  width: 100%;

  overflow: hidden;

  position: relative;

  padding: 20px;

}



/* CAROUSEL TRACK */

.carousel-track {

  display: flex;

  gap: 14px;

  transition: transform 0.6s ease;

}



/* RESPONSIVE */

@media (max-width: 768px) {

  .grid-square {

    grid-template-columns: repeat(2, 1fr) !important;

  }



  .grid-square .square-box {

    height: auto !important;

    min-height: 0 !important;

    aspect-ratio: 1 / 1 !important;

  }

}



/* --- Extracted from index.php --- */

.square-box {

  position: relative;

  width: 100%;

  min-height: 280px;

  overflow: hidden;

  border-radius: 16px;

}



.text-block {

  position: absolute;

  bottom: 18px;

  left: 50%;

  transform: translateX(-50%);

  text-align: center;

  color: #fff;

}



.text-block h3 {

  font-size: 18px;

  text-transform: uppercase;

  margin-bottom: 6px;

}



.text-block a {

  color: #fff;

  border-bottom: 2px solid #fff;

  padding-bottom: 3px;

  text-decoration: none;

}



/* Highlighted Carousel Arrows */

.carousel-control-prev,

.carousel-control-next {

  width: 60px;

  height: 60px;

  background: #ffffffcc;

  /* white with slight transparency */

  border-radius: 50%;

  top: 50%;

  transform: translateY(-50%);

  opacity: 1 !important;

  transition: 0.3s ease-in-out;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);

}



/* Hover Effect */

.carousel-control-prev:hover,

.carousel-control-next:hover {

  background: #fff;

  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);

  transform: translateY(-50%) scale(1.08);

}



/* Icon color dark */

.carousel-control-prev-icon,

.carousel-control-next-icon {

  filter: invert(0) brightness(0) !important;

  width: 28px;

  height: 28px;

}



/* Main section */

.premium-section {

  width: 100%;

  padding: 60px 5%;

  background: #f7f7f7;

  margin-top: 54px;

}



/* Flex layout */

.premium-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

}



/* Image styling */

.premium-image img {

  width: 480px;

  border-radius: 10px;

  object-fit: cover;

}



/* Right text area */

.premium-text {

  text-align: left;

}



.premium-text h2 {

  font-size: 48px;

  letter-spacing: 4px;

  font-weight: 700;

  color: #000000;

  margin-bottom: 10px;

}



.premium-text p {

  font-size: 22px;

  color: #444;

  margin-bottom: 25px;

}



/* Button */

.shop-btn {

  display: inline-block;

  padding-bottom: 5px;

  font-size: 22px;

  color: #000000;

  text-decoration: none;

  border-bottom: 2px solid #000000;

  transition: 0.3s ease;

}



.shop-btn:hover {

  opacity: 0.7;

}



/* MOBILE RESPONSIVE */

@media (max-width: 900px) {

  .premium-container {

    flex-direction: column;

    text-align: center;

  }



  .premium-image img {

    width: 100%;

    max-width: 400px;

  }

}



.remove-bg img {

  mix-blend-mode: multiply;

  background: transparent;

}



/* MODERN LOOKBOOK STORY SLIDER */

.image-slider {

  width: 100%;

  overflow: hidden;

  padding: 50px 0;

  background: #f4f4f4;

  /* Blush-Beige */

}



.image-track {

  display: flex;

  gap: 24px;

  animation: scroll 35s linear infinite;

  width: max-content;

  will-change: transform;

}



/* Pause animation on hover to allow interactive inspection on mouse devices */

@media (hover: hover) {

  .image-slider:hover .image-track {

    animation-play-state: paused;

  }

}



.modern-story-card {

  position: relative;

  flex: 0 0 auto;

  width: 340px;

  height: 580px;

  border-radius: 24px;

  overflow: hidden;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);

  border: 1px solid rgba(0, 0, 0, 0.03);

  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  background-color: #000;

  cursor: pointer;

}



.modern-story-card::after {
  display: none !important;
  content: none !important;
  background: none !important;
}



.modern-story-card video {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  pointer-events: none;

  background-color: #000;

  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}



/* Hover Zoom and Lift */

.modern-story-card:hover {

  transform: translateY(-12px);

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);

  border-color: rgba(0, 0, 0, 0.1);

}



.modern-story-card:hover video {

  transform: scale(1.06);

}



/* Story Top Progress Indicator Bar */

.story-progress-bar {

  position: absolute;

  top: 16px;

  left: 16px;

  right: 16px;

  height: 3px;

  background: rgba(255, 255, 255, 0.3);

  border-radius: 2px;

  z-index: 2;

  overflow: hidden;

}



.story-progress-active {

  width: 30%;

  height: 100%;

  background: #fff;

  border-radius: 2px;

  transition: width 0.3s ease;

}



.modern-story-card:hover .story-progress-active {

  width: 100%;

}



/* Floating tag badge */

.story-tag {

  position: absolute;

  top: 28px;

  left: 16px;

  background: rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  color: #fff;

  font-size: 10px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  padding: 6px 12px;

  border-radius: 20px;

  z-index: 2;

  display: inline-flex;

  align-items: center;

  border: 1px solid rgba(255, 255, 255, 0.1);

}



/* Story details panel */

.story-info-panel {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  padding: 24px;

  z-index: 2;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  transform: none;

  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.story-look-number {

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 2px;

  color: #000000;

  text-transform: uppercase;

  margin-bottom: 4px;

}



.story-look-title {

  font-size: 20px;

  font-weight: 700;

  color: #fff;

  margin-bottom: 8px;

  text-transform: none;

  letter-spacing: 0.5px;

  text-align: left;

}



.story-look-action {

  font-size: 12px;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.85);

  display: inline-flex;

  align-items: center;

  transition: color 0.3s ease, transform 0.3s ease;

}



.story-look-action i {

  transition: transform 0.3s ease;

}



.modern-story-card:hover .story-look-action {

  color: #000000;

}



.modern-story-card:hover .story-look-action i {

  transform: translateX(4px);

}



.story-card-link {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 3;

  cursor: pointer;

}



/* Smooth infinite scroll animation keyframe (Seamless 5-card loop) */

@keyframes scroll {

  0% {

    transform: translate3d(0, 0, 0);

  }



  100% {

    transform: translate3d(calc(-50% - 12px), 0, 0);

  }

}



.offer-banner {

  position: relative !important;

  width: 100% !important;

  padding: 60px 4% !important;

  background: #ffffff !important;

  display: block !important;

}



.offer-banner-container {

  display: flex !important;

  align-items: flex-end !important;

  justify-content: center !important;

  max-width: 1320px !important;

  margin: 0 auto !important;

  gap: 28px !important;

}



.offer-banner-col {

  flex: 1 !important;

  display: flex !important;

  flex-direction: column !important;

}



.offer-banner-col-left {

  justify-content: flex-end !important;

}



.offer-banner-col-right {

  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-end !important;

}



.offer-banner-header {

  text-align: center !important;

  margin-bottom: 20px !important;

}



.offer-banner-title {



  font-size: 20px !important;

  font-weight: 500 !important;

  letter-spacing: 3.5px !important;

  text-transform: uppercase !important;

  color: #111111 !important;

  margin: 0 !important;

}



.offer-banner-title strong {

  font-weight: 800 !important;

  color: #000000 !important;

}



.offer-banner-card {

  display: block !important;

  position: relative !important;

  width: 100% !important;

  border-radius: 0 !important;

  overflow: hidden !important;

  line-height: 0 !important;

  text-decoration: none !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;

}



.offer-banner-card img {

  width: 100% !important;

  display: block !important;

  object-fit: cover !important;

  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.offer-banner-card-tall img {

  aspect-ratio: 1.22 / 1 !important;

}



.offer-banner-card-short img {

  aspect-ratio: 1.36 / 1 !important;

}



.offer-banner-card:hover img {

  transform: scale(1.03) !important;

}



@media (max-width: 992px) {

  .offer-banner {

    padding: 40px 15px !important;

  }



  .offer-banner-container {

    flex-direction: column !important;

    gap: 30px !important;

  }



  .offer-banner-header {

    margin-bottom: 16px !important;

  }



  .offer-banner-title {

    font-size: 17px !important;

    letter-spacing: 2px !important;

  }



  .offer-banner-card-tall img,

  .offer-banner-card-short img {

    aspect-ratio: 1.25 / 1 !important;

  }

}



.square-box {

  position: relative;

  overflow: hidden;

  height: 950px;

  border-radius: 12px;

}



.square-box video,

.square-box img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Bottom-left text */

.text-block {

  position: absolute;

  bottom: 20px;

  left: 20px;

  color: #fff;

}



.text-block h3 {

  font-size: 24px;

  margin-bottom: 5px;

  font-weight: 600;

}



.text-block a {

  font-size: 15px;

  color: #fff;

  text-decoration: underline;

}



/* MOBILE BANNER RESPONSIVENESS */

@media (max-width: 768px) {



  .home-slider,

  .home-slider .owl-stage-outer,

  .home-slider .owl-stage,

  .home-slider .owl-item {

    height: 643px !important;

  }



  .home-slider .home-slide {

    display: block !important;

    height: 643px !important;

    position: relative !important;

    overflow: hidden !important;

  }



  .home-slider .home-slide>a {

    display: block !important;

    height: 100% !important;

    width: 100% !important;

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

  }



  .home-slider .slide-bg {

    height: 100% !important;

    width: 100% !important;

    object-fit: cover !important;

    object-position: 50% 15% !important;

  }

}



/* --- Extracted from index.php --- */

.owl-dots .owl-dot span,

.owl-dots .owl-dot button,

.owl-dots .owl-dot {

  background: transparent !important;

  border: 2px solid #999 !important;

  box-shadow: none !important;

}



.owl-dots .owl-dot.active span,

.owl-dots .owl-dot.active button,

.owl-dots .owl-dot.active {

  background: #000000 !important;

  border-color: #000000 !important;

}



@keyframes ccGridMove {

  0% {

    background-position: 0 0;

  }



  100% {

    background-position: 40px 40px;

  }

}



/* ============================================================

   SHOP BY PRODUCTS — Premium Circle Category Carousel

   ============================================================ */



.cc-section {

  padding: 40px 0 20px !important;

  background-color: #ffffff !important;

  overflow: hidden;

  position: relative;

}



/* Ambient glow in center */

.cc-section::before {

  display: none !important;

}



/* Decorative floating fluid blobs */

.cc-bg-blob {

  position: absolute;

  border-radius: 50%;

  filter: blur(90px);

  opacity: 0.08;

  z-index: 1;

  pointer-events: none;

  display: none !important;

}



/* ── Title ── */

.cc-section .cc-title {

  text-align: center;



  font-size: 1.1rem;

  font-weight: 700;

  letter-spacing: 6px;

  text-transform: uppercase;

  color: rgba(0, 0, 0, 0.5) !important;

  margin-bottom: 10px;

  position: relative;

  z-index: 2;

  padding: 0 20px;

}



/* Larger heading below the small title label */

.cc-section .cc-title span {

  display: block;



  font-size: 4.8rem !important;

  font-weight: 800 !important;

  letter-spacing: -1px !important;

  line-height: 1 !important;

  color: #000000 !important;

  -webkit-text-fill-color: #000000 !important;

  margin-top: 12px;

}



/* ── Viewport with edge fade ── */

.cc-viewport {

  position: relative;

  z-index: 2;

  width: 100%;

  overflow: hidden;

  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);

  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);

  margin-top: 20px;

}



/* ── Scrolling track ── */

.cc-track {

  display: flex;

  gap: 70px;

  align-items: center;

  width: max-content;

  animation: ccScroll 85s linear infinite;

  padding: 38px 80px;

  cursor: grab;

}

.cc-track:hover {

  animation-play-state: paused;

}



.cc-track:active {

  cursor: grabbing;

}



@keyframes ccScroll {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(-50%);

  }

}



/* ── Each circle item ── */

.cc-node {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 22px;

  text-decoration: none;

  flex-shrink: 0;

  cursor: pointer;

  position: relative;

  z-index: 1;

  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);

}



.cc-node:hover {

  transform: translateY(-6px);

}



.cc-node.cc-active {

  z-index: 5 !important;

}



.cc-node.cc-near {

  z-index: 2 !important;

}



/* ── Outer container — center-scaled by JS / CSS GPU ── */

.cc-circle-container {

  position: relative;

  transform-origin: center center;

  will-change: transform;

  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),

    box-shadow 0.45s ease;

  width: 190px;

  height: 190px;

}



.cc-node.cc-active .cc-circle-container {

  transform: scale(1.28) !important;

}



.cc-node.cc-near .cc-circle-container {

  transform: scale(1.10) !important;

}



/* ── Rotating dashed orbit ring ── */

.cc-orbit {

  position: absolute;

  top: -14px;

  left: -14px;

  right: -14px;

  bottom: -14px;

  border: 2px dashed rgba(0, 0, 0, 0.25) !important;

  display: block !important;

  border-radius: 50%;

  pointer-events: none;

  z-index: 1;

  animation: rotateOrbit 18s linear infinite;

  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

}



@keyframes rotateOrbit {

  0% {

    transform: rotate(0deg);

  }



  100% {

    transform: rotate(360deg);

  }

}



/* ── Circle image wrapper ── */

.cc-ring {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  overflow: hidden;

  border: 3px solid #ffffff !important;

  background: #ffffff !important;

  box-shadow:

    0 12px 35px rgba(0, 0, 0, 0.12),

    0 4px 12px rgba(0, 0, 0, 0.06) !important;

  position: relative;

  z-index: 2;

  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

}



.cc-ring img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: top center;

  display: block;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



/* ── Product name label ── */

.cc-name {

  font-size: 0.95rem;

  font-weight: 700;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  color: #222222 !important;

  text-align: center;

  white-space: nowrap;

  transition: color 0.3s ease, transform 0.3s ease;

  position: relative;

  padding-bottom: 5px;

  display: block;

}



.cc-name::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 50%;

  width: 0;

  height: 2px;

  background: #000000;

  transform: translateX(-50%);

  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



/* ── Hover state ── */

.cc-node:hover .cc-orbit {

  border-color: rgba(0, 0, 0, 0.7) !important;

  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.15));

  top: -18px;

  left: -18px;

  right: -18px;

  bottom: -18px;

  animation-duration: 8s;

}



.cc-node:hover .cc-ring {

  box-shadow:

    0 16px 45px rgba(0, 0, 0, 0.18),

    0 6px 16px rgba(0, 0, 0, 0.1) !important;

}



.cc-node:hover .cc-ring img {

  transform: scale(1.08);

}



.cc-node:hover .cc-name {

  color: #000000 !important;

}



.cc-node:hover .cc-name::after {

  width: 40px;

}



/* ── Active (center) state — set by JS ── */

.cc-node.cc-active .cc-orbit {

  border-color: #000000 !important;

  border-width: 2px !important;

  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));

  top: -22px;

  left: -22px;

  right: -22px;

  bottom: -22px;

  animation-duration: 7s;

}



.cc-node.cc-active .cc-ring {

  box-shadow:

    0 0 0 4px rgba(0, 0, 0, 0.04),

    0 20px 50px rgba(0, 0, 0, 0.2) !important;

}



.cc-node.cc-active .cc-ring img {

  transform: scale(1.08);

}



.cc-node.cc-active .cc-name {

  color: #000000 !important;

  font-weight: 800;

  font-size: 1.05rem;

}



.cc-node.cc-active .cc-name::after {

  width: 50px;

}



/* ── Near-center state ── */

.cc-node.cc-near .cc-orbit {

  border-color: rgba(0, 0, 0, 0.45) !important;

  top: -16px;

  left: -16px;

  right: -16px;

  bottom: -16px;

}



.cc-node.cc-near .cc-ring {

  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.14) !important;

}



.cc-node.cc-near .cc-name {

  color: #000000 !important;

}



/* ── Tablet (576px – 768px) ── */

@media (max-width: 768px) and (min-width: 576px) {

  .cc-section {

    padding: 30px 0 10px !important;

  }



  .cc-section .cc-title {

    font-size: 0.9rem !important;

    letter-spacing: 4px !important;

  }



  .cc-section .cc-title span {

    font-size: 3.2rem !important;

  }



  .cc-viewport {

    margin-top: 40px !important;

  }



  .cc-track {

    padding: 40px 50px !important;

    gap: 45px !important;

    animation-duration: 85s !important;

  }



  .cc-circle-container {

    width: 150px !important;

    height: 150px !important;

  }



  .cc-node.cc-active .cc-circle-container {

    transform: scale(1.28) !important;

  }



  .cc-node.cc-near .cc-circle-container {

    transform: scale(1.10) !important;

  }



  .cc-orbit {

    top: -12px;

    left: -12px;

    right: -12px;

    bottom: -12px;

  }



  .cc-node.cc-active .cc-orbit {

    top: -18px;

    left: -18px;

    right: -18px;

    bottom: -18px;

  }



  .cc-node.cc-near .cc-orbit {

    top: -14px;

    left: -14px;

    right: -14px;

    bottom: -14px;

  }



  .cc-label {

    font-size: 1rem !important;

  }

}





/* --- Immersive Glass Overlay 3D Structure --- */

.na-split {

  position: relative;

  padding: 60px 0 60px 0 !important;

  background: linear-gradient(135deg, #ffffff 0%, #f4f4f4 100%);

  /* Warm Ivory to Blush-Beige gradient */

  /* Slightly darker to make glass and cards pop */

  overflow: hidden !important;

}



/* Huge Background Typography */

.na-split::before {

  content: 'LATEST';

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 28vw;

  font-weight: 900;

  color: rgba(203, 213, 225, 0.08);

  /* Dusty Rose soft overlay */

  z-index: 0;

  pointer-events: none;



}



/* Full Width Slider Layer */

.na-split-slider {

  width: 100%;

  position: relative;

  z-index: 1;

  /* Start products right next to the hero card */

  padding-left: calc(5% + 460px);

}



/* Floating Frosted Glass Hero Panel */

.na-split-hero {

  position: absolute;

  left: calc(5% - 20px);

  top: 50%;

  transform: translateY(-50%);

  width: 430px;

  height: 520px !important;

  background: rgba(255, 255, 255, 0.55);

  /* Highly transparent warm overlay */

  backdrop-filter: blur(25px);

  /* Strong blur for products sliding behind */

  -webkit-backdrop-filter: blur(25px);

  border: 1px solid rgba(203, 213, 225, 0.35);

  /* Dusty Rose border tint */

  border-radius: 24px;

  padding: 20px;

  z-index: 10;

  /* Hover over the slider */

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);

  /* Deep Wine-Black tinted shadow */

  display: flex;

  flex-direction: column;

}



/* Inner image inside the glass panel */

.na-split-hero>img {

  width: 100%;

  flex: 1 1 0;

  /* Ensure image shrinks */

  min-height: 0;

  /* Prevent aspect ratio from overriding height */

  object-fit: cover;

  border-radius: 16px;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);

  transition: transform 0.5s ease;

}



.na-split-hero:hover>img {

  transform: scale(1.02);

}



.na-hero-content {

  padding: 20px 10px 10px 10px;

  text-align: center;

}



.na-hero-content h2 {



  font-size: 2rem;

  font-weight: 800;

  color: #111;

  margin-bottom: 12px;

  letter-spacing: 1px;

}



.na-hero-content a {

  display: inline-block;

  background: #000000 !important;

  color: #ffffff !important;

  border: 1px solid #000000 !important;

  padding: 12px 30px;

  border-radius: 50px;

  font-size: 0.85rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 2px;

  transition: all 0.4s ease;

}



.na-hero-content a:hover {

  background: #ffffff !important;

  color: #000000 !important;

  border: 1px solid #000000 !important;

  transform: translateY(-3px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

}



/* Slider Track */

.new-arr__track {

  display: flex;

  gap: 30px;

  overflow-x: auto;

  scroll-behavior: smooth;

  padding: 0 5% 0 0 !important;

  -ms-overflow-style: none;

  scrollbar-width: none;

  align-items: flex-start;

}



.new-arr__track::-webkit-scrollbar {

  display: none;

}



/* Elegant product cards — 3 per view on desktop */

.na-split-slider .product-default {

  background: #fff;

  border-radius: 16px;

  overflow: hidden;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);

  transition: all 0.4s ease;

  border: 1px solid rgba(0, 0, 0, 0.07) !important;

  flex: 0 0 calc(33.333% - 21px) !important;

  width: calc(33.333% - 21px) !important;

  display: flex;

  flex-direction: column;

}



.na-split-slider .product-default:hover {

  transform: translateY(-12px);

  border-color: rgba(203, 213, 225, 0.6) !important;

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.10);

  /* Deep Wine-Black soft hover glow */

}



.na-split-slider figure {

  border-radius: 16px 16px 0 0;

  overflow: hidden;

  height: 380px !important;

  margin-bottom: 0 !important;

  flex-shrink: 0;

  position: relative !important;

}



/* Fix: override the global 419px absolute image height for na-split-slider */

.na-split-slider figure a {

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  position: relative !important;

}



.na-split-slider figure img {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  object-position: center top !important;

  transition: opacity 0.35s ease !important;

}



/* First image visible by default */

.na-split-slider figure img:first-child {

  opacity: 1 !important;

  z-index: 1 !important;

}



/* Second image hidden by default */

.na-split-slider figure img:last-child {

  opacity: 0 !important;

  z-index: 2 !important;

}



/* Swap on hover */

.na-split-slider .product-default:hover figure img:first-child {

  opacity: 0 !important;

}



.na-split-slider .product-default:hover figure img:last-child {

  opacity: 1 !important;

}



.na-split-slider .product-details {

  border: none !important;

  padding: 25px 20px !important;

  background: #fff;

  flex-grow: 1;

  display: flex;

  flex-direction: column;

}



.na-split-slider .product-action {

  margin-top: auto;

  /* Push buttons to the very bottom */

}



/* Hide navigation arrow icons */

.new-arr__btn,

.new-arr__btn--l,

.new-arr__btn--r {

  display: none !important;

}



/* ══ Ultra-Premium Minimalist Product Card Style (LV Inspired) ══ */

.na-split-slider .product-default.na-premium-card {

  background: transparent !important;

  border-radius: 0px !important;

  overflow: visible !important;

  box-shadow: none !important;

  border: none !important;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  height: auto !important;

}



.na-split-slider .product-default.na-premium-card:hover {

  transform: translateY(-4px);

  box-shadow: none !important;

  border-color: transparent !important;

}



.na-premium-figure {

  width: 100%;

  height: 380px !important;

  border-radius: 0px !important;

  overflow: hidden;

  margin-bottom: 0 !important;

  position: relative !important;

  background: #f1f5f9;

}



.na-premium-figure a {

  display: block !important;

  width: 100% !important;

  height: 100% !important;

}



.na-premium-figure img {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  object-position: center top !important;

  transition: opacity 0.4s ease !important;

}



.na-premium-details {

  padding: 16px 10px 0 10px !important;

  background: transparent !important;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  width: 100%;

  text-align: center;

}



.na-premium-title {

  font-family: var(--font-heading) !important;

  font-size: 1.45rem !important;

  font-weight: 600 !important;

  color: #111111 !important;

  letter-spacing: 0.02em !important;

  margin: 0 !important;

  line-height: 1.25;

  text-align: center;

}



.na-premium-title a {

  color: #111111 !important;

  text-decoration: none !important;

  transition: color 0.2s ease;

}



.na-premium-title a:hover {

  color: #4b5563 !important;

}



.na-premium-link {

  font-family: var(--font-body) !important;

  font-size: 0.88rem !important;

  font-weight: 600 !important;

  color: #111111 !important;

  text-decoration: underline !important;

  text-underline-offset: 4px;

  letter-spacing: 1px !important;

  text-transform: uppercase !important;

  transition: opacity 0.2s ease;

  margin-top: 4px;

}



.na-premium-link:hover {

  opacity: 0.7;

}



.brand-card-link {

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  align-items: center !important;

  width: 100% !important;

  height: 100% !important;

  text-decoration: none !important;

  flex-grow: 1 !important;

}



.brand-card-hero {

  height: 100% !important;

  min-height: 440px !important;

  background: #ffffff !important;

  color: #000000 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 40px 30px !important;

  text-align: left !important;

  position: relative;

  overflow: hidden;

  width: 100% !important;

  border-radius: 20px !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;

}



.brand-card-hero::before {

  display: none !important;

}



.brand-card-graphic {

  position: relative;

  z-index: 2;

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  justify-content: center !important;

  text-align: left !important;

  gap: 0px;

  margin: auto !important;

}



.brand-wordmark-bold {



  font-size: 3.1rem;

  font-weight: 900;

  letter-spacing: -0.5px;

  line-height: 0.95;

  text-transform: uppercase;

  color: #000000 !important;

  text-align: left !important;

  display: block !important;

}



.brand-wordmark-small {



  font-size: 1.05rem;

  font-weight: 800;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: #000000 !important;

  margin-top: 20px;

  text-align: left !important;

  display: block !important;

}



.brand-card-details {

  padding: 25px 20px !important;

  background: #ffffff;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  flex-grow: 1;

}



.brand-card-title {

  font-size: 1.2rem;

  font-weight: 700;

  color: #0f172a;

  margin-bottom: 8px;



}



.brand-card-desc {

  font-size: 0.85rem;

  color: #64748b;

  line-height: 1.5;

  margin-bottom: 20px;

}



.brand-card-action {

  margin-top: auto;

}



.btn-ready-to-wear {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 100%;

  padding: 14px 20px;

  background: #000000;

  color: #ffffff !important;

  font-size: 0.85rem;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  border-radius: 8px;

  text-decoration: none !important;

  transition: all 0.3s ease;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);

}



.btn-ready-to-wear:hover {

  background: #1e293b;

  color: #ffffff !important;

  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

}



.btn-ready-to-wear i {

  font-size: 0.8rem;

  transition: transform 0.3s ease;

}



.btn-ready-to-wear:hover i {

  transform: translateX(4px);

}



/* Dots pagination matching LV reference */

.new-arr__dots {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  margin-top: 12px !important;

  margin-bottom: 0 !important;

  padding-right: 5%;

}



.new-arr__dots .dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #cbd5e1;

  cursor: pointer;

  transition: all 0.3s ease;

}



.new-arr__dots .dot.active {

  width: 28px;

  border-radius: 4px;

  background: #000000;

}



/* Slider Navigation Buttons */

.new-arr__btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: #ffffff;

  /* Warm Ivory background */

  border: 1px solid #CBD5E1;

  /* Dusty Rose border */

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 20;

  /* Ensure buttons are above EVERYTHING */

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

  transition: all 0.3s ease;

}



.new-arr__btn:hover {

  background: #111111;

  /* Black hover */

  border-color: #111111;

  transform: translateY(-50%) scale(1.1);

}



.new-arr__btn svg {

  width: 20px;

  height: 20px;

  stroke: #111111;

  /* Black arrow */

  stroke-width: 2.5;

  fill: none;

  transition: stroke 0.3s;

}



.new-arr__btn:hover svg {

  stroke: #fff;

}



/* Left button positioned gracefully on the edge */

.new-arr__btn--l {

  left: calc(5% + 415px);

}



.new-arr__btn--r {

  right: 30px;

}



@media (max-width: 1400px) {



  /* 2 cards visible on medium desktop */

  .na-split-slider .product-default {

    flex: 0 0 calc(50% - 16px) !important;

    width: calc(50% - 16px) !important;

  }

}



@media (max-width: 1200px) {

  .na-split-hero {

    width: 370px;

    height: 560px;

    left: calc(5% - 20px);

  }



  .na-split-slider {

    padding-left: calc(5% + 420px);

  }



  .new-arr__btn--l {

    left: calc(5% + 375px);

  }



  /* 1 card + peek on small desktop */

  .na-split-slider .product-default {

    flex: 0 0 calc(80% - 16px) !important;

    width: calc(80% - 16px) !important;

  }

}



@media (max-width: 992px) {

  .na-split {

    padding: 60px 4% !important;

    display: flex;

    flex-direction: column;

  }



  .na-split-hero {

    position: relative !important;

    left: 0 !important;

    top: 0 !important;

    transform: none !important;

    width: 100% !important;

    height: 380px !important;

    margin-bottom: 25px !important;

    z-index: 10;

    display: flex !important;

    flex-direction: column !important;

    justify-content: flex-end !important;

    padding: 20px !important;

    overflow: hidden !important;

  }



  .na-split-hero>img {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    z-index: 1 !important;

    border-radius: 24px !important;

  }



  .na-hero-content {

    position: relative !important;

    z-index: 2 !important;

    background: rgba(255, 255, 255, 0.85) !important;

    backdrop-filter: blur(15px) !important;

    -webkit-backdrop-filter: blur(15px) !important;

    border: 1px solid rgba(255, 255, 255, 0.4) !important;

    border-radius: 20px !important;

    padding: 25px 20px !important;

    text-align: center !important;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;

  }



  .na-hero-content h2 {

    font-size: 1.8rem !important;

    margin-bottom: 15px !important;

  }



  .na-hero-content a {

    padding: 12px 30px !important;

    font-size: 0.85rem !important;

  }



  .na-split-slider {

    padding-left: 0 !important;

    width: 100% !important;

  }



  .new-arr__btn,

  .new-arr__btn--l,

  .new-arr__btn--r {

    display: none !important;

  }



  /* Mobile: full-width cards, reduced image height */

  .na-split-slider .product-default {

    flex: 0 0 85% !important;

    width: 85% !important;

  }



  .na-split-slider figure,

  .na-premium-figure,

  .brand-card-hero {

    height: 320px !important;

    min-height: 320px !important;

  }



  .brand-card-hero {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: left !important;

    background: #ffffff !important;

    padding: 30px 20px !important;

  }



  .brand-card-graphic {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: center !important;

    text-align: left !important;

    margin: auto !important;

  }



  .brand-wordmark-bold {

    font-size: 2.7rem !important;

    line-height: 0.95 !important;

    letter-spacing: -0.5px !important;

    text-align: left !important;

    display: block !important;

  }



  .brand-wordmark-small {

    font-size: 0.95rem !important;

    letter-spacing: 3px !important;

    margin-top: 16px !important;

    text-align: left !important;

    display: block !important;

  }

}



@media (max-width: 575px) {

  .na-split {

    padding: 40px 3% !important;

  }



  .na-split-hero {

    height: 340px !important;

    margin-bottom: 15px !important;

    border-radius: 16px !important;

    padding: 15px !important;

  }



  .na-split-hero>img {

    border-radius: 16px !important;

  }



  .na-hero-content {

    border-radius: 12px !important;

    padding: 14px 12px !important;

  }



  .na-hero-content h2 {

    font-size: 1.3rem !important;

    margin-bottom: 8px !important;

  }



  .na-hero-content a {

    padding: 8px 20px !important;

    font-size: 0.75rem !important;

  }



  .new-arr__track {

    padding: 10px 0 !important;

    gap: 15px !important;

  }



  .na-split-slider .product-default {

    flex: 0 0 82% !important;

    width: 82% !important;

  }



  .na-split-slider figure,

  .na-premium-figure,

  .brand-card-hero {

    height: 300px !important;

    min-height: 300px !important;

  }



  .brand-card-hero {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: left !important;

    background: #ffffff !important;

    padding: 25px 18px !important;

  }



  .brand-card-graphic {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: center !important;

    text-align: left !important;

    margin: auto !important;

  }



  .brand-wordmark-bold {

    font-size: 2.5rem !important;

    line-height: 0.95 !important;

    letter-spacing: -0.5px !important;

    text-align: left !important;

    display: block !important;

  }



  .brand-wordmark-small {

    font-size: 0.9rem !important;

    letter-spacing: 3px !important;

    margin-top: 16px !important;

    text-align: left !important;

    display: block !important;

  }

}



/* --- Extracted from index.php --- */

/* MODERN VIDEO CARD SPOTLIGHT */

.modern-video-card {

  position: relative;

  width: 100%;

  height: 550px;

  border-radius: 24px;

  overflow: hidden;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);

  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  background-color: #000;

}



.modern-video-card::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(to top, rgba(18, 18, 18, 0.85) 0%, rgba(18, 18, 18, 0.3) 50%, rgba(18, 18, 18, 0) 100%);

  z-index: 1;

  pointer-events: none;

}



.modern-video-card video {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);

}



/* Hover effects */

.modern-video-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);

}



.modern-video-card:hover video {

  transform: scale(1.06);

}



/* Floating tag */

.floating-tag {

  position: absolute;

  top: 24px;

  right: 24px;

  background: rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  color: #000000;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  padding: 8px 16px;

  border-radius: 30px;

  z-index: 2;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

  animation: floatAnim 4s ease-in-out infinite alternate;

}



@keyframes floatAnim {

  0% {

    transform: none;

  }



  100% {

    transform: translateY(-6px);

  }

}



/* Overlay content panel */

.card-overlay-content {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  padding: 30px;

  z-index: 2;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.category-tag {

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;

  color: #000000;

  text-transform: uppercase;

  margin-bottom: 8px;

}



.card-title {

  font-size: 24px;

  font-weight: 700;

  color: #fff;

  margin-bottom: 6px;

  text-transform: none;

  letter-spacing: 0.5px;

}



.card-subtitle {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.85);

  margin-bottom: 20px;

  line-height: 1.4;

  font-weight: 400;

  text-align: left;

}



.card-btn {

  background: #fff;

  color: #000000 !important;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.5px;

  padding: 12px 24px;

  border-radius: 12px;

  text-decoration: none !important;

  display: inline-flex;

  align-items: center;

  transition: all 0.3s ease;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.card-btn:hover {

  background: #000000;

  color: #fff !important;

  transform: translateX(4px);

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);

}



/* Clickable overlay */

.card-click-link {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 3;

  cursor: pointer;

}



/* Responsive adjustments */

@media (max-width: 992px) {

  .modern-video-card {

    height: 450px;

  }



  .card-title {

    font-size: 20px;

  }

}



@media (max-width: 768px) {

  .modern-video-card {

    height: 380px;

    border-radius: 16px;

  }



  .card-overlay-content {

    padding: 20px;

  }



  .card-title {

    font-size: 18px;

  }



  .card-subtitle {

    font-size: 13px;

    margin-bottom: 15px;

  }



  .card-btn {

    padding: 10px 20px;

    font-size: 12px;

  }

}



/* Top Notice Bar styled in Deep Navy Blue instead of black */

.top-notice {

  background-color: #1A1715 !important;

  color: #ffffff !important;

}



.top-notice a {

  color: #ffffff !important;

}



/* Hide empty header-top bar to remove the cream/beige color space above the header */

.header-top {

  display: none !important;

}



/* Clean white header background */

.header-middle {

  background-color: #ffffff !important;

  border-bottom: 1px solid #eeeeee !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;

  padding-top: 0px !important;

  /* Zero padding to keep header height compact while scaling logo */

  padding-bottom: 0px !important;

}



/* Ensure container padding transitions smoothly */

.header-middle .container {

  display: flex;

  align-items: center;

  transition: padding 0.3s ease;

}



/* Logo container & image dynamic sizes - prominent height */

.header-left .logo {

  display: flex;

  align-items: center;

  padding: 0;

  transition: all 0.3s ease;

}



/* Remove default focus ring and outline border when clicked */

a.logo:focus,

a.logo:active,

a.logo:hover,

a.logo img:focus,

a.logo img:active,

a.logo img:hover,

.logo:focus,

.logo:active,

.logo img:focus,

.logo img:active {

  outline: none !important;

  border: none !important;

  outline: 0 !important;

  box-shadow: none !important;

  text-decoration: none !important;

}



.header-left .logo img {

  height: 115px !important;

  /* Increased logo size significantly */

  max-height: 115px !important;

  margin-top: -15px !important;

  /* Negative margin to keep header height unchanged */

  margin-bottom: -15px !important;

  width: auto !important;

  aspect-ratio: auto !important;

  object-fit: contain !important;

  transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),

    max-height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),

    margin 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;

}



/* On scroll (sticky header) - automatically scales down the logo */

.sticky-header.fixed .header-left .logo img {

  height: 80px !important;

  /* Increased sticky scroll height */

  max-height: 80px !important;

  margin-top: -10px !important;

  margin-bottom: -10px !important;

}



/* Text, icons, dropdowns and badges styled for high contrast on white background */

.header-middle .mobile-menu-toggler {

  color: #1A1715 !important;

}



.header-middle .header-contact h6 {

  color: #777777 !important;

  opacity: 1 !important;

}



.header-middle .header-contact a {

  color: #1A1715 !important;

  font-weight: 600;

}



.header-middle .header-contact a:hover {

  color: #000000 !important;

  text-decoration: underline !important;

}



.header-middle .header-icon {

  color: #1A1715 !important;

}



.header-middle .header-icon:hover {

  color: #000000 !important;

}



/* Clean search bar capsule styling with red border and white background */

.header-search-inline .header-search-wrapper {

  border: 2px solid #000000 !important;

  background: #ffffff !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;

}



.header-search-inline .header-search-wrapper input[type="search"] {

  color: #1A1715 !important;

}



.header-search-inline .header-search-wrapper .btn {

  color: #000000 !important;

}



.header-search-inline .header-search-wrapper .btn:hover {

  color: #1A1715 !important;

}



/* User dropdown elements */

.user-dropdown-container>a {

  color: #1A1715 !important;

}



.user-dropdown-container>a::after {

  color: #1A1715 !important;

}



.user-dropdown-menu {

  background-color: #ffffff !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;

}



.header-middle .header-contact .user-dropdown-menu a {

  color: #1A1715 !important;

}



.header-middle .header-contact .user-dropdown-menu a:hover {

  color: #000000 !important;

  background-color: #f9f9f9 !important;

}



/* Badges on white header (Red background, white text for clean look) */

.header-middle .badge-circle {

  background-color: #000000 !important;

  color: #ffffff !important;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;

}



/* Cart dropdown toggle */

.cart-dropdown .cart-toggle {

  color: #1A1715 !important;

}



/* ============================================================

   40. PREMIUM REDESIGN: ONLINE PURCHASES ONLY EMPHASIS

   ============================================================ */

.banner-big-sale {

  background: linear-gradient(135deg, rgba(0, 0, 0, 0.94) 0%, rgba(140, 7, 14, 0.98) 100%),

    url('../images/demoes/demo37/banners/banner.jpg') center/cover !important;

  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.4);

  border-radius: 8px;

  overflow: hidden;

}



.sale-badge-tilt {

  background: #1A1715;

  color: #ffffff;

  font-weight: 800;

  font-size: 1.5rem;

  padding: 5px 12px;

  transform: rotate(-1.5deg);

  display: inline-block;

  letter-spacing: 0.1em;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

  text-transform: uppercase;

}



.sale-description {



  font-size: 1.4rem;

  font-weight: 600;

  letter-spacing: 0.02em;

  color: #ffffff;

  text-transform: uppercase;

}



.online-only-container {

  position: relative;

  background: #ffffff;

  color: #000000;



  font-weight: 800;

  font-size: 2.1rem;

  text-transform: uppercase;

  padding: 10px 26px;

  border-radius: 50px;

  display: inline-block;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.5);

  border: 3.5px solid #FFD700;

  /* Rich gold accent border */

  letter-spacing: 0.03em;

  animation: premium-pulse-glow 2.5s infinite ease-in-out;

  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

}



.online-only-container:hover {

  transform: translateY(-2px) scale(1.03);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(255, 255, 255, 0.7);

  border-color: #ffffff;

  background-color: #fff9f9;

}



.btn-view-sale-custom {

  background: #1A1715 !important;

  color: #ffffff !important;



  font-weight: 700;

  font-size: 1.3rem;

  padding: 12px 28px;

  border-radius: 4px;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  border: 2px solid transparent;

  transition: all 0.3s ease;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

  display: inline-block;

}



.btn-view-sale-custom:hover {

  background: #ffffff !important;

  color: #1A1715 !important;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);

  transform: translateY(-1px);

}



@keyframes premium-pulse-glow {

  0% {

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 255, 255, 0.6);

  }



  70% {

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 0 15px rgba(255, 255, 255, 0);

  }



  100% {

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 255, 255, 0);

  }

}



@media (max-width: 1199px) {

  .online-only-container {

    font-size: 1.8rem;

    padding: 8px 22px;

  }



  .sale-description {

    font-size: 1.25rem;

  }

}



@media (max-width: 991px) {

  .online-only-container {

    font-size: 1.6rem;

    padding: 8px 20px;

  }



  .sale-badge-tilt {

    font-size: 1.3rem;

  }



  .sale-description {

    font-size: 1.15rem;

  }

}



@media (max-width: 575px) {

  .online-only-container {

    font-size: 1.4rem;

    padding: 8px 16px;

    width: 100%;

    text-align: center;

    border-width: 2.5px;

  }



  .sale-description {

    font-size: 1.1rem;

    text-align: center;

  }

}





/* ============================================================

   41. DYNAMIC WEBSITE MOTION & INTERACTIVE VISUAL SYSTEMS

   ============================================================ */



/* Unified Scroll Reveal Animation System - Smooth Zero-Shift Fade */

.reveal-on-scroll {

  opacity: 0;

  transform: none !important;

  transition: opacity 0.4s ease-out;

  will-change: opacity;

}



.reveal-on-scroll.revealed {

  opacity: 1;

  transform: none !important;

}



/* Delay modifiers for staggered layouts */

.delay-100 {

  transition-delay: 0.1s;

}



.delay-200 {

  transition-delay: 0.2s;

}



.delay-300 {

  transition-delay: 0.3s;

}



.delay-400 {

  transition-delay: 0.4s;

}



.delay-500 {

  transition-delay: 0.5s;

}



/* Interactive Mouse spotlight background glow */

.mouse-glow-bg {

  position: relative;

  overflow: hidden;

}



.mouse-glow-bg::after {

  content: '';

  position: absolute;

  top: var(--mouse-y, 50%);

  left: var(--mouse-x, 50%);

  width: 400px;

  height: 400px;

  background: radial-gradient(circle, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.04) 40%, transparent 70%);

  transform: translate(-50%, -50%);

  pointer-events: none;

  z-index: 1;

  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  opacity: 0;

}



.mouse-glow-bg:hover::after {

  opacity: 1;

}



/* Premium Zoom Slide Animation for Owl Carousel - DISABLED (Banner zoom effect removed) */

.home-slider .owl-item.active .slide-bg,

.home-single-hero .slide-bg {

  animation: none !important;

  transform: none !important;

}



/* Image zoom-in effect on product default hover */

.product-default:hover figure img {

  transform: scale(1.06);

}



/* Product Grid View Badge (Unique views in last 24h) */

.product-grid-view-badge {

  position: absolute;

  top: 12px;

  right: 12px;

  background: rgba(255, 255, 255, 0.9);

  border: 1px solid rgba(203, 213, 225, 0.35);

  /* Dusty Rose border */

  color: #333333;

  /* Neutral dark */

  font-size: 1.15rem;

  font-weight: 700;

  padding: 4px 10px;

  border-radius: var(--radius-pill);

  display: inline-flex;

  align-items: center;

  gap: 6px;

  z-index: 5;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);

  pointer-events: none;

  transition: opacity var(--transition-fast);

}



/* Infinite Marquee Ticker */

.marquee-container {

  overflow: hidden;

  background-color: #f4f4f4;

  /* Blush-Beige */

  border-top: 1px solid rgba(203, 213, 225, 0.3);

  border-bottom: 1px solid rgba(203, 213, 225, 0.3);

  padding: 14px 0;

  display: flex;

  user-select: none;

  margin-top: 1.5rem;

  margin-bottom: 2.5rem;

}



.marquee-content {

  display: flex;

  white-space: nowrap;

  gap: 3.5rem;

  animation: marqueeScroll 25s linear infinite;

  padding-left: 2rem;

}



.marquee-item {



  font-size: 1.35rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  color: #000000;

  /* Primary Red */

  text-transform: uppercase;

}



.marquee-divider {

  font-size: 1.35rem;

  font-weight: 700;

  color: #CBD5E1;

  /* Dusty Rose */

}



@keyframes marqueeScroll {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(-50%);

  }

}



/* Minimalist Direct Text Banners */

.home-slider .banner {

  position: relative;

}



/* Gradient overlay on the slider image to make text legible on desktop only */

@media (min-width: 768px) {

  .home-slider .banner::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 100%);

    pointer-events: none;

    z-index: 2;

  }

}



/* Premium Mockup-Style Slider Overlay (Desktop & Mobile General) */

.home-slider .banner-layer-minimal {

  position: absolute;

  right: 8% !important;

  left: auto !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  z-index: 10;

  width: 45% !important;

  max-width: 650px !important;

  text-align: center;

  padding: 0 !important;

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  opacity: 1 !important;

}







.banner-layer-minimal .banner-tag {



  font-size: 1.35rem;

  font-weight: 700;

  color: #000000 !important;

  /* Secondary Gold/Bronze color */

  letter-spacing: 0.15em;

  text-transform: uppercase;

  margin-bottom: 0.8rem;

  text-shadow: none !important;

}



.banner-layer-minimal .banner-title {



  font-size: 4.8rem;

  font-weight: 800;

  line-height: 1.1;

  text-transform: uppercase;

  margin-bottom: 1.2rem;

  text-shadow: none !important;

}



.banner-layer-minimal .banner-title .title-red {

  color: #C81E2A !important;

}



.banner-layer-minimal .banner-title .title-dark {

  color: #1A1715 !important;

}



.banner-layer-minimal .banner-tagline {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

  margin-bottom: 1.8rem;

  width: 100%;

}



.banner-layer-minimal .banner-tagline .tagline-line {

  height: 1px;

  background-color: #CBD5E1;

  flex-grow: 1;

  max-width: 80px;

}



.banner-layer-minimal .banner-tagline .tagline-text {



  font-size: 1.3rem;

  font-weight: 600;

  color: #1A1715 !important;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}



.banner-layer-minimal .banner-features {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 10px;

  width: 100%;

  margin-bottom: 2.2rem;

  border-top: 1px solid rgba(203, 213, 225, 0.35);

  border-bottom: 1px solid rgba(203, 213, 225, 0.35);

  padding: 15px 0;

}



.banner-layer-minimal .feature-col {

  flex: 1;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 0 10px;

}



.banner-layer-minimal .feature-col:not(:last-child) {

  border-right: 1px solid rgba(26, 23, 21, 0.15);

}



.banner-layer-minimal .feature-icon {

  font-size: 1.8rem;

  color: #000000 !important;

  margin-bottom: 0.6rem;

}



.banner-layer-minimal .feature-title {



  font-size: 1.05rem;

  font-weight: 700;

  color: #1A1715 !important;

  margin-bottom: 0.3rem;

  text-transform: uppercase;

}



.banner-layer-minimal .feature-desc {



  font-size: 0.95rem;

  color: #777 !important;

  line-height: 1.3;

  font-weight: 500;

}



.banner-layer-minimal .banner-footer {



  font-size: 1.15rem;

  font-weight: 600;

  color: #555 !important;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



@media (max-width: 768px) {

  .home-slider .banner::after {

    display: none !important;

  }



  /* Overlay text block on top of image - bottom half */

  .home-slider .banner-layer-minimal {

    position: absolute !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    top: auto !important;

    transform: none !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    min-height: unset !important;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.72) 50%, rgba(0, 0, 0, 0) 100%) !important;

    padding: 20px 20px 24px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: flex-end !important;

    align-items: flex-start !important;

    text-align: left !important;

    box-shadow: none !important;

    border: none !important;

    z-index: 10 !important;

    opacity: 1 !important;

    animation: none !important;

  }



  /* All text inside becomes white on top of the dark gradient */

  .home-slider .banner-layer-minimal .banner-tag {

    color: #F5B97E !important;

    font-size: 0.95rem !important;

    margin-bottom: 0.3rem !important;

    letter-spacing: 0.18em !important;

  }



  .home-slider .banner-layer-minimal .banner-title {

    font-size: 2.6rem !important;

    margin-bottom: 0.5rem !important;

    line-height: 1.1 !important;

    text-align: left !important;

  }



  .home-slider .banner-layer-minimal .banner-title .title-red {

    color: #ffffff !important;

  }



  .home-slider .banner-layer-minimal .banner-title .title-dark {

    color: #ffffff !important;

  }



  .home-slider .banner-layer-minimal .banner-tagline {

    margin-bottom: 0.8rem !important;

    justify-content: flex-start !important;

  }



  .home-slider .banner-layer-minimal .banner-tagline .tagline-line {

    background-color: rgba(255, 255, 255, 0.4) !important;

    max-width: 30px !important;

  }



  .home-slider .banner-layer-minimal .banner-tagline .tagline-text {

    font-size: 0.9rem !important;

    color: rgba(255, 255, 255, 0.9) !important;

  }



  .home-slider .banner-layer-minimal .banner-features {

    padding: 8px 0 !important;

    margin-bottom: 0.8rem !important;

    gap: 0 !important;

    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;

  }



  .home-slider .banner-layer-minimal .feature-col {

    padding: 0 8px !important;

  }



  .home-slider .banner-layer-minimal .feature-col:not(:last-child) {

    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;

  }



  .home-slider .banner-layer-minimal .feature-icon {

    font-size: 1.1rem !important;

    color: #ff6b6b !important;

    margin-bottom: 0.2rem !important;

  }



  .home-slider .banner-layer-minimal .feature-title {

    font-size: 0.72rem !important;

    color: #ffffff !important;

    margin-bottom: 0.1rem !important;

  }



  .home-slider .banner-layer-minimal .feature-desc {

    font-size: 0.65rem !important;

    color: rgba(255, 255, 255, 0.75) !important;

  }



  .home-slider .banner-layer-minimal .banner-footer {

    font-size: 0.75rem !important;

    color: rgba(255, 255, 255, 0.65) !important;

    letter-spacing: 0.1em !important;

  }

}



/* Category Banner Mobile Optimization */

@media (max-width: 575px) {

  .category-banner {

    padding: 4rem 1.5rem !important;

    background-position: 65% center !important;

  }



  .category-banner h3 {

    font-size: 2.2rem !important;

    line-height: 1.2 !important;

    margin-bottom: 1.5rem !important;

  }



  .category-banner .coupon-sale-content {

    margin: 1rem auto 0 !important;

    display: inline-block !important;

  }

}



/* ============================================================

   42. MOBILE VIEW & RESPONSIVE LAYOUT OPTIMIZATIONS

   ============================================================ */



@media (max-width: 991px) {



  /* Hide the header top notice bar on mobile/tablet viewports */

  .header-top {

    display: none !important;

  }



  /* Hide the desktop contact info/user text on mobile/tablet view */

  .header-middle .header-contact {

    display: none !important;

  }



  /* Force mobile header to render with a fixed height and show all key navigation items */

  .header-middle {

    display: block !important;

    height: 68px !important;

    /* Reduced mobile header height for a compact look */

    min-height: 68px !important;

    padding: 0 !important;

    background-color: #ffffff !important;

    /* White background */

    border-bottom: 1px solid #eeeeee !important;

  }



  .header-middle .container {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    height: 100% !important;

    max-height: 100% !important;

    padding-top: 0 !important;

    padding-bottom: 0 !important;

  }



  .header-left {

    display: flex !important;

    align-items: center !important;

    height: 100% !important;

    flex-shrink: 0 !important;

  }



  .header-right {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 12px !important;

    height: 100% !important;

    flex-grow: 1 !important;

  }



  /* Force mobile menu toggler and logo img to show and scale correctly */

  .header-middle .mobile-menu-toggler {

    display: block !important;

    color: #1A1715 !important;

    /* Dark menu toggler */

    font-size: 2.2rem !important;

    margin-right: 12px !important;

    padding: 5px !important;

    background: transparent !important;

    border: none !important;

    flex-shrink: 0 !important;

  }



  .header-left .logo {

    display: flex !important;

    align-items: center !important;

    flex-shrink: 0 !important;

  }



  .header-left .logo img {

    height: 62px !important;

    /* Increased logo size within the same compact 68px mobile header */

    max-height: 62px !important;

    width: auto !important;

    display: block !important;

    object-fit: contain !important;

    flex-shrink: 0 !important;

  }



  /* Hide header search bar on mobile since it's inside the mobile menu drawer */

  .header-middle .header-search {

    display: none !important;

  }



  /* Force header icons (wishlist, cart, user) to show and style dark on white header */

  .header-middle .header-icon:not(.header-search) {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    color: #1A1715 !important;

    /* Dark icons */

    font-size: 2.4rem !important;

    padding: 6px !important;

    margin: 0 !important;

  }



  .header-middle .cart-dropdown {

    display: inline-block !important;

    margin: 0 !important;

  }



  .header-middle .cart-dropdown .cart-toggle {

    display: inline-flex !important;

    align-items: center !important;

    color: #1A1715 !important;

    /* Dark cart icon */

    font-size: 2.4rem !important;

    padding: 6px !important;

  }



  /* Prevent horizontal page overflow globally */

  body,

  .page-wrapper {

    overflow-x: hidden !important;

  }



  /* Optimize top announcement marquee on mobile */

  .top-notice.bg-dark {

    font-size: 1.15rem !important;

    height: 34px !important;

    line-height: 34px !important;

  }







  /* Enforce stable and responsive heights for the home slider */

  .home-slider,

  .home-slider .owl-stage-outer,

  .home-slider .owl-stage,

  .home-slider .owl-item,

  .home-slider .home-slide {

    height: 680px !important;

    min-height: 680px !important;

  }



  /* Mobile screen responsive height mapping */

  @media (max-width: 767px) {



    .home-slider,

    .home-slider .owl-stage-outer,

    .home-slider .owl-stage,

    .home-slider .owl-item,

    .home-slider .home-slide {

      height: 643px !important;

      min-height: 643px !important;

    }

  }



  @media (max-width: 575px) {



    .home-slider,

    .home-slider .owl-stage-outer,

    .home-slider .owl-stage,

    .home-slider .owl-item,

    .home-slider .home-slide {

      height: 643px !important;

      min-height: 643px !important;

    }

  }



  .home-slider .home-slide {

    position: relative !important;

  }



  /* Force background slide images to stretch nicely and focus on subject */

  .home-slider .slide-bg {

    height: 100% !important;

    width: 100% !important;

    object-fit: cover !important;

    object-position: left center !important;

  }



  @media (max-width: 767px) {

    .home-slider .home-slide {

      background-color: #ffffff !important;

    }



    .home-slider .slide-bg {

      object-fit: cover !important;

      background-color: #ffffff !important;

      object-position: left center !important;

    }

  }







  /* Make sure product image height is balanced in the 2-column mobile layout */

  .product-default figure,

  .product-default figure img {

    height: 230px !important;

    max-height: 230px !important;

  }



  /* EXCEPTION: preserve na-split-slider card image heights on tablet */

  .na-split-slider .product-default figure,

  .na-split-slider .product-default figure img {

    height: 360px !important;

    max-height: none !important;

  }

}



@media (max-width: 480px) {



  /* Even smaller height for small phone displays */

  .product-default figure,

  .product-default figure img {

    height: 185px !important;

    max-height: 185px !important;

  }



  /* EXCEPTION: preserve na-split-slider card image heights on small mobile */

  .na-split-slider .product-default figure,

  .na-split-slider .product-default figure img {

    height: 300px !important;

    max-height: none !important;

  }

}



/* ── Mobile (≤575px): Single row moving slider ── */

@media (max-width: 575px) {

  .cc-section {

    padding: 20px 0 10px !important;

  }



  .cc-section .cc-title {

    font-size: 1.5rem !important;

    margin-bottom: 28px !important;

    letter-spacing: 1.5px !important;

  }



  .cc-viewport {

    margin-top: 10px !important;

  }



  .cc-track {

    padding: 24px 15px !important;

    gap: 22px !important;

    animation-duration: 75s !important;

  }



  .cc-circle-container {

    width: 110px !important;

    height: 110px !important;

  }



  .cc-node.cc-active .cc-circle-container {

    transform: scale(1.28) !important;

  }



  .cc-node.cc-near .cc-circle-container {

    transform: scale(1.10) !important;

  }



  .cc-orbit {

    top: -8px;

    left: -8px;

    right: -8px;

    bottom: -8px;

  }



  .cc-node.cc-active .cc-orbit {

    top: -12px;

    left: -12px;

    right: -12px;

    bottom: -12px;

  }



  .cc-node.cc-near .cc-orbit {

    top: -10px;

    left: -10px;

    right: -10px;

    bottom: -10px;

  }



  /* Make labels always visible and black on mobile */

  .cc-label {

    color: rgba(0, 0, 0, 0.85) !important;

    font-size: 0.9rem !important;

    letter-spacing: 0.08em !important;

  }



  /* No hover transform on mobile */

  .cc-node:hover {

    transform: none !important;

  }

}



/* Cart & Wishlist tables reflow */

@media (max-width: 768px) {



  /* Cart table mobile block layout */

  .table.table-cart {

    border: none !important;

    box-shadow: none !important;

  }



  .table.table-cart thead {

    display: none !important;

  }



  .table.table-cart,

  .table.table-cart tbody,

  .table.table-cart tfoot {

    display: block !important;

    width: 100% !important;

  }



  .table.table-cart .product-row {

    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    border: 1px solid rgba(203, 213, 225, 0.25) !important;

    border-radius: var(--radius-md) !important;

    background: #fff !important;

    padding: 16px !important;

    margin-bottom: 16px !important;

    position: relative !important;

    box-shadow: var(--shadow-soft) !important;

  }



  .table.table-cart .product-row td {

    display: block !important;

    padding: 6px 0 !important;

    border: none !important;

    width: 100% !important;

    text-align: left !important;

  }



  /* Absolute close/remove button placement */

  .table.table-cart .product-row td:first-child {

    padding: 0 !important;

    height: 0 !important;

  }



  .table.table-cart .product-row .product-image-container {

    position: absolute !important;

    top: 16px !important;

    left: 16px !important;

    margin: 0 !important;

    width: 80px !important;

    height: 80px !important;

  }



  .table.table-cart .product-row .product-image-container img {

    max-height: 80px !important;

    width: 80px !important;

    object-fit: contain !important;

  }



  .table.table-cart .product-row .btn-remove {

    position: absolute !important;

    top: 8px !important;

    right: 8px !important;

    z-index: 5 !important;

    font-size: 1.6rem !important;

  }



  .table.table-cart .product-row .product-col {

    padding-left: 96px !important;

    min-height: 80px !important;

  }



  .table.table-cart .product-row .product-title {

    font-size: 1.4rem !important;

    margin-bottom: 4px !important;

  }



  /* Style price, qty, and subtotal columns */

  .table.table-cart .product-row .cart-item-price {

    padding-left: 96px !important;

    font-size: 1.35rem !important;

    color: #555 !important;

    font-weight: 500 !important;

  }



  .table.table-cart .product-row td:nth-child(4) {

    padding-left: 96px !important;

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

  }



  .table.table-cart .product-row td:nth-child(4)::before {

    content: "Qty:" !important;

    font-size: 1.3rem !important;

    font-weight: 600 !important;

    color: #222 !important;

  }



  .table.table-cart .product-row .product-single-qty {

    margin: 0 !important;

  }



  .table.table-cart .product-row .text-right {

    padding-left: 96px !important;

    border-top: 1px dashed rgba(203, 213, 225, 0.2) !important;

    margin-top: 8px !important;

    padding-top: 12px !important;

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

  }



  .table.table-cart .product-row .text-right::before {

    content: "Subtotal:" !important;

    font-size: 1.35rem !important;

    font-weight: 600 !important;

    color: #222 !important;

  }



  .table.table-cart .product-row .cart-item-subtotal {

    font-size: 1.5rem !important;

    font-weight: 700 !important;

    color: #000000 !important;

  }



  .table.table-cart tfoot tr td {

    padding: 16px 0 !important;

  }



  .table.table-cart .cart-discount {

    width: 100% !important;

    margin-bottom: 0 !important;

  }



  .table.table-cart .cart-discount .input-group {

    width: 100% !important;

  }



  /* Wishlist table mobile block layout */

  .table.table-wishlist {

    border: none !important;

    box-shadow: none !important;

  }



  .table.table-wishlist thead {

    display: none !important;

  }



  .table.table-wishlist,

  .table.table-wishlist tbody {

    display: block !important;

    width: 100% !important;

  }



  .table.table-wishlist .product-row {

    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    border: 1px solid rgba(203, 213, 225, 0.25) !important;

    border-radius: var(--radius-md) !important;

    background: #fff !important;

    padding: 16px !important;

    margin-bottom: 16px !important;

    position: relative !important;

    box-shadow: var(--shadow-soft) !important;

  }



  .table.table-wishlist .product-row td {

    display: block !important;

    padding: 6px 0 !important;

    border: none !important;

    width: 100% !important;

    text-align: left !important;

  }



  .table.table-wishlist .product-row .thumbnail-col {

    padding: 0 !important;

    height: 0 !important;

  }



  .table.table-wishlist .product-row .product-image-container {

    position: absolute !important;

    top: 16px !important;

    left: 16px !important;

    margin: 0 !important;

    width: 80px !important;

    height: 80px !important;

  }



  .table.table-wishlist .product-row .product-image-container img {

    max-height: 80px !important;

    width: 80px !important;

    object-fit: contain !important;

  }



  .table.table-wishlist .product-row .btn-remove {

    position: absolute !important;

    top: 8px !important;

    right: 8px !important;

    z-index: 5 !important;

    font-size: 1.6rem !important;

  }



  .table.table-wishlist .product-row .product-col {

    padding-left: 96px !important;

    min-height: 40px !important;

  }



  .table.table-wishlist .product-row .product-title {

    font-size: 1.4rem !important;

    margin-bottom: 4px !important;

  }



  .table.table-wishlist .product-row .price-col {

    padding-left: 96px !important;

    font-size: 1.5rem !important;

    color: #000000 !important;

    font-weight: 700 !important;

  }



  .table.table-wishlist .product-row .status-col {

    padding-left: 96px !important;

    font-size: 1.2rem !important;

    font-weight: 600 !important;

  }



  .table.table-wishlist .product-row .action-col {

    padding-top: 12px !important;

    border-top: 1px dashed rgba(203, 213, 225, 0.2) !important;

    margin-top: 8px !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

  }



  .table.table-wishlist .product-row .action-col .btn {

    width: 100% !important;

    margin: 0 !important;

    padding: 10px 16px !important;

    text-align: center !important;

    font-size: 1.2rem !important;

  }



  /* Lookbook Story Cards Mobile Optimization */

  .modern-story-card {

    width: 280px !important;

    height: 480px !important;

  }



  @keyframes scroll {

    0% {

      transform: translate3d(0, 0, 0);

    }



    100% {

      transform: translate3d(calc(-50% - 12px), 0, 0);

    }

  }

}









/* ============================================================

   43. PREMIUM MOBILE BOTTOM NAVIGATION BAR

   ============================================================ */



.mobile-bottom-nav {

  display: none;

}



@media (max-width: 991px) {

  .mobile-bottom-nav {

    display: flex !important;

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 1050;

    align-items: stretch;

    justify-content: space-between;

    height: 64px;

    padding-bottom: env(safe-area-inset-bottom, 0px);

    background: rgba(255, 255, 255, 0.88);

    backdrop-filter: blur(18px) saturate(160%);

    -webkit-backdrop-filter: blur(18px) saturate(160%);

    border-top: 1px solid rgba(0, 0, 0, 0.08);

    box-shadow: 0 -8px 30px rgba(26, 23, 21, 0.10);

  }



  .mobile-bottom-nav-item {

    flex: 1 1 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    text-decoration: none !important;

    color: #8C7A72;

    position: relative;

    transition: color 0.25s ease, transform 0.25s ease;

  }



  .mobile-bottom-nav-item:active {

    transform: scale(0.92);

  }



  .mobile-bottom-nav-icon {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 2.0rem;

    line-height: 1;

    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  }



  .mobile-bottom-nav-label {



    font-size: 0.95rem;

    font-weight: 600;

    letter-spacing: 0.02em;

  }



  .mobile-bottom-nav-item.active,

  .mobile-bottom-nav-item:active {

    color: #000000;

  }



  .mobile-bottom-nav-item.active .mobile-bottom-nav-icon {

    transform: translateY(-2px);

  }



  /* Active pill indicator */

  .mobile-bottom-nav-item.active::after {

    content: '';

    position: absolute;

    bottom: 4px;

    width: 22px;

    height: 3px;

    border-radius: var(--radius-pill);

    background: #000000;

  }



  .mobile-bottom-nav-badge {

    position: absolute;

    top: -6px;

    right: -10px;

    min-width: 16px;

    height: 16px;

    padding: 0 4px;

    border-radius: 50%;

    background: #000000;

    color: #fff;

    font-size: 0.78rem;

    font-weight: 700;

    line-height: 16px;

    text-align: center;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);

  }



  /* Reserve space so page content + footer never sit under the bar */

  body {

    padding-bottom: 0 !important;

  }



  .footer {

    padding-bottom: 0 !important;

  }



  .footer-bottom {

    padding-bottom: calc(2.5rem + 64px + env(safe-area-inset-bottom, 0px)) !important;

  }



  /* Move scroll-to-top above the bottom nav on mobile */

  #scroll-top {

    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px) !important;

  }

}



@media (min-width: 992px) {

  .mobile-bottom-nav {

    display: none !important;

  }

}



/* ============================================================

   44. PREMIUM MOBILE HEADER REFINEMENTS

   ============================================================ */



@media (max-width: 991px) {



  /* subtle depth on the mobile header so it doesn't feel flat */

  .header-middle {

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;

  }



  .header-left .logo img {

    filter: none !important;

  }



  /* Crisper, larger tap targets with gentle press feedback */

  .header-middle .mobile-menu-toggler,

  .header-middle .header-icon:not(.header-search),

  .header-middle .cart-dropdown .cart-toggle {

    transition: transform 0.2s ease, opacity 0.2s ease;

  }



  .header-middle .mobile-menu-toggler:active,

  .header-middle .header-icon:not(.header-search):active,

  .header-middle .cart-dropdown .cart-toggle:active {

    transform: scale(0.88);

    opacity: 0.8;

  }



  /* Cart/wishlist badges slightly refined for mobile contrast */

  .header-middle .badge-circle {

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15), 0 0 0 2px #ffffff !important;

  }

}



/* ============================================================

   45. PREMIUM MOBILE DRAWER MENU

   ============================================================ */



@media (max-width: 991px) {

  .mobile-menu-container {

    background: linear-gradient(165deg, #1A1715 0%, #1A1715 100%);

    width: 86vw;

    max-width: 360px;

  }



  .mobile-menu-wrapper {

    padding-top: 8px;

  }



  .mobile-menu-close {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    display: flex !important;

    align-items: center;

    justify-content: center;

    transition: background 0.2s ease, transform 0.2s ease;

  }



  .mobile-menu-close:active {

    transform: scale(0.9);

    background: rgba(0, 0, 0, 0.4);

  }



  .mobile-menu>li>a {



    font-weight: 600;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition: color 0.2s ease, padding-left 0.2s ease;

  }



  .mobile-menu>li>a:hover,

  .mobile-menu>li>a:active {

    color: #F3D9CD;

    padding-left: 1rem;

  }



  .mobile-menu li a .tip {

    border-radius: var(--radius-pill);

    font-size: 0.85rem;

    padding: 2px 9px;

    font-weight: 700;

    letter-spacing: 0.04em;

  }



  .mobile-menu li a .tip-hot {

    background: #000000 !important;

  }



  .mobile-menu li a .tip-new {

    background: #000000 !important;

  }



  /* nested sub-menus get a subtle indent + tint so hierarchy reads clearly */

  .mobile-menu li ul {

    background: rgba(255, 255, 255, 0.03);

    border-left: 2px solid rgba(0, 0, 0, 0.4);

    margin-left: 0.4rem;

  }



  .mobile-menu li ul a {

    color: rgba(255, 255, 255, 0.72) !important;

    font-weight: 500 !important;

    font-size: 1.2rem;

  }



  .mobile-menu li ul a:hover {

    color: #fff !important;

  }



  /* search field inside the drawer */

  .mobile-menu-wrapper .search-wrapper .form-control {

    background: rgba(255, 255, 255, 0.08) !important;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    color: #fff !important;

    border-radius: var(--radius-pill) !important;

    padding-left: 1.4rem !important;

  }



  .mobile-menu-wrapper .search-wrapper .form-control::placeholder {

    color: rgba(255, 255, 255, 0.5) !important;

  }



  .mobile-menu-wrapper .search-wrapper .btn {

    color: #fff !important;

  }



  /* social icons in drawer */

  .mobile-menu-wrapper .social-icons {

    display: flex;

    gap: 10px;

    padding: 1.2rem 0;

  }



  .mobile-menu-wrapper .social-icon {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.18);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    transition: all 0.25s ease;

  }



  .mobile-menu-wrapper .social-icon:hover {

    background: #000000;

    border-color: #000000;

    transform: translateY(-2px);

  }

}







/* ============================================================

   47. PREMIUM MOBILE PRODUCT CARDS

   ============================================================ */



@media (max-width: 991px) {

  .product-default {

    border: 1px solid rgba(203, 213, 225, 0.25);

    box-shadow: 0 6px 20px rgba(26, 23, 21, 0.06);

  }



  .product-default .product-label {

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);

  }



  /* always-visible wishlist/quickview on touch devices (no hover state available) */

  .product-default .btn-icon-wish,

  .product-default .btn-quickview {

    opacity: 1 !important;

    visibility: visible !important;

    width: 32px !important;

    height: 32px !important;

  }



  .product-default .product-action {

    height: auto !important;

  }



  .product-default .product-title {

    font-size: 1.3rem;

  }



  .product-price {

    font-size: 1.55rem !important;

  }

}



/* ============================================================

   48. PREMIUM MOBILE CART / WISHLIST DRAWER

   ============================================================ */



@media (max-width: 575px) {

  .cart-dropdown .mobile-cart {

    width: 100% !important;

    max-width: 100vw;

  }



  .dropdown-cart-header {



    font-weight: 700;

    letter-spacing: 0.02em;

  }

}



/* ============================================================

   49. REDUCED MOTION SAFETY FOR NEW MOBILE COMPONENTS

   ============================================================ */



@media (prefers-reduced-motion: reduce) {



  .mobile-bottom-nav-item,

  .mobile-bottom-nav-icon,

  .mobile-menu-close,

  .mobile-menu-wrapper .social-icon {

    transition: none !important;

    animation: none !important;

  }

}



/* Specific mobile overrides for home slider background image positioning to show model face perfectly */

@media (max-width: 768px) {



  .home-slider .home-slide1 .slide-bg,

  .home-slider .home-slide2 .slide-bg {

    object-position: 20% 15% !important;

  }



  .home-slider .home-slide3 .slide-bg {

    object-position: left center !important;

  }

}



/* ============================================================

   50. FOOTER & MOBILE STICKY NAVBAR BRANDING OVERRIDES

   ============================================================ */

/* Footer styled in a premium light gray color */

.footer {

  background-color: #f4f4f4 !important;

  color: #1A1715 !important;

}



.footer .widget-title {

  color: #1A1715 !important;

  border-bottom: 2px solid #000000 !important;

  /* Brand red underline for titles */

}



/* Highly specific footer links target to override default Porto styles and make text completely visible */

.footer a,

.footer-middle a,

.footer-middle .widget a,

.footer-middle .widget-content a,

.footer-middle .widget-content ul li a,

.footer-middle ul li a,

.footer-middle .links li a,

.footer-middle .contact-info li a,

.footer-middle .widget-content .contact-info li a {

  color: #1A1715 !important;

}



.footer a:hover,

.footer-middle a:hover,

.footer-middle .widget a:hover,

.footer-middle .widget-content a:hover,

.footer-middle .widget-content ul li a:hover,

.footer-middle ul li a:hover,

.footer-middle .links li a:hover,

.footer-middle .contact-info li a:hover,

.footer-middle .widget-content .contact-info li a:hover {

  color: #000000 !important;

  /* Brand red on hover */

}



/* Social icons inside footer */

.footer .social-icons .social-icon {

  background-color: #ffffff !important;

  color: #1A1715 !important;

  border: 1px solid #CBD5E1 !important;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;

  transition: all 0.25s ease !important;

}



.footer .social-icons .social-icon:hover {

  background-color: #000000 !important;

  color: #ffffff !important;

  border-color: #000000 !important;

}



.footer-middle {

  background-color: #f4f4f4 !important;

  border-top: 1px solid #e5e5e5 !important;

}



.footer-bottom {

  background-color: #eaeaea !important;

  /* Slightly darker light gray for footer bottom */

  border-top: 1px solid #dcdcdc !important;

}



.footer-copyright {

  color: #4A4A4A !important;

}



/* Sticky Mobile Bottom Navbar Override (White theme, navy/red colors) */

.sticky-navbar {

  background-color: #ffffff !important;

  border-top: 1px solid #eeeeee !important;

  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05) !important;

}



.sticky-navbar .sticky-info a {

  color: #1A1715 !important;

  /* Brand Navy Blue */

}



.sticky-navbar .sticky-info a:hover,

.sticky-navbar .sticky-info a:active,

.sticky-navbar .sticky-info.active a {

  color: #000000 !important;

  /* Brand Red active */

}



.sticky-navbar .badge-circle {

  background-color: #000000 !important;

  color: #ffffff !important;

}



/* ============================================================

   5. Description Page Specific Styles

   ============================================================ */







/* ============================================================

   6. PREMIUM MONOCHROME FOOTER OVERRIDES

   ============================================================ */

.footer {

  background-color: #f4f4f4 !important;

  color: #334155 !important;

}



.footer-middle {

  background-color: #f4f4f4 !important;

  border-top: 1px solid #e5e5e5 !important;

  border-bottom: 1px solid #e5e5e5 !important;

  color: #334155 !important;

  padding: 5rem 0 2rem 0 !important;

}



.footer-middle .widget-title {

  color: #0F172A !important;

  border-bottom: 2px solid #e5e5e5 !important;

  font-weight: 700 !important;

}



.footer-middle a {

  color: #475569 !important;

  transition: color var(--transition-fast) !important;

  font-weight: 500 !important;

}



.footer-middle a:hover {

  color: #000000 !important;

  text-decoration: none !important;

}



.footer-bottom {

  background-color: #0F172A !important;

  color: #94A3B8 !important;

  border-top: 1px solid #1E293B !important;

  padding: 2.5rem 0 !important;

}



.footer-bottom .footer-copyright {

  color: #94A3B8 !important;

}



.footer-bottom a {

  color: #94A3B8 !important;

}



.footer-bottom a:hover {

  color: #FFFFFF !important;

}



.footer .social-icon {

  background-color: #FFFFFF !important;

  color: #475569 !important;

}



/* ============================================================

   7. ABOUT STRATTEN SECTION (ULTRA-LUXURY MONOCHROME)

   ============================================================ */

.about-stratten-section {

  position: relative !important;

  width: 100% !important;

  padding: 80px 4% !important;

  background: #ffffff !important;

  overflow: hidden !important;

}



.about-stratten-container {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  max-width: 1300px !important;

  margin: 0 auto !important;

  gap: 60px !important;

}



/* Left Image Column */

.about-stratten-image-col {

  flex: 0 0 38% !important;

  max-width: 420px !important;

  width: 100% !important;

  position: relative !important;

  padding: 16px 0 16px 16px !important;

}



.about-stratten-img-outline {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: calc(100% - 16px) !important;

  height: calc(100% - 16px) !important;

  border: 1.5px solid rgba(0, 0, 0, 0.15) !important;

  border-radius: 230px 230px 28px 28px !important;

  pointer-events: none !important;

  z-index: 1 !important;

  transition: transform 0.4s ease, border-color 0.4s ease !important;

}



.about-stratten-img-frame {

  position: relative !important;

  width: 100% !important;

  max-height: 590px !important;

  border-radius: 220px 220px 20px 20px !important;

  overflow: hidden !important;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12) !important;

  line-height: 0 !important;

  z-index: 2 !important;

  transform: translate(16px, 16px) !important;

  transition: transform 0.4s ease !important;

}



.about-stratten-img-frame img {

  width: 100% !important;

  height: 100% !important;

  max-height: 590px !important;

  aspect-ratio: 1400 / 2100 !important;

  object-fit: cover !important;

  object-position: center top !important;

  display: block !important;

  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



/* Hover Effects */

.about-stratten-image-col:hover .about-stratten-img-frame {

  transform: translate(10px, 10px) !important;

}



.about-stratten-image-col:hover .about-stratten-img-frame img {

  transform: scale(1.04) !important;

}



.about-stratten-image-col:hover .about-stratten-img-outline {

  border-color: rgba(0, 0, 0, 0.35) !important;

  transform: translate(-4px, -4px) !important;

}



.about-stratten-badge {

  position: absolute !important;

  bottom: 25px !important;

  left: 25px !important;

  background: rgba(255, 255, 255, 0.95) !important;

  backdrop-filter: blur(12px) !important;

  -webkit-backdrop-filter: blur(12px) !important;

  padding: 14px 22px !important;

  border-radius: 12px !important;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;

  border: 1px solid rgba(0, 0, 0, 0.05) !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 2px !important;

  z-index: 3 !important;

}



.about-stratten-badge strong {



  font-size: 16px !important;

  font-weight: 800 !important;

  color: #000000 !important;

  letter-spacing: 0.5px !important;

}



.about-stratten-badge span {



  font-size: 10px !important;

  font-weight: 600 !important;

  color: #666666 !important;

  text-transform: uppercase !important;

  letter-spacing: 1px !important;

}



/* Right Content Column */

.about-stratten-content-col {

  flex: 1 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

}



.about-stratten-tag {



  font-size: 11px !important;

  font-weight: 700 !important;

  letter-spacing: 3px !important;

  text-transform: uppercase !important;

  color: #000000 !important;

  background: #f4f4f4 !important;

  padding: 6px 18px !important;

  border-radius: 30px !important;

  margin-bottom: 20px !important;

  display: inline-block !important;

}



.about-stratten-title {



  font-size: 42px !important;

  font-weight: 700 !important;

  line-height: 1.15 !important;

  color: #000000 !important;

  margin-bottom: 20px !important;

  letter-spacing: -0.5px !important;

}



.about-stratten-lead {



  font-size: 15px !important;

  line-height: 1.7 !important;

  color: #555555 !important;

  margin-bottom: 32px !important;

  font-weight: 400 !important;

}



.about-stratten-props-grid {

  display: flex !important;

  flex-direction: column !important;

  gap: 20px !important;

  width: 100% !important;

  margin-bottom: 35px !important;

}



.about-stratten-prop-item {

  display: flex !important;

  align-items: flex-start !important;

  gap: 18px !important;

}



.about-stratten-prop-icon {

  width: 44px !important;

  height: 44px !important;

  border-radius: 50% !important;

  background: #f4f4f4 !important;

  color: #000000 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 16px !important;

  flex-shrink: 0 !important;

}



.about-stratten-prop-text {

  display: flex !important;

  flex-direction: column !important;

  gap: 3px !important;

}



.about-stratten-prop-text strong {



  font-size: 15px !important;

  font-weight: 700 !important;

  color: #000000 !important;

}



.about-stratten-prop-text span {



  font-size: 13px !important;

  color: #666666 !important;

  line-height: 1.5 !important;

}



.about-stratten-btn {

  display: inline-flex !important;

  align-items: center !important;

  gap: 12px !important;

  padding: 16px 36px !important;

  background: #000000 !important;

  color: #ffffff !important;



  font-size: 11px !important;

  font-weight: 700 !important;

  letter-spacing: 2px !important;

  text-transform: uppercase !important;

  text-decoration: none !important;

  border-radius: 50px !important;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;

  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;

  border: 1px solid #000000 !important;

}



.about-stratten-btn span {

  color: #ffffff !important;

}



.about-stratten-btn i {

  color: #ffffff !important;

  font-size: 11px !important;

  transition: transform 0.3s ease !important;

}



.about-stratten-btn:hover {

  background: #222222 !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;

  text-decoration: none !important;

}



.about-stratten-btn:hover i {

  transform: translateX(4px) !important;

}



@media (max-width: 992px) {

  .about-stratten-section {

    padding: 50px 20px !important;

  }



  .about-stratten-container {

    flex-direction: column !important;

    gap: 40px !important;

  }



  .about-stratten-image-col {

    flex: 0 0 100% !important;

    max-width: 100% !important;

    width: 100% !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    margin: 0 auto !important;

    padding: 0 !important;

    position: relative !important;

  }



  .about-stratten-img-frame {

    width: 100% !important;

    max-width: 360px !important;

    max-height: none !important;

    margin: 0 auto !important;

    transform: none !important;

    display: block !important;

  }



  .about-stratten-img-frame img {

    margin: 0 auto !important;

    width: 100% !important;

    height: auto !important;

    max-height: none !important;

    aspect-ratio: 4 / 5.2 !important;

    display: block !important;

  }



  .about-stratten-img-outline {

    display: none !important;

  }



  .about-stratten-content-col {

    text-align: center !important;

    align-items: center !important;

  }



  .about-stratten-title {

    font-size: 32px !important;

  }



  .about-stratten-badge {

    bottom: 15px !important;

    left: 15px !important;

    padding: 12px 18px !important;

  }



  .premium-offset-frame {

    transform: translate(15px, 15px) !important;

    aspect-ratio: 4 / 5 !important;

    border-radius: 50% !important;

  }



  .premium-feature-content {

    text-align: center !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

  }



  .premium-desc {

    max-width: 600px !important;

  }



  .premium-features-list {

    align-items: flex-start !important;

    text-align: left !important;

    max-width: 500px !important;

    margin: 0 auto 35px auto !important;

  }

}



/* ============================================================

   8. PREMIUM STORE LOCATOR SECTION

   ============================================================ */

.premium-locator-section {

  position: relative;

  background: #f4f4f4 !important;

  /* Premium light neutral gray background */

  padding: 35px 0 !important;

  margin: 30px 0 !important;

  overflow: hidden;

  border-top: 1px solid #e5e5e5 !important;

  border-bottom: 1px solid #e5e5e5 !important;

}



.locator-wrapper {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  z-index: 2;

}



.locator-brand-group {

  display: flex;

  align-items: center;

  gap: 16px;

  z-index: 2;

}



.locator-watermark {

  position: relative !important;

  left: auto !important;

  top: auto !important;

  transform: none !important;

  opacity: 1 !important;

  height: 48px !important;

  pointer-events: auto !important;

  z-index: 2 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  flex-shrink: 0 !important;

}



.locator-watermark img {

  height: 48px !important;

  width: auto !important;

  object-fit: contain !important;

  filter: none !important;

  opacity: 1 !important;

}



.locator-info {

  display: flex;

  flex-direction: column;

  line-height: 1.1;

  z-index: 2;

  margin-left: 0;

}



.locate-label,

.brand-label {



  font-size: 24px !important;

  font-weight: 800 !important;

  color: #0F172A !important;

  letter-spacing: 1.5px !important;

  text-transform: uppercase;

  display: flex;

  align-items: center;

}



.locator-search-container {

  display: flex;

  flex-direction: column;

  gap: 6px;

  z-index: 2;

  width: 100%;

  max-width: 550px;

}



.search-label {



  font-size: 13px !important;

  font-weight: 600 !important;

  color: #475569 !important;

  margin-bottom: 2px !important;

  text-transform: none !important;

}



.search-field-wrapper {

  display: flex;

  align-items: center;

  gap: 20px;

  width: 100%;

}



.locator-input {

  flex: 1;

  background: #ffffff !important;

  border: 1px solid #cbd5e1 !important;

  border-radius: 8px !important;

  padding: 10px 16px !important;



  font-size: 14px !important;

  color: #0F172A !important;

  outline: none !important;

  transition: border-color 0.3s ease !important;

  height: 44px !important;

}



.locator-input::placeholder {

  color: #94A3B8 !important;

}



.locator-input:focus {

  border-color: #000000 !important;

  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;

}



.locator-submit-btn {



  font-size: 12px !important;

  font-weight: 800 !important;

  color: #ffffff !important;

  background: #000000 !important;

  padding: 0 24px !important;

  border-radius: 30px !important;

  text-decoration: none !important;

  text-transform: uppercase !important;

  letter-spacing: 1.5px !important;

  white-space: nowrap !important;

  transition: all 0.3s ease !important;

  height: 44px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

}



.locator-submit-btn:hover {

  background: #1e293b !important;

  color: #ffffff !important;

  text-decoration: none !important;

}



/* Responsive View for Store Locator */

@media (max-width: 992px) {

  .locator-wrapper {

    flex-direction: column !important;

    text-align: center !important;

    gap: 20px !important;

  }



  .locator-brand-group {

    flex-direction: column !important;

    gap: 10px !important;

    align-items: center !important;

    justify-content: center !important;

  }



  .locator-info {

    margin-left: 0 !important;

    text-align: center !important;

  }



  .brand-label {

    font-size: 20px !important;

    justify-content: center !important;

  }



  .locator-watermark {

    position: relative !important;

    left: auto !important;

    top: auto !important;

    transform: none !important;

    opacity: 1 !important;

    height: 52px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    margin: 0 auto !important;

  }



  .locator-watermark img {

    height: 50px !important;

    width: auto !important;

    filter: none !important;

    opacity: 1 !important;

    display: block !important;

  }



  .locator-search-container {

    max-width: 100% !important;

    align-items: center !important;

  }



  .search-field-wrapper {

    flex-direction: row !important;

    gap: 10px !important;

    width: 100% !important;

  }



  .locator-input {

    width: 100% !important;

  }

}



/* ============================================================

   43. CUSTOM USER OVERRIDES — Header Height & Centering, Desktop Menu Toggler, White/Black colors, and Store Locator Icon

   ============================================================ */



/* Enforce 60px height on the header and header-middle (sticky or not) */

.header,

.header-middle,

.sticky-header,

.sticky-header.fixed {

  height: 60px !important;

  min-height: 60px !important;

  background-color: #ffffff !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;

  padding-top: 0 !important;

  padding-bottom: 0 !important;

  transition: none !important;

}



/* Ensure the header container uses the full 60px height and aligns everything to center */

.header-middle .container {

  height: 100% !important;

  max-height: 100% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding-top: 0 !important;

  padding-bottom: 0 !important;

}



/* Align and center elements in header-left and header-right */

.header-left {

  display: flex !important;

  align-items: center !important;

  justify-content: flex-start !important;

  height: 100% !important;

}



.header-right {

  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  height: 100% !important;

  gap: 32px !important;

  /* Increased spacing between header items (signin, wishlist, cart) */

}



/* Ensure mobile-only icons are correctly hidden on desktop screen widths */

@media (min-width: 992px) {



  .header-right .d-lg-none,

  .header-right a.d-lg-none {

    display: none !important;

  }

}



.header-left .logo {

  height: 100% !important;

  display: flex !important;

  align-items: center !important;

  margin: 0 !important;

  padding: 0 !important;

}



.header-left .logo img,

.sticky-header.fixed .header-left .logo img {

  height: 48px !important;

  max-height: 48px !important;

  min-height: 34px !important;

  width: 130px !important;

  min-width: 130px !important;

  max-width: 130px !important;

  margin: 0 !important;

  padding: 0 !important;

  object-fit: contain !important;

  transition: none !important;

  display: block !important;

}



/* Make sure all header-right children are perfectly centered vertically */

.header-right>*,

.header-icon,

.user-dropdown-container,

.cart-dropdown,

.cart-toggle {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  height: 100% !important;

  margin-top: 0 !important;

  margin-bottom: 0 !important;

  padding-top: 0 !important;

  padding-bottom: 0 !important;

  color: #000000 !important;

  /* Icons/text black */

}



/* Ensure wishlist/cart badge sizes and positioning are centered and correct */

.badge-circle {

  background-color: #000000 !important;

  color: #ffffff !important;

}



/* Make search bar compact and centered */

.header-search-inline .header-search-wrapper {

  height: 36px !important;

  max-height: 36px !important;

  margin: 0 !important;

  border: 1px solid #000000 !important;

  background-color: #ffffff !important;

}



.header-search-inline .header-search-wrapper input[type="search"] {

  color: #000000 !important;

}



.header-search-inline .header-search-wrapper .btn {

  color: #000000 !important;

}



/* Force mobile-menu-toggler to be visible on desktop viewports too */

.header-middle .mobile-menu-toggler,

.header-left .mobile-menu-toggler {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  color: #000000 !important;

  /* Menu icon black */

  font-size: 2.2rem !important;

  cursor: pointer !important;

  height: 100% !important;

  padding: 0 10px !important;

  margin-right: 15px !important;

  margin-left: 0 !important;

  background: transparent !important;

  border: none !important;

}



/* Ensure hover state and fontawesome icon styles are black */

.header-middle .mobile-menu-toggler:hover,

.header-left .mobile-menu-toggler:hover {

  color: #000000 !important;

}



.header-middle .mobile-menu-toggler i,

.header-left .mobile-menu-toggler i {

  color: #000000 !important;

}



/* Ensure user welcome info text has correct contrast */

.user-dropdown-trigger,

.user-dropdown-trigger i,

.user-info-name,

.user-info-welcome,

.user-dropdown-trigger::after {

  color: #000000 !important;

}



.user-info-welcome {

  opacity: 0.7 !important;

}



/* Premium Store Locator Section Inline Icon Styling */

.locator-title-group {

  display: flex !important;

  align-items: center !important;

  gap: 20px !important;

}



.locator-brand-icon {

  height: 48px !important;

  width: auto !important;

  object-fit: contain !important;

  filter: none !important;

  /* Ensure it is fully colored/visible */

}



.locator-text-wrapper {

  display: flex !important;

  flex-direction: column !important;

  text-align: left !important;

}



/* Responsive adjustment for Store Locator Icon group */

@media (max-width: 992px) {

  .locator-title-group {

    flex-direction: column !important;

    gap: 10px !important;

    align-items: center !important;

  }



  .locator-text-wrapper {

    text-align: center !important;

  }

}



/* Force mobile menu background to white and all text/icons inside it to black */

.mobile-menu-container,

.mobile-menu-wrapper {

  background: #ffffff !important;

  background-color: #ffffff !important;

  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08) !important;

}



/* Close button black and dark background */

.mobile-menu-close {

  color: #000000 !important;

  background: rgba(0, 0, 0, 0.05) !important;

}



.mobile-menu-close:hover {

  background: rgba(0, 0, 0, 0.1) !important;

  color: #000000 !important;

}



/* All links and list items text color black */

.mobile-menu li a,

.mobile-menu>li>a,

.mobile-nav ul li a {

  color: #000000 !important;

}



.mobile-menu li {

  border-bottom: none !important;

  /* Remove grey horizontal dividers for a full plain white menu */

}



.mobile-menu>li>a:hover,

.mobile-menu>li>a:active,

.mobile-menu li a:hover {

  color: #000000 !important;

  background: rgba(0, 0, 0, 0.04) !important;

}



/* Nested submenus styling */

.mobile-menu li ul {

  background: #ffffff !important;

  /* Full plain white nested submenu background */

  border-left: none !important;

  /* Remove side border indicator */

}



.mobile-menu li ul a {

  color: rgba(0, 0, 0, 0.7) !important;

}



.mobile-menu li ul a:hover {

  color: #000000 !important;

}



/* Search input field in the menu drawer */

.mobile-menu-wrapper .search-wrapper .form-control {

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.15) !important;

  color: #000000 !important;

}



.mobile-menu-wrapper .search-wrapper .form-control::placeholder {

  color: rgba(0, 0, 0, 0.4) !important;

}



.mobile-menu-wrapper .search-wrapper .btn {

  color: #000000 !important;

}



/* Social icons container spacing in menu drawer */

.mobile-menu-wrapper .social-icons {

  margin-top: 25px !important;

  display: flex !important;

  flex-direction: row !important;

  justify-content: flex-start !important;

  align-items: center !important;

  padding-left: 1.5rem !important;

  padding-right: 0 !important;

  gap: 20px !important;

  width: auto !important;

}



/* Social icons in menu drawer - compact left-aligned, borderless */

.mobile-menu-wrapper .social-icon {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  flex: 0 0 auto !important;

  width: auto !important;

  min-width: 0 !important;

  height: auto !important;

  margin: 0 !important;

  padding: 0 !important;

  background: transparent !important;

  border: none !important;

  color: #000000 !important;

  font-size: 1.7rem !important;

  box-shadow: none !important;

}



.mobile-menu-wrapper .social-icon.social-facebook,

.mobile-menu-wrapper .social-icon.icon-facebook {

  font-size: 1.65rem !important;

}



.mobile-menu-wrapper .social-icon.social-instagram,

.mobile-menu-wrapper .social-icon.icon-instagram {

  font-size: 2.05rem !important;

}



.mobile-menu-wrapper .social-icon + .social-icon {

  margin-left: 0 !important;

}



.mobile-menu-wrapper .social-icon:hover {

  color: #64748B !important;

  background: transparent !important;

}



/* Toggles/arrow expanders */

.mobile-menu-container .mmenu-btn,

.mobile-menu-container .mmenu-btn::before,

.mobile-menu-container .mmenu-btn::after,

.mobile-menu-container i {

  color: #000000 !important;

}



/* Inline brand icon centering and black conversion */

.locator-title-group {

  display: flex !important;

  align-items: center !important;

  gap: 15px !important;

  z-index: 2 !important;

}



.locator-brand-icon {

  height: 32px !important;

  width: auto !important;

  object-fit: contain !important;

  filter: brightness(0) !important;

  display: block !important;

}



/* ============================================================

   9. PREMIUM HEADER SEARCH INLINE EXPANDABLE

   ============================================================ */

.header-search-inline-container {

  display: inline-flex !important;

  align-items: center !important;

  position: relative !important;

  height: 100% !important;

  margin-left: 20px !important;

}



.header-search-click-trigger {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;



  font-size: 13px !important;

  font-weight: 700 !important;

  color: #1A1715 !important;

  letter-spacing: 1.5px !important;

  text-decoration: none !important;

  cursor: pointer !important;

  transition: color 0.2s ease !important;

  height: 100% !important;

}



.header-search-click-trigger:hover {

  color: #000000 !important;

  text-decoration: none !important;

}



.header-search-click-trigger i {

  font-size: 16px !important;

  font-weight: 700 !important;

}



/* Inline form styling */

.header-search-inline-form {

  display: flex !important;

  align-items: center !important;

  width: 100% !important;

  min-width: 280px !important;

  max-width: 280px !important;

  background: #ffffff !important;

  border: 1px solid #cbd5e1 !important;

  border-radius: 25px !important;

  padding: 0 10px 0 16px !important;

  height: 38px !important;

  margin: 0 !important;

  position: relative !important;

  box-sizing: border-box !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;

  transition: all 0.2s ease !important;

  animation: searchExpand 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;

}



.header-search-inline-form:focus-within {

  border-color: #0f172a !important;

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;

}



@keyframes searchExpand {

  from {

    opacity: 0;

    transform: scale(0.95);

    min-width: 150px;

  }



  to {

    opacity: 1;

    transform: scale(1);

    min-width: 280px;

  }

}



.header-search-inline-form input[type="search"] {

  flex: 1 !important;

  border: none !important;

  background: transparent !important;

  font-size: 13.5px !important;

  font-weight: 400 !important;

  color: #0f172a !important;

  outline: none !important;

  padding: 0 !important;

  height: 100% !important;

}



.header-search-inline-form input[type="search"]::placeholder {

  color: #94a3b8 !important;

  font-style: normal !important;

  font-weight: 400 !important;

  opacity: 1 !important;

}



.search-inline-submit {

  background: none !important;

  border: none !important;

  cursor: pointer !important;

  padding: 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  color: #64748b !important;

  font-size: 14px !important;

  transition: color 0.2s ease !important;

  margin-right: 6px !important;

}



.search-inline-submit:hover {

  color: #0f172a !important;

}



.search-inline-close {

  background: none !important;

  border: none !important;

  cursor: pointer !important;

  padding: 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  color: #94a3b8 !important;

  font-size: 13px !important;

  transition: color 0.2s ease !important;

}



.search-inline-close:hover {

  color: #0f172a !important;

}



.search-inline-submit i {

  font-size: 16px !important;

  font-weight: 700 !important;

}



.search-inline-submit:hover {

  opacity: 0.7 !important;

}



.search-inline-close {

  background: none !important;

  border: none !important;

  font-size: 16px !important;

  font-weight: 700 !important;

  color: #000000 !important;

  cursor: pointer !important;

  padding: 0 !important;

  margin-left: 6px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  transition: opacity 0.2s ease !important;

}



.search-inline-close:hover {

  opacity: 0.7 !important;

}



/* Autocomplete results dropdown for inline search */

.search-inline-results-container {

  position: absolute !important;

  top: 100% !important;

  left: 0 !important;

  width: 100% !important;

  min-width: 280px !important;

  background: #ffffff !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;

  border-radius: 0 0 12px 12px !important;

  border: 2px solid #000000 !important;

  border-top: none !important;

  max-height: 300px !important;

  overflow-y: auto !important;

  z-index: 9999 !important;

  padding: 8px 0 !important;

  display: none;

  box-sizing: border-box !important;

}



.search-inline-results-container .search-result-item {

  display: block !important;

  padding: 10px 18px !important;



  font-size: 13px !important;

  color: #334155 !important;

  text-decoration: none !important;

  transition: background 0.2s ease, color 0.2s ease !important;

  text-transform: capitalize !important;

}



.search-inline-results-container .search-result-item:hover {

  background: #f4f4f4 !important;

  color: #000000 !important;

}







html,

body {

  overflow-x: hidden !important;

  max-width: 100vw !important;

}



.page-wrapper {

  position: relative !important;

  overflow-x: hidden !important;

  overflow-y: visible !important;

  max-width: 100vw !important;

}



/* Prevent horizontal marquee and notice bars from causing page stretch */

.top-notice {

  overflow: hidden !important;

}



/* Force page content to be visible always, bypassing loading state blocks */

body:not(.loaded)> :not(.loading-overlay) {

  visibility: visible !important;

}



body:not(.loaded)> :not(.loading-overlay) * {

  visibility: visible !important;

}



/* Hide the loading overlay completely */

.loading-overlay {

  display: none !important;

}



/* Fix sticky columns and scrolling on the Product Detail Page (PDP) - Desktop only */

@media (min-width: 992px) {



  .description-page html,

  .description-page body,

  .description-page .page-wrapper {

    overflow-x: clip !important;

    overflow-y: visible !important;

    max-width: 100vw !important;

  }



  .description-page .lux-gallery-col {

    position: -webkit-sticky !important;

    position: sticky !important;

    top: 90px !important;

    align-self: start !important;

  }



  .description-page .lux-thumb-rail-wrapper,

  .description-page .lux-thumb-rail {

    position: -webkit-sticky !important;

    position: sticky !important;

    top: 90px !important;

    align-self: start !important;

  }

}



/* Ensure mobile layout elements are static and stack correctly on mobile viewports */

@media (max-width: 991px) {



  .description-page .lux-gallery-col,

  .description-page .lux-thumb-rail,

  .description-page .lux-gallery-wrap {

    position: static !important;

    align-self: auto !important;

  }



  /* Prevent the entire page from shifting right on swipe gesture */

  .description-page html,

  .description-page body,

  body.description-page {

    overflow-x: hidden !important;

    max-width: 100vw !important;

  }



  .description-page .page-wrapper {

    overflow-x: hidden !important;

    max-width: 100vw !important;

  }



  /* Gallery: allow only vertical pan, prevent horizontal page scroll on swipe */

  .lux-gallery-inner,

  .lux-gallery-wrap,

  .lux-gallery-col {

    touch-action: pan-y !important;

    max-width: 100% !important;

    overflow: hidden !important;

  }

}



/* Cart icon mobile positioning — use padding instead of translateX to avoid page overflow */

@media (max-width: 991px) {

  .dropdown.cart-dropdown .cart-toggle {

    margin-right: 0 !important;

    transform: none !important;

    padding-right: 2px !important;

  }

}



/* ============================================================

   46. PREMIUM DISPLAY PAGE DARK PROMO HERO BANNER

   ============================================================ */

.display-page-banner {

  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;

  /* Rich Dark Luxury Indigo/Slate */

  padding: 60px 20px !important;

  border-radius: 16px !important;

  margin-bottom: 3rem !important;

  position: relative !important;

  overflow: hidden !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

}



/* Glowing background ambient circles */

.display-page-banner::before {

  content: "" !important;

  position: absolute !important;

  top: -50% !important;

  right: -10% !important;

  width: 320px !important;

  height: 320px !important;

  background: radial-gradient(circle, rgba(14, 165, 233, 0.12) 0%, transparent 70%) !important;

  pointer-events: none !important;

  z-index: 1 !important;

}



.display-page-banner::after {

  content: "" !important;

  position: absolute !important;

  bottom: -50% !important;

  left: -5% !important;

  width: 400px !important;

  height: 400px !important;

  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%) !important;

  pointer-events: none !important;

  z-index: 1 !important;

}



.display-page-banner .container {

  z-index: 2 !important;

}



.display-page-banner h3 {



  font-size: 2.8rem !important;

  font-weight: 800 !important;

  color: #ffffff !important;

  line-height: 1.25 !important;

  letter-spacing: 1.5px !important;

  margin-bottom: 2rem !important;

  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;

  text-transform: uppercase !important;

}



.display-page-banner .btn-dark {

  background-color: #ffffff !important;

  color: #0f172a !important;

  border: none !important;



  font-size: 1.25rem !important;

  font-weight: 700 !important;

  letter-spacing: 1.5px !important;

  padding: 14px 32px !important;

  border-radius: 8px !important;

  text-transform: uppercase !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;

  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;

  display: inline-flex !important;

  align-items: center !important;

}



.display-page-banner .btn-dark:hover {

  background-color: #0f172a !important;

  color: #ffffff !important;

  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.25) !important;

  transform: translateY(-2px) !important;

}



/* Glassmorphism coupon container */

.display-page-banner .coupon-sale-content {

  background: rgba(255, 255, 255, 0.03) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  border-radius: 12px !important;

  padding: 24px 30px !important;

  backdrop-filter: blur(12px) !important;

  -webkit-backdrop-filter: blur(12px) !important;

  display: inline-block !important;

  text-align: left !important;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;

}



.display-page-banner h4.coupon-sale-text {

  background: rgba(255, 255, 255, 0.08) !important;

  border: 1px solid rgba(255, 255, 255, 0.15) !important;

  border-radius: 6px !important;

  color: #ffffff !important;



  font-size: 1.15rem !important;

  font-weight: 600 !important;

  letter-spacing: 1.5px !important;

  padding: 6px 16px !important;

  display: inline-block !important;

  margin-bottom: 12px !important;

  text-transform: uppercase !important;

}



.display-page-banner h5.coupon-sale-text {

  font-size: 2.2rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.5px !important;

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  color: #ffffff !important;

  margin: 0 !important;

}



.display-page-banner h5.coupon-sale-text i {

  font-size: 1.2rem !important;

  font-weight: 500 !important;

  color: rgba(255, 255, 255, 0.5) !important;

  text-transform: uppercase !important;

  font-style: normal !important;

  letter-spacing: 1px !important;

}



.display-page-banner h5.coupon-sale-text b {

  color: #ffffff !important;

  /* Vivid Light Sky Blue accent for the discount value */

  font-size: 2.8rem !important;

  font-weight: 900 !important;

  letter-spacing: -0.5px !important;

}



/* Mobile responsive view adjustments */

@media (max-width: 575px) {

  .display-page-banner {

    padding: 40px 15px !important;

    text-align: center !important;

  }



  .display-page-banner h3 {

    font-size: 2.2rem !important;

    margin-bottom: 1.5rem !important;

  }



  .display-page-banner .coupon-sale-content {

    padding: 20px !important;

    margin-top: 1.5rem !important;

    display: block !important;

    max-width: 100% !important;

    text-align: center !important;

  }



  .display-page-banner h5.coupon-sale-text {

    justify-content: center !important;

  }

}



/* ============================================================

   47. PREMIUM MINIMAL CENTERED PAGE HEADER & BREADCRUMBS

   ============================================================ */

.premium-page-header {

  background-color: #f7f7f7 !important;

  /* Minimal light gray background */

  padding: 50px 0 !important;

  margin-bottom: 35px !important;

  border-bottom: 1px solid #eeeeee !important;

}



.premium-page-title {

  font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;

  font-size: 2.3rem !important;

  font-weight: 600 !important;

  color: #1a1a1a !important;

  margin: 0 0 10px 0 !important;

  letter-spacing: 0.6px !important;

  text-transform: uppercase !important;

  text-align: center !important;

}



.premium-breadcrumb-nav {

  margin: 0 !important;

  padding: 0 !important;

}



.premium-breadcrumb {

  display: flex !important;

  flex-wrap: wrap !important;

  list-style: none !important;

  padding: 0 !important;

  margin: 0 !important;

  font-size: 1.25rem !important;

  color: #888888 !important;



}



.premium-breadcrumb a {

  color: #888888 !important;

  transition: color 0.2s ease !important;

}



.premium-breadcrumb a:hover {

  color: #111111 !important;

  text-decoration: none !important;

}



.premium-breadcrumb-item {

  display: flex !important;

  align-items: center !important;

}



.premium-breadcrumb-item+.premium-breadcrumb-item::before {

  content: ">" !important;

  /* Separator as a greater-than sign as in screenshot */

  padding: 0 12px !important;

  color: #bbbbbb !important;

  font-size: 1.1rem !important;

}



.premium-breadcrumb-item.active {

  color: #111111 !important;

  font-weight: 500 !important;

}



@media (max-width: 575px) {

  .premium-page-header {

    padding: 30px 0 !important;

  }



  .premium-page-title {

    font-size: 1.65rem !important;

    letter-spacing: 0.4px !important;

  }

}



/* Premium Breadcrumb Back Link on PDP */

.lux-back-link {



  font-size: 1.25rem !important;

  font-weight: 600 !important;

  color: #111111 !important;

  text-transform: uppercase !important;

  letter-spacing: 1px !important;

  display: inline-flex !important;

  align-items: center !important;

  transition: opacity 0.2s ease, transform 0.2s ease !important;

}



.lux-back-link:hover {

  opacity: 0.7 !important;

  transform: translateX(-3px) !important;

  text-decoration: none !important;

  color: #111111 !important;

}



/* Scope additional PDP mobile bottom padding to prevent overlapping sticky bar */

@media (max-width: 991px) {

  .description-page .footer-bottom {

    padding-bottom: 0 !important;

  }

}



/* ============================================================

   7. SHOP DISPLAY PAGE BLACK & WHITE STYLING

   ============================================================ */

/* Buttons to be black and white */

.display-page .product-default .btn-add-cart {

  background-color: #111111 !important;

  color: #ffffff !important;

  border: 1px solid #111111 !important;



  font-size: 1.2rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.04em !important;

  text-transform: uppercase !important;

  transition: all var(--transition-fast) !important;

  height: 38px !important;

  line-height: 38px !important;

}



.display-page .product-default .btn-add-cart:hover {

  background-color: #ffffff !important;

  color: #111111 !important;

  border-color: #111111 !important;

}



.display-page .product-default .btn-add-cart i {

  color: #ffffff !important;

  transition: color var(--transition-fast) !important;

}



.display-page .product-default .btn-add-cart:hover i {

  color: #111111 !important;

}



/* Wishlist Button */

.display-page .product-default .btn-icon-wish {

  background-color: #ffffff !important;

  color: #111111 !important;

  border: 1px solid #e1e1e1 !important;

  border-radius: 50% !important;

  width: 36px !important;

  height: 36px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  opacity: 1 !important;

  visibility: visible !important;

  transition: all var(--transition-fast) !important;

  position: static !important;

}



.display-page .product-default .btn-icon-wish:hover {

  background-color: #111111 !important;

  color: #ffffff !important;

  border-color: #111111 !important;

}



.display-page .product-default .btn-icon-wish i {

  color: #111111 !important;

}



.display-page .product-default .btn-icon-wish:hover i {

  color: #ffffff !important;

}



/* Share Button */

.display-page .product-default .btn-share-grid-product {

  background-color: #ffffff !important;

  color: #111111 !important;

  border: 1px solid #e1e1e1 !important;

  border-radius: 50% !important;

  width: 36px !important;

  height: 36px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 1.4rem !important;

  transition: all var(--transition-fast) !important;

}



.display-page .product-default .btn-share-grid-product:hover {

  background-color: #111111 !important;

  color: #ffffff !important;

  border-color: #111111 !important;

}



.display-page .product-default .btn-share-grid-product i {

  color: #111111 !important;

}



.display-page .product-default .btn-share-grid-product:hover i {

  color: #ffffff !important;

}



/* Share Dropdown Items */

.display-page .share-dropdown-item:hover {

  background-color: #111111 !important;

  color: #ffffff !important;

  padding-left: 20px !important;

}



.display-page .share-dropdown-item:hover i {

  color: #ffffff !important;

}



/* Price block black/gray colors */

.display-page .product-default .price-box .new-price {

  color: #111111 !important;

  font-weight: 700 !important;

  font-size: 1.6rem !important;

}



.display-page .product-default .price-box .old-price {

  color: #4b5563 !important;

  font-weight: 500 !important;

  text-decoration: line-through !important;

  text-decoration-color: #6b7280 !important;

  opacity: 1 !important;

  font-size: 1.3rem !important;

}



/* Pure Red Discount Badges */

.display-page .product-default .price-box .product-label.label-sale {

  background-color: #ff0000 !important;

  color: #ffffff !important;

  font-weight: 700 !important;

  border-radius: 3px !important;

  font-size: 1.1rem !important;

  padding: 2px 7px !important;

}



/* Disable default hover image transition on shop page to support manual sliding */

.display-page .product-default figure img:first-child,

.display-page .product-default figure img:last-child,

.display-page .product-default:hover figure img:first-child,

.display-page .product-default:hover figure img:last-child {

  transition: opacity 0.35s ease !important;

}



/* Active slide states for manual slider (override theme defaults) */

.display-page .product-default figure img {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



/* neutralised legacy product-img-main relative position */



/* neutralised legacy manual slider active-slide rule */



/* Small left and right sliding arrows in the middle of the product image */

.display-page .product-default .slide-nav-btn {

  position: absolute !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  width: auto !important;

  height: auto !important;

  border-radius: 0 !important;

  background-color: transparent !important;

  background: transparent !important;

  border: none !important;

  color: #000000 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 1.4rem !important;

  cursor: pointer !important;

  z-index: 10 !important;

  opacity: 0 !important;

  visibility: hidden !important;

  transition: all 0.25s ease !important;

  box-shadow: none !important;

  padding: 4px 8px !important;

  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8), 0 0 2px rgba(0, 0, 0, 0.3) !important;

}



.display-page .product-default:hover .slide-nav-btn {

  opacity: 0.9 !important;

  visibility: visible !important;

}



.display-page .product-default .slide-nav-btn:hover,

.display-page .product-default .slide-nav-btn:focus,

.display-page .product-default .slide-nav-btn:active {

  background-color: transparent !important;

  background: transparent !important;

  color: #000000 !important;

  border-color: transparent !important;

  box-shadow: none !important;

  outline: none !important;

  opacity: 1 !important;

  transform: translateY(-50%) scale(1.25) !important;

}



.display-page .product-default .slide-nav-btn.prev-slide {

  left: 6px !important;

}



.display-page .product-default .slide-nav-btn.next-slide {

  right: 6px !important;

}



.display-page .product-default .slide-nav-btn:hover {

  background-color: #111111 !important;

  color: #ffffff !important;

  border-color: #111111 !important;

}



/* ============================================================

   42. ELEVATED POLO SHOWCASE SECTION

   ============================================================ */

.elevated-polo-showcase {

  background: linear-gradient(to right, #ffffff 40%, #f4f4f4 40%);

  padding: 0;

  /* Remove vertical padding to let image stretch full height */

  width: 100%;

  overflow: hidden;

  border-top: 1px solid rgba(0, 0, 0, 0.03);

  border-bottom: 1px solid rgba(0, 0, 0, 0.03);

  display: flex;

  align-items: stretch;

  min-height: 500px;

}



.showcase-container {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 40px;

  display: flex;

  width: 100%;

  align-items: stretch;

  /* Stretch children to full section height */

}



.showcase-left-side {

  width: 40%;

  display: flex;

  justify-content: flex-end;

  align-items: center;

  /* Center text vertically */

  padding-right: 70px;

  padding-top: 60px;

  padding-bottom: 60px;

}



.showcase-right-side {

  width: 60%;

  display: flex;

  align-items: stretch;

  /* Stretch to full height */

  justify-content: space-between;

  padding-left: 20px;

}



.showcase-center-panel {

  flex: 0 0 500px;

  display: flex;

  justify-content: center;

  align-items: flex-end;

  /* Align model image flush to bottom border */

  position: relative;

  overflow: visible;

  height: 100%;

}



.showcase-model-img {

  width: 100%;

  max-width: 500px;

  height: 500px !important;

  /* Force exact height matching the section height */

  display: block;

  object-fit: cover;

  /* Crop cleanly */

  object-position: center bottom;

  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}



.showcase-center-panel:hover .showcase-model-img {

  transform: scale(1.02);

  /* Slight zoom on hover */

}



.showcase-right-panel {

  flex: 1;

  display: flex;

  align-items: center;

  /* Center quote text vertically */

  justify-content: flex-start;

  padding-left: 50px;

  padding-top: 60px;

  padding-bottom: 60px;

}



.showcase-title-wrap {

  display: flex;

  flex-direction: column;

  text-align: right;

}



.showcase-sub {



  font-size: 5rem;

  font-weight: 400;

  letter-spacing: 0.12em;

  color: #1a1715;

  line-height: 1.1;

  text-transform: uppercase;

}



.showcase-main-title {



  font-size: 10.5rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  color: #C81E2A;

  line-height: 0.9;

  margin: 0;

  text-transform: uppercase;

}



.showcase-quote {



  font-size: 2.5rem;

  font-weight: 400;

  line-height: 1.5;

  letter-spacing: 0.08em;

  color: #222222;

  margin: 0;

}



/* Responsive styling */

@media (max-width: 991px) {

  .elevated-polo-showcase {

    background: #f4f4f4 !important;

    /* solid gray on mobile */

    padding: 50px 0 !important;

    min-height: auto !important;

  }



  .showcase-container {

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    gap: 30px !important;

    padding: 0 20px !important;

    margin: 0 auto !important;

    width: 100% !important;

  }



  .showcase-left-side,

  .showcase-right-side {

    width: 100% !important;

    padding: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: center !important;

    text-align: center !important;

    margin: 0 auto !important;

  }



  .showcase-right-side {

    gap: 30px !important;

  }



  .showcase-title-wrap {

    text-align: center !important;

    align-items: center !important;

    margin: 0 auto !important;

  }



  .showcase-center-panel {

    flex: none !important;

    width: 100% !important;

    max-width: 440px !important;

    height: auto !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    margin: 0 auto !important;

    text-align: center !important;

  }



  .showcase-model-img {

    width: 100% !important;

    max-width: 440px !important;

    height: auto !important;

    display: block !important;

    margin: 0 auto !important;

    object-fit: contain !important;

  }



  .showcase-right-panel {

    padding: 0 !important;

    width: 100% !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    text-align: center !important;

    margin: 0 auto !important;

  }



  .showcase-desc-wrap {

    text-align: center !important;

    margin: 0 auto !important;

  }



  .showcase-sub {

    font-size: 2.8rem !important;

  }



  .showcase-main-title {

    font-size: 5.5rem !important;

  }



  .showcase-quote {

    font-size: 1.6rem !important;

    line-height: 1.4 !important;

    text-align: center !important;

  }

}



@media (max-width: 575px) {

  .showcase-center-panel {

    max-width: 350px !important;

  }



  .showcase-model-img {

    max-width: 350px !important;

  }



  .showcase-sub {

    font-size: 2.4rem !important;

  }



  .showcase-main-title {

    font-size: 4.5rem !important;

  }



  .showcase-quote {

    font-size: 1.45rem !important;

  }

}



/* ============================================================

   8. ELEVATED BANNER & PDP TRANSPARENT HOVER HEADER STYLING

   ============================================================ */



/* Homepage banner height — Desktop (≥768px) */

@media (min-width: 768px) {



  /* 1. Lock the outer carousel height; keep overflow:visible for out-of-bounds dots */

  .home-slider {

    height: 800px !important;

  }



  /* 2. The stage-outer is the real clipping boundary — hide overflow here */

  .home-slider .owl-stage-outer {

    height: 800px !important;

    overflow: hidden !important;

  }



  /* 3. Make ALL internal OWL containers fill the same height */

  .home-slider .owl-stage,

  .home-slider .owl-item {

    height: 800px !important;

  }



  /* 4. Each slide fills the full height and clips overflow */

  .home-slider .home-slide {

    height: 800px !important;

    overflow: hidden !important;

    position: relative !important;

  }



  /* 5. The anchor wrapping the image must be a block filling the slide */

  .home-slider .home-slide>a {

    display: block !important;

    width: 100% !important;

    height: 800px !important;

    overflow: hidden !important;

    line-height: 0 !important;

    /* removes the inline-image descender gap */

    font-size: 0 !important;

    /* belt-and-suspenders for descender gap */

  }



  /* 6. The image itself fills 100% with cover, no bottom gap */

  .home-slider .home-slide img,

  .home-slider .slide-bg {

    display: block !important;

    /* block eliminates the descender gap */

    width: 100% !important;

    height: 800px !important;

    max-height: 800px !important;

    object-fit: cover !important;

    object-position: center top !important;

    vertical-align: top !important;

    margin: 0 !important;

    padding: 0 !important;

  }

}



/* ============================================================

   43. NEW VIBES SHOWCASE SECTION

   ============================================================ */

.new-vibes-showcase {

  background-color: #f4f4f4;

  padding-top: 20px !important;

  width: 100%;

  overflow: hidden;

  display: flex;

  align-items: center;

  min-height: 650px;

  border-top: 1px solid rgba(0, 0, 0, 0.03);

  border-bottom: 1px solid rgba(0, 0, 0, 0.03);

}



.vibes-container {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 40px;

  display: flex;

  width: 100%;

  align-items: center;

}



.vibes-left-side {

  width: 48%;

  padding-left: 20px;

  padding-right: 50px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

}



.vibes-sub {

  font-family: var(--font-body) !important;

  font-size: 1.35rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.3em !important;

  color: #1a1715 !important;

  text-transform: uppercase !important;

  margin-bottom: 2.2rem !important;

  display: inline-block !important;

}



.vibes-main-title {

  font-family: var(--font-body) !important;

  font-size: 6.8rem !important;

  font-weight: 900 !important;

  line-height: 0.94 !important;

  letter-spacing: -0.035em !important;

  color: #000000 !important;

  text-transform: uppercase !important;

  margin: 0 0 2.4rem 0 !important;

}



.vibes-desc {

  font-family: var(--font-body) !important;

  font-size: 1.65rem !important;

  font-weight: 500 !important;

  line-height: 1.6 !important;

  color: #334155 !important;

  margin: 0 0 3.6rem 0 !important;

  max-width: 520px !important;

}



.vibes-btn {

  font-family: var(--font-body) !important;

  background-color: #000000 !important;

  color: #ffffff !important;

  font-size: 1.15rem !important;

  font-weight: 800 !important;

  letter-spacing: 0.16em !important;

  text-transform: uppercase !important;

  padding: 1.5rem 3.8rem !important;

  border: 2px solid #000000 !important;

  cursor: pointer !important;

  transition: all 0.3s ease !important;

  display: inline-block !important;

  text-decoration: none !important;

}



.vibes-btn:hover {

  background-color: #ffffff !important;

  color: #000000 !important;

  border-color: #000000 !important;

  transform: translateY(-2px);

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);

}



.vibes-right-side {

  width: 55%;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}



.vibes-model-img {

  width: 100%;

  max-width: 700px;

  height: 650px !important;

  display: block;

  object-fit: cover;

  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}



.new-vibes-showcase:hover .vibes-model-img {

  transform: scale(1.02);

}



@media (max-width: 991px) {

  .new-vibes-showcase {

    padding: 30px 0;

    min-height: auto;

  }



  .vibes-container {

    flex-direction: column;

    padding: 0 15px;

  }



  .vibes-right-side {

    width: 100%;

    order: 1 !important;

    margin-bottom: 20px;

  }



  .vibes-left-side {

    width: 100%;

    padding: 35px 25px !important;

    text-align: center;

    align-items: center;

    margin-bottom: 0;

    order: 2 !important;

    background: #ffffff !important;

    border: 1px solid rgba(0, 0, 0, 0.06) !important;

    border-radius: 24px !important;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04) !important;

  }



  .vibes-sub {

    font-size: 0.85rem !important;

    letter-spacing: 3px !important;

    background: #000000 !important;

    padding: 6px 20px !important;

    border-radius: 50px !important;

    color: #ffffff !important;

    font-weight: 700 !important;

    margin-bottom: 16px !important;

    display: inline-block !important;

  }



  .vibes-main-title {

    font-size: 3.2rem !important;

    line-height: 0.95 !important;

    letter-spacing: -1px !important;

    color: #000000 !important;

    font-weight: 900 !important;

    margin-bottom: 14px !important;

  }



  .vibes-desc {

    font-size: 1.15rem !important;

    color: #111111 !important;

    font-weight: 500 !important;

    margin-bottom: 24px !important;

    line-height: 1.4 !important;

  }



  .vibes-desc br {

    display: none;

  }



  .vibes-btn {

    font-size: 0.85rem !important;

    padding: 14px 36px !important;

    letter-spacing: 2px !important;

    border-radius: 50px !important;

    width: auto !important;

    min-width: 240px !important;

    display: inline-block !important;

    text-align: center !important;

    background: #000000 !important;

    color: #ffffff !important;

    border: 1px solid #000000 !important;

    transition: all 0.3s ease !important;

  }



  .vibes-btn:hover {

    background: #ffffff !important;

    color: #000000 !important;

    border-color: #000000 !important;

    transform: translateY(-3px) !important;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;

  }



  .vibes-model-img {

    max-width: 100%;

    height: 380px !important;

    border-radius: 24px !important;

    object-fit: cover !important;

  }

}





/* Home Page Solid White Header (Consistent with display-page) */

.home-page .header:not(.fixed),

.home-page .header {

  background-color: #ffffff !important;

  margin-bottom: 0 !important;

  position: relative;

  z-index: 1000;

}



/* Icon alignment and badge positioning fix */

.header-right {

  display: flex !important;

  align-items: center !important;

}



.header-icon,

.cart-dropdown>a {

  display: flex !important;

  align-items: center !important;

  position: relative !important;

  height: auto !important;

}



.header-middle .badge-circle {

  top: auto !important;

  bottom: 0px !important;

  right: -5px !important;

}



/* ============================================================

   SMART HEADER & ICON ALIGNMENT FIX (LV STYLE)

   ============================================================ */



/* 1. Strict Icon Alignment */

.header-right .header-icon,

.header-right .cart-toggle {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  position: relative !important;

}



.cart-dropdown .dropdown-arrow::after {

  display: none !important;

  /* Remove arrow */

}



/* Pin badge to bottom right purely */

.header-middle .badge-circle {

  top: auto !important;

  bottom: -2px !important;

  right: -5px !important;

  transform: none !important;

}



.home-page .header {

  background-color: #ffffff !important;

  margin-bottom: 0 !important;

  position: relative;

  z-index: 1040;

}



.home-page .header-middle {

  background-color: #ffffff !important;

  width: 100%;

}



.home-page .header-middle:hover {

  background-color: #ffffff !important;

}



/* Scrolling down hides it */

.home-page .header-middle.smart-hide {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  z-index: 1040 !important;

  transform: none !important;

  pointer-events: none;

}



/* Scrolling up shows it with solid background */

.home-page .header-middle.smart-show {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  z-index: 1040 !important;

  transform: translate3d(0, 0, 0) !important;

  background-color: #ffffff !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;

  pointer-events: auto;

}



/* ============================================================

   TOP BAR HEIGHT & GAP FIX

   ============================================================ */



/* Increase height of the black top notice bar */

.top-notice {

  background-color: #000000 !important;

  color: #ffffff !important;

  min-height: 40px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 8px 0 !important;

  font-size: 0.85rem !important;

  position: relative !important;

  z-index: 1050 !important;

}



@media (max-width: 991px) {

  .top-notice {

    min-height: 36px !important;

    padding: 6px 0 !important;

    font-size: 0.78rem !important;

  }

}



.home-page .header {

  margin-bottom: 0 !important;

  border-top: none !important;

  padding-top: 0 !important;

}



.home-page .header-middle {

  margin-top: 0 !important;

  background-color: #ffffff !important;

}



/* FIX ICON ALIGNMENT AND BADGE POSITIONING */

.header-right .header-icon,

.header-right .cart-toggle {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  position: relative !important;

  width: 32px !important;

  height: 32px !important;

  margin: 0 10px !important;

  padding: 0 !important;

}



/* Override any 100% heights that cause the badge to drop low */

.cart-toggle {

  height: 32px !important;

}



.header-right i {

  font-size: 2.6rem !important;

  margin: 0 !important;

  padding: 0 !important;

}



/* Pin badge perfectly to the bottom right of the 32x32px square */

.header-middle .badge-circle {

  position: absolute !important;

  top: auto !important;

  bottom: -4px !important;

  right: -8px !important;

  transform: none !important;

  margin: 0 !important;

}



/* ============================================================

   BLACK & WHITE ALERTS + CLOSE ICON FIX

   ============================================================ */



/* Force all alerts to use a crisp black and white theme */

.alert {

  background-color: #ffffff !important;

  color: #1A1715 !important;

  border: 1px solid #e5e5e5 !important;

  border-left: 4px solid #1A1715 !important;

  border-radius: 0 !important;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;

}



/* Specifically target alert states to remove any red/green colors */

.alert-danger,

.alert-success,

.alert-warning,

.alert-info {

  background-color: #ffffff !important;

  color: #1A1715 !important;

  border-color: #e5e5e5 !important;

  border-left-color: #1A1715 !important;

}



/* Fix double close icon: hide the inner span HTML entity because the theme provides its own graphic */

.alert .close>span {

  display: none !important;

}



.alert .close {

  color: #1A1715 !important;

  opacity: 0.6 !important;

  text-shadow: none !important;

  outline: none !important;

  font-weight: normal !important;

}



.alert .close:hover {

  opacity: 1 !important;

  color: #000000 !important;

}









.top-notice-marquee-wrapper {

  overflow: hidden !important;

  white-space: nowrap !important;

  width: 100% !important;

  box-sizing: border-box !important;

  display: flex !important;

}



.marquee-track {

  display: flex !important;

  width: max-content !important;

  animation: topBarMarquee 35s linear infinite !important;

}



.marquee-track:hover {

  animation-play-state: paused !important;

}



.top-bar-marquee {

  display: flex !important;

  width: max-content !important;

  padding-left: 0 !important;

  padding-right: 120px !important;

  /* Premium spacing between marquee loops to prevent crowding */

  justify-content: flex-start !important;

  flex-shrink: 0 !important;

  font-weight: 600 !important;

  line-height: 2.2 !important;

  vertical-align: middle !important;

  font-size: 1rem !important;

}



@keyframes topBarMarquee {

  0% {

    transform: translate3d(0, 0, 0);

  }



  100% {

    transform: translate3d(-50%, 0, 0);

  }



  /* Moves exactly 120vw */

}



/* Force pure black/white for dark elements */

.btn-dark,

.bg-dark,

.btn-primary,

.header-top.bg-dark,

.footer.bg-dark,

.product-single-details .btn-dark,

.cart-dropdown .btn-dark,

.checkout-methods .btn-dark {

  background-color: #000000 !important;

  border-color: #000000 !important;

  color: #ffffff !important;

}



.btn-dark:hover,

.btn-dark:focus,

.btn-dark.focus,

.btn-primary:hover,

.btn-primary:focus,

.btn-primary.focus {

  background-color: #1a1a1a !important;

  border-color: #1a1a1a !important;

  color: #ffffff !important;

}



.heading-border:before,

.heading-border:after {

  border-top-color: #000000 !important;

}





/* Source: cart.php */

.checkout-progress-bar {

  list-style: none;

  padding: 0;

  margin-top: 2rem;

  margin-bottom: 2rem;

  font-size: 20px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: -0.5px;

}



.checkout-progress-bar li {

  margin: 0 15px;

  display: flex;

  align-items: center;

}



.checkout-progress-bar li a {

  color: #ccc;

}



.checkout-progress-bar li.active a {

  color: #222;

}



.checkout-progress-bar li:not(:last-child)::after {

  content: '\f105';



  font-weight: 900;

  color: #ccc;

  margin-left: 30px;

  font-size: 20px;

}



.product-image-container {

  position: relative;

  width: 80px;

  margin: 0 auto;

  display: block;

}





/* Source: checkout.php */

.checkout-progress-bar {

  list-style: none;

  padding: 0;

  margin-top: 2rem;

  margin-bottom: 2rem;

  font-size: 20px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: -0.5px;

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

}



.checkout-progress-bar li {

  margin: 0 15px;

  display: flex;

  align-items: center;

  background: transparent !important;

}



.checkout-progress-bar li a {

  color: #ccc !important;

  text-decoration: none !important;

}



.checkout-progress-bar li.active a {

  color: #222 !important;

}



.checkout-progress-bar li:not(:last-child)::after {

  content: '\f105';



  font-weight: 900;

  color: #ccc;

  margin-left: 30px;

  font-size: 20px;

}



.hover-opacity {

  transition: opacity 0.2s ease-in-out;

}



.hover-opacity:hover {

  opacity: 0.8;

}



.product-title-link {

  transition: color 0.2s ease-in-out;

}



.product-title-link:hover {

  color: #000000 !important;

}



.checkout-progress-bar,

.checkout-progress-bar li,

.checkout-progress-bar a,

.checkout-container,

.checkout-container h1,

.checkout-container h2,

.checkout-container h3,

.checkout-container h4,

.checkout-container h5,

.checkout-container h6,

.checkout-container p,

.checkout-container input,

.checkout-container select,

.checkout-container textarea,

.checkout-container button,

.checkout-container label,

.checkout-container span,

.checkout-container a,

.checkout-container strong,

.checkout-container small,

.checkout-container table,

.checkout-container th,

.checkout-container td {}





/* Source: checkout.php */

.review-text-container {

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  transition: all 0.4s ease-out;

}



.review-text-container.show {

  max-height: 100px;

  opacity: 1;

  margin-top: 10px;

}



.border-right-custom {

  border-right: 1px solid #dee2e6;

}



@media (max-width: 991.98px) {

  .border-right-custom {

    border-right: none;

    border-bottom: 1px solid #dee2e6;

    padding-bottom: 2rem;

    margin-bottom: 2rem;

  }

}



.order-id-link {

  display: inline-block;

  transition: all 0.25s ease-in-out;

}



.order-id-link:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important;

  border-color: #007bff !important;

  background-color: #f8f9fa !important;

}



.hover-opacity:hover {

  opacity: 0.85;

}



.product-title-link:hover {

  color: #000000 !important;

}



.animate-check {

  animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;

}



.animate-star {

  animation: pulse 2s infinite;

}



.animate-fade-in {

  animation: fadeIn 0.8s ease-in-out both;

}



@keyframes scaleIn {

  0% {

    transform: scale(0);

    opacity: 0;

  }



  100% {

    transform: scale(1);

    opacity: 1;

  }

}



@keyframes pulse {

  0% {

    transform: scale(1);

  }



  50% {

    transform: scale(1.1);

  }



  100% {

    transform: scale(1);

  }

}



@keyframes fadeIn {

  0% {

    opacity: 0;

    transform: translateY(10px);

  }



  100% {

    opacity: 1;

    transform: none;

  }

}





/* Source: checkout.php */

.billing-option {

  display: none;

}



.billing-option+label {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 18px;

  border: 2px solid #dee2e6;

  border-radius: 8px;

  cursor: pointer;

  font-size: 1.4rem;

  font-weight: 600;

  color: #555;

  background: #fff;

  transition: all 0.2s ease;

  margin-bottom: 10px;

}



.table-mini-cart .cart-subtotal td,

.table-mini-cart .cart-subtotal th {

  border-bottom: none !important;

}



.table-mini-cart .order-shipping td,

.table-mini-cart .order-shipping th {

  border-top: none !important;

}



.billing-option+label:hover {

  border-color: #000000;

  color: #000000;

}



.billing-option:checked+label {

  border-color: #000000;

  background: #f5f5f5;

  color: #000000;

}



.billing-option+label .radio-dot {

  width: 20px;

  height: 20px;

  border-radius: 50%;

  border: 2px solid #ccc;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s;

}



.billing-option:checked+label .radio-dot {

  border-color: #000000;

  background: #000000;

}



.billing-option:checked+label .radio-dot::after {

  content: '';

  width: 8px;

  height: 8px;

  background: #fff;

  border-radius: 50%;

}





/* Source: description.php */

/* ═══════════════════════════════════════════════════════════

   LUXURY PDP — STRATTENT

   Typography: Cormorant Garamond (Headings) + Montserrat (Body)

   Palette: #111111 · #666666 · #ECECEC · #FFFFFF

═══════════════════════════════════════════════════════════ */



html,

body {

  overflow-x: visible !important;

}



/* ── BASE RESET ─────────────────────────────────────── */

.lux-main-wrap *,

.lux-main-wrap *::before,

.lux-main-wrap *::after {

  box-sizing: border-box;

}



.lux-main-wrap {



  background: #ffffff;

  color: #111111;

  padding-top: 0 !important;

  margin-top: 0 !important;

}



.lux-main-wrap a {

  text-decoration: none;

}



.lux-main-wrap button {}



.lux-main-wrap p {

  margin: 0;

}



.lux-main-wrap ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



/* ── PAGE CONTAINER ─────────────────────────────────── */

.lux-page-container {

  max-width: 1440px;

  margin: 0 auto;

  padding: 0 20px;

}



@media (max-width: 1200px) {

  .lux-page-container {

    padding: 0 20px;

  }

}



@media (max-width: 768px) {

  .lux-page-container {

    padding: 0 15px;

  }

}



/* ── BREADCRUMB ─────────────────────────────────────── */

.lux-breadcrumb-bar {

  border-bottom: 1px solid #ECECEC;

  padding: 14px 0;

  background: #fff;

}



.lux-breadcrumb {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  font-size: 1.4rem;



}



.lux-breadcrumb a {

  color: #777777;

  text-decoration: none;

  transition: color .2s;

  font-weight: 400;

}



.lux-breadcrumb a:hover {

  color: #111111;

}



.lux-breadcrumb em {

  font-style: normal;

  color: #000000;

  font-weight: 600;

}



.lux-breadcrumb span {

  color: #777777;

  margin: 0 4px;

}



/* ── SECTION ────────────────────────────────────────── */

.lux-pdp-section {

  background: #ffffff;

  padding: 0 0 30px;

}



/* ── 3-COLUMN GRID ──────────────────────────────────── */

.lux-pdp-grid {

  display: grid;

  grid-template-columns: 84px minmax(440px, 580px) 1fr;

  column-gap: 36px;

  align-items: start;

  padding-top: 10px;

}



@media (max-width: 1200px) {

  .lux-pdp-grid {

    grid-template-columns: 76px minmax(360px, 480px) 1fr;

    column-gap: 20px;

  }

}



@media (max-width: 991px) {

  .lux-pdp-grid {

    grid-template-columns: 1fr;

  }

}



/* ── LEFT: THUMBNAIL RAIL (5-ITEM VISIBLE VERTICAL SCROLL) ──── */

.lux-thumb-rail-wrapper {

  position: -webkit-sticky;

  position: sticky;

  top: 90px;

  align-self: start;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 4px;

  z-index: 10;

}



.lux-thumb-rail {

  display: flex;

  flex-direction: column;

  gap: 8px;

  max-height: 600px;

  overflow-y: auto;

  overflow-x: hidden;

  padding: 2px;

  border-radius: 8px;

  overscroll-behavior: contain;

  overscroll-behavior-y: contain;

  touch-action: pan-y;

  -webkit-overflow-scrolling: touch;

  /* Hide scrollbar completely */

  scrollbar-width: none;

  -ms-overflow-style: none;

}



.lux-thumb-rail::-webkit-scrollbar {

  display: none;

  width: 0;

  height: 0;

}



/* TOP & BOTTOM SCROLL ARROW BUTTONS */

.thumb-scroll-btn {

  width: 32px;

  height: 28px;

  border: 1px solid #e2e8f0;

  background: #ffffff;

  color: #1e293b;

  border-radius: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 11px;

  cursor: pointer;

  transition: all 0.2s ease;

  box-shadow: 0 2px 5px rgba(0,0,0,0.06);

  z-index: 5;

  outline: none;

  padding: 0;

  margin: 2px 0;

}



.thumb-scroll-btn i {

  font-size: 11px;

  color: #1e293b;

  transition: transform 0.2s ease, color 0.2s ease;

}



.thumb-scroll-btn:hover {

  background: #0f172a;

  color: #ffffff;

  border-color: #0f172a;

  box-shadow: 0 4px 10px rgba(0,0,0,0.12);

}



.thumb-scroll-btn:hover i {

  color: #ffffff;

}



.thumb-scroll-btn:hover.thumb-scroll-up i {

  transform: translateY(-1px);

}



.thumb-scroll-btn:hover.thumb-scroll-down i {

  transform: translateY(1px);

}



.thumb-scroll-btn:disabled,

.thumb-scroll-btn.disabled {

  opacity: 0.25;

  cursor: not-allowed;

  transform: none !important;

  box-shadow: none !important;

  border-color: #f1f5f9 !important;

  background: #f8fafc !important;

  color: #94a3b8 !important;

}



.thumb-scroll-btn:disabled i,

.thumb-scroll-btn.disabled i {

  color: #94a3b8 !important;

}



.lux-thumb-item {

  width: 76px;

  height: 98px;

  border: none;

  border-radius: 8px;

  overflow: hidden;

  cursor: pointer;

  padding: 0;

  background: transparent !important;

  transition: border-color .2s, transform .2s, box-shadow .2s;

  display: block;

  position: relative;

  flex-shrink: 0;

  scroll-snap-align: start;

  scroll-snap-stop: always;

}



@media (max-width: 1200px) and (min-width: 992px) {

  .lux-thumb-rail {

    max-height: 420px;

  }

  .lux-thumb-item {

    width: 66px;

    height: 84px;

    border-radius: 6px;

  }

}



.lux-thumb-color-bg {

  display: none !important;

}



.lux-thumb-item img {

  position: relative;

  z-index: 2;

  width: 100% !important;

  height: 100% !important;

  object-fit: contain !important;

  object-position: center center !important;

  display: block;

  background: transparent !important;

  padding: 2px !important;

  box-sizing: border-box !important;

  transition: transform .28s ease;

}



.lux-thumb-item.colorized img {

  mix-blend-mode: multiply;

}



.lux-thumb-item:hover {

  border-color: #888;

  transform: translateY(-2px);

  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);

}



.lux-thumb-item:hover img {

  transform: scale(1.07);

}



.lux-thumb-item.active {

  border: none;

  box-shadow: none !important;

}



@media (max-width: 991px) {

  .lux-thumb-rail-wrapper {

    position: static;

    order: 2;

    margin-top: 16px;

    width: 100%;

  }



  .lux-thumb-rail {

    flex-direction: row;

    flex-wrap: nowrap;

    overflow-x: auto;

    overflow-y: hidden;

    max-height: none;

    max-width: 100%;

    gap: 8px;

    padding: 4px 0 8px 0;

  }



  .thumb-scroll-btn {

    display: none !important;

  }



  .lux-thumb-item {

    width: 68px;

    height: 68px;

  }

}



/* ── CENTER: GALLERY ────────────────────────────────── */

.lux-gallery-col {

  position: -webkit-sticky;

  position: sticky;

  top: 90px;

  align-self: start;

}



.lux-gallery-wrap {

  position: relative;

  background: transparent !important;

  border: none !important; box-shadow: none !important;

  border-radius: 12px !important;

  overflow: hidden;

  width: 100% !important;

  max-width: 580px !important;

  aspect-ratio: 4 / 5 !important;

  height: auto !important;

  max-height: 640px !important;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 !important;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);

}



/* ── GALLERY FLOATING NAV ARROWS (PREMIUM NO-BACKGROUND BOX) ───── */

.lux-gallery-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 25;

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  color: #111111;

  font-size: 22px;

  width: 44px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  opacity: 0.7;

  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;

  padding: 0;

  outline: none !important;

  -webkit-tap-highlight-color: transparent;

  user-select: none;

}



.lux-gallery-arrow:hover,

.lux-gallery-arrow:focus {

  opacity: 1;

  transform: translateY(-50%) scale(1.22);

  color: #000000;

  background: transparent !important;

  box-shadow: none !important;

}



.lux-gallery-arrow:active {

  transform: translateY(-50%) scale(1.05);

}



.lux-gallery-prev {

  left: 12px;

}



.lux-gallery-next {

  right: 12px;

}



@media (max-width: 991px) {

  .lux-gallery-arrow,

  #luxGalleryPrev,

  #luxGalleryNext {

    display: none !important;

  }

}



.lux-gallery-inner {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  cursor: zoom-in;

  position: relative;

  transform: none !important;

  transform-origin: center center;

}



#lux-main-img-color-bg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

  transition: background-color 0.3s ease;

  -webkit-mask-size: contain;

  mask-size: contain;

  -webkit-mask-repeat: no-repeat;

  mask-repeat: no-repeat;

  -webkit-mask-position: center;

  mask-position: center;

}



.lux-main-img {

  position: relative;

  z-index: 2;

  width: 100% !important;

  height: 100% !important;

  object-fit: contain !important;

  display: block;

  padding: 0;

  margin-top: 0 !important;

  transition: opacity .22s ease, transform .16s ease-out;

  transform-origin: center center;

}



.lux-main-img.colorized {

  mix-blend-mode: multiply;

}







.lux-discount-badge {

  position: absolute;

  top: 18px;

  left: 18px;

  z-index: 10;

  background: #111;

  color: #fff;



  font-size: 1.2rem;

  font-weight: 700;

  padding: 5px 14px;

  border-radius: 50px;

  letter-spacing: .5px;

}



@media (max-width: 991px) {

  .lux-thumb-rail {

    display: none;

  }



  .lux-gallery-col {

    position: static;

    order: 1;

  }



  .lux-gallery-wrap {

    aspect-ratio: 650 / 670 !important;

    width: 100% !important;

    height: auto !important;

    max-height: none !important;

  }



  .lux-main-img {

    padding: 0;

    width: 100% !important;

    height: auto !important;

    object-fit: contain !important;

  }



  



  .lux-slider-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: rgba(0, 0, 0, 0.5);

    color: #fff;

    border: none;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

  }



  .lux-slider-prev {

    left: 10px;

  }



  .lux-slider-next {

    right: 10px;

  }



  .lux-slider-btn:hover {

    background: rgba(0, 0, 0, 0.7);

  }



  .lux-gallery-col {

    position: static;

    order: 1;

  }



  .lux-gallery-wrap {

    aspect-ratio: 1 / 1.05 !important;

    width: 100% !important;

    height: auto !important;

    max-height: none !important;

    margin-top: 0 !important;

    padding-top: 5px !important;

    overflow: visible !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    background: transparent !important;

  }



  .lux-main-img {

    padding: 0;

    width: 100% !important;

    height: 100% !important;

    object-fit: contain !important;

    object-position: top center !important;

    margin-top: 0 !important;

  }



  

}



/* ── SWATCH COLOR OVERLAY ───────────────────────────── */

.lux-swatch-color-bg {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 1;

  transition: background-color 0.3s ease;

  -webkit-mask-image: url('assets/images/t-shirt-template.png');

  mask-image: url('assets/images/t-shirt-template.png');

  -webkit-mask-size: contain;

  mask-size: contain;

  -webkit-mask-repeat: no-repeat;

  mask-repeat: no-repeat;

  -webkit-mask-position: center;

  mask-position: center;

}



/* ── RIGHT: INFO PANEL ──────────────────────────────── */

.lux-info-panel {

  padding: 0;

  width: 100%;

}



@media (max-width: 991px) {

  .lux-info-panel {

    order: 3;

    padding-top: 28px;

  }

}



/* ── META ROW ───────────────────────────────────────── */

.lux-meta-row {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 14px;

  flex-wrap: wrap;

}



.lux-category-tag {

  font-size: 1.15rem;

  font-weight: 600;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: #111;

  background: #F2F2F2;

  padding: 5px 14px;

  border-radius: 4px;

}



.lux-sku {

  font-size: 1.3rem;

  color: #AAAAAA;

  letter-spacing: .3px;

}



/* ── TITLE ──────────────────────────────────────────── */

.lux-title {

  font-size: 2.6rem;

  font-weight: 600;

  color: #111111;

  line-height: 1.15;

  margin: 0 0 4px;

  letter-spacing: -.4px;

}



@media (max-width: 768px) {

  .lux-title {

    font-size: 2.0rem;

  }

}



/* ── RATINGS ────────────────────────────────────────── */

.lux-ratings-row {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

  margin-bottom: 4px;

}



.lux-stars {

  display: flex;

  gap: 3px;

  font-size: 1.35rem;

  color: #111;

}



.lux-stars .far.fa-star {

  color: #D4D4D4;

}



.lux-review-count {

  font-size: 1.25rem;

  color: #666;

  text-decoration: underline;

  text-underline-offset: 2px;

  transition: color .2s;

  cursor: pointer;

}



.lux-review-count:hover {

  color: #111;

}



.lux-view-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 1.2rem;

  color: #888;

}



.lux-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #AAAAAA;

  display: inline-block;

}



/* ── DIVIDER (ULTRA-COMPACT SPACING) ───────────────── */

.lux-divider {

  border: none;

  border-top: 1px solid #ECECEC;

  margin: 12px 0 !important;

}



.lux-option-group + .lux-divider {

  margin: 6px 0 !important;

}



/* ── PRICE ──────────────────────────────────────────── */

.lux-price-block {

  display: flex;

  align-items: baseline;

  gap: 10px;

  flex-wrap: wrap;

  margin-bottom: 2px;

}



.lux-price-now {

  font-size: 2.8rem;

  font-weight: 700;

  color: #111111;

  letter-spacing: -.5px;

  line-height: 1;

}



.lux-price-was {

  font-size: 1.7rem;

  color: #4b5563;

  font-weight: 500;

  text-decoration: line-through;

  text-decoration-color: #6b7280;

  opacity: 1;

}



.lux-discount-pill {

  background: #111111;

  color: #ffffff;

  font-size: 1.1rem;

  font-weight: 700;

  padding: 2px 10px;

  border-radius: 50px;

  letter-spacing: .4px;

}



.lux-savings {

  font-size: 1.25rem;

  color: #111;

  font-weight: 500;

  margin: 0 0 1px !important;

}



.lux-tax-note {

  font-size: 1.15rem;

  color: #888;

  margin: 0 0 1px !important;

}



/* ── SHORT DESCRIPTION ──────────────────────────────── */

.lux-short-desc {

  font-size: 1.35rem;

  line-height: 1.38;

  color: #444;

  margin: 1px 0;

}



/* ── OPTION LABEL ───────────────────────────────────── */

.lux-option-label {

  font-size: 1.25rem;

  font-weight: 500;

  color: #111;

  margin: 0 0 4px !important;

  letter-spacing: .2px;

}



.lux-option-label strong {

  font-weight: 700;

  color: #111;

}



.lux-option-group {

  margin-bottom: 2px;

}



/* ── COLOUR SWATCHES (ULTRA COMPACT) ────────────────── */

.lux-color-row {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  align-items: center;

}



.lux-color-card,

.color-swatch {

  width: 26px !important;

  height: 26px !important;

  border-radius: 6px !important;

  border: 1px solid rgba(0, 0, 0, 0.15) !important;

  cursor: pointer !important;

  padding: 0 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  position: relative !important;

  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;

  overflow: hidden !important;

  flex-shrink: 0 !important;

  box-shadow: none !important;

  filter: none !important;

  background-image: none !important;

}



.lux-color-card img,

.color-swatch img {

  display: none !important;

}



.lux-color-card:hover,

.color-swatch:hover {

  transform: scale(1.05) !important;

  border-color: rgba(0, 0, 0, 0.35) !important;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;

  filter: none !important;

}



.lux-color-card.active,

.color-swatch.active {

  transform: scale(1.05) !important;

  border: 2px solid #111111 !important;

  box-shadow: none !important;

  filter: none !important;

}



.lux-color-card.disabled,

.color-swatch.disabled {

  opacity: .25 !important;

  pointer-events: none !important;

}



.lux-color-card.more-trigger {

  background: #FAFAFA !important;

  border: 1px dashed #CCCCCC !important;

  border-radius: 6px !important;

  width: 26px !important;

  height: 26px !important;

  font-size: 0.75rem !important;

  font-weight: 600 !important;

  color: #333333 !important;

}



.lux-color-card.more-trigger:hover {

  transform: scale(1.08) !important;

  border-color: #555 !important;

}



.d-none-color {

  display: none !important;

}



/* ── SIZE CHIPS (ULTRA COMPACT) ────────────────────── */

.lux-size-row {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}



.lux-sswatch {

  min-width: 36px;

  height: 34px;

  padding: 0 10px;

  border: 1.5px solid #E0E0E0;

  background: #fff;

  color: #222;

  font-size: 1.2rem;

  font-weight: 600;

  cursor: pointer;

  border-radius: 6px;

  transition: border-color .16s, background .16s, color .16s, transform .16s;

  letter-spacing: .2px;

}



.lux-sswatch:hover {

  border-color: #111;

  background: #F6F6F6;

  transform: translateY(-1px);

}



.lux-sswatch.active {

  border-color: #111;

  background: #111;

  color: #fff;

}



.lux-sswatch.disabled {

  opacity: .3;

  pointer-events: none;

  text-decoration: line-through;

}



/* JS compatibility */

.size-swatch.active {

  border-color: #111 !important;

  background: #111 !important;

  color: #fff !important;

}



.size-swatch.disabled {

  opacity: .3 !important;

  pointer-events: none !important;

}



/* ── STOCK WARNING ──────────────────────────────────── */

.lux-stock-warn {

  font-size: 1.2rem;

  color: #c0392b;

  font-weight: 500;

  display: flex;

  align-items: center;

  gap: 6px;

  margin: -4px 0 6px !important;

}



/* ── QUANTITY (ULTRA COMPACT) ──────────────────────── */

.lux-qty-box {

  display: inline-flex;

  align-items: center;

  border: 1.5px solid #E0E0E0;

  border-radius: 6px;

  background: #fff;

  overflow: hidden;

  height: 34px;

}



.lux-q-btn {

  width: 32px;

  height: 100%;

  border: none;

  background: transparent;

  font-size: 1.4rem;

  color: #333;

  cursor: pointer;

  transition: background .14s, color .14s;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  line-height: 1;

}



.lux-q-btn:hover {

  background: #F0F0F0;

  color: #111;

}



.lux-q-input {

  width: 38px !important;

  height: 100% !important;

  border: none !important;

  border-left: 1.5px solid #EBEBEB !important;

  border-right: 1.5px solid #EBEBEB !important;

  text-align: center !important;

  font-size: 1.25rem !important;

  font-weight: 600 !important;

  color: #111111 !important;

  outline: none !important;

  background: #ffffff !important;

  background-color: #ffffff !important;

  padding: 0 !important;

  box-shadow: none !important;

}



/* Ensure all product/cart quantity inputs have no red/pink background shades */

.cart-qty-input,

.horizontal-quantity,

input.horizontal-quantity,

.product-single-qty .form-control {

  background: #ffffff !important;

  background-color: #ffffff !important;

  color: #111111 !important;

  border-color: #e0e0e0 !important;

  box-shadow: none !important;

}



/* ── ACTION BAR (QUANTITY + CTA BUTTONS INLINE ROW) ── */

.lux-action-bar {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

  margin-top: 8px !important;

  margin-bottom: 8px !important;

  width: 100% !important;

}



.lux-action-bar .lux-qty-box {

  flex-shrink: 0 !important;

  height: 44px !important;

}



.lux-action-bar .lux-cta-stack {

  flex: 1 !important;

  margin: 0 !important;

}



/* ── CTA BUTTONS (COMPACT HIGH-END) ────────────────── */

.lux-cta-stack {

  display: flex !important;

  flex-direction: row !important;

  gap: 0 !important;

  margin: 0 !important;

  width: 100% !important;

}



.lux-btn-primary {

  width: 50% !important;

  height: 44px !important;

  background: #ffffff !important;

  color: #111111 !important;

  border: 1.5px solid #111111 !important;

  border-radius: 0 !important;

  font-size: 1.25rem !important;

  font-weight: 600 !important;

  letter-spacing: 1.5px !important;

  text-transform: uppercase !important;

  cursor: pointer !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  transition: background .22s ease, color .22s ease, transform .16s ease !important;

}



.lux-btn-primary:hover {

  background: #111111 !important;

  color: #ffffff !important;

}



.lux-btn-primary:disabled {

  background: #ECECEC !important;

  color: #888888 !important;

  border-color: #ECECEC !important;

  cursor: not-allowed !important;

  transform: none !important;

}



.lux-btn-secondary {

  width: 50% !important;

  height: 44px !important;

  background: #111111 !important;

  color: #ffffff !important;

  border: 1.5px solid #111111 !important;

  border-radius: 0 !important;

  font-size: 1.25rem !important;

  font-weight: 600 !important;

  letter-spacing: 1.5px !important;

  text-transform: uppercase !important;

  cursor: pointer !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  transition: background .22s ease, color .22s ease !important;

}



.lux-btn-secondary:hover {

  background: #ffffff !important;

  color: #111111 !important;

  border-color: #111111 !important;

}



.lux-size-guide-link {

  transition: color .2s ease !important;

}



.lux-size-guide-link:hover {

  color: #666666 !important;

  text-decoration: underline !important;

}



.lux-purchase-form {

  margin: 0 !important;

  padding: 0 !important;

}



/* ── EXTRAS ROW (COMPACT) ──────────────────────────── */

.lux-extras-row {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-top: 8px !important;

  margin-bottom: 0 !important;

}



.lux-purchase-form + .lux-divider {

  margin-top: 6px !important;

  margin-bottom: 10px !important;

}



.lux-extra-btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;



  font-size: 1.25rem;

  font-weight: 500;

  color: #666;

  cursor: pointer;

  border: none;

  background: none;

  padding: 0;

  transition: color .2s;

}



.lux-extra-btn:hover {

  color: #111;

}



/* ── SHARE DROPDOWN ─────────────────────────────────── */

.lux-share-menu {

  position: absolute;

  z-index: 2000;

  min-width: 170px;

  background: #fff;

  border: 1px solid #EBEBEB;

  border-radius: 10px;

  box-shadow: 0 12px 32px rgba(0, 0, 0, .08);

  padding: 6px 0;

  animation: luxFadeUp .2s ease;

  bottom: calc(100% + 8px);

  left: 0;

}



.lux-share-menu.d-none {

  display: none !important;

}



@keyframes luxFadeUp {

  from {

    opacity: 0;

    transform: translateY(6px);

  }



  to {

    opacity: 1;

    transform: none;

  }

}



.lux-share-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 18px;



  font-size: 1.3rem;

  color: #444;

  text-decoration: none !important;

  transition: background .12s, color .12s, padding-left .12s;

  cursor: pointer;

  white-space: nowrap;

}



.lux-share-item:hover {

  background: #F5F5F5;

  color: #111;

  padding-left: 22px;

}



.lux-share-item i {

  font-size: 1.3rem;

  width: 16px;

}



.lux-share-item.btn-share-whatsapp:hover i {

  color: #25D366;

}



.lux-share-item.btn-share-gmail:hover i {

  color: #EA4335;

}



/* ── DELIVERY PINCODE ───────────────────────────────── */

.pdp-delivery-return-widget {

  margin-top: 15px;

  margin-bottom: 15px;

}

.pdp-dr-title {

  font-size: 1.25rem !important;

  font-weight: 700 !important;

  color: #111111 !important;

  margin-bottom: 10px;

  letter-spacing: 0.2px;

  font-family: 'Roboto Condensed', sans-serif !important;

  text-transform: none;

}

.pdp-pincode-pill-box {

  display: flex;

  align-items: center;

  justify-content: space-between;

  background-color: #ffffff;

  border-radius: 8px;

  padding: 9px 14px;

  min-height: 44px;

  border: 1.5px solid #cbd5e1;

  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);

}

.pdp-pincode-pill-box:hover {

  border-color: #94a3b8;

}

.pdp-pincode-pill-box:focus-within {

  border-color: #111111;

  background-color: #ffffff;

  box-shadow: 0 0 0 2.5px rgba(17, 17, 17, 0.08);

}

.pdp-pin-input {

  border: none !important;

  background: transparent !important;

  outline: none !important;

  font-size: 1.2rem !important;

  color: #111111 !important;

  font-weight: 600 !important;

  font-family: 'Roboto Condensed', sans-serif !important;

  width: 55% !important;

  padding: 0 !important;

  margin: 0 !important;

  box-shadow: none !important;

  height: auto !important;

  letter-spacing: 0.3px;

}

.pdp-pin-input::placeholder {

  color: #64748b;

  font-weight: 500;

  font-size: 1.15rem;

}

.pdp-pin-action-btn {

  border: none !important;

  background: transparent !important;

  color: #111111 !important;

  font-size: 1.15rem !important;

  font-weight: 600 !important;

  font-family: 'Roboto Condensed', sans-serif !important;

  cursor: pointer;

  padding: 0 !important;

  margin: 0 !important;

  transition: color 0.2s ease, opacity 0.2s ease;

  white-space: nowrap;

  height: auto !important;

  text-decoration: underline;

  text-underline-offset: 2px;

  letter-spacing: 0.2px;

}

.pdp-pin-action-btn:hover {

  color: #000000 !important;

  opacity: 0.8;

}

.pdp-dr-features {

  display: flex;

  flex-direction: column;

  gap: 16px;

  margin-top: 20px;

}

.pdp-dr-feature-item {

  display: flex;

  align-items: center;

  gap: 14px;

}

.pdp-dr-icon-badge {

  flex-shrink: 0;

  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.pdp-dr-text {

  display: flex;

  flex-direction: column;

  font-size: 0.92rem;

  line-height: 1.35;

}

.pdp-dr-main {

  font-weight: 600;

  color: #111111;

}

.pdp-dr-link {

  color: #111111;

  font-size: 0.85rem;

  font-weight: 500;

  text-decoration: underline;

  margin-top: 2px;

  transition: opacity 0.2s ease;

}

.pdp-dr-link:hover {

  color: #000000;

  opacity: 0.75;

}



.lux-pincode-row {

  display: flex;

  gap: 10px;

  align-items: center;

}



.lux-pin-input {

  flex: 1;

  height: 38px;

  border: 1.5px solid #E0E0E0;

  border-radius: 6px;

  padding: 0 14px;

  font-size: 1.25rem;

  color: #111;

  outline: none;

  transition: border-color .2s;

  background: #fff;

}



.lux-pin-input:focus {

  border-color: #111;

}



.lux-pin-btn {

  height: 38px;

  padding: 0 18px;

  background: #fff;

  border: 1.5px solid #111;

  border-radius: 6px;

  font-size: 1.2rem;

  font-weight: 600;

  cursor: pointer;

  color: #111;

  white-space: nowrap;

  transition: background .2s, color .2s;

}



.lux-pin-btn:hover {

  background: #111;

  color: #fff;

}



.lux-pin-result {

  font-size: 1.2rem;

  color: #555;

  margin: 0 !important;

  min-height: 0;

}



.lux-pin-result:not(:empty) {

  margin-top: 6px !important;

}



/* ── MODERN LUXURY HIGHLIGHTS SPEC GRID ────────────────── */

.lux-highlights-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 10px;

}



.lux-highlights-badge {

  font-size: 10px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.8px;

  background: #f1f5f9;

  color: #475569;

  padding: 3px 8px;

  border-radius: 12px;

}



.lux-highlights-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

}



.lux-hl-card {

  display: flex;

  align-items: center;

  gap: 10px;

  background: #fbfbfc;

  border: 1px solid #ebecef;

  border-radius: 10px;

  padding: 10px 12px;

  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);

}



.lux-hl-card:hover {

  background: #ffffff;

  border-color: #111111;

  transform: translateY(-2px);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);

}



.lux-hl-card-wide {

  grid-column: span 2;

  background: linear-gradient(135deg, #fbfbfc 0%, #f8fafc 100%);

}



.lux-hl-icon {

  width: 34px;

  height: 34px;

  border-radius: 8px;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #111111;

  flex-shrink: 0;

  transition: all 0.2s ease;

}



.lux-hl-card:hover .lux-hl-icon {

  background: #111111;

  color: #ffffff;

  border-color: #111111;

  transform: scale(1.05);

}



.lux-hl-content {

  display: flex;

  flex-direction: column;

  min-width: 0;

}



.lux-hl-tag {

  font-size: 9.5px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.6px;

  color: #94a3b8;

  line-height: 1;

  margin-bottom: 3px;

}



.lux-hl-title {

  font-size: 13px;

  font-weight: 700;

  color: #1e293b;

  margin: 0;

  line-height: 1.2;

  font-family: 'Roboto Condensed', sans-serif;

  letter-spacing: 0.2px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



@media (max-width: 480px) {

  .lux-highlights-grid {

    gap: 8px;

  }

  .lux-hl-card {

    padding: 8px 10px;

    gap: 8px;

  }

  .lux-hl-icon {

    width: 30px;

    height: 30px;

  }

  .lux-hl-icon svg {

    width: 15px;

    height: 15px;

  }

  .lux-hl-tag {

    font-size: 8.5px;

  }

  .lux-hl-title {

    font-size: 12px;

  }

}



.lux-highlights-list {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.lux-highlights-list li {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 1.25rem;

  color: #444;

}



.lux-highlights-list li .fa-check {

  font-size: 1.05rem;

  color: #111;

  flex-shrink: 0;

}



/* ── TRUST ROW ──────────────────────────────────────── */

.lux-trust-row {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  border: 1px solid #ECECEC;

  border-radius: 8px;

  overflow: hidden;

}



.lux-trust-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  gap: 6px;

  padding: 10px 4px 8px 4px;

  border-right: 1px solid #ECECEC;

  text-align: center;

}



.lux-trust-item:last-child {

  border-right: none;

}



.lux-trust-item i {

  font-size: 1.4rem;

  color: #111;

  min-height: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.lux-trust-item span {

  font-size: 1.0rem;

  font-weight: 500;

  color: #444;

  line-height: 1.25;

  word-break: normal;

  display: block;

}



@media (max-width: 576px) {

  .lux-trust-item {

    padding: 8px 2px;

    gap: 4px;

  }

  .lux-trust-item i {

    font-size: 1.2rem;

    min-height: 18px;

  }

  .lux-trust-item span {

    font-size: 0.85rem;

    line-height: 1.15;

  }

}



/* ── ACCORDION ──────────────────────────────────────── */

.lux-accordion {

  border-top: none;

}



.lux-acc-item {

  border-bottom: 1px solid #ECECEC;

}



.lux-acc-trigger {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: none;

  border: none;

  padding: 12px 0;

  cursor: pointer;

  font-size: 1.35rem;

  font-weight: 500;

  color: #111;

  text-align: left;

  transition: color .2s;

}



.lux-acc-trigger:hover {

  color: #333;

}



.lux-acc-icon {

  transition: transform .28s ease;

  font-size: 1.1rem;

  color: #999;

  flex-shrink: 0;

}



.lux-acc-body {

  max-height: 0;

  overflow: hidden;

  transition: max-height .38s ease;

}



.lux-acc-body.open {

  max-height: 3000px;

}



.lux-acc-content {

  padding: 0 0 20px;

}



.lux-acc-content>p {



  font-size: 1.35rem;

  line-height: 1.75;

  color: #555;

}



/* ── PRODUCT DETAILS TABLE ──────────────────────────── */

.lux-info-table {

  width: 100%;

  border-collapse: collapse;

}



.lux-info-table thead th {



  font-size: 1.2rem;

  font-weight: 600;

  color: #555;

  text-align: left;

  padding: 10px 8px 10px 0;

  border-bottom: 2px solid #ECECEC;

}



.lux-info-table th {



  font-size: 1.25rem;

  font-weight: 500;

  color: #888;

  text-align: left;

  padding: 10px 0;

  width: 40%;

}



.lux-info-table td {



  font-size: 1.3rem;

  color: #111;

  padding: 10px 0;

}



.lux-info-table tr {

  border-bottom: 1px solid #F2F2F2;

}



.lux-info-table thead tr {

  border-bottom: 2px solid #ECECEC;

}



.lux-size-table-wrap {

  overflow-x: auto;

}



/* ── CARE LIST ──────────────────────────────────────── */

.lux-care-list {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.lux-care-list li {



  font-size: 1.3rem;

  color: #555;

  padding-left: 16px;

  position: relative;

}



.lux-care-list li::before {

  content: '–';

  position: absolute;

  left: 0;

  color: #AAA;

}



/* ── REVIEWS ────────────────────────────────────────── */

.lux-review-item {

  display: flex;

  gap: 16px;

  padding: 20px 0;

  border-bottom: 1px solid #F2F2F2;

}



.lux-review-item:last-of-type {

  border-bottom: none;

}



.lux-review-avatar {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: #1A1715;

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;



  font-size: 1.6rem;

  font-weight: 600;

  flex-shrink: 0;

}



.lux-review-body {

  flex: 1;

}



.lux-review-header {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 6px;

  flex-wrap: wrap;

}



.lux-review-header strong {



  font-size: 1.3rem;

  color: #111;

}



.lux-review-date {

  font-size: 1.2rem;

  color: #AAAAAA;

}



.lux-review-stars {

  margin-bottom: 8px;

}



.lux-review-text {



  font-size: 1.3rem;

  line-height: 1.7;

  color: #444;

}



.lux-store-reply {

  margin-top: 14px;

  background: #FAFAFA;

  border: 1px solid #ECECEC;

  border-radius: 8px;

  padding: 14px;

}



.lux-store-badge {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  background: #1A1715;

  color: #fff;

  font-size: 1rem;

  font-weight: 600;

  padding: 3px 10px;

  border-radius: 4px;

  text-transform: uppercase;

  letter-spacing: .5px;

  margin-bottom: 7px;

}



.lux-store-reply strong {

  display: block;



  font-size: 1.2rem;

  color: #222;

  margin-bottom: 6px;

}



.lux-store-reply p {



  font-size: 1.25rem;

  color: #555;

  font-style: italic;

  margin: 0 !important;

}



.lux-no-reviews {



  font-size: 1.3rem;

  color: #888;

  padding: 12px 0;

}



.lux-login-prompt {

  font-size: 1.3rem;

  color: #666;

  margin: 12px 0 !important;

}



.lux-login-prompt a {

  color: #111;

  font-weight: 600;

  text-decoration: underline;

}



/* ── WRITE REVIEW ───────────────────────────────────── */

.lux-write-review {

  margin-top: 24px;

  border-top: 1px solid #F0F0F0;

  padding-top: 20px;

}



.lux-review-form {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.lux-review-select,

.lux-review-textarea {

  border: 1.5px solid #E0E0E0;

  border-radius: 6px;

  padding: 10px 14px;



  font-size: 1.3rem;

  color: #111;

  outline: none;

  transition: border-color .2s;

  background: #fff;

  width: 100%;

}



.lux-review-select:focus,

.lux-review-textarea:focus {

  border-color: #111;

}



.lux-review-textarea {

  resize: vertical;

}



/* ── DESCRIPTION CONTENT (from renderParsedDescription) */

.pdp-desc-paragraphs {

  margin-bottom: 10px;

}



.pdp-desc-p {



  font-size: 1.35rem;

  line-height: 1.75;

  color: #555;

  margin-bottom: 10px !important;

}



.pdp-desc-features-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin-top: 14px;

}



@media (max-width: 576px) {

  .pdp-desc-features-grid {

    grid-template-columns: 1fr;

  }

}



.pdp-desc-features-ul {

  list-style: none !important;

  padding-left: 0 !important;

  margin: 0 !important;

}



.pdp-desc-features-li {

  position: relative !important;

  padding-left: 22px !important;



  font-size: 1.3rem;

  line-height: 1.8;

  color: #555;

  margin-bottom: 6px;

}



.pdp-desc-features-li::before {

  content: '–';

  position: absolute !important;

  left: 0 !important;

  color: #AAA;

}



/* ── MOBILE STICKY BAR ──────────────────────────────── */

.lux-mobile-bar {

  display: none;

}



@media (max-width: 767px) {

  body {

    padding-bottom: 0 !important;

  }



  .lux-mobile-bar {

    position: fixed;

    bottom: 0 !important;

    left: 0;

    width: 100%;

    background: rgba(255, 255, 255, .97);

    border-top: 1px solid #ECECEC;

    padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)) !important;

    z-index: 9998;

    display: flex;

    align-items: center;

    gap: 14px;

    box-shadow: 0 -4px 20px rgba(0, 0, 0, .07);

  }



  .lux-mobile-price {



    font-size: 1.8rem;

    font-weight: 700;

    color: #111;

    white-space: nowrap;

    flex-shrink: 0;

  }



  .lux-mobile-cart-btn {

    flex: 1 !important;

    width: auto !important;

    height: 48px !important;

    font-size: 1.2rem !important;

    background: #111111 !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 0 !important;

  }



  .lux-mobile-cart-btn:hover {

    background: #2a2a2a !important;

    color: #ffffff !important;

  }



  .lux-cta-stack {

    display: none !important;

  }

  

  body.description-page {

    padding-bottom: 0 !important;

  }

}



/* Footer bottom gap fix - body/html bg = black below footer */

html, body {

  background-color: #000000 !important;

}

.page-wrapper {

  background-color: #ffffff !important;

  margin-bottom: 0 !important;

  padding-bottom: 0 !important;

}

footer, .footer {

  margin-bottom: 0 !important;

  padding-bottom: 0 !important;

}

.footer-bottom {

  padding-bottom: 0 !important;

  margin-bottom: 0 !important;

  background-color: #000000 !important;

}



/* Source: display-page.php */

.share-dropdown-wrapper {

  position: relative;

  display: inline-block;

}



.share-dropdown-menu {

  position: absolute;

  bottom: calc(100% + 8px);

  right: 0;

  z-index: 1000;

  min-width: 165px;

  background-color: #ffffff;

  border: 1px solid #e7e7e7;

  border-radius: 8px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

  padding: 6px 0;

  margin: 0;

  list-style: none;

  transform-origin: bottom right;

  animation: dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);

}



.share-dropdown-menu.d-none {

  display: none !important;

}



@keyframes dropdownFadeIn {

  from {

    opacity: 0;

    transform: scale(0.95) translateY(5px);

  }



  to {

    opacity: 1;

    transform: scale(1) translateY(0);

  }

}



.share-dropdown-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 16px;

  color: #444;

  font-size: 13px;

  font-weight: 500;



  text-decoration: none !important;

  transition: all 0.2s ease;

  cursor: pointer;

  white-space: nowrap;

}



.share-dropdown-item:hover {

  background-color: #f8f9fa;

  color: #000000;

  padding-left: 20px;

}



.share-dropdown-item i {

  font-size: 1.4rem !important;

  width: 16px;

  text-align: center;

  color: #777;

  transition: color 0.2s ease;

}



.share-dropdown-item:hover i {

  color: #000000;

}



.share-dropdown-item.btn-copy-link:hover i {

  color: #007bff;

}



.share-dropdown-item.btn-share-whatsapp:hover i {

  color: #25D366;

}



.share-dropdown-item.btn-share-gmail:hover i {

  color: #EA4335;

}



.share-dropdown-item.btn-share-message:hover i {

  color: #107c41;

}





/* Source: header.php */

.strattent-search-dropdown-container {

  background: #ffffff !important;

  border-radius: 0 0 8px 8px !important;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;

  overflow: hidden !important;

  position: absolute !important;

  width: 100% !important;

  z-index: 9999 !important;

  top: 100% !important;

  left: 0 !important;

  border: 1px solid #eaeaea !important;

  border-top: none !important;

}



.user-dropdown-menu {

  display: none;

  position: absolute;

  top: 100%;

  right: 0;

  background: #fff;

  padding: 8px 15px;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

  z-index: 1000;

  min-width: 130px;

  text-align: left;

  margin-top: 5px;

  border-radius: 3px;

}



.user-dropdown-menu::before {

  content: '';

  position: absolute;

  top: -10px;

  left: 0;

  width: 100%;

  height: 10px;

  background: transparent;

}



.user-dropdown-container:hover .user-dropdown-menu {

  display: block;

}



.header-middle .header-contact .user-dropdown-menu a {

  display: block !important;

  font-size: 1.3rem !important;

  font-weight: 400 !important;

  color: #444 !important;

  padding: 6px 0 !important;

  text-decoration: none !important;

  text-transform: capitalize !important;

  letter-spacing: 0 !important;

}



.header-middle .header-contact .user-dropdown-menu a:hover {

  color: #000000 !important;

  text-decoration: none !important;

}



.user-dropdown-container {

  position: relative;

  display: inline-flex !important;

  align-items: center !important;

  vertical-align: middle !important;

}



.user-dropdown-trigger {

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  justify-content: flex-start !important;

  gap: 8px !important;

  text-decoration: none !important;

  cursor: pointer !important;

  color: #1A1715 !important;

}



.user-dropdown-trigger:hover {

  text-decoration: none !important;

  color: #000000 !important;

}



.user-dropdown-trigger::after {

  content: "\f107" !important;



  font-weight: 900 !important;

  font-size: 1.1rem !important;

  margin-left: 5px !important;

  color: #1A1715 !important;

  opacity: 0.85 !important;

  display: inline-block !important;

  vertical-align: middle !important;

}



.user-info-text {

  text-align: left !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  align-items: flex-start !important;

  line-height: 1.2 !important;

  text-transform: none !important;

}



.user-info-welcome {

  font-size: 1.0rem !important;

  opacity: 0.82 !important;

  text-transform: uppercase !important;

  letter-spacing: 0.05em !important;

  font-weight: 500 !important;



  display: block !important;

  color: #777777 !important;

}



.user-info-name {

  font-size: 1.35rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.01em !important;



  display: block !important;

  color: #1A1715 !important;

  text-transform: none !important;

}





/* Source: index.php */

/* Home slider margin and dots visibility fixes */

.home-slider {

  margin-bottom: 45px !important;

  overflow: visible !important;

}



.home-slider .owl-dots {

  position: absolute !important;

  bottom: -35px !important;

  left: 0 !important;

  width: 100% !important;

  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

  z-index: 15 !important;

  height: 24px !important;

  overflow: visible !important;

}



.home-slider .owl-dots .owl-dot {

  background: transparent !important;

  border: none !important;

  padding: 0 !important;

  margin: 0 6px !important;

  outline: none !important;

  box-shadow: none !important;

}



.home-slider .owl-dots .owl-dot span {

  display: block !important;

  background: #d6d6d6 !important;

  border: none !important;

  width: 10px !important;

  height: 10px !important;

  margin: 0 !important;

  border-radius: 50% !important;

  transition: all 0.2s ease !important;

}



.home-slider .owl-dots .owl-dot.active span {

  background: #000000 !important;

}





/* Source: my-orders.php */

.account-menu-list .list-group-item {

  border-left: none;

  border-right: none;

  border-top: 1px solid #f4f4f4;

  font-size: 1.4rem;

  font-weight: 500;

  color: #555;

  padding: 14px 20px;

  transition: all 0.3s ease;

}



.account-menu-list .list-group-item:hover {

  background-color: #f8f9fa;

  color: #000000;

  padding-left: 25px;

}



.account-menu-list .list-group-item.active-profile-menu {

  background-color: #ffffff !important;

  color: #000000 !important;

  font-weight: 700 !important;

  border-left: 4px solid #000000 !important;

  padding-left: 21px;

}





/* Source: my-profile.php */

.account-menu-list .list-group-item {

  border-left: none;

  border-right: none;

  border-top: 1px solid #f4f4f4;

  font-size: 1.4rem;

  font-weight: 500;

  color: #555;

  padding: 14px 20px;

  transition: all 0.3s ease;

}



.account-menu-list .list-group-item:hover {

  background-color: #f8f9fa;

  color: #000000;

  padding-left: 25px;

}



.account-menu-list .list-group-item.active-profile-menu {

  background-color: #ffffff !important;

  color: #000000 !important;

  font-weight: 700 !important;

  border-left: 4px solid #000000 !important;

  padding-left: 21px;

}





/* Source: my-reviews.php */

.account-menu-list .list-group-item {

  border-left: none;

  border-right: none;

  border-top: 1px solid #f4f4f4;

  font-size: 1.4rem;

  font-weight: 500;

  color: #555;

  padding: 14px 20px;

  transition: all 0.3s ease;

}



.account-menu-list .list-group-item:hover {

  background-color: #f8f9fa;

  color: #000000;

  padding-left: 25px;

}



.account-menu-list .list-group-item.active-profile-menu {

  background-color: #ffffff !important;

  color: #000000 !important;

  font-weight: 700 !important;

  border-left: 4px solid #000000 !important;

  padding-left: 21px;

}



.hover-red {

  transition: color 0.2s;

}



.hover-red:hover {

  color: #000000 !important;

}



#reviewTabs .nav-link {

  color: #555;

  background: transparent;

  border-color: #ddd;

}



#reviewTabs .nav-link.active {

  color: #fff !important;

  background-color: #000000 !important;

  border-color: #000000 !important;

}



.review-card {

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.review-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;

}





/* Source: settings.php */

.account-menu-list .list-group-item {

  border-left: none;

  border-right: none;

  border-top: 1px solid #f4f4f4;

  font-size: 1.4rem;

  font-weight: 500;

  color: #555;

  padding: 14px 20px;

  transition: all 0.3s ease;

}



.account-menu-list .list-group-item:hover {

  background-color: #f8f9fa;

  color: #000000;

  padding-left: 25px;

}



.account-menu-list .list-group-item.active-profile-menu {

  background-color: #ffffff !important;

  color: #000000 !important;

  font-weight: 700 !important;

  border-left: 4px solid #000000 !important;

  padding-left: 21px;

}





/* Source: wishlist.php */

.table-wishlist .btn-quickview {

  padding-left: 0 !important;

}





/* Source: edit_product.php */

/* ── ADMIN EDIT PRODUCT — Clean B&W+Red Theme ──────── */

:root {

  --adm-black: #111111;

  --adm-dark: #000000;

  --adm-gray: #6b7280;

  --adm-lgray: #dee2e6;

  --adm-bg: #f4f5f7;

  --adm-white: #ffffff;

  --adm-red: #111111;

  --adm-red-lt: #f4f5f7;

  /* strictly black and white theme */

}



.admin-main {

  padding: 30px 20px;

}



.section-card {

  background: var(--adm-white);

  border-radius: 12px;

  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);

  border: 1px solid var(--adm-lgray);

  margin-bottom: 28px;

  overflow: hidden;

}



.section-card .section-header,

.var-section-card .var-dark-header {

  background: #000000 !important;

  color: #ffffff !important;

  padding: 14px 22px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  border-top-left-radius: 12px !important;

  border-top-right-radius: 12px !important;

}



.section-card .section-header h5,

.var-section-card .var-dark-header h5 {

  color: #ffffff !important;

  font-size: 1rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.5px !important;

  margin: 0 !important;

  opacity: 1 !important;

  display: flex !important;

  align-items: center !important;

}



.section-card .section-header h5 i,

.section-card .section-header i,

.var-section-card .var-dark-header h5 i,

.var-section-card .var-dark-header i {

  color: #ffffff !important;

  font-size: 1rem !important;

  font-weight: 700 !important;

  margin: 0 10px 0 0 !important;

  opacity: 1 !important;

  display: inline-block !important;

}



.section-card .section-header span {

  color: #cbd5e1 !important;

  font-size: 0.82rem !important;

  opacity: 0.9 !important;

}



.section-card .section-body {

  padding: 28px;

}



.form-label-styled {

  font-weight: 700;

  font-size: 1.05rem;

  color: #333;

  letter-spacing: 0.2px;

  margin-bottom: 8px;

  display: block;

}



.form-control-styled {

  border-radius: 8px;

  border: 1.5px solid var(--adm-lgray);

  padding: 12px 16px;

  font-size: 1.05rem;

  color: #111;

  transition: border-color 0.2s, box-shadow 0.2s;

  width: 100%;

  background: #fff;

}



.form-control-styled:focus {

  border-color: var(--adm-black);

  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.10);

  outline: none;

}



/* Image thumbs & High-Fidelity Photo Rendering */

img.product-img-main,

img.product-img-second,

img.lux-main-img,

.lux-gallery-wrap img,

.product-default img,

.pdp-suggested-img,

.img-thumb-card img {

  image-rendering: auto !important;

  image-rendering: smooth !important;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

}



.img-thumb-card, .img-new-preview {

  position: relative;

  display: inline-flex;

  flex-direction: column;

  align-items: center;

  width: 110px;

  background: #ffffff;

  border: 2px solid #e2e8f0;

  border-radius: 10px;

  padding: 8px;

  margin: 6px;

  vertical-align: top;

  cursor: grab;

  user-select: none;

  transition: transform 0.15s ease, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;

}



.img-thumb-card:active, .img-new-preview:active {

  cursor: grabbing;

}



.img-thumb-card:hover, .img-new-preview:hover {

  border-color: #6366f1;

  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);

  transform: translateY(-2px);

}



.img-thumb-card.dragging-card, .img-new-preview.dragging-card {

  opacity: 0.35;

  border: 2px dashed #6366f1 !important;

  background: #eef2ff !important;

  transform: scale(0.95);

}



.img-thumb-card.drag-over-target, .img-new-preview.drag-over-target {

  border: 2px dashed #4f46e5 !important;

  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25) !important;

  transform: scale(1.05) translateY(-2px);

  background: #f5f3ff !important;

}



.img-thumb-card img, .img-new-preview img {

  width: 90px;

  height: 90px;

  object-fit: cover;

  border-radius: 6px;

  display: block;

  pointer-events: none;

}



.img-thumb-card .remove-btn, .img-new-preview .remove-btn {

  position: absolute;

  top: -8px;

  right: -8px;

  width: 22px;

  height: 22px;

  border-radius: 50%;

  background: #ef4444;

  color: #fff;

  border: none;

  font-size: 13px;

  font-weight: bold;

  cursor: pointer;

  z-index: 10;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  line-height: 1;

}



.img-thumb-card .remove-btn:hover, .img-new-preview .remove-btn:hover {

  background: #dc2626;

  transform: scale(1.15);

}



.img-thumb-card .pos-badge, .img-new-preview .pos-badge {

  position: absolute;

  top: -8px;

  left: -8px;

  padding: 2px 7px;

  font-size: 10px;

  font-weight: 800;

  border-radius: 10px;

  color: #ffffff;

  background: #475569;

  z-index: 10;

  box-shadow: 0 2px 5px rgba(0,0,0,0.25);

  letter-spacing: 0.3px;

}



.img-thumb-card .pos-badge.cover-badge, .img-new-preview .pos-badge.cover-badge {

  background: linear-gradient(135deg, #4f46e5, #6366f1);

  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);

}



.img-thumb-card .drag-handle-bar, .img-new-preview .drag-handle-bar {

  margin-top: 4px;

  font-size: 10px;

  color: #94a3b8;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 4px;

  width: 100%;

}



.img-thumb-card:hover .drag-handle-bar, .img-new-preview:hover .drag-handle-bar {

  color: #6366f1;

}



.img-thumb-card .img-action-bar, .img-new-preview .img-action-bar {

  margin-top: 4px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 2px;

  width: 100%;

}



.img-action-btn {

  background: #f1f5f9;

  border: 1px solid #cbd5e1;

  color: #475569;

  border-radius: 4px;

  padding: 2px 5px;

  font-size: 10px;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.15s ease;

  line-height: 1.2;

}



.img-action-btn:hover {

  background: #6366f1;

  color: #ffffff;

  border-color: #6366f1;

}



.img-action-btn.set-cover-btn {

  background: #fef3c7;

  border-color: #f59e0b;

  color: #b45309;

  font-weight: 800;

  font-size: 9px;

  padding: 2px 4px;

  flex-grow: 1;

  text-align: center;

}



.img-action-btn.set-cover-btn:hover {

  background: #f59e0b;

  color: #ffffff;

  border-color: #d97706;

}



/* Colour panels */

.color-panel-card {

  border-radius: 10px;

  border: 2px solid var(--adm-lgray);

  margin-bottom: 18px;

  overflow: hidden;

  transition: border-color 0.2s;

  animation: panelSlideIn 0.25s ease;

}



.colour-counter {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  font-size: 13.5px !important;

  color: #1e293b !important;

  margin-bottom: 16px !important;

  font-weight: 600 !important;



}



.colour-counter .counter-badge {

  background: #000000 !important;

  color: #ffffff !important;

  border-radius: 20px !important;

  padding: 3px 12px !important;

  font-weight: 800 !important;

  font-size: 12px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  min-width: 24px !important;

}



.color-panel-card:hover {

  border-color: var(--adm-black);

}



.color-panel-header {

  background: #f5f5f5;

  padding: 12px 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid var(--adm-lgray);

}



.color-panel-header * {

  color: #111 !important;

}



.color-dot {

  width: 14px;

  height: 14px;

  border-radius: 50%;

  display: inline-block;

  margin-right: 8px;

  border: 2px solid rgba(0, 0, 0, 0.15);

}



/* Upload zone */

.file-upload-zone {

  border: 2px dashed #adb5bd;

  border-radius: 10px;

  padding: 18px 20px;

  text-align: center;

  cursor: pointer;

  background: #f8f9fa;

  transition: all 0.2s;

  position: relative;

}



.file-upload-zone:hover {

  border-color: var(--adm-black);

  background: #f0f0f0;

}



.file-upload-zone input[type="file"] {

  position: absolute;

  inset: 0;

  opacity: 0;

  cursor: pointer;

  width: 100%;

  height: 100%;

}



.file-upload-zone .upload-icon {

  font-size: 1.8rem;

  color: #555;

  margin-bottom: 6px;

}



.file-upload-zone p {

  margin: 0;

  color: #555;

  font-size: 0.88rem;

}



.file-upload-zone strong {

  color: #111;

}



/* Variation table */

.var-table th {

  background: var(--adm-dark);

  color: #fff;

  font-size: 0.82rem;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.var-table td {

  vertical-align: middle;

  color: #111;

}



/* Buttons */

.btn-primary-styled {

  background: var(--adm-dark);

  border: none;

  color: #fff;

  border-radius: 10px;

  padding: 12px 36px;

  font-weight: 700;

  font-size: 1rem;

  letter-spacing: 0.5px;

  cursor: pointer;

  transition: all 0.2s;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

}



.btn-primary-styled:hover {

  background: #000;

  transform: translateY(-1px);

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);

}



.btn-outline-styled {

  background: #fff;

  border: 1.5px solid var(--adm-lgray);

  border-radius: 8px;

  padding: 8px 20px;

  font-weight: 600;

  color: #111;

  cursor: pointer;

  font-size: 0.9rem;

  transition: all 0.2s;

  text-decoration: none;

  display: inline-block;

}



.btn-outline-styled:hover {

  border-color: var(--adm-black);

  color: var(--adm-black);

  background: #f5f5f5;

}



/* Page header */

.page-title-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 28px;

  padding-bottom: 18px;

  border-bottom: 2px solid #e5e7eb;

}



.page-title-bar h1 {

  font-size: 1.6rem;

  font-weight: 800;

  color: var(--adm-dark);

  margin: 0;

}



/* Alerts */

.alert-box {

  border-radius: 10px;

  padding: 14px 20px;

  margin-bottom: 22px;

  font-weight: 600;

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 0.95rem;

}



.alert-box.success {

  background: #f3f4f6;

  color: #111;

  border: 1.5px solid #111;

}



.alert-box.danger {

  background: #f3f4f6;

  color: #111;

  border: 1.5px solid #6b7280;

}



/* Price pill & badges */

.price-preview-pill {

  background: #ffffff;

  color: #111;

  border-radius: 20px;

  padding: 5px 14px;

  font-weight: 700;

  font-size: 0.92rem;

  display: inline-block;

  margin-top: 6px;

  border: 1px solid #111;

}



.stock-badge {

  background: #f3f4f6;

  color: #111;

  border-radius: 6px;

  padding: 2px 10px;

  font-size: 0.82rem;

  font-weight: 700;

  border: 1px solid var(--adm-lgray);

}



.image-count-badge {

  background: #f3f4f6;

  color: #111;

  border-radius: 20px;

  padding: 3px 12px;

  font-size: 0.8rem;

  font-weight: 700;

  border: 1px solid var(--adm-lgray);

}



/* 🔹 Add New Colour UI 🔹 */

.add-colour-bar {

  background: #f9fafb;

  border: 2px dashed #adb5bd;

  border-radius: 12px;

  padding: 18px 22px;

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

  transition: border-color 0.2s;

}



.add-colour-bar:hover {

  border-color: var(--adm-black);

}



.add-colour-bar input[type="text"] {

  border: 1.5px solid var(--adm-lgray);

  border-radius: 8px;

  padding: 9px 14px;

  font-size: 0.95rem;

  outline: none;

  color: #111;

  flex: 1;

  min-width: 160px;

  transition: border-color 0.2s, box-shadow 0.2s;

  background: #fff;

}



.add-colour-bar input[type="text"]:focus {

  border-color: var(--adm-black);

  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.10);

}



.btn-add-colour {

  background: var(--adm-dark);

  border: none;

  color: #fff;

  border-radius: 8px;

  padding: 9px 22px;

  font-weight: 700;

  font-size: 0.92rem;

  cursor: pointer;

  transition: all 0.2s;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);

  white-space: nowrap;

}



.btn-add-colour:hover {

  background: #000;

  transform: translateY(-1px);

  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.3);

}



.colour-counter {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.85rem;

  color: #374151;

  margin-bottom: 14px;

  font-weight: 600;

}



.colour-counter .counter-badge {

  background: var(--adm-dark);

  color: #fff;

  border-radius: 20px;

  padding: 2px 12px;

  font-weight: 700;

  font-size: 0.85rem;

}



@keyframes panelSlideIn {

  from {

    opacity: 0;

    transform: translateY(-12px);

  }



  to {

    opacity: 1;

    transform: none;

  }

}



.colour-remove-panel-btn {

  background: #ffffff;

  color: #111;

  border: 1px solid #111;

  border-radius: 6px;

  padding: 4px 10px;

  font-size: 0.78rem;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.15s;

}



.colour-remove-panel-btn:hover {

  background: var(--adm-dark);

  color: #fff;

  border-color: var(--adm-dark);

}



/* Toast */

.toast-notif {

  position: fixed;

  bottom: 28px;

  right: 28px;

  background: var(--adm-dark);

  color: #fff;

  padding: 13px 24px;

  border-radius: 10px;

  font-weight: 600;

  font-size: 0.92rem;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

  z-index: 9999;

  opacity: 0;

  transform: translateY(16px);

  transition: all 0.3s ease;

  display: flex;

  align-items: center;

  gap: 10px;

}



.toast-notif.show {

  opacity: 1;

  transform: none;

}



.toast-notif .toast-icon {

  font-size: 1.1rem;

}



/* ── Primary Styled Button ──────────────────────────────────────────────────── */

.btn-primary-styled {

  background: #111;

  color: #fff;

  border: none;

  border-radius: 8px;

  padding: 8px 20px;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.15s;

  display: inline-flex;

  align-items: center;

  gap: 4px;

}



.btn-primary-styled:hover {

  background: #333;

}



/* ── Smart Colour Variation Cards (Compact Friendly Layout) ───────────────── */

.cvar-compact-card {

  background: #ffffff;

  border: 1px solid #e5e7eb;

  border-radius: 10px;

  padding: 12px 16px;

  margin-bottom: 12px;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);

  transition: border-color 0.2s, box-shadow 0.2s;

}



.cvar-compact-card:hover {

  border-color: #d1d5db;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);

}



.cvar-dot {

  display: none !important;

}



.cvar-remove-btn {

  background: none;

  border: none;

  color: #ef4444;

  cursor: pointer;

  font-size: 14px;

  padding: 4px 8px;

  border-radius: 6px;

  transition: background 0.15s;

}



.cvar-remove-btn:hover {

  background: #fef2f2;

}



/* Remove number spinners to prevent number clipping */

.cvar-size-input::-webkit-outer-spin-button,

.cvar-size-input::-webkit-inner-spin-button,

.cvar-bulk-input::-webkit-outer-spin-button,

.cvar-bulk-input::-webkit-inner-spin-button {

  -webkit-appearance: none !important;

  margin: 0 !important;

}



.cvar-size-input[type=number],

.cvar-bulk-input[type=number] {

  -moz-appearance: textfield !important;

}



.cvar-compact-size-chip {



  display: inline-flex;

  align-items: center;

  background: #f9fafb;

  border: 1px solid #e5e7eb;

  border-radius: 8px;

  padding: 3px 6px 3px 10px;

  gap: 8px;

  transition: all 0.15s ease;

  cursor: pointer;

}



.cvar-compact-size-chip.active {

  background: #ffffff;

  border-color: #111111;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

}



.cvar-chip-label {

  font-size: 12px;

  font-weight: 700;

  color: #6b7280;

  min-width: 20px;

  text-align: center;

  user-select: none;

}



.cvar-compact-size-chip.active .cvar-chip-label {

  color: #111111;

}



.cvar-size-input {

  width: 52px !important;

  height: 28px !important;

  padding: 2px 4px !important;

  font-size: 13px !important;

  font-weight: 700 !important;

  text-align: center !important;

  border-radius: 6px !important;

  border: 1px solid #d1d5db !important;

  background: #ffffff !important;

  color: #111111 !important;

}



.cvar-size-input:focus {

  border-color: #111111 !important;

  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) !important;

  outline: none !important;

}









/* Source: header.php */

.admin-sidebar {

  background-color: #f4f4f4;

  padding: 20px 0;

  min-height: calc(100vh - 150px);

  border-right: 1px solid #e7e7e7;

}



.admin-sidebar .nav-link {

  color: #444;

  font-weight: 600;

  padding: 12px 25px;

  border-bottom: 1px solid #eaeaea;

  transition: all 0.3s;

}



.admin-sidebar .nav-link:hover,

.admin-sidebar .nav-link.active {

  background-color: #000000 !important;

  color: #fff !important;

}



.admin-main {

  padding: 20px 30px;

}



.info-box-content p {

  font-size: 1.5rem;

  font-weight: 700;

  margin-top: 5px;

}





/* Source: products.php */

.product-admin-card {

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.product-admin-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;

}





/* Source: reviews.php */

#adminReviewTabs .nav-link {

  color: #555;

  background: transparent;

  border-color: #ddd;

  transition: all 0.2s;

}



#adminReviewTabs .nav-link.active {

  color: #fff !important;

  background-color: #000000 !important;

  border-color: #000000 !important;

}



.review-reply-badge {

  display: inline-block;

  font-size: 1.05rem;

  padding: 2px 8px;

  border-radius: 20px;

  font-weight: 600;

}



.reply-modal-emoji {

  font-size: 1.6rem;

  cursor: pointer;

  padding: 3px 5px;

  border-radius: 4px;

  transition: background 0.15s;

  border: none;

  background: transparent;

}



.reply-modal-emoji:hover {

  background: #f0f0f0;

}



.default-template-btn {

  cursor: pointer;

  font-size: 1.15rem;

  padding: 4px 10px;

  border-radius: 20px;

  margin: 3px;

  display: inline-block;

  border: 1px solid #ddd;

  transition: all 0.2s;

  background: #fafafa;

}



.default-template-btn:hover {

  background: #000000;

  color: #fff;

  border-color: #000000;

}



.admin-reply-preview {

  background: #fff8e1;

  border-left: 3px solid #f59e0b;

  padding: 6px 10px;

  border-radius: 4px;

  font-size: 1.15rem;

  max-width: 280px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.review-table-row td {

  vertical-align: middle !important;

}





/* Source: settings.php */

.card {

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.card:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important;

}



.table td,

.table th {

  vertical-align: middle !important;

}









/* Extracted Inline Styles */

.ct-inline-1 {

  font-size: 13px;

}



.ct-inline-2 {

  max-height: 180px;

  overflow-y: auto;

  padding-right: 5px;

}



.ct-inline-3 {

  font-size: 11px;

  line-height: 1.2;

}



.ct-inline-4 {

  width: 80px;

  height: 80px;

  font-size: 40px;

  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);

}



.ct-inline-5 {

  font-size: 2.2rem;

}



.ct-inline-6 {

  font-size: 1.4rem;

}



.ct-inline-7 {

  font-size: 1.1rem;

  color: #6c757d;

  margin-top: 5px;

}



.ct-inline-8 {

  font-size: 1.5rem;

}



.ct-inline-9 {

  font-size: 1.25rem;

}



.ct-inline-10 {

  border-radius: 6px;

  font-size: 1.3rem;

}



.ct-inline-11 {

  border-radius: 12px;

}



.ct-inline-12 {

  font-size: 1.8rem;

  border-bottom: 2px solid #ddd;

  padding-bottom: 8px;

}



.ct-inline-13 {

  font-size: 1.3rem;

}



.ct-inline-14 {

  gap: 15px;

}



.ct-inline-15 {

  font-size: 1.35rem;

  max-width: 230px;

  display: inline-block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  transition: color 0.2s;

}



.ct-inline-16 {

  gap: 5px;

}



.ct-inline-17 {

  font-size: 2rem;

  cursor: pointer;

  color: #ffb300;

}



.ct-inline-18 {

  border-radius: 8px;

}



.ct-inline-19 {

  font-size: 2.2rem;

  cursor: pointer;

  color: #ffb300;

}



.ct-inline-20 {

  font-size: 1.25rem;

  border-radius: 6px;

  padding: 8px 12px;

  height: auto;

}



.ct-inline-21 {

  font-size: 1.4rem;

  border-radius: 6px;

  background-color: #000000;

  border-color: #000000;

  letter-spacing: 0.5px;

}



.ct-inline-22 {

  width: 60px;

  height: 60px;

  font-size: 28px;

  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);

}



.ct-inline-23 {

  font-size: 1.8rem;

}



.ct-inline-24 {

  display: flex !important;

  align-items: flex-start !important;

  gap: 15px;

}



.ct-inline-25 {

  font-size: 24px;

  margin-top: 3px;

  display: block !important;

}



.ct-inline-26 {

  flex: 1;

  display: block !important;

}



.ct-inline-27 {

  font-size: 1.6rem;

  line-height: 1.2;

  margin: 0 0 5px 0;

  display: block !important;

}



.ct-inline-28 {

  font-size: 1.4rem;

  margin: 0;

  display: block !important;

  line-height: 1.5;

}



.ct-inline-29 {

  padding: 5px 15px;

  font-size: 1.1rem;

  vertical-align: middle;

  border-radius: 4px;

}



.ct-inline-30 {

  margin-bottom: 30px;

}



.ct-inline-31 {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 32px;

  height: 32px;

  background: #000000;

  color: #fff;

  border-radius: 50%;

  font-size: 1.4rem;

  font-weight: 700;

  margin-right: 10px;

}



.ct-inline-32 {

  border-top: 2px solid #eee;

  padding-top: 25px;

  margin-bottom: 25px;

}



.ct-inline-33 {

  margin-bottom: 20px;

}



.ct-inline-34 {

  display: none;

}



.ct-inline-35 {

  font-size: 1.35rem;

  font-weight: 600;

  line-height: 1.3;

}



.ct-inline-36 {

  font-size: 1.15rem;

  margin-top: 2px;

}



.ct-inline-37 {

  vertical-align: middle;

}



.ct-inline-38 {

  cursor: not-allowed;

  opacity: 0.6;

}



.ct-inline-39 {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 15px;

}



.ct-inline-40 {

  margin-right: 5px;

}



.ct-inline-41 {

  background-color: transparent;

}



.ct-inline-42 {



  font-size: 1.3rem;

  font-weight: 600;

  color: #555;

}



.ct-inline-43 {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

  margin-bottom: 8px;

}



.ct-inline-44 {

  margin-bottom: 0;

}



.ct-inline-45 {



  font-size: 1.25rem;

  font-weight: 600;

  color: #111111;

  text-decoration: underline;

  cursor: pointer;

  text-underline-offset: 4px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



.ct-inline-46 {

  font-size: 1.15rem;

}



.ct-inline-47 {

  position: relative;

}



.ct-inline-48 {

  margin-bottom: 10px;

}



.ct-inline-49 {

  margin-right: 6px;

}



.ct-inline-50 {

  margin-bottom: 14px;

}



.ct-inline-51 {

  display: inline-block;

}



.ct-inline-52 {

  width: auto;

  padding: 0 32px;

  height: 46px;

  font-size: 1.2rem;

}



.ct-inline-53 {

  color: #c0392b;

}



.ct-inline-54 {

  color: #111;

  margin-right: 5px;

}



.ct-inline-55 {

  display: none;

}



.ct-inline-56 {

  position: relative;

  overflow: hidden;

}



.ct-inline-57 {

  position: static;

  display: inline-block;

  margin-right: 4px;

  font-size: 1rem !important;

  padding: 1px 4px !important;

  border-radius: 3px !important;

  background: #e03;

  color: #fff;

  font-weight: 700 !important;

  line-height: 1.2 !important;

  letter-spacing: -0.2px !important;

  vertical-align: middle;

}



.ct-inline-58 {

  position: relative;

  display: inline-block;

}



.ct-inline-59 {

  background-color: #000;

}



.ct-inline-60 {

  background-color: #0188cc;

}



.ct-inline-61 {

  background-color: #81d742;

}



.ct-inline-62 {

  background-color: #6085a5;

}



.ct-inline-63 {

  background-color: #ab6e6e;

}



.ct-inline-64 {

  width: 100%;

}



.ct-inline-65 {

  background-image: url(assets/images/payments/payment-visa.svg);

}



.ct-inline-66 {

  background-image: url(assets/images/payments/payment-paypal.svg);

}



.ct-inline-67 {
  background-image: url(assets/images/payments/payment-stripe.webp);
}



.ct-inline-68 {

  background-image: url(assets/images/payments/payment-verisign.svg);

}



.ct-inline-69 {

  font-size: 2.8rem;

  margin: 0;

  line-height: 1;

  color: inherit !important;

}



.ct-inline-70 {

  color: #e23e3e !important;

  border-top: 1px solid #eee;

  margin-top: 4px;

  padding-top: 8px !important;

}



.ct-inline-71 {

  font-size: 11px;

  color: #888;

  margin-top: 2px;

}



.ct-inline-72 {

  flex: 0 0 50px !important;

  width: 50px !important;

  height: 50px !important;

  margin-right: 16px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 6px !important;

  border: 1px solid #f0f0f0 !important;

  overflow: hidden !important;

  background: #fff !important;

}



.ct-inline-73 {

  max-width: 100% !important;

  max-height: 100% !important;

  object-fit: contain !important;

  display: block !important;

}



.ct-inline-74 {

  flex: 1 1 auto !important;

  min-width: 0 !important;

  text-align: left !important;

  display: flex !important;

  flex-direction: column !important;

}



.ct-inline-75 {



  font-size: 14px !important;

  font-weight: 500 !important;

  color: #222 !important;

  line-height: 1.3 !important;

  text-transform: capitalize !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

}



.ct-inline-76 {



  font-size: 13px !important;

  color: #d32f2f !important;

  font-weight: 600 !important;

  margin-top: 4px !important;

  line-height: 1 !important;

}



.ct-inline-77 {

  font-size: 1.4rem;

  border: 1px solid #ddd;

  border-radius: 50%;

  width: 36px;

  height: 36px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: #fff;

  transition: all 0.2s;

}



.ct-inline-78 {

  font-size: 2.2rem;

  font-weight: 800;

  letter-spacing: 2px;

  color: #111;

}



.ct-inline-79 {

  max-width: 600px;

  font-weight: 400;

  line-height: 1.6;

}



.ct-inline-80 {

  background: radial-gradient(circle, #fcfcfc 0%, #f4f4f4 100%);

  border-bottom: 1px solid #eee;

}



.ct-inline-81 {

  width: 70px;

  height: 70px;

  font-size: 28px;

  font-weight: 700;

  background-color: #000000 !important;

}



.ct-inline-82 {

  border-bottom: 2px solid #f4f4f4;

}



.ct-inline-83 {

  font-size: 1.1rem;

}



.ct-inline-84 {

  background-color: #fcfcfc;

}



.ct-inline-85 {

  border-top: none;

}



.ct-inline-86 {

  font-size: 1.2rem;

}



.ct-inline-87 {

  font-size: 1.2rem;

  line-height: 1.6;

}



.ct-inline-88 {

  gap: 10px;

}



.ct-inline-89 {

  font-size: 1.25rem;

  border-radius: 6px;

  border-width: 2px;

}



.ct-inline-90 {

  background-color: #fafafa;

}



.ct-inline-91 {

  border-radius: 12px;

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.ct-inline-92 {

  gap: 20px;

}



.ct-inline-93 {

  flex-shrink: 0;

}



.ct-inline-94 {

  font-size: 1.55rem;

  letter-spacing: -0.2px;

  line-height: 1.2;

}



.ct-inline-95 {

  font-size: 1.15rem;

  font-weight: 500;

}



.ct-inline-96 {

  gap: 4px;

  background: #fffcf0;

  padding: 6px 12px;

  border-radius: 30px;

  border: 1px solid #fff3cd;

}



.ct-inline-97 {

  background-color: #f8f9fa;

  border-left: 4px solid #000000;

  border-radius: 4px 8px 8px 4px;

}



.ct-inline-98 {

  font-size: 1.35rem;

  line-height: 1.6;

  font-weight: 400;

  color: #333 !important;

}



.ct-inline-99 {

  background-color: #fff9e6;

  border: 1px solid #ffeeba;

  border-radius: 8px;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.015);

}



.ct-inline-100 {

  gap: 8px;

}



.ct-inline-101 {

  background-color: #000000;

  font-size: 0.95rem;

  letter-spacing: 0.5px;

  border-radius: 4px;

}



.ct-inline-102 {

  font-size: 1.25rem;

  color: #222;

}



.ct-inline-103 {

  font-size: 1.1rem;

  font-weight: 500;

}



.ct-inline-104 {

  font-size: 1.3rem;

  color: #444;

  line-height: 1.65;

  font-style: italic;

}



.ct-inline-105 {

  font-size: 1.55rem;

  letter-spacing: -0.2px;

  color: #222;

}



.ct-inline-106 {

  gap: 4px;

  background: #f0f7ff;

  padding: 6px 12px;

  border-radius: 30px;

  border: 1px solid #bfe0ff;

}



.ct-inline-107 {

  background-color: #f8f9fa;

  border-left: 4px solid #007bff;

  border-radius: 4px 8px 8px 4px;

}



.ct-inline-108 {

  background-color: #007bff;

  font-size: 0.95rem;

  letter-spacing: 0.5px;

  border-radius: 4px;

}



.ct-inline-109 {

  font-size: 2.2rem;

  font-weight: 700;

}



.ct-inline-110 {

  font-size: 6rem;

  color: #ccc;

}



.ct-inline-111 {

  font-size: 2rem;

  font-weight: 600;

}



.ct-inline-112 {

  opacity: 0.5;

  cursor: not-allowed;

}



.ct-inline-113 {

  max-width: 800px;

}



.ct-inline-114 {

  border-top-left-radius: 8px;

  border-top-right-radius: 8px;

}



.ct-inline-115 {

  font-size: 1.1rem;

  letter-spacing: 0.5px;

}



.ct-inline-116 {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  border-radius: 2px;

}



.ct-inline-117 {

  font-size: 0.8rem;

}



.ct-inline-118 {

  white-space: nowrap;

}



.ct-inline-119 {

  display: inline-block;

  margin: 0;

}



.ct-inline-120 {

  font-size: 1.15rem;

  background-color: #6c757d;

  color: #fff;

}



.ct-inline-121 {

  background-color: #17a2b8;

}



.ct-inline-122 {

  color: #6b7280;

  margin: 4px 0 0 0;

  font-size: 0.9rem;

}



.ct-inline-123 {

  flex: 0 0 70%;

  max-width: 70%;

}



.ct-inline-124 {

  border-radius: 6px;

}



.ct-inline-125 {

  color: #aaaaaa;

  font-size: 0.82rem;

  display: block;

}



.ct-inline-126 {

  font-weight: 700;

  color: #111;

}



.ct-inline-127 {

  color: #111;

}



.ct-inline-128 {

  padding: 16px;

}



.ct-inline-129 {

  font-size: 0.88rem;

  margin: 0;

}



.ct-inline-130 {

  color: #9ca3af;

  font-size: 0.8rem;

  margin-top: 4px;

}



.ct-inline-131 {

  border-radius: 6px;

  font-weight: 600;

}



.ct-inline-132 {

  font-size: 0.88rem;

}



.ct-inline-133 {

  width: 60px;

}



.ct-inline-134 {

  width: 130px;

}



.ct-inline-135 {

  flex: 0 0 30%;

  max-width: 30%;

}



.ct-inline-136 {

  background: #f8f9fa;

}



.ct-inline-137 {

  font-size: 0.8rem;

}



.ct-inline-138 {

  background: #ffffff;

  border: 2px solid #111;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);

}



.ct-inline-139 {

  font-weight: 700;

}



.ct-inline-140 {

  font-size: 0.9rem;

}



.ct-inline-141 {

  padding: 14px 28px;

  font-size: 1rem;

}



.ct-inline-142 {

  padding: 14px 40px;

  font-size: 1.1rem;

  text-transform: uppercase;

}



.ct-inline-143 {

  background: #d1fae5;

  color: #065f46;

  border-radius: 20px;

  padding: 2px 10px;

  font-size: 0.75rem;

  font-weight: 700;

  margin-left: 8px;

}



.ct-inline-144 {

  font-weight: 700;

  color: #374151;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 4px;

}



.ct-inline-145 {

  background: ' + dotCol + ';

}



.ct-inline-146 {

  color: #4f46e5;

  margin-left: 4px;

}



.ct-inline-147 {

  display: flex;

  align-items: center;

  gap: 8px;

}



.ct-inline-148 {

  color: #9ca3af;

  font-size: 0.8rem;

  margin-top: 4px;

}



.ct-inline-149 {

  font-size: 20px;

}



.ct-inline-150 {

  font-size: 3rem;

}



.ct-inline-151 {

  width: auto;

  height: 38px;

  border-radius: 4px;

  border: 1px solid #ddd;

  padding: 0 10px;

}



.ct-inline-152 {

  border-radius: 4px;

  height: 38px;

}



.ct-inline-153 {

  border-radius: 8px !important;

}



.ct-inline-154 {

  font-size: 0.75rem;

  letter-spacing: 0.5px;

}



.ct-inline-155 {

  font-size: 1.6rem;

}



.ct-inline-156 {

  position: relative;

  height: 380px;

  width: 100%;

}



.ct-inline-157 {

  position: relative;

  height: 320px;

  width: 100%;

}



.ct-inline-158 {

  background: #f4f4f4;

  color: #333;

  border: 1px solid #ddd;

  margin-right: 4px;

}



.ct-inline-159 {

  background-color: #fafafa;

}



.ct-inline-160 {

  font-size: 1.3rem;

}



.ct-inline-161 {

  font-size: 1.3rem;

  line-height: 1.8;

}



.ct-inline-162 {

  font-size: 1.5rem;

}



.ct-inline-163 {

  font-size: 1.3rem;

  line-height: 1.6;

}



.ct-inline-164 {

  position: relative;

  height: 250px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #f8f9fa;

}



.ct-inline-165 {

  font-size: 1.1rem;

  color: #333;

}



.ct-inline-166 {

  font-size: 0.85rem;

}



.ct-inline-167 {

  font-size: 1.2rem;

  border-radius: 6px;

  border-width: 2px;

}



.ct-inline-168 {

  gap: 10px;

}



.ct-inline-169 {

  max-width: 180px;

  display: inline-block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.ct-inline-170 {

  max-width: 200px;

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.ct-inline-171 {

  white-space: nowrap;

}



.ct-inline-172 {

  display: inline-block;

  margin: 0;

}



.ct-inline-173 {

  max-width: 250px;

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.ct-inline-174 {

  background: #000000;

}



.ct-inline-175 {

  background: #f8f9fa;

  border-left: 4px solid #000000;

}



.ct-inline-176 {

  font-size: 1.2rem;

  color: #ffb300;

}



.ct-inline-177 {

  font-size: 1.25rem;

  font-style: italic;

}



.ct-inline-178 {

  font-size: 1.3rem;

  border-radius: 8px;

  resize: vertical;

}



.ct-inline-179 {

  font-size: 1.2rem;

  background: #000000;

  border-color: #000000;

}



.ct-inline-180 {

  font-size: 1.2rem;

  cursor: pointer;

}



.ct-inline-181 {

  max-height: 500px;

  overflow-y: auto;

}



.ct-inline-182 {

  position: sticky;

  top: 0;

  z-index: 1;

}



.ct-inline-183 {

  padding-right: 30px;

}



.ct-inline-184 {

  max-width: 250px;

  font-size: 1.3rem;

}



.ct-inline-185 {

  font-size: 1.5rem;

  min-width: 120px;

}



.ct-inline-186 {

  gap: 2px;

}



.ct-inline-187 {

  font-size: 1.15rem;

  color: #555;

}



.ct-inline-188 {

  font-size: 1.35rem;

}



/* ══ MOBILE VIEW HERO SLIDER HEIGHT & IMAGE VISIBILITY CORRECTIONS ══ */

@media (max-width: 768px) {



  .home-slider,

  .home-slider .home-slide {

    height: 480px !important;

  }



  .home-slider .slide-bg {

    height: 100% !important;

    width: 100% !important;

    object-fit: cover !important;

    object-position: center 15% !important;

    /* Keeps the models' faces/heads fully visible */

  }

}



@media (max-width: 480px) {



  .home-slider,

  .home-slider .home-slide {

    height: 420px !important;

  }



  .home-slider .slide-bg {

    height: 100% !important;

    width: 100% !important;

    object-fit: cover !important;

    object-position: center 12% !important;

    /* Slightly adjusted to keep models perfectly in view on smaller screens */

  }

}



/* ============================================================

   CONTACT PAGE ENHANCEMENTS (White-Focused Luxury Layout)

   ============================================================ */

.contact-page-wrapper {

  background-color: #fcfcfc;

  padding-bottom: 80px;

}



.lux-contact-container {

  margin-top: 50px !important;

  margin-bottom: 70px !important;

}



.lux-premium-card {

  background: #ffffff;

  border: 1px solid #eaeaea;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.02);

  border-radius: 16px;

  padding: 50px;

  height: 100%;

  transition: transform 0.3s, box-shadow 0.3s;

}



.lux-premium-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.04);

}



.lux-card-title {



  font-size: 2.8rem;

  font-weight: 700;

  color: #111111;

  margin-bottom: 12px;

}



.lux-card-desc {



  font-size: 1.4rem;

  color: #666666;

  line-height: 1.6;

  margin-bottom: 40px;

}



/* Info List Items */

.lux-info-list {

  display: flex;

  flex-direction: column;

  gap: 30px;

}



.lux-info-item {

  display: flex;

  align-items: center;

  gap: 20px;

}



.lux-info-icon {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  background: #f8f9fa;

  border: 1px solid #eaeaea;

  color: #111111;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.6rem;

  transition: background-color 0.2s, color 0.2s;

}



.lux-info-item:hover .lux-info-icon {

  background: #111111;

  color: #ffffff;

}



.lux-info-text {

  display: flex;

  flex-direction: column;

}



.lux-info-label {



  font-size: 1.1rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: #888888;

  font-weight: 600;

  margin-bottom: 4px;

}



.lux-info-value {



  font-size: 1.5rem;

  color: #111111;

  font-weight: 500;

}



.lux-info-value a {

  color: inherit;

  text-decoration: none;

  transition: color 0.2s;

}



.lux-info-value a:hover {

  color: #000000;

  text-decoration: underline;

}



/* Premium Form Elements */

.lux-premium-form .lux-form-field {

  margin-bottom: 25px;

  display: flex;

  flex-direction: column;

}



.lux-premium-form label {



  font-size: 1.25rem;

  font-weight: 600;

  color: #333333;

  margin-bottom: 8px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.lux-form-input {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 8px;

  padding: 14px 18px;



  font-size: 1.4rem;

  color: #111111;

  outline: none;

  transition: border-color 0.2s, box-shadow 0.2s;

}



.lux-form-input:focus {

  border-color: #111111;

  box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.05);

}



.lux-form-textarea {

  min-height: 140px;

  resize: vertical;

}



/* Luxury Form Submit Button */

.lux-submit-button {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  background: #111111;

  color: #ffffff;



  font-size: 1.4rem;

  font-weight: 600;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  padding: 16px 36px;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;

}



.lux-submit-button:hover {

  background: #222222;

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

}



.lux-submit-button i {

  transition: transform 0.2s;

}



.lux-submit-button:hover i {

  transform: translateX(4px);

}



/* Success View Style */

.lux-success-view {

  text-align: center;

  padding: 50px 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.lux-success-icon-wrapper {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  background: rgba(40, 167, 69, 0.08);

  border: 1px solid rgba(40, 167, 69, 0.2);

  color: #28a745;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 2.6rem;

  margin-bottom: 25px;

}



@media (max-width: 768px) {

  .lux-premium-card {

    padding: 35px 25px;

  }

}



/* Social Links & Extra Content for Contact Info Card */

.lux-social-links {

  margin-top: 40px;

  border-top: 1px solid #eaeaea;

  padding-top: 30px;

}



.lux-social-icons {

  display: flex;

  gap: 15px;

}



.lux-social-icon-link {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: #f8f9fa;

  border: 1px solid #eaeaea;

  color: #111111;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.4rem;

  transition: all 0.2s ease;

}



.lux-social-icon-link:hover {

  background: #111111;

  color: #ffffff;

  transform: translateY(-2px);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

}



.lux-social-icon-link svg {

  width: 15px;

  height: 15px;

  fill: currentColor;

  display: block;

}



.lux-concierge-note {

  margin-top: 35px;

  background: #fdfdfd;

  border: 1px dashed #e2e8f0;

  border-radius: 8px;

  padding: 20px;

}



.lux-note-title {



  font-size: 1.25rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: #111111;

  margin-bottom: 6px;

  display: flex;

  align-items: center;

  gap: 8px;

}



.lux-note-text {



  font-size: 1.3rem;

  color: #666666;

  line-height: 1.5;

  margin: 0;

}



/* ============================================================

   SMOOTH PAGE RENDER & OVERRIDES (Smooth Carousel & Fade-In)

   ============================================================ */

.main {

  animation: fadeInMain 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



@keyframes fadeInMain {

  0% {

    opacity: 0;

    transform: translateY(10px);

  }



  100% {

    opacity: 1;

    transform: none;

  }

}



/* Prevent Owl Carousel image stacking/flickering before JS loads */

.owl-carousel:not(.owl-loaded) {

  display: block !important;

  position: relative !important;

  overflow: hidden !important;

  max-height: 580px;

}



@media (max-width: 768px) {

  .owl-carousel:not(.owl-loaded) {

    max-height: 480px;

  }

}



@media (max-width: 480px) {

  .owl-carousel:not(.owl-loaded) {

    max-height: 420px;

  }

}



.owl-carousel:not(.owl-loaded)>* {

  display: none !important;

}



.owl-carousel:not(.owl-loaded)>*:first-child {

  display: block !important;

  width: 100% !important;

}



/* ============================================================

   LUXURY BLACK & WHITE CATEGORY FILTER BAR & TOP TOOLBOX

   ============================================================ */

.lux-category-bar-container {

  margin-bottom: 20px;

  background: #ffffff;

  padding: 12px 16px !important;

  border-radius: 12px;

  border: 1px solid #eaeaea;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);

}



.lux-category-bar {

  display: flex;

  align-items: center;

  gap: 10px;

  overflow-x: auto;

  overflow-y: hidden !important;

  scrollbar-width: none;

  -ms-overflow-style: none;

  padding: 6px 4px !important;

  min-height: 46px !important;

}



.lux-category-bar::-webkit-scrollbar {

  display: none !important;

}



.lux-cat-pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 8px 18px;

  border-radius: 30px;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  color: #111111;



  font-size: 1.3rem;

  font-weight: 600;

  white-space: nowrap;

  text-decoration: none !important;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);

}



.lux-cat-pill:hover {

  background: #f8fafc;

  color: #000000;

  border-color: #cbd5e1;

  transform: translateY(-2px);

  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06);

}



.lux-cat-pill.active {

  background: #111111 !important;

  border-color: #111111 !important;

  color: #ffffff !important;

  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.18);

}



.lux-cat-badge {

  display: inline-block;

  font-size: 1.1rem;

  font-weight: 700;

  padding: 2px 8px;

  border-radius: 20px;

  background: #f1f5f9;

  color: #475569;

  transition: all 0.25s ease;

}



.lux-cat-pill:hover .lux-cat-badge {

  background: #e2e8f0;

  color: #0f172a;

}



.lux-cat-pill.active .lux-cat-badge {

  background: rgba(255, 255, 255, 0.22) !important;

  color: #ffffff !important;

}



.toolbox-left {

  display: flex !important;

  align-items: center !important;

  flex-wrap: wrap !important;

  gap: 15px !important;

}



.select-custom {

  position: relative !important;

  z-index: 10 !important;

  pointer-events: auto !important;

}



.toolbox-item.toolbox-sort .select-custom .form-control {

  background-color: #ffffff !important;

  border: 1px solid #dcdcdc !important;

  border-radius: 6px !important;

  font-size: 1.3rem !important;

  font-weight: 500 !important;

  color: #111111 !important;

  padding: 6px 30px 6px 14px !important;

  height: auto !important;

  pointer-events: auto !important;

  cursor: pointer !important;

  position: relative !important;

  z-index: 10 !important;

}



.toolbox-item.toolbox-sort .select-custom .form-control:focus {

  border-color: #111111 !important;

  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08) !important;

}



.sticky-header-wrapper {

  height: auto !important;

  min-height: auto !important;

  max-height: none !important;

  overflow: visible !important;

}



.toolbox {

  height: auto !important;

  min-height: auto !important;

  max-height: none !important;

  overflow: visible !important;

  margin-bottom: 25px !important;

  padding: 14px 18px !important;

  background: #ffffff !important;

  border: 1px solid #eaeaea !important;

  border-radius: 12px !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;

}



/* ── COMPACT MOBILE VIEW ALIGNMENT FIXES ───────────────────────────── */

@media (max-width: 767px) {

  .lux-category-bar-container {

    padding: 6px 10px !important;

    margin-bottom: 8px !important;

    border-radius: 8px !important;

  }



  .lux-category-bar {

    padding: 4px 2px !important;

    gap: 6px !important;

    min-height: 38px !important;

  }



  .lux-cat-pill {

    padding: 5px 12px !important;

    font-size: 1.15rem !important;

  }



  .toolbox {

    padding: 8px 10px !important;

    margin-bottom: 14px !important;

    background: #ffffff !important;

    border: 1px solid #eaeaea !important;

    border-radius: 8px !important;

    height: auto !important;

    min-height: auto !important;

    overflow: visible !important;

  }



  .toolbox-left {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    width: 100% !important;

    gap: 8px !important;

    justify-content: space-between !important;

    margin: 0 !important;

  }



  .toolbox-item.toolbox-sort {

    flex: 1 1 50% !important;

    width: 50% !important;

    min-width: 0 !important;

    margin: 0 !important;

    display: flex !important;

    flex-direction: column !important;

  }



  .toolbox-item.toolbox-sort label {

    display: block !important;

    font-size: 0.95rem !important;

    font-weight: 700 !important;

    color: #111111 !important;

    margin-bottom: 2px !important;

    text-transform: uppercase !important;

    letter-spacing: 0.4px !important;

    white-space: nowrap !important;

  }



  .toolbox-item.toolbox-sort .select-custom {

    width: 100% !important;

    max-width: 100% !important;

  }



  .toolbox-item.toolbox-sort .select-custom .form-control {

    width: 100% !important;

    max-width: 100% !important;

    height: 36px !important;

    padding: 4px 20px 4px 8px !important;

    font-size: 1.05rem !important;

    font-weight: 600 !important;

    text-transform: uppercase !important;

    border-radius: 6px !important;

    border: 1px solid #dcdcdc !important;

    background-color: #ffffff !important;

    color: #111111 !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

    overflow: hidden !important;

  }

}



@media (max-width: 480px) {

  .lux-category-bar-container {

    padding: 5px 8px !important;

    margin-bottom: 6px !important;

  }



  .toolbox {

    padding: 6px 8px !important;

    margin-bottom: 12px !important;

  }



  .toolbox-left {

    flex-direction: row !important;

    gap: 6px !important;

  }



  .toolbox-item.toolbox-sort label {

    font-size: 0.9rem !important;

  }



  .toolbox-item.toolbox-sort .select-custom .form-control {

    height: 34px !important;

    font-size: 1rem !important;

    padding: 2px 18px 2px 6px !important;

  }

}



/* Responsive Home Banner Picture handling */

.home-slide picture {

  display: block;

  width: 100%;

  height: 100%;

}



.home-slide picture img.slide-bg {

  width: 100%;

  height: auto;

  display: block;

  object-fit: cover;

}



/* Remove extra empty space under banner & position pagination dots over the banner */

.home-slider {

  margin-bottom: 0 !important;

  position: relative !important;

}



.home-slider .owl-dots {

  position: absolute !important;

  bottom: 14px !important;

  left: 0 !important;

  right: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  line-height: 1 !important;

  z-index: 10 !important;

  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

  gap: 8px !important;

}



.home-slider .owl-dots .owl-dot span {

  width: 10px !important;

  height: 10px !important;

  margin: 0 !important;

  background-color: rgba(255, 255, 255, 0.5) !important;

  border: 2px solid #ffffff !important;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;

  transition: all 0.25s ease !important;

  border-radius: 50% !important;

}



.home-slider .owl-dots .owl-dot span:before {

  display: none !important;

}



.home-slider .owl-dots .owl-dot.active span,

.home-slider .owl-dots .owl-dot:hover span {

  background-color: #ffffff !important;

  border-color: #ffffff !important;

  transform: scale(1.25) !important;

}



.marquee-container {

  margin-top: 0 !important;

}



/* Universal Cart Count Badge — Strip all white shadow rings/borders & set 1px bottom offset */

.cart-count,

.badge-circle,

.cart-dropdown .cart-count,

.cart-toggle .cart-count,

.header-middle .badge-circle,

.header-middle .cart-count {

  box-shadow: none !important;

  -webkit-box-shadow: none !important;

  border: none !important;

  outline: none !important;

  filter: none !important;

  -webkit-filter: none !important;

  background: #000000 !important;

  background-color: #000000 !important;

  color: #ffffff !important;

}



.cart-count::before,

.cart-count::after,

.badge-circle::before,

.badge-circle::after {

  display: none !important;

  content: none !important;

  border: none !important;

  box-shadow: none !important;

  background: transparent !important;

}





/* ============================================================

   OFF-CANVAS LUXURY FILTER AND SORT DRAWER

   ============================================================ */

.lux-filter-trigger {

  background: transparent !important;

  border: none !important;

  outline: none !important;

  padding: 8px 0 !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 12px !important;

  cursor: pointer !important;

  color: #000000 !important;

}



.lux-filter-trigger:hover .lux-filter-text {

  opacity: 0.7;

}



.lux-filter-icon {

  color: #000000;

  stroke-width: 2.5;

}



.lux-filter-text {



  font-size: 1.2rem !important;

  font-weight: 600 !important;

  color: #000000 !important;

  text-decoration: underline !important;

  text-underline-offset: 5px !important;

  letter-spacing: 0.3px !important;

}



/* Backdrop */

.lux-drawer-backdrop {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  width: 100vw !important;

  height: 100vh !important;

  background: rgba(0, 0, 0, 0.45) !important;

  backdrop-filter: blur(5px) !important;

  -webkit-backdrop-filter: blur(5px) !important;

  z-index: 99998 !important;

  opacity: 0 !important;

  visibility: hidden !important;

  transition: all 0.3s ease !important;

}



.lux-drawer-backdrop.open {

  opacity: 1 !important;

  visibility: visible !important;

}



/* Off-Canvas Drawer Container */

.lux-drawer {

  position: fixed !important;

  top: 0 !important;

  right: 0 !important;

  width: 460px !important;

  max-width: 92vw !important;

  height: 100vh !important;

  background: #ffffff !important;

  z-index: 99999 !important;

  display: flex !important;

  flex-direction: column !important;

  transform: translateX(100%) !important;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15) !important;

}



.lux-drawer.open {

  transform: translateX(0) !important;

}



/* Header */

.lux-drawer-header {

  padding: 28px 32px 22px 32px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  border-bottom: 1px solid #e2e8f0 !important;

}



.lux-drawer-title {



  font-size: 1.4rem !important;

  font-weight: 800 !important;

  letter-spacing: 2px !important;

  text-transform: uppercase !important;

  color: #000000 !important;

  margin: 0 !important;

}



.lux-drawer-actions {

  display: flex !important;

  align-items: center !important;

  gap: 20px !important;

}



.lux-clear-all {



  font-size: 0.95rem !important;

  font-weight: 600 !important;

  color: #222222 !important;

  text-decoration: underline !important;

  text-underline-offset: 3px !important;

  transition: color 0.2s ease !important;

}



.lux-clear-all:hover {

  color: #000000 !important;

}



.lux-drawer-close {

  background: #000000 !important;

  color: #ffffff !important;

  border: none !important;

  border-radius: 50% !important;

  width: 36px !important;

  height: 36px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 1.5rem !important;

  cursor: pointer !important;

  line-height: 1 !important;

  transition: transform 0.2s ease !important;

}



.lux-drawer-close:hover {

  transform: scale(1.08) !important;

}



/* Drawer Body */

.lux-drawer-body {

  flex: 1 1 0 !important;

  overflow-y: auto !important;

  padding: 10px 32px !important;

}



/* Accordion */

.lux-accordion-item {

  border-bottom: 1px solid #e2e8f0 !important;

}



.lux-accordion-header {

  width: 100% !important;

  background: transparent !important;

  border: none !important;

  outline: none !important;

  padding: 22px 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;



  font-size: 1.25rem !important;

  font-weight: 700 !important;

  color: #000000 !important;

  cursor: pointer !important;

  text-align: left !important;

}



.lux-accordion-header i {

  font-size: 1.1rem !important;

  font-weight: 700 !important;

  transition: transform 0.3s ease !important;

}



.lux-accordion-item.active .lux-accordion-header i {

  transform: rotate(180deg) !important;

}



.lux-accordion-content {

  display: none;

  padding-bottom: 22px !important;

}



.lux-accordion-item.active .lux-accordion-content {

  display: block;

}



/* Filter Options List */

.lux-filter-list {

  list-style: none !important;

  padding: 0 !important;

  margin: 0 !important;

}



.lux-filter-list li {

  margin-bottom: 8px !important;

}



.lux-filter-opt {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;



  font-size: 1.1rem !important;

  font-weight: 500 !important;

  color: #111111 !important;

  text-decoration: none !important;

  padding: 10px 14px !important;

  border-radius: 8px !important;

  transition: all 0.2s ease !important;

}



.lux-filter-opt:hover,

.lux-filter-opt.active {

  background: #f5f5f5 !important;

  color: #000000 !important;

  font-weight: 700 !important;

  border-left: 3px solid #000000 !important;

}



.lux-opt-count {

  font-size: 0.95rem !important;

  font-weight: 600 !important;

  color: #666666 !important;

}



/* Color Swatches - Structured 2-Column Luxury Grid Layout */

.lux-color-swatches {

  display: grid !important;

  grid-template-columns: repeat(2, 1fr) !important;

  gap: 10px 12px !important;

  padding-top: 8px !important;

}



.lux-swatch-item {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

  padding: 11px 16px !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 12px !important;



  font-size: 0.9rem !important;

  font-weight: 600 !important;

  letter-spacing: 0.2px !important;

  color: #1a1a1a !important;

  text-decoration: none !important;

  text-transform: capitalize !important;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;

  width: 100% !important;

  box-sizing: border-box !important;

}



.lux-swatch-item:hover {

  background: #ffffff !important;

  border-color: #000000 !important;

  color: #000000 !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;

}



.lux-swatch-item.active {

  background: #000000 !important;

  border-color: #000000 !important;

  color: #ffffff !important;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16) !important;

}



.lux-swatch {

  width: 20px !important;

  height: 20px !important;

  border-radius: 50% !important;

  display: inline-block !important;

  flex-shrink: 0 !important;

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 5px rgba(0, 0, 0, 0.1) !important;

  transition: transform 0.2s ease !important;

}



.lux-swatch-item:hover .lux-swatch {

  transform: scale(1.15) !important;

}



/* Active Filter Tags & Reset Link */

.lux-active-tag {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  padding: 6px 14px !important;

  background: #000000 !important;

  color: #ffffff !important;

  border-radius: 30px !important;

  font-size: 0.85rem !important;

  font-weight: 600 !important;

  text-decoration: none !important;

  transition: all 0.2s ease !important;

}



.lux-active-tag:hover {

  background: #333333 !important;

  color: #ffffff !important;

}



.lux-tag-close {

  font-size: 1.1rem !important;

  line-height: 1 !important;

}



.lux-reset-all-link {

  font-size: 0.85rem !important;

  color: #666666 !important;

  text-decoration: underline !important;

  text-underline-offset: 3px !important;

  margin-left: 10px !important;

}



.lux-reset-all-link:hover {

  color: #000000 !important;

}



/* Footer */

.lux-drawer-footer {

  padding: 24px 32px !important;

  border-top: 1px solid #e2e8f0 !important;

  background: #ffffff !important;

}



.lux-apply-btn {

  display: block !important;

  width: 100% !important;

  background: #000000 !important;

  color: #ffffff !important;

  border: 1px solid #000000 !important;

  padding: 18px 24px !important;

  border-radius: 6px !important;



  font-size: 1rem !important;

  font-weight: 800 !important;

  letter-spacing: 2px !important;

  text-align: center !important;

  text-transform: uppercase !important;

  text-decoration: none !important;

  transition: all 0.3s ease !important;

}



.lux-apply-btn:hover {

  background: #222222 !important;

  color: #ffffff !important;

}



/* Col MD 6 Col SM 12 Top Padding */

.col-md-6.col-sm-12 {

  padding-top: 10px !important;

}



/* =========================================================

   HERBAVI MODERN ADMIN DASHBOARD STYLES

   ========================================================= */

.admin-page-bg,

.admin-page-bg .page-wrapper {

  background-color: #f8f9fa !important;

  color: #111827 !important;

  min-height: 100vh;

}



.herbavi-sidebar-wrapper {

  background: #ffffff !important;

  border-right: 1px solid #e5e7eb !important;

  min-height: 100vh !important;

  padding: 24px 20px !important;

}



.herbavi-brand {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

  padding-bottom: 20px !important;

  margin-bottom: 20px !important;

  border-bottom: 1px solid #e5e7eb !important;

}



.herbavi-brand-logo {

  width: 40px !important;

  height: 40px !important;

  background: #000000 !important;

  border-radius: 12px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  color: #ffffff !important;

  font-size: 18px !important;

  font-weight: 800 !important;

}



.herbavi-brand-name {

  font-size: 16px !important;

  font-weight: 800 !important;

  letter-spacing: 1px !important;

  color: #111827 !important;

  line-height: 1.1 !important;

  text-transform: uppercase !important;

}



.herbavi-brand-sub {

  font-size: 10px !important;

  font-weight: 600 !important;

  letter-spacing: 1.5px !important;

  color: #6b7280 !important;

  text-transform: uppercase !important;

}



.herbavi-user-card {

  background: #f9fafb !important;

  border: 1px solid #e5e7eb !important;

  border-radius: 14px !important;

  padding: 14px !important;

  margin-bottom: 24px !important;

}



.herbavi-avatar {

  width: 38px !important;

  height: 38px !important;

  border-radius: 50% !important;

  background: #ffffff !important;

  border: 2px solid #000000 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-weight: 700 !important;

  font-size: 14px !important;

  color: #000000 !important;

  flex-shrink: 0 !important;

}



.herbavi-user-name {

  font-size: 13px !important;

  font-weight: 700 !important;

  color: #111827 !important;

  line-height: 1.2 !important;

}



.herbavi-user-role {

  font-size: 11px !important;

  color: #6b7280 !important;

}



.herbavi-signout-btn {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 6px !important;

  width: 100% !important;

  margin-top: 10px !important;

  padding: 6px 12px !important;

  background: #ffffff !important;

  border: 1px solid #e5e7eb !important;

  border-radius: 8px !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  color: #374151 !important;

  text-decoration: none !important;

  transition: all 0.2s ease !important;

}



.herbavi-signout-btn:hover {

  background: #f3f4f6 !important;

  color: #111827 !important;

}



.herbavi-section-label {

  font-size: 10px !important;

  font-weight: 700 !important;

  letter-spacing: 1.5px !important;

  color: #9ca3af !important;

  text-transform: uppercase !important;

  margin: 18px 0 8px 6px !important;

}



.herbavi-nav-list {

  list-style: none !important;

  padding: 0 !important;

  margin: 0 !important;

}



.herbavi-nav-item {

  margin-bottom: 4px !important;

}



.herbavi-nav-link {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

  padding: 10px 14px !important;

  border-radius: 10px !important;

  font-size: 13px !important;

  font-weight: 600 !important;

  color: #4b5563 !important;

  text-decoration: none !important;

  transition: all 0.2s ease !important;

}



.herbavi-nav-link:hover {

  background: #f3f4f6 !important;

  color: #111827 !important;

}



.herbavi-nav-link.active {

  background: #000000 !important;

  color: #ffffff !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;

}



.herbavi-nav-link.active i {

  color: #ffffff !important;

}



.herbavi-nav-link i {

  font-size: 15px !important;

  width: 18px !important;

  text-align: center !important;

  color: #6b7280 !important;

}



/* Header bar */

.herbavi-header-bar {

  background: transparent !important;

  padding: 24px 0 16px !important;

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  flex-wrap: wrap !important;

  gap: 16px !important;

}



.herbavi-breadcrumb {

  font-size: 12px !important;

  color: #6b7280 !important;

  margin-bottom: 4px !important;

}



.herbavi-breadcrumb span {

  color: #111827 !important;

  font-weight: 600 !important;

}



.herbavi-page-heading {

  font-size: 24px !important;

  font-weight: 800 !important;

  color: #111827 !important;

  margin: 0 !important;

  letter-spacing: -0.3px !important;

}



.herbavi-top-widgets {

  display: flex !important;

  align-items: center !important;

  gap: 14px !important;

}



.herbavi-time-pill {

  background: #ffffff !important;

  border: 1px solid #e5e7eb !important;

  border-radius: 12px !important;

  padding: 8px 16px !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  color: #374151 !important;

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;

}



.herbavi-bell-btn {

  background: #ffffff !important;

  border: 1px solid #e5e7eb !important;

  border-radius: 12px !important;

  width: 40px !important;

  height: 40px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  position: relative !important;

  color: #374151 !important;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;

}



.herbavi-bell-badge {

  position: absolute !important;

  top: -4px !important;

  right: -4px !important;

  background: #ef4444 !important;

  color: #ffffff !important;

  font-size: 10px !important;

  font-weight: 700 !important;

  width: 18px !important;

  height: 18px !important;

  border-radius: 50% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border: 2px solid #ffffff !important;

}



/* KPI Cards Grid */

.herbavi-kpi-card {

  background: #ffffff !important;

  border-radius: 16px !important;

  padding: 22px 24px !important;

  border: 1px solid #eef2f0 !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;

  display: flex !important;

  justify-content: space-between !important;

  align-items: flex-start !important;

  height: 100% !important;

}



.herbavi-kpi-label {

  font-size: 11px !important;

  font-weight: 700 !important;

  letter-spacing: 1.2px !important;

  color: #6b7280 !important;

  text-transform: uppercase !important;

  margin-bottom: 8px !important;

}



.herbavi-kpi-val {

  font-size: 26px !important;

  font-weight: 800 !important;

  color: #111827 !important;

  line-height: 1.1 !important;

  margin-bottom: 10px !important;

}



.herbavi-kpi-growth {

  font-size: 11px !important;

  font-weight: 600 !important;

  color: #111827 !important;

  display: inline-flex !items: center !important;

  gap: 4px !important;

}



.herbavi-kpi-growth .growth-sub {

  color: #9ca3af !important;

  font-weight: 500 !important;

}



.herbavi-kpi-box {

  width: 46px !important;

  height: 46px !important;

  border-radius: 12px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 18px !important;

  font-weight: 700 !important;

  flex-shrink: 0 !important;

}



.kpi-box-green {

  background: #f3f4f6 !important;

  color: #111827 !important;

}



.kpi-box-blue {

  background: #dbeafe !important;

  color: #2563eb !important;

}



.kpi-box-amber {

  background: #fef3c7 !important;

  color: #d97706 !important;

}



.kpi-box-teal {

  background: #ccfbf1 !important;

  color: #0d9488 !important;

}



/* Dashboard Cards */

.herbavi-card {

  background: #ffffff !important;

  border-radius: 16px !important;

  border: 1px solid #e5e7eb !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;

  padding: 24px !important;

  margin-bottom: 24px !important;

}



.herbavi-card-head {

  display: flex !important;

  justify-content: space-between !important;

  align-items: flex-start !important;

  margin-bottom: 20px !important;

}



.herbavi-card-title {

  font-size: 15px !important;

  font-weight: 800 !important;

  letter-spacing: 0.8px !important;

  color: #111827 !important;

  text-transform: uppercase !important;

  margin: 0 0 2px 0 !important;

}



.herbavi-card-subtitle {

  font-size: 12px !important;

  color: #6b7280 !important;

  margin: 0 !important;

}



.herbavi-plus-btn {

  width: 32px !important;

  height: 32px !important;

  border-radius: 8px !important;

  background: #000000 !important;

  color: #ffffff !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  text-decoration: none !important;

  font-size: 14px !important;

  transition: all 0.2s ease !important;

}



.herbavi-plus-btn:hover {

  background: #222222 !important;

  color: #ffffff !important;

}



.herbavi-pill-btn {

  background: #000000 !important;

  color: #ffffff !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  padding: 8px 18px !important;

  border-radius: 20px !important;

  text-decoration: none !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  border: none !important;

  transition: all 0.2s ease !important;

}



.herbavi-pill-btn:hover {

  background: #222222 !important;

  color: #ffffff !important;

}



.herbavi-light-btn {

  background: #f9fafb !important;

  color: #374151 !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  padding: 10px 16px !important;

  border-radius: 10px !important;

  text-decoration: none !important;

  display: block !important;

  text-align: center !important;

  width: 100% !important;

  border: 1px solid #e5e7eb !important;

  transition: all 0.2s ease !important;

  margin-top: 14px !important;

}



.herbavi-light-btn:hover {

  background: #f3f4f6 !important;

  color: #111827 !important;

}



/* Product list item */

.herbavi-prod-row {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding: 10px 12px !important;

  background: #f9fafb !important;

  border: 1px solid #f3f4f6 !important;

  border-radius: 12px !important;

  margin-bottom: 8px !important;

}



.herbavi-prod-left {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

}



.herbavi-prod-img {

  width: 42px !important;

  height: 42px !important;

  border-radius: 10px !important;

  object-fit: cover !important;

  background: #eeece8 !important;

}



.herbavi-prod-name {

  font-size: 13px !important;

  font-weight: 700 !important;

  color: #111827 !important;

  margin: 0 !important;

}



.herbavi-prod-sub {

  font-size: 11px !important;

  color: #6b7280 !important;

  margin: 0 !important;

}



.herbavi-status-pill {

  background: #f3f4f6 !important;

  color: #111827 !important;

  font-size: 11px !important;

  font-weight: 600 !important;

  padding: 3px 10px !important;

  border-radius: 20px !important;

}



/* Graph Footer */

.herbavi-chart-footer {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding-top: 16px !important;

  margin-top: 16px !important;

  border-top: 1px dashed #e5e7eb !important;

  font-size: 11px !important;

  font-weight: 600 !important;

  color: #6b7280 !important;

}



.herbavi-chart-footer .footer-left {

  color: #111827 !important;

}



/* Orders Table */

.herbavi-table {

  width: 100% !important;

  border-collapse: separate !important;

  border-spacing: 0 !important;

}



.herbavi-table th {

  background: #f9fafb !important;

  color: #6b7280 !important;

  font-size: 10px !important;

  font-weight: 700 !important;

  letter-spacing: 1px !important;

  text-transform: uppercase !important;

  padding: 12px 16px !important;

  border-bottom: 1px solid #e5e7eb !important;

}



.herbavi-table td {

  padding: 14px 16px !important;

  font-size: 13px !important;

  color: #111827 !important;

  border-bottom: 1px solid #f3f4f6 !important;

  vertical-align: middle !important;

}



.herbavi-table tr:last-child td {

  border-bottom: none !important;

}



/* =========================================================

   HERBAVI GLOBAL ADMIN THEME SYSTEM

   ========================================================= */



/* Admin Body & Main Wrapper */

.admin-page-bg,

.admin-page-bg main.main {

  background-color: #f8f9fa !important;

  color: #111827 !important;



}



.admin-page-bg main.main {

  padding-bottom: 50px !important;

  min-height: 100vh !important;

}



/* Page Headers & Breadcrumbs */

.admin-page-bg .admin-main h1.h2,

.admin-page-bg .admin-main h1,

.admin-page-bg .admin-main .h2 {

  font-size: 24px !important;

  font-weight: 800 !important;

  color: #111827 !important;

  letter-spacing: -0.3px !important;

  margin-bottom: 0 !important;

}



.admin-page-bg .admin-main .border-bottom {

  border-bottom: none !important;

  padding-bottom: 16px !important;

  margin-bottom: 24px !important;

  margin-top: 16px !important;

}



/* Cards System */

.admin-page-bg .card {

  background: #ffffff !important;

  border-radius: 16px !important;

  border: 1px solid #e5e7eb !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;

  margin-bottom: 24px !important;

}



.admin-page-bg .card-header {

  background: transparent !important;

  border-bottom: 1px solid #e5e7eb !important;

  padding: 18px 24px !important;

  font-size: 15px !important;

  font-weight: 800 !important;

  color: #111827 !important;

  letter-spacing: 0.5px !important;

  text-transform: uppercase !important;

}



.admin-page-bg .card-body {

  padding: 24px !important;

}



/* Tables System */

.admin-page-bg .table {

  width: 100% !important;

  border-collapse: separate !important;

  border-spacing: 0 !important;

  margin-bottom: 0 !important;

}



.admin-page-bg .table thead,

.admin-page-bg .table thead th,

.admin-page-bg .table .thead-light th {

  background-color: #f8f9fa !important;

  color: #6b7280 !important;

  font-size: 10px !important;

  font-weight: 700 !important;

  letter-spacing: 1px !important;

  text-transform: uppercase !important;

  border-bottom: 1px solid #e5e7eb !important;

  border-top: none !important;

  padding: 14px 16px !important;

}



.admin-page-bg .table tbody td {

  padding: 14px 16px !important;

  vertical-align: middle !important;

  border-bottom: 1px solid #f3f4f6 !important;

  font-size: 13px !important;

  color: #111827 !important;

}



.admin-page-bg .table tbody tr:hover td {

  background-color: #f9fafb !important;

}



.admin-page-bg .table tbody tr:last-child td {

  border-bottom: none !important;

}



/* Form Controls & Inputs */

.admin-page-bg .form-control,

.admin-page-bg select.form-control {

  border-radius: 10px !important;

  border: 1px solid #e5e7eb !important;

  padding: 10px 14px !important;

  font-size: 13px !important;

  color: #111827 !important;

  background-color: #ffffff !important;

  box-shadow: none !important;

  transition: all 0.2s ease !important;

}



.admin-page-bg .form-control:focus {

  border-color: #000000 !important;

  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;

}



.admin-page-bg label {

  font-size: 12px !important;

  font-weight: 700 !important;

  color: #374151 !important;

  letter-spacing: 0.3px !important;

  margin-bottom: 6px !important;

}



/* Buttons System */

.admin-page-bg .btn-dark,

.admin-page-bg .btn-primary {

  background-color: #000000 !important;

  color: #ffffff !important;

  border: 1px solid #000000 !important;

  border-radius: 10px !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  padding: 8px 18px !important;

  transition: all 0.2s ease !important;

  box-shadow: none !important;

}



.admin-page-bg .btn-dark:hover,

.admin-page-bg .btn-primary:hover {

  background-color: #222222 !important;

  border-color: #222222 !important;

  color: #ffffff !important;

}



.admin-page-bg .btn-danger {

  background-color: #111827 !important;

  color: #ffffff !important;

  border: 1px solid #111827 !important;

  border-radius: 8px !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  padding: 6px 14px !important;

  transition: all 0.2s ease !important;

}



.admin-page-bg .btn-danger:hover {

  background-color: #000000 !important;

  color: #ffffff !important;

}



.admin-page-bg .btn-info,

.admin-page-bg .btn-secondary {

  background-color: #f3f4f6 !important;

  color: #374151 !important;

  border: 1px solid #e5e7eb !important;

  border-radius: 8px !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  padding: 6px 14px !important;

  transition: all 0.2s ease !important;

}



.admin-page-bg .btn-info:hover,

.admin-page-bg .btn-secondary:hover {

  background-color: #e5e7eb !important;

  color: #111827 !important;

}



/* Badges System */

.admin-page-bg .badge-success {

  background-color: #f3f4f6 !important;

  color: #111827 !important;

  font-size: 11px !important;

  font-weight: 600 !important;

  padding: 4px 10px !important;

  border-radius: 20px !important;

}



.admin-page-bg .badge-warning {

  background-color: #fef3c7 !important;

  color: #b45309 !important;

  font-size: 11px !important;

  font-weight: 600 !important;

  padding: 4px 10px !important;

  border-radius: 20px !important;

}



.admin-page-bg .badge-secondary,

.admin-page-bg .badge-danger {

  background-color: #f3f4f6 !important;

  color: #6b7280 !important;

  font-size: 11px !important;

  font-weight: 600 !important;

  padding: 4px 10px !important;

  border-radius: 20px !important;

}



/* Pagination */

.admin-page-bg .pagination .page-item .page-link {

  border-radius: 8px !important;

  margin: 0 3px !important;

  border: 1px solid #e5e7eb !important;

  color: #374151 !important;

  font-weight: 600 !important;

  font-size: 12px !important;

}



.admin-page-bg .pagination .page-item.active .page-link {

  background-color: #000000 !important;

  border-color: #000000 !important;

  color: #ffffff !important;

}



/* Herbavi Card (used in add_product, edit forms etc.) */

.admin-page-bg .herbavi-card {

  background: #ffffff !important;

  border: 1px solid #e5e7eb !important;

  border-radius: 12px !important;

  overflow: hidden !important;

  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important;

}



.admin-page-bg .herbavi-card-header {

  background: #f9fafb !important;

  border-bottom: 1px solid #e5e7eb !important;

  padding: 14px 20px !important;

  display: flex !important;

  align-items: center !important;

}



/* Nav Pills / Tabs */



.admin-page-bg .nav-pills .nav-link {

  border-radius: 30px !important;

  font-weight: 700 !important;

  font-size: 11px !important;

  letter-spacing: 0.8px !important;

  text-transform: uppercase !important;

  color: #374151 !important;

  background: #ffffff !important;

  border: 1px solid #e5e7eb !important;

  padding: 10px 24px !important;

  transition: all 0.2s ease !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  line-height: 1.2 !important;

}



.admin-page-bg .nav-pills .nav-link:hover {

  background: #f3f4f6 !important;

  color: #111827 !important;

  border-color: #d1d5db !important;

}



.admin-page-bg .nav-pills .nav-link.active {

  background: #000000 !important;

  color: #ffffff !important;

  border-color: #000000 !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;

}



/* Modals System */

.admin-page-bg .modal-content {

  border-radius: 16px !important;

  border: none !important;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;

  overflow: hidden !important;

}



.admin-page-bg .modal-header {

  background-color: #000000 !important;

  color: #ffffff !important;

  border-bottom: none !important;

  padding: 16px 24px !important;

}



.admin-page-bg .modal-header .modal-title,

.admin-page-bg .modal-header h4,

.admin-page-bg .modal-header h5,

.admin-page-bg .modal-header .close {

  color: #ffffff !important;

}



.admin-page-bg .modal-footer {

  border-top: 1px solid #f0f4f2 !important;

  background-color: #ffffff !important;

  padding: 16px 24px !important;

}



/* Product Cards in Admin */

.admin-page-bg .product-admin-card {

  overflow: hidden !important;

  transition: transform 0.2s ease, box-shadow 0.2s ease !important;

}



.admin-page-bg .product-admin-card:hover {

  transform: translateY(-4px) !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;

}



/* =========================================================

   ADMIN REVIEWS TABLE & ACTION BUTTONS ALIGNMENT STYLES

   ========================================================= */

.admin-reviews-table th {

  vertical-align: middle !important;

  font-size: 11px !important;

  font-weight: 700 !important;

  letter-spacing: 1px !important;

  text-transform: uppercase !important;

  background: #f8f9fa !important;

  color: #6b7280 !important;

  padding: 14px 16px !important;

}



.admin-reviews-table td {

  vertical-align: middle !important;

  padding: 14px 16px !important;

  font-size: 13px !important;

  color: #111827 !important;

}



.btn-admin-dark {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 6px !important;

  padding: 6px 12px !important;

  background: #000000 !important;

  color: #ffffff !important;

  border: 1px solid #000000 !important;

  border-radius: 8px !important;

  font-size: 11px !important;

  font-weight: 700 !important;

  letter-spacing: 0.5px !important;

  text-transform: uppercase !important;

  text-decoration: none !important;

  white-space: nowrap !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  line-height: 1.2 !important;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;

}



.btn-admin-dark:hover {

  background: #222222 !important;

  color: #ffffff !important;

  border-color: #222222 !important;

  text-decoration: none !important;

}



.btn-admin-delete {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 6px !important;

  padding: 6px 12px !important;

  background: #ffffff !important;

  color: #dc2626 !important;

  border: 1px solid #fca5a5 !important;

  border-radius: 8px !important;

  font-size: 11px !important;

  font-weight: 700 !important;

  letter-spacing: 0.5px !important;

  text-transform: uppercase !important;

  text-decoration: none !important;

  white-space: nowrap !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  line-height: 1.2 !important;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;

}



.btn-admin-delete:hover {

  background: #dc2626 !important;

  color: #ffffff !important;

  border-color: #dc2626 !important;

  text-decoration: none !important;

}



.admin-reply-preview-box {

  background: #f9fafb !important;

  border: 1px solid #e5e7eb !important;

  border-radius: 8px !important;

  padding: 6px 10px !important;

  margin-top: 6px !important;

  font-size: 12px !important;

  color: #374151 !important;

  line-height: 1.4 !important;

}





/* ============================================================

   TRANSCITY LUXURY TYPOGRAPHY ENGINE (USER PANEL & FRONTEND)

   ============================================================ */



/* 1. Main Display Titles & Hero Headings */

h1,

h2,

h3,

h4,

h5,

h6,

.h1,

.h2,

.h3,

.h4,

.h5,

.h6,

.showcase-sub,

.showcase-main-title,

.showcase-quote,

.section-title,

.banner-title,

.hero-title,

.page-title,

.collection-title,

.widget-title,

.display-title,

.brand-title,

.heading-luxury,

.cc-title,

.editorial-title,

.lookbook-title,

.cart-title,

.checkout-title,

.account-title {



  letter-spacing: -0.01em;

}



/* 2. Swash / Italic Flourish Accents (Transcity Signature Look) */

.font-luxury-italic,

.italic-flourish,

.hero-subtitle,

.subtitle-serif,

.heading-accent-italic,

.showcase-quote em,

.editorial-subtitle,

.tagline-serif {



  font-style: italic !important;

  font-weight: 400 !important;

  letter-spacing: 0em !important;

}



/* 3. Product Titles on Grid Cards & Single Product Page */

.product-title,

.product-title a,

.product-name,

.cart-product-title,

.order-product-title,

.grid-product-title {



  font-size: 14px !important;

  font-weight: 600 !important;

  letter-spacing: -0.01em !important;

  color: #111827 !important;

  line-height: 1.35 !important;

}



.product-title a:hover,

.product-name:hover {

  color: #000000 !important;

}



/* 4. Product Price & Currency Formatting */

.product-price,

.price-box,

.current-price,

.old-price,

.cart-price,

.summary-price {



  font-weight: 700 !important;

  letter-spacing: -0.02em !important;

}



/* 5. Navigation Links & Menu Titles */

.menu>li>a,

.mobile-menu li a,

.nav-link,

.category-name,

.dropdown-item,

.user-info-name {



  font-weight: 600 !important;

  letter-spacing: 0.02em !important;

}



/* 6. Action Buttons & Badges */

.btn,

.btn-dark,

.btn-outline-dark,

.btn-primary,

.add-to-cart-btn,

.checkout-btn,

.hero-btn {



  font-weight: 700 !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;

}



/* 7. CLEAN MODERN PARAGRAPH & BODY TYPOGRAPHY (Matching Screenshot Aesthetic) */

p,

.lead,

.description,

.product-desc,

.product-short-desc,

.product-details-content p,

.summary-text,

.review-body,

.review-text,

.about-text,

.card-text,

.banner-desc,

.showcase-quote,

.hero-desc,

.footer p,

.modal-body p,

.tab-content p {



  font-size: 15px !important;

  line-height: 1.65 !important;

  letter-spacing: 0em !important;

  color: #475569 !important;

  font-weight: 400 !important;

}



/* Feature List Titles & Subtexts (Discover Stratten Style) */

.feature-item-title,

.benefit-title,

.info-title {



  font-size: 15px !important;

  font-weight: 700 !important;

  color: #0f172a !important;

}



/* HIGH-END LUXURY SECTION BANNER (assets/images/banners/section-img.png) */

.lux-section-banner {

  position: relative !important;

  width: 100% !important;

  margin: 50px 0 !important;

  padding: 0 4% !important;

}



.lux-section-banner-container {

  position: relative !important;

  width: 100% !important;

  max-width: 1400px !important;

  margin: 0 auto !important;

  min-height: 480px !important;

  border-radius: 24px !important;

  overflow: hidden !important;

  display: flex !important;

  align-items: center !important;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;

}



.lux-section-banner-bg {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  z-index: 1 !important;

  overflow: hidden !important;

}



.lux-section-banner-bg img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  object-position: center center !important;

  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



.lux-section-banner-container:hover .lux-section-banner-bg img {

  transform: scale(1.04) !important;

}



.lux-section-banner-overlay {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  z-index: 2 !important;

  background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.05) 100%) !important;

}



.lux-section-banner-content {

  position: relative !important;

  z-index: 3 !important;

  max-width: 580px !important;

  padding: 60px 0 60px 60px !important;

  color: #ffffff !important;

}



.lux-section-banner-tag {



  font-size: 11px !important;

  font-weight: 700 !important;

  letter-spacing: 2.5px !important;

  text-transform: uppercase !important;

  color: #ffffff !important;

  background: rgba(255, 255, 255, 0.15) !important;

  backdrop-filter: blur(10px) !important;

  -webkit-backdrop-filter: blur(10px) !important;

  padding: 7px 18px !important;

  border-radius: 30px !important;

  border: 1px solid rgba(255, 255, 255, 0.25) !important;

  display: inline-block !important;

  margin-bottom: 20px !important;

}



.lux-section-banner-title {



  font-size: 44px !important;

  font-weight: 800 !important;

  line-height: 1.12 !important;

  color: #ffffff !important;

  margin-bottom: 18px !important;

  letter-spacing: -0.5px !important;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;

}



.lux-section-banner-desc {



  font-size: 15px !important;

  line-height: 1.65 !important;

  color: rgba(255, 255, 255, 0.9) !important;

  margin-bottom: 28px !important;

  font-weight: 400 !important;

}



.lux-banner-btn-primary {

  display: inline-flex !important;

  align-items: center !important;

  gap: 10px !important;

  padding: 16px 36px !important;

  background: #ffffff !important;

  color: #000000 !important;



  font-size: 12px !important;

  font-weight: 800 !important;

  letter-spacing: 1.5px !important;

  text-transform: uppercase !important;

  text-decoration: none !important;

  border-radius: 50px !important;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;

  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;

  border: 1px solid #ffffff !important;

}



.lux-banner-btn-primary:hover {

  background: #000000 !important;

  color: #ffffff !important;

  transform: translateY(-3px) !important;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;

}



.var-dark-header h5 {

  color: #ffffff !important;

  font-size: 15px !important;

  font-weight: 700 !important;

  margin: 0 !important;

}



.feature-item-desc,

.benefit-desc,

.info-desc {



  font-size: 14px !important;

  color: #64748b !important;

  font-weight: 400 !important;

}



/* Luxury Blockquotes & Featured Editorial Excerpts */

blockquote,

.blockquote,

.editorial-quote,

.review-quote {



  font-style: italic !important;

  font-size: 1.25rem !important;

  line-height: 1.7 !important;

  color: #0f172a !important;

  border-left: 3px solid #0f172a !important;

  padding-left: 18px !important;

}



/* Small Muted Captions & Utility Meta Info */

small,

.small,

.text-muted,

.subtext,

.meta-info,

.product-sku,

.breadcrumb-item,

.form-text {



  color: #64748b !important;

  letter-spacing: 0.01em !important;

}





/* ============================================================

   BOLD & STRONGLY STYLED SECTION TITLES ("YOU MAY ALSO LIKE SUGGESTIONS")

   ============================================================ */



.lux-collection-title,

h2.lux-collection-title,

.suggestion-title,

.related-products-title {



  font-size: 2.4rem !important;

  font-weight: 900 !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;

  color: #0f172a !important;

  text-align: center !important;

  margin-top: 50px !important;

  margin-bottom: 36px !important;

  position: relative !important;

  line-height: 1.25 !important;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;

}



.lux-collection-title::after,

h2.lux-collection-title::after {

  content: '' !important;

  display: block !important;

  width: 70px !important;

  height: 4px !important;

  background: #0f172a !important;

  margin: 16px auto 0 auto !important;

  border-radius: 4px !important;

}





/* ============================================================

   HIGH-END LUXURY SECTION BANNER (assets/images/banners/section-img.png)

   ============================================================ */



.lux-section-banner {

  position: relative !important;

  width: 100% !important;

  margin: 50px 0 !important;

  padding: 0 4% !important;

}



.lux-section-banner-container {

  position: relative !important;

  width: 100% !important;

  max-width: 1400px !important;

  margin: 0 auto !important;

  min-height: 480px !important;

  border-radius: 24px !important;

  overflow: hidden !important;

  display: flex !important;

  align-items: center !important;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;

}



.lux-section-banner-bg {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  z-index: 1 !important;

  overflow: hidden !important;

}



.lux-section-banner-bg img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  object-position: center center !important;

  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



.lux-section-banner-container:hover .lux-section-banner-bg img {

  transform: scale(1.04) !important;

}



.lux-section-banner-overlay {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.05) 100%) !important;

}



.lux-section-banner-content {

  position: relative !important;

  z-index: 2 !important;

  max-width: 580px !important;

  padding: 60px 0 60px 60px !important;

  color: #ffffff !important;

}



.var-dark-header h5 {

  color: #ffffff !important;

  font-size: 15px !important;

  font-weight: 700 !important;

  margin: 0 !important;

}



.var-table-card {

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 12px !important;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;

  overflow: hidden !important;

}



.var-admin-table {

  width: 100% !important;

  margin-bottom: 0 !important;

  border-collapse: separate !important;

  border-spacing: 0 !important;

}



.var-admin-table th {

  background-color: #ffffff !important;

  color: #64748b !important;

  font-size: 11px !important;

  font-weight: 700 !important;

  letter-spacing: 0.06em !important;

  text-transform: uppercase !important;

  padding: 14px 16px !important;

  border-bottom: 1px solid #e2e8f0 !important;

  border-right: 1px solid #e2e8f0 !important;

  text-align: center !important;

  vertical-align: middle !important;

}



.var-admin-table th:last-child {

  border-right: none !important;

  width: 70px !important;

}



.var-admin-table td {

  padding: 12px 14px !important;

  border-bottom: 1px solid #e2e8f0 !important;

  border-right: 1px solid #e2e8f0 !important;

  vertical-align: middle !important;

  background: #ffffff !important;

}



.var-admin-table td:last-child {

  border-right: none !important;

  text-align: center !important;

}



.var-admin-table tr:last-child td {

  border-bottom: none !important;

}



/* Styled Inputs & Dropdowns matching user design */

.var-table-input,

.var-size-select {

  width: 100% !important;

  height: 42px !important;

  padding: 8px 16px !important;

  font-size: 13.5px !important;

  font-weight: 600 !important;

  color: #1e293b !important;

  background-color: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 12px !important;

  transition: all 0.2s ease-in-out !important;

  outline: none !important;

  box-shadow: none !important;

}



.var-table-input:focus,

.var-size-select:focus {

  border-color: #3b82f6 !important;

  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;

  background-color: #ffffff !important;

}



.var-table-input::placeholder {

  color: #94a3b8 !important;

  font-weight: 400 !important;

}



/* Dark Green Delete Button */

.var-del-btn {

  width: 38px !important;

  height: 38px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  background-color: #142e23 !important;

  color: #ffffff !important;

  border: none !important;

  border-radius: 8px !important;

  font-size: 16px !important;

  font-weight: 700 !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  line-height: 1 !important;

  margin: 0 auto !important;

}



.var-del-btn:hover {

  background-color: #1c3d2f !important;

  color: #ffffff !important;

  transform: scale(1.05) !important;

}



.var-del-btn:active {

  transform: scale(0.95) !important;

}



/* Button Place Order */

.btn-place-order {

  background-color: #000000 !important;

  color: #ffffff !important;

  border-color: #000000 !important;

}



.btn-place-order:hover {

  background-color: #222222 !important;

  color: #ffffff !important;

  border-color: #222222 !important;

}



.btn-place-order:disabled,

.btn-place-order[disabled] {

  background-color: #000000 !important;

  color: #ffffff !important;

  opacity: 1 !important;

}



/* Fix red background shades on required empty inputs */

.checkout-container .form-control,

.checkout-container .form-control:invalid,

.checkout-container .form-control:required:invalid {

  background-color: #ffffff !important;

  background-image: none !important;

  box-shadow: none !important;

}



/* ─────────────────────────────────────────────────────

   Helper Classes Extracted from Inline Styles

───────────────────────────────────────────────────── */

.img-cover-h100 {

  object-fit: cover !important;

  height: 100% !important;

}



.svg-wishlisted {

  fill: #111 !important;

  stroke: #111 !important;

}



.br-8 {

  border-radius: 8px !important;

}



.btn-modal-close {

  border-radius: 20px !important;

  font-weight: 600 !important;

  font-size: 12px !important;

}



.btn-modal-confirm {

  border-radius: 20px !important;

  font-weight: 700 !important;

  font-size: 12px !important;

  letter-spacing: 0.5px !important;

}



.bg-gray-readonly {

  background-color: #f8f9fa !important;

}



.img-review-thumb {

  width: 80px !important;

  height: 80px !important;

  object-fit: cover !important;

  border-radius: 8px !important;

  border: 1px solid #eef0f2 !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;

}



.txt-review-product {

  transition: color 0.2s !important;

}



.icon-star-filled-yellow {

  font-size: 1.2rem !important;

  color: #ffb300 !important;

}



.icon-star-filled-blue {

  font-size: 1.2rem !important;

  color: #007bff !important;

}



.icon-empty-state {

  font-size: 48px !important;

  color: #e0e0e0 !important;

  font-weight: 900 !important;

}



.title-empty-state {

  font-size: 16px !important;

  letter-spacing: 0.5px !important;

}



.btn-explore-collection {

  letter-spacing: 1.5px !important;

  font-weight: 700 !important;

  font-size: 11px !important;

  border-radius: 30px !important;

}



.img-contain-h100 {

  max-height: 100px !important;

  object-fit: contain !important;

}



.swatch-white {

  background: #fff !important;

  border: 1px solid #ccc !important;

}



.swatch-navy {

  background: #0a192f !important;

}



.swatch-red {

  background: #d90429 !important;

}



.swatch-black {

  background: #000 !important;

}



.header-logo-img {

  height: 12px !important;

  max-height: 12px !important;

  width: auto !important;

}



.header-cart-img {

  object-fit: contain !important;

}



/* ========================================================================

   PREMIUM BRAND AESTHETIC UPGRADES

   ======================================================================== */



/* 1. Global High Contrast Palette & Whitespace */

:root {

  --premium-black: #111111;

  --premium-charcoal: #222222;

  --premium-gray: #777777;

  --premium-light: #F9F9F9;

  --premium-border: #EEEEEE;



  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

}



body {

  color: var(--premium-black) !important;

  background-color: #FFFFFF !important;

  line-height: 1.7;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  color: var(--premium-black) !important;

  letter-spacing: -0.5px;

}



/* 2. Sharp, High-Contrast Buttons */

.btn {

  border-radius: 0 !important;

  /* Sharp edges for high fashion look */

  text-transform: uppercase;

  letter-spacing: 1.5px;

  font-weight: 700;

  font-size: 0.85rem;

  padding: 14px 28px;

  transition: var(--transition-smooth) !important;

}



.btn-primary,

.btn-dark {

  background-color: var(--premium-black) !important;

  border: 1px solid var(--premium-black) !important;

  color: #fff !important;

}



.btn-primary:hover,

.btn-dark:hover {

  background-color: #fff !important;

  color: var(--premium-black) !important;

  border-color: var(--premium-black) !important;

}



.btn-outline-primary,

.btn-outline-dark {

  background-color: transparent !important;

  border: 1px solid var(--premium-black) !important;

  color: var(--premium-black) !important;

}



.btn-outline-primary:hover,

.btn-outline-dark:hover {

  background-color: var(--premium-black) !important;

  color: #fff !important;

}



/* 3. Cinematic Product Card Hover Effects */

.product-default {

  margin-bottom: 2.5rem;

  transition: var(--transition-smooth);

}



.product-default figure {

  overflow: hidden;

  border-radius: 0 !important;

  /* Sharp images */

}



.product-default figure img {

  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.product-default:hover figure img {

  transform: scale(1.05) !important;

  /* Slow cinematic zoom */

}



/* 4. Elegant Inputs */

form input[type="text"],

form input[type="email"],

form input[type="password"],

form textarea,

.form-control {

  border-radius: 0 !important;

  border: 1px solid var(--premium-border);

  padding: 12px 15px;

  background-color: var(--premium-light);

  transition: var(--transition-smooth);

}



form input:focus,

form textarea:focus,

.form-control:focus {

  border-color: var(--premium-black) !important;

  background-color: #fff;

  box-shadow: none !important;

}



/* 5. Frosted Glass (Glassmorphism) Header */

.sticky-header.fixed {

  background-color: rgba(255, 255, 255, 0.85) !important;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;

  border-bottom: 1px solid rgba(0, 0, 0, 0.05);

  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;

}



/* 6. Typography Refinements */

.text-uppercase,

.category-name {

  letter-spacing: 2px !important;

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--premium-gray);

}



.product-title a {

  font-weight: 700 !important;

  color: var(--premium-black) !important;

}



.price-box .product-price {

  font-weight: 600 !important;

  color: var(--premium-black) !important;

}



.price-box .old-price {

  color: var(--premium-gray) !important;

  font-weight: 400 !important;

}



/* Subtler product badges */

.product-label {

  border-radius: 0 !important;

  font-weight: 700;

  letter-spacing: 1px;

  text-transform: uppercase;

  padding: 5px 12px;

  font-size: 0.7rem;

}





/* Hide unwanted header icons for a cleaner look */

.user-dropdown-trigger::after {

  display: none !important;

  content: none !important;

}



.user-dropdown-trigger .icon-user-2 {

  display: none !important;

}



/* Revert zoom and shades for a clean premium white look */

.product-default:hover figure img {

  transform: none !important;

}



.product-default:hover {

  box-shadow: none !important;

  background-color: #fff !important;

}



.product-default figure::after {

  background-color: transparent !important;

}



/* ============================================================

   PREMIUM PRODUCT DETAILS & ACTIONS STYLING

   ============================================================ */

.product-default figure {

  margin-bottom: 12px !important;

  border-radius: 8px !important;

}



.product-default .product-details {

  padding: 10px 4px 6px 4px !important;

  text-align: center !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

}



.product-default .product-title {

  margin-bottom: 6px !important;

}



.product-default .product-title a,

.product-title a {

  font-family: var(--font-heading) !important;

  font-size: 1.42rem !important;

  font-weight: 700 !important;

  color: #000000 !important;

  letter-spacing: 0.02em !important;

  line-height: 1.25 !important;

  text-decoration: none !important;

  display: inline-block !important;

  transition: color 0.2s ease !important;

}



.product-default .product-title a:hover,

.product-title a:hover {

  color: #4b5563 !important;

}



/* Remove reward / star rating icons */

.ratings-container,

.product-ratings,

.ratings,

.product-default .ratings-container {

  display: none !important;

}



/* Luxury Price Box */

.product-default .price-box {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  margin: 4px 0 14px 0 !important;

}



.product-default .price-box span.ct-inline-57,

.product-default .price-box .discount-badge {

  background: #000000 !important;

  color: #ffffff !important;

  font-family: var(--font-body) !important;

  font-size: 0.72rem !important;

  font-weight: 800 !important;

  padding: 2px 7px !important;

  border-radius: 4px !important;

  letter-spacing: 0.5px !important;

  line-height: 1.4 !important;

}



.product-default .price-box .old-price {

  font-family: var(--font-body) !important;

  font-size: 0.95rem !important;

  color: #94a3b8 !important;

  font-weight: 500 !important;

  text-decoration: line-through !important;

}



.product-default .price-box .new-price,

.product-default .price-box .product-price {

  font-family: var(--font-body) !important;

  font-size: 1.15rem !important;

  color: #0f172a !important;

  font-weight: 800 !important;

  letter-spacing: -0.2px !important;

}



/* Force share icon to be visible by default */

.product-default .product-action .share-dropdown-wrapper,

.product-default .product-action .btn-share,

.product-default .product-action .btn-quickview,

.product-default .product-action .btn-share-grid-product {

  opacity: 1 !important;

  visibility: visible !important;

  display: inline-flex !important;

  transform: none !important;

  position: relative !important;

  margin: 0 !important;

}



/* Action buttons alignment and premium finish */

.product-action {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 10px !important;

  margin-top: 2px !important;

  width: 100% !important;

}



.product-action .btn-icon-wish,

.product-action .btn-quickview {

  width: 42px !important;

  height: 42px !important;

  min-width: 42px !important;

  border-radius: 50% !important;

  border: 1.5px solid #e2e8f0 !important;

  background: #ffffff !important;

  color: #0f172a !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  flex-shrink: 0 !important;

  padding: 0 !important;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.product-action .btn-icon-wish i,

.product-action .btn-quickview i {

  font-size: 1.1rem !important;

  margin: 0 !important;

  line-height: 1 !important;

}



.product-action .btn-icon-wish:hover,

.product-action .btn-quickview:hover {

  background: #000000 !important;

  color: #ffffff !important;

  border-color: #000000 !important;

  transform: scale(1.06) !important;

}



.product-action .btn-add-cart {

  height: 42px !important;

  background: #000000 !important;

  color: #ffffff !important;

  border: 1.5px solid #000000 !important;

  font-family: var(--font-body) !important;

  font-size: 0.82rem !important;

  font-weight: 800 !important;

  letter-spacing: 1.2px !important;

  text-transform: uppercase !important;

  border-radius: 6px !important;

  padding: 0 24px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;

  text-decoration: none !important;

  white-space: nowrap !important;

}



.product-action .btn-add-cart:hover {

  background: #1e293b !important;

  border-color: #1e293b !important;

  color: #ffffff !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;

}



.product-action .btn-add-cart {

  padding: 0 20px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

}



/* Final gap symmetry fix: remove the stray left margins that were causing unequal spacing */

.product-action .share-dropdown-wrapper,

.product-action .share-dropdown-wrapper .btn-quickview,

.product-action .btn-share-grid-product,

.product-action .btn-share {

  margin: 0 !important;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  color: var(--premium-black) !important;

  letter-spacing: -0.5px;

}



/* 2. Sharp, High-Contrast Buttons */

.btn {

  border-radius: 0 !important;

  /* Sharp edges for high fashion look */

  text-transform: uppercase;

  letter-spacing: 1.5px;

  font-weight: 700;

  font-size: 0.85rem;

  padding: 14px 28px;

  transition: var(--transition-smooth) !important;

}



.btn-primary,

.btn-dark {

  background-color: var(--premium-black) !important;

  border: 1px solid var(--premium-black) !important;

  color: #fff !important;

}



.btn-primary:hover,

.btn-dark:hover {

  background-color: #fff !important;

  color: var(--premium-black) !important;

  border-color: var(--premium-black) !important;

}



.btn-outline-primary,

.btn-outline-dark {

  background-color: transparent !important;

  border: 1px solid var(--premium-black) !important;

  color: var(--premium-black) !important;

}



.btn-outline-primary:hover,

.btn-outline-dark:hover {

  background-color: var(--premium-black) !important;

  color: #fff !important;

}



/* 3. Cinematic Product Card Hover Effects */

.product-default {

  margin-bottom: 2.5rem;

  transition: var(--transition-smooth);

}



.product-default figure {

  overflow: hidden;

  border-radius: 0 !important;

  /* Sharp images */

}



.product-default figure img {

  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.product-default:hover figure img {

  transform: scale(1.05) !important;

  /* Slow cinematic zoom */

}



/* 4. Elegant Inputs */

form input[type="text"],

form input[type="email"],

form input[type="password"],

form textarea,

.form-control {

  border-radius: 0 !important;

  border: 1px solid var(--premium-border);

  padding: 12px 15px;

  background-color: var(--premium-light);

  transition: var(--transition-smooth);

}



form input:focus,

form textarea:focus,

.form-control:focus {

  border-color: var(--premium-black) !important;

  background-color: #fff;

  box-shadow: none !important;

}



/* 5. Frosted Glass (Glassmorphism) Header */

.sticky-header.fixed {

  background-color: rgba(255, 255, 255, 0.85) !important;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;

  border-bottom: 1px solid rgba(0, 0, 0, 0.05);

  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;

}



/* 6. Typography Refinements */

.text-uppercase,

.category-name {

  letter-spacing: 2px !important;

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--premium-gray);

}



.product-title a {

  font-weight: 700 !important;

  color: var(--premium-black) !important;

}



.price-box .product-price {

  font-weight: 600 !important;

  color: var(--premium-black) !important;

}



.price-box .old-price {

  color: var(--premium-gray) !important;

  font-weight: 400 !important;

}



/* Subtler product badges */

.product-label {

  border-radius: 0 !important;

  font-weight: 700;

  letter-spacing: 1px;

  text-transform: uppercase;

  padding: 5px 12px;

  font-size: 0.7rem;

}





/* Hide unwanted header icons for a cleaner look */

.user-dropdown-trigger::after {

  display: none !important;

  content: none !important;

}



.user-dropdown-trigger .icon-user-2 {

  display: none !important;

}



/* Revert zoom and shades for a clean premium white look */

.product-default:hover figure img {

  transform: none !important;

}



.product-default:hover {

  box-shadow: none !important;

  background-color: #fff !important;

}



.product-default figure::after {

  background-color: transparent !important;

}



/* Aggressive spacing reduction below product images */

.product-default figure {

  margin-bottom: 8px !important;

}



.product-default .product-details {

  padding-top: 0 !important;

  margin-top: 0 !important;

}



.product-title {

  margin-bottom: 4px !important;

}



.ratings-container {

  margin-bottom: 4px !important;

}



.price-box {

  margin-bottom: 8px !important;

}



/* Force share icon to be visible by default (not just on hover) */

.product-default .product-action .share-dropdown-wrapper,

.product-default .product-action .btn-share {

  opacity: 1 !important;

  visibility: visible !important;

  transform: none !important;

}



/* Aggressive fix to permanently show the share icon in product cards */

.product-action {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  overflow: visible !important;

}



.product-action .share-dropdown-wrapper,

.product-action .btn-share {

  opacity: 1 !important;

  visibility: visible !important;

  display: inline-flex !important;

  transform: none !important;

  position: relative !important;

  right: 0 !important;

  left: 0 !important;

  margin-left: 5px !important;

}



/* Absolute fix for the exact share button class used in display-page.php */

.product-action .share-dropdown-wrapper .btn-quickview,

.product-action .btn-share-grid-product {

  opacity: 1 !important;

  visibility: visible !important;

  display: inline-flex !important;

  transform: none !important;

  position: relative !important;

  right: 0 !important;

  left: 0 !important;

  margin-left: 5px !important;

}



/* Perfect Alignment for Product Action Bar */

.product-action {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 10px !important;

  margin-top: 10px !important;

}



.product-action a,

.product-action .share-dropdown-wrapper,

.product-action .btn-quickview {

  margin: 0 !important;

  position: static !important;

}



.product-action .btn-icon-wish,

.product-action .btn-quickview {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 42px !important;

  height: 42px !important;

  border-radius: 50% !important;

  border: 1px solid #e1e1e1 !important;

  color: #111 !important;

  background: #fff !important;

  flex-shrink: 0 !important;

}



.product-action .btn-add-cart {

  height: 42px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 0 20px !important;

  border-radius: 4px !important;

  font-weight: 700 !important;

  font-size: 0.8rem !important;

  letter-spacing: 0.5px !important;

  background: #111 !important;

  color: #fff !important;

  border: none !important;

}



.product-action .btn-icon-wish i,

.product-action .btn-quickview i {

  font-size: 1.1rem !important;

  margin: 0 !important;

  line-height: 1 !important;

}



.product-action .btn-icon-wish:hover,

.product-action .btn-quickview:hover {

  background: #f4f4f4 !important;

  border-color: #ddd !important;

}



/* Absolute alignment lock for product action buttons */

.product-action * {

  box-sizing: border-box !important;

}



.product-action {

  align-items: stretch !important;

}



.product-action .share-dropdown-wrapper {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  height: 42px !important;

  margin: 0 !important;

  padding: 0 !important;

}



.product-action .btn-icon-wish,

.product-action .btn-quickview,

.product-action .btn-add-cart {

  height: 42px !important;

  line-height: 40px !important;

  margin: 0 !important;

  top: 0 !important;

  box-sizing: border-box !important;

  white-space: nowrap !important;

}



.product-action .btn-icon-wish,

.product-action .btn-quickview {

  width: 42px !important;

  min-width: 42px !important;

  padding: 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

}



.product-action .btn-add-cart {

  padding: 0 20px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

}



/* Final gap symmetry fix: remove the stray left margins that were causing unequal spacing */

.product-action .share-dropdown-wrapper,

.product-action .share-dropdown-wrapper .btn-quickview,

.product-action .btn-share-grid-product,

.product-action .btn-share {

  margin: 0 !important;

}



/* Remove browser autofill blue background */

input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active,

textarea:-webkit-autofill,

textarea:-webkit-autofill:hover,

textarea:-webkit-autofill:focus,

select:-webkit-autofill,

select:-webkit-autofill:hover,

select:-webkit-autofill:focus {

  -webkit-box-shadow: 0 0 0 30px white inset !important;

  -webkit-text-fill-color: #111111 !important;

  transition: background-color 5000s ease-in-out 0s !important;

}



.cc-ring {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  overflow: hidden;

  border: none !important;

}



/* Add space between each sentence in the top black carousel */

.top-bar-marquee span {

  margin-right: 30px !important;

  margin-left: 30px !important;

}



.cc-orbit {

  position: absolute;

  top: -18px;

  left: -18px;

  right: -18px;

  bottom: -18px;

  border: none !important;

  display: none !important;

  border-radius: 16px;

  pointer-events: none;

  z-index: 1;

}



/* Premium Hover Badge Effect Final */

.product-grid-view-badge.premium-hover-badge,

.premium-hover-badge {

  display: inline-flex !important;

  align-items: center !important;

  gap: 3px !important;

  font-weight: 600 !important;

  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;

  cursor: pointer !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  pointer-events: auto !important;

}



.product-grid-view-badge.premium-hover-badge i,

.premium-hover-badge i {

  margin-right: 1px !important;

  transition: transform 0.3s ease !important;

}



.product-grid-view-badge.premium-hover-badge .badge-text,

.premium-hover-badge .badge-text {

  max-width: 0px;

  opacity: 0;

  margin-left: 0 !important;

  display: inline-block;

  overflow: hidden !important;

  transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-left 0.3s ease !important;

  vertical-align: middle;

  white-space: nowrap;

}



/* Expand badge text when hovering ONLY the badge itself */

.product-grid-view-badge:hover,

.premium-hover-badge:hover {

  transform: scale(1.05) !important;

}



.product-grid-view-badge:hover i,

.premium-hover-badge:hover i {

  transform: scale(1.1) !important;

}



.product-grid-view-badge:hover .badge-text,

.premium-hover-badge:hover .badge-text {

  max-width: 250px !important;

  opacity: 1 !important;

  margin-left: 2px !important;

}



/* Force all product titles to Capitalize (First letter caps) */

.product-title,

.product-title a,

.lux-title,

.lux-card-title,

.na-premium-title,

.na-premium-title a,

.pdp-suggested-name,

.cart-product-title,

.order-product-title,

.grid-product-title {

  text-transform: none !important;

}



/* ── Suggested Products Luxury Showcase Section ── */

.pdp-suggested-section {

  padding: 60px 0 80px 0;

  background: #fafafa;

  border-top: 1px solid #eaeaea;

  margin-top: 50px;

}



.pdp-suggested-header {

  margin-bottom: 36px;

  text-align: center;

}



.pdp-suggested-sub {

  display: inline-block;

  font-size: 0.75rem;

  font-weight: 800;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: #666666;

  margin-top: 8px;

}



.pdp-suggested-title {

  font-size: 2.1rem;

  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: #000000 !important;

  margin: 0;

}



.pdp-spotlight-title {

  font-size: 2.35rem;

  font-weight: 900;

  letter-spacing: 3px;

  color: #000000 !important;

  display: block;

}



.pdp-suggested-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

}



@media (max-width: 991px) {

  .pdp-suggested-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 16px;

  }

}



@media (max-width: 575px) {

  .pdp-suggested-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

  }

}



.pdp-suggested-card {

  background: #ffffff;

  border-radius: 16px;

  overflow: hidden;

  border: 1px solid #eaeaea;

  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);

  display: flex;

  flex-direction: column;

  position: relative;

  text-decoration: none !important;

}



.pdp-suggested-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);

  border-color: #d1d1d1;

}



.pdp-suggested-img-wrap {

  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1.12;

  overflow: hidden;

  background: #f8f9fa;

  border-radius: 12px 12px 0 0;

  margin-bottom: 0;

}



.pdp-suggested-img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center top;

  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);

}



.pdp-suggested-card:hover .pdp-suggested-img {

  transform: scale(1.06);

}



.pdp-suggested-badge {

  position: absolute;

  top: 12px;

  left: 12px;

  background: #dc2626;

  color: #ffffff;

  font-size: 0.85rem;

  font-weight: 700;

  letter-spacing: 0.5px;

  padding: 4px 10px;

  border-radius: 20px;

  z-index: 2;

}



.pdp-suggested-cat-tag {

  display: none !important;

}



.pdp-suggested-content {

  padding: 6px 12px 12px 12px;

  display: flex;

  flex-direction: column;

  gap: 2px;

  flex-grow: 1;

}



.pdp-suggested-category {

  font-size: 0.92rem;

  font-weight: 700;

  color: #111827;

  text-transform: uppercase;

  letter-spacing: 0.6px;

  margin: 0;

  line-height: 1.2;

}



.pdp-suggested-name {

  font-size: 1.02rem;

  font-weight: 500;

  color: #4b5563;

  margin: 1px 0 2px 0;

  line-height: 1.25;

  text-transform: capitalize;

  display: -webkit-box;

  -webkit-line-clamp: 1;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.pdp-suggested-prices {

  display: flex;

  align-items: baseline;

  gap: 6px;

  margin-top: 2px;

  padding: 0;

  line-height: 1;

}



.pdp-suggested-mrp-label {

  font-size: 0.95rem;

  font-weight: 700;

  color: #111827;

  line-height: 1;

}



.pdp-suggested-price-now {

  font-size: 1.22rem;

  font-weight: 800;

  color: #111827;

  line-height: 1;

}



.pdp-suggested-price-was {

  font-size: 0.95rem;

  font-weight: 500;

  color: #888888;

  text-decoration: line-through;

  line-height: 1;

}



.pdp-suggested-discount {

  font-size: 0.92rem;

  font-weight: 700;

  color: #03a685;

  line-height: 1;

}



.pdp-suggested-btn {

  margin-top: 14px;

  width: 100%;

  padding: 10px 0;

  background: #f1f1f1;

  color: #111111;

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;

  border-radius: 10px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  transition: all 0.3s ease;

}



.pdp-suggested-card:hover .pdp-suggested-btn {

  background: #000000;

  color: #ffffff;

}



.pdp-suggested-btn i {

  transition: transform 0.3s ease;

}



.pdp-suggested-card:hover .pdp-suggested-btn i {

  transform: translateX(4px);

}



/* Force transparent background on hover for all slide nav arrow buttons */

.slide-nav-btn,

.slide-nav-btn:hover,

.slide-nav-btn:focus,

.slide-nav-btn:active,

.display-page .product-default .slide-nav-btn,

.display-page .product-default .slide-nav-btn:hover,

.display-page .product-default .slide-nav-btn:focus,

.display-page .product-default .slide-nav-btn:active {

  background: transparent !important;

  background-color: transparent !important;

  border-color: transparent !important;

  box-shadow: none !important;

  color: #000000 !important;

  outline: none !important;

}





/* --- MAGNETIC BUTTONS UI --- */

.magnetic-element {

  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

  will-change: transform;

}



.magnetic-element:hover {

  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.1s linear !important;

  z-index: 10;

}



/* ============================================================

   INSTANT REDIRECT & SMOOTH PAGE LOADER STYLES

   ============================================================ */

html {

  scroll-behavior: smooth;

}



#page-top-loader {

  display: none !important;

}



.page-wrapper {

  /* animation: pageFadeIn disabled */

}



@keyframes pageFadeIn {

  from {

    opacity: 0.94;

    transform: none;

  }



  to {

    opacity: 1;

    transform: none;

  }

}



/* Sticky header styling for seamless scrolling */

.sticky-wrapper {

  min-height: 70px;

}



.header-middle.fixed {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  width: 100% !important;

  z-index: 99999 !important;

  background-color: #ffffff !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;

  visibility: visible !important;

  opacity: 1 !important;

  transform: none !important;

  transition: background-color 0.2s ease, box-shadow 0.2s ease;

}



/* ALWAYS STICKY HEADER FOR NON-HOME PAGES */

.always-sticky {

  position: sticky !important;

  top: 0 !important;

  z-index: 1040 !important;

  background-color: #fff !important;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;

  width: 100%;

}



/* CENTER MODE CAROUSEL CSS */

.custom-center-carousel {

  padding-top: 40px;

  padding-bottom: 60px;

  background: #f0f0f0;

  /* Section background to match image */

  overflow: hidden;

}



.custom-center-carousel .owl-stage {

  display: flex;

  align-items: center;

}



.custom-center-carousel .owl-item {

  transition: all 0.8s ease;

  transform: scale(0.85);

  filter: grayscale(100%);

  /* Side items are Black & White */

  opacity: 0.8;

}



.custom-center-carousel .owl-item.center {

  transform: scale(1.1);

  filter: grayscale(0%);

  /* Center item is FULL COLOR */

  opacity: 1;

  z-index: 10;

}



.center-carousel-item {

  position: relative;

  border-radius: 12px;

  overflow: hidden;

  background: #e2e2e2;

  /* Side item card background */

  transition: all 0.8s ease;

}



.custom-center-carousel .owl-item.center .center-carousel-item {

  background: #ffffff;

  /* Center item is White */

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

  /* Subtle shadow for depth */

}



.center-card-img-wrap {

  width: 100%;

  aspect-ratio: 4/5;

  /* Taller rectangle like the image */

}



.center-card-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  mix-blend-mode: multiply;

  /* Makes white background of side images turn into the gray container color */

  transition: mix-blend-mode 0.8s ease;

}



.custom-center-carousel .owl-item.center .center-card-img-wrap img {

  mix-blend-mode: normal;

  /* Center item removes the multiply effect */

}



.center-card-info {

  position: absolute;

  top: 15px;

  left: 15px;

  background: rgba(255, 255, 255, 0.95);

  padding: 8px 12px;

  border-radius: 8px;

  opacity: 0;

  transition: opacity 0.5s ease, transform 0.5s ease;

  transform: translateY(-10px);

}



.custom-center-carousel .owl-item.center .center-card-info {

  opacity: 1;

  transform: none;

}



.center-card-info .cc-name {

  color: #6328e0;

  /* Purple text like MISBAH S. */

  font-weight: 800;

  font-size: 0.9rem;

  line-height: 1.2;

  margin-bottom: 2px;

}



.center-card-info .cc-sub {

  color: #111;

  font-size: 0.65rem;

  font-weight: 600;

  text-transform: uppercase;

}



/* Custom Nav Arrows for Center Carousel */

.custom-center-carousel .owl-nav {

  position: absolute;

  top: 50%;

  width: 100%;

  transform: translateY(-50%);

  display: flex;

  justify-content: space-between;

  pointer-events: none;

}



.custom-center-carousel .owl-nav button.owl-prev,

.custom-center-carousel .owl-nav button.owl-next {

  pointer-events: auto;

  width: 44px;

  height: 44px;

  background: #ffffff !important;

  color: #111 !important;

  border-radius: 50% !important;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;

  font-size: 1.2rem !important;

  transition: all 0.3s ease !important;

  margin: 0 -22px !important;

}



.custom-center-carousel .owl-nav button.owl-prev:hover,

.custom-center-carousel .owl-nav button.owl-next:hover {

  background: #111 !important;

  color: #fff !important;

  transform: scale(1.1);

}



/* Extracted Hero Banner Styles (index.php) */

.home-single-hero {

  position: relative;

  overflow: hidden;

}



.hero-shop-now-overlay {

  position: absolute;

  bottom: 20%;

  left: 8%;

  z-index: 5;

}



.btn-hero-shop-now {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: transparent;

  background-color: transparent;

  backdrop-filter: none;

  -webkit-backdrop-filter: none;

  color: #ffffff !important;

  font-weight: 800;

  font-size: 1.05rem;

  letter-spacing: 1px;

  padding: 0.9rem 2.25rem;

  border-radius: 50px;

  border: 2px solid #ffffff;

  text-transform: uppercase;

  text-decoration: none !important;

  box-shadow: none;

  transition: all 0.3s ease;

}



.btn-hero-shop-now:hover {

  background: #ffffff;

  background-color: #ffffff;

  color: #000000 !important;

  border-color: #ffffff;

  transform: translateY(-2px);

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);

}



@media (max-width: 767px) {

  .hero-shop-now-overlay {

    bottom: 18%;

    left: 50%;

    transform: translateX(-50%);

    width: max-content;

  }



  .btn-hero-shop-now {

    font-size: 0.9rem;

    padding: 0.75rem 1.75rem;

  }

}



/* Extracted Breadcrumb Sticky Style (description.php) */

.lux-breadcrumb-bar.always-sticky-breadcrumb {

  position: relative !important;

  top: auto !important;

  z-index: 10;

  background: #fff;

  border-bottom: 1px solid #f3f4f6;

  box-shadow: none !important;

  margin-top: 0 !important;

}





/* ============================================================

   LUXURY CART SIDEBAR ENHANCEMENTS & COUPON DRAWER

   ============================================================ */



   LUXURY CART SIDEBAR ENHANCEMENTS & COUPON DRAWER

   ============================================================ */

.cart-dropdown .mobile-cart {

  width: 360px !important;

  max-width: 92vw !important;

  background: #ffffff !important;

  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.15) !important;

  border: none !important;

}



.mobile-cart .dropdownmenu-wrapper {

  padding: 22px 20px !important;

  display: flex !important;

  flex-direction: column !important;

  box-sizing: border-box !important;

  height: 100% !important;

}



.dropdown-cart-header {

  font-family: var(--font-body) !important;

  font-size: 1.05rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.5px !important;

  color: #000000 !important;

  text-transform: uppercase !important;

  padding-bottom: 14px !important;

  border-bottom: 1px solid #e5e7eb !important;

  margin-bottom: 12px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

}



/* Products in cart */

.dropdown-cart-products {

  max-height: 220px !important;

  overflow-y: auto !important;

  padding-right: 4px !important;

  margin-bottom: 8px !important;

}



.dropdown-cart-products .product {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding: 12px 0 !important;

  margin: 0 !important;

  border-bottom: 1px solid #f3f4f6 !important;

  gap: 12px !important;

}



.dropdown-cart-products .product-image-container {

  width: 76px !important;

  height: 76px !important;

  margin: 0 !important;

  flex-shrink: 0 !important;

  border-radius: 8px !important;

  overflow: hidden !important;

  background: #ffffff !important;

  border: 1px solid #e5e7eb !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 4px !important;

  box-sizing: border-box !important;

}



.dropdown-cart-products .product-image {

  width: 100% !important;

  height: 100% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  margin: 0 !important;

}



.dropdown-cart-products .product-image img {

  max-width: 100% !important;

  max-height: 100% !important;

  width: auto !important;

  height: auto !important;

  object-fit: contain !important;

  object-position: center !important;

  display: block !important;

  margin: 0 auto !important;

}



.dropdown-cart-products .product-details {

  flex-grow: 1 !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  padding: 0 !important;

}



.dropdown-cart-products .product-title {

  margin: 0 0 3px 0 !important;

}



.dropdown-cart-products .product-title a {

  font-size: 1.02rem !important;

  font-weight: 700 !important;

  color: #000000 !important;

  letter-spacing: 0.1px !important;

  line-height: 1.3 !important;

  text-decoration: none !important;

  transition: color 0.2s !important;

}



.dropdown-cart-products .product-title a:hover {

  color: #4b5563 !important;

}



.dropdown-cart-products .cart-product-info {

  font-size: 0.95rem !important;

  font-weight: 700 !important;

  color: #111827 !important;

  display: flex !important;

  align-items: center !important;

  gap: 4px !important;

  margin-top: 2px !important;

}



.dropdown-cart-products .cart-product-info .cart-product-qty {

  font-weight: 700 !important;

  color: #4b5563 !important;

}



.dropdown-cart-products .cart-product-info .cart-product-times {

  font-weight: 600 !important;

  color: #9ca3af !important;

  font-size: 0.88rem !important;

}



.dropdown-cart-products .cart-product-info .cart-product-price {

  font-weight: 700 !important;

  color: #000000 !important;

}



.dropdown-cart-products .product-variants-text {

  font-size: 0.86rem !important;

  font-weight: 500 !important;

  color: #4b5563 !important;

  margin-top: 3px !important;

  line-height: 1.35 !important;

}



.dropdown-cart-products .product-variants-text .variant-sep {

  color: #d1d5db !important;

  margin: 0 3px !important;

}



.dropdown-cart-products .btn-remove-cart-item {

  color: #9ca3af !important;

  text-decoration: none !important;

  padding: 6px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 6px !important;

  transition: all 0.2s !important;

}



.dropdown-cart-products .btn-remove-cart-item:hover {

  color: #dc2626 !important;

  background: #fee2e2 !important;

}



/* ── Coupon Section ── */

.lux-coupon-section {

  margin: 12px 0 !important;

  position: relative !important;

}



.lux-coupon-trigger-btn {

  width: 100% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  background: #ffffff !important;

  border: 1.5px solid #000000 !important;

  border-radius: 8px !important;

  padding: 11px 14px !important;

  font-size: 0.92rem !important;

  font-weight: 700 !important;

  color: #000000 !important;

  cursor: pointer !important;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

  text-decoration: none !important;

  box-sizing: border-box !important;

}



.lux-coupon-trigger-btn:hover {

  background: #f9fafb !important;

  border-color: #000000 !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;

}



.lux-coupon-trigger-left {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

}



.lux-coupon-trigger-left svg {

  color: #000000 !important;

  flex-shrink: 0 !important;

}



.lux-coupon-chevron {

  color: #000000 !important;

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

  flex-shrink: 0 !important;

}



.lux-coupon-drawer {

  display: none;

  background: #ffffff !important;

  border: 1.5px solid #000000 !important;

  border-radius: 8px !important;

  padding: 14px !important;

  margin-top: 8px !important;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;

  animation: luxDrawerFade 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;

  box-sizing: border-box !important;

}



@keyframes luxDrawerFade {

  from {

    opacity: 0;

    transform: translateY(-4px);

  }



  to {

    opacity: 1;

    transform: none;

  }

}



.lux-coupon-input-group {

  display: flex !important;

  gap: 6px !important;

  margin-bottom: 8px !important;

}



.lux-coupon-input-group input {

  flex: 1 !important;

  height: 38px !important;

  padding: 0 12px !important;

  border: 1.5px solid #e5e7eb !important;

  border-radius: 6px !important;

  font-size: 0.85rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.5px !important;

  text-transform: uppercase !important;

  background: #ffffff !important;

  color: #000000 !important;

  outline: none !important;

  transition: border-color 0.2s !important;

  box-sizing: border-box !important;

}



.lux-coupon-input-group input:focus {

  border-color: #000000 !important;

}



.lux-coupon-input-group button {

  height: 38px !important;

  padding: 0 16px !important;

  background: #000000 !important;

  color: #ffffff !important;

  border: none !important;

  border-radius: 6px !important;

  font-size: 0.82rem !important;

  font-weight: 800 !important;

  letter-spacing: 0.5px !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

}



.lux-coupon-input-group button:hover {

  background: #262626 !important;

}



.lux-coupon-status {

  display: none;

  font-size: 0.78rem !important;

  font-weight: 600 !important;

  padding: 6px 10px !important;

  border-radius: 6px !important;

  margin-bottom: 8px !important;

  min-height: 16px !important;

}



.lux-applied-banner {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  background: #f3f4f6 !important;

  border: 1px solid #e5e7eb !important;

  border-radius: 6px !important;

  padding: 8px 12px !important;

  margin-bottom: 10px !important;

  box-sizing: border-box !important;

}



.lux-applied-left {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

}



.lux-applied-tag {

  background: #000000 !important;

  color: #ffffff !important;

  font-size: 0.65rem !important;

  font-weight: 800 !important;

  padding: 2px 6px !important;

  border-radius: 4px !important;

  letter-spacing: 0.5px !important;

  margin-left: 4px !important;

  vertical-align: middle !important;

  display: inline-block !important;

}



.lux-coupon-remove-btn {

  background: none !important;

  border: none !important;

  color: #dc2626 !important;

  font-size: 0.82rem !important;

  font-weight: 700 !important;

  cursor: pointer !important;

  padding: 4px 8px !important;

  border-radius: 4px !important;

  transition: background 0.2s !important;

}



.lux-coupon-remove-btn:hover {

  background: #fee2e2 !important;

}



/* Offers scroll area */

.lux-offers-wrap {

  margin-top: 10px !important;

  border-top: 1px solid #f3f4f6 !important;

  padding-top: 10px !important;

}



.lux-offers-header {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  font-size: 0.78rem !important;

  font-weight: 800 !important;

  color: #374151 !important;

  margin-bottom: 6px !important;

}



.lux-offers-list {

  display: flex !important;

  flex-direction: column !important;

  gap: 6px !important;

  max-height: 140px !important;

  overflow-y: auto !important;

}



.lux-offer-card,

.lux-offer-item {

  background: #f9fafb !important;

  border: 1px dashed #d1d5db !important;

  border-radius: 6px !important;

  padding: 8px 10px !important;

  transition: all 0.15s ease !important;

}



.lux-offer-card:hover,

.lux-offer-item:hover {

  background: #f3f4f6 !important;

  border-color: #000000 !important;

}



.lux-offer-top {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  margin-bottom: 2px !important;

}



.lux-offer-code {

  font-size: 0.88rem !important;

  font-weight: 800 !important;

  color: #000000 !important;

  letter-spacing: 0.5px !important;

}



.lux-offer-apply-btn {

  background: #ffffff !important;

  color: #000000 !important;

  border: 1px solid #000000 !important;

  border-radius: 4px !important;

  padding: 2px 8px !important;

  font-size: 0.65rem !important;

  font-weight: 800 !important;

  letter-spacing: 0.5px !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

}



.lux-offer-apply-btn:hover {

  background: #000000 !important;

  color: #ffffff !important;

}



.lux-offer-apply-btn.applied {

  background: #0f172a !important;

  background: #000000 !important;

  color: #ffffff !important;

  border-color: #000000 !important;

}



.lux-offer-desc {

  font-size: 0.72rem !important;

  color: #4b5563 !important;

  line-height: 1.35 !important;

}



/* ── Totals Box — Crisp Monochrome Alignment ── */

.lux-cart-totals-box {

  border-top: 1px solid #e5e7eb !important;

  padding: 14px 0 6px 0 !important;

  margin-top: 6px !important;

  box-sizing: border-box !important;

}



.lux-total-row {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  margin-bottom: 6px !important;

  font-size: 0.88rem !important;

  color: #374151 !important;

}



.lux-total-row .lux-row-label {

  font-weight: 600 !important;

  color: #374151 !important;

  letter-spacing: 0.2px !important;

}



.lux-total-row .lux-row-val {

  font-weight: 700 !important;

  color: #000000 !important;

}



.lux-total-row.lux-discount-row {

  color: #000000 !important;

}



.lux-total-row.lux-discount-row .lux-row-label,

.lux-total-row.lux-discount-row .lux-row-val {

  color: #000000 !important;

  font-weight: 700 !important;

}



.lux-final-total-row {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  border-top: 1px solid #e5e7eb !important;

  padding-top: 10px !important;

  margin-top: 8px !important;

}



.lux-final-total-row .lux-total-label {

  font-size: 0.95rem !important;

  font-weight: 800 !important;

  color: #000000 !important;

  letter-spacing: 0.5px !important;

  text-transform: uppercase !important;

}



.lux-final-total-row .lux-total-amount {

  font-size: 1.25rem !important;

  font-weight: 900 !important;

  color: #000000 !important;

  letter-spacing: -0.3px !important;

}



/* ── Action Buttons ── */

.dropdown-cart-action {

  display: flex !important;

  flex-direction: column !important;

  gap: 8px !important;

  margin-top: 10px !important;

}



.dropdown-cart-action .btn {

  height: 44px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 0.82rem !important;

  font-weight: 800 !important;

  letter-spacing: 1px !important;

  border-radius: 8px !important;

  text-transform: uppercase !important;

  transition: all 0.2s ease !important;

  text-decoration: none !important;

}



.dropdown-cart-action .btn-outline-dark {

  border: 1.5px solid #000000 !important;

  color: #000000 !important;

  background: #ffffff !important;

}



.dropdown-cart-action .btn-outline-dark:hover {

  background: #000000 !important;

  color: #ffffff !important;

}



.dropdown-cart-action .btn-dark {

  background: #000000 !important;

  border: 1.5px solid #000000 !important;

  color: #ffffff !important;

}



.dropdown-cart-action .btn-dark:hover {

  background: #262626 !important;

  border-color: #262626 !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;

}





/* =====================================================================

   PREMIUM CHECKOUT PAGE — Full Luxury Design System

   Strattent Brand: Cormorant Garamond + Montserrat | Pure Monochrome

   ===================================================================== */



/* ── Page Wrapper ── */

.checkout-page-wrapper {

  background: #f9fafb;

  padding-top: 32px !important;

  padding-bottom: 60px !important;

  min-height: 100vh;

}



/* ── Progress Bar (Step Indicator) ── */

.checkout-progress-bar {

  list-style: none;

  padding: 0 0 28px 0;

  margin: 0 0 24px 0;

  gap: 0;

  border-bottom: 1px solid #e5e7eb;

}



.checkout-progress-bar li {

  display: flex;

  align-items: center;

  gap: 10px;

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 0.88rem;

  font-weight: 600;

  letter-spacing: 0.6px;

  text-transform: uppercase;

  color: #9ca3af;

  position: relative;

}



.checkout-progress-bar li + li::before {

  content: '';

  width: 40px;

  height: 1px;

  background: #e5e7eb;

  display: block;

  margin: 0 16px;

}



.checkout-progress-bar li.active {

  color: #000000;

}



.checkout-progress-bar li.disabled {

  color: #d1d5db;

  pointer-events: none;

}



.checkout-progress-bar li a {

  color: inherit !important;

  text-decoration: none !important;

}



.checkout-step-badge {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 0.7rem;

  font-weight: 800;

  background: #e5e7eb;

  color: #9ca3af;

  flex-shrink: 0;

  transition: all 0.2s ease;

}



.checkout-progress-bar li.active .checkout-step-badge {

  background: #000000;

  color: #ffffff;

}



.checkout-progress-bar li.disabled .checkout-step-badge {

  background: #f3f4f6;

  color: #d1d5db;

}



/* ── Form Section Cards ── */

.checkout-card {

  background: #ffffff;

  border: 1px solid #e5e7eb;

  border-radius: 16px;

  padding: 28px 28px 24px;

  margin-bottom: 16px;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);

  transition: box-shadow 0.2s ease;

}



.checkout-card:hover {

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);

}



.checkout-card-header {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 22px;

  padding-bottom: 16px;

  border-bottom: 1px solid #f3f4f6;

}



.checkout-step-number {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: #000000;

  color: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 0.78rem;

  font-weight: 800;

  flex-shrink: 0;

  letter-spacing: 0;

}



.checkout-card-title {

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 1.05rem !important;

  font-weight: 800 !important;

  letter-spacing: 1px !important;

  text-transform: uppercase !important;

  color: #000000 !important;

  margin: 0 !important;

}



/* ── Premium Form Controls ── */

.checkout-card label {

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 0.82rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.4px !important;

  text-transform: uppercase !important;

  color: #111827 !important;

  margin-bottom: 8px !important;

  display: block !important;

}



.checkout-card abbr.required {

  color: #ef4444;

  text-decoration: none;

  margin-left: 2px;

}



.checkout-card .form-control {

  border: 1.5px solid #d1d5db;

  border-radius: 10px;

  padding: 13px 16px;

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 1rem !important;

  font-weight: 500;

  color: #111827 !important;

  background: #ffffff;

  transition: all 0.2s ease;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

  height: auto;

}



.checkout-card .form-control:focus {

  border-color: #000000;

  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);

  outline: none;

  background: #ffffff;

}



.checkout-card .form-control::placeholder {

  color: #6b7280 !important;

  font-weight: 400;

  font-size: 0.95rem;

}



.checkout-card select.form-control {

  -webkit-appearance: none;

  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23374151' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 14px center;

  padding-right: 36px;

}



.checkout-card textarea.form-control {

  resize: vertical;

  min-height: 80px;

}



/* ── Shipping Option Boxes ── */

.shipping-select-wrapper {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.shipping-option-box {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 18px;

  border: 1.5px solid #e5e7eb;

  border-radius: 12px;

  cursor: pointer;

  transition: all 0.2s ease;

  background: #ffffff;

  margin: 0 !important;

}



.shipping-option-box:hover {

  border-color: #9ca3af;

  background: #f9fafb;

}



.shipping-option-box.selected {

  border-color: #000000;

  background: #000000;

}



.shipping-option-box.selected .shipping-option-title,

.shipping-option-box.selected .shipping-option-desc,

.shipping-option-box.selected .shipping-option-price {

  color: #ffffff !important;

}



.shipping-option-left {

  display: flex;

  align-items: center;

  gap: 14px;

}



.shipping-option-title {

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 1rem;

  font-weight: 700;

  color: #111827;

  letter-spacing: 0.1px;

  display: block;

}



.shipping-option-desc {

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 0.85rem;

  font-weight: 400;

  color: #374151;

  margin: 3px 0 0;

}



.shipping-option-price {

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 1rem;

  font-weight: 800;

  color: #000000;

  white-space: nowrap;

  letter-spacing: -0.2px;

}



/* ── Custom Radio Button ── */

.custom-radio-modern {

  width: 18px;

  height: 18px;

  border-radius: 50%;

  border: 2px solid #9ca3af;

  appearance: none;

  -webkit-appearance: none;

  cursor: pointer;

  flex-shrink: 0;

  position: relative;

  transition: all 0.15s ease;

  background: #ffffff;

}



.custom-radio-modern:checked {

  border-color: #ffffff;

  background: #ffffff;

  box-shadow: 0 0 0 4px #000000;

}



.shipping-option-box.selected .custom-radio-modern:checked {

  box-shadow: 0 0 0 4px #ffffff;

  background: #000000;

}



/* ── Order Summary Card (Right Column) ── */

.summary-card {

  background: #ffffff;

  border: 1px solid #e5e7eb;

  border-radius: 16px;

  padding: 24px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

}



.sticky-summary {

  position: sticky;

  top: 90px;

}



/* ── Summary Items ── */

.summary-items-list {

  scrollbar-width: thin;

  scrollbar-color: #e5e7eb transparent;

}



.summary-items-list::-webkit-scrollbar {

  width: 4px;

}



.summary-items-list::-webkit-scrollbar-track {

  background: transparent;

}



.summary-items-list::-webkit-scrollbar-thumb {

  background: #e5e7eb;

  border-radius: 4px;

}



.summary-item-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 0;

  border-bottom: 1px solid #f3f4f6;

  gap: 12px;

}



.summary-item-row:last-child {

  border-bottom: none;

}



.summary-item-left {

  display: flex;

  align-items: center;

  gap: 12px;

  flex: 1;

  min-width: 0;

}



.summary-item-img {

  width: 52px;

  height: 52px;

  object-fit: cover;

  border-radius: 8px;

  border: 1px solid #e5e7eb;

  flex-shrink: 0;

  background: #f9fafb;

}



.summary-item-title {

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 0.95rem;

  font-weight: 700;

  color: #111827;

  line-height: 1.3;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.summary-item-meta {

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 0.82rem;

  font-weight: 500;

  color: #374151;

  margin-top: 3px;

}



.summary-item-price {

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 1rem;

  font-weight: 800;

  color: #000000;

  white-space: nowrap;

  flex-shrink: 0;

}



/* ── Coupon Section ── */

.checkout-coupon-section {

  border-top: 1px solid #e5e7eb;

  padding-top: 18px;

  margin-top: 4px;

}



.coupon-section-title {

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 0.82rem;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;

  color: #000000;

  margin-bottom: 12px;

}



.coupon-section-title i {

  color: #000000 !important;

  border-color: #000000 !important;

}



.coupon-card-container {

  background: #f9fafb !important;

  border: 1.5px solid #e5e7eb !important;

  border-radius: 14px !important;

  overflow: hidden;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;

}



/* ── Each Coupon Row ── */

.coupon-item {

  padding: 14px 16px !important;

  border-bottom: 1px solid #e5e7eb !important;

  background: #f9fafb !important;

  transition: background 0.15s ease;

}



.coupon-item:last-child {

  border-bottom: none !important;

}



.coupon-item:hover {

  background: #f3f4f6 !important;

}



.coupon-item .d-flex.justify-content-between.align-items-start {

  align-items: center !important;

}



/* ── Ticket Icon Box ── */

.coupon-item .mr-3 > div {

  background: #000000 !important;

  color: #ffffff !important;

  width: 38px !important;

  height: 38px !important;

  border-radius: 10px !important;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;

}



.coupon-item .mr-3 > div i {

  color: #ffffff !important;

  font-size: 1rem !important;

}



/* ── Coupon Title (Save X% with CODE) ── */

.coupon-item .font-weight-bold.text-dark {

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 1rem !important;

  font-weight: 800 !important;

  color: #000000 !important;

  letter-spacing: 0.1px !important;

  line-height: 1.3 !important;

}



/* ── Coupon Description ── */

.coupon-item p.mb-0 {

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 0.92rem !important;

  font-weight: 500 !important;

  color: #374151 !important;

  line-height: 1.5 !important;

  margin-top: 4px !important;

}



/* ── APPLY button ── */

.apply-coupon-btn {

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 0.8rem !important;

  font-weight: 800 !important;

  letter-spacing: 0.6px !important;

  border-radius: 8px !important;

  padding: 7px 18px !important;

  transition: all 0.2s ease !important;

  text-transform: uppercase !important;

  white-space: nowrap !important;

}



/* APPLY — solid black */

.apply-coupon-btn[data-code]:not([data-code=""]) {

  background: #000000 !important;

  color: #ffffff !important;

  border: 1.5px solid #000000 !important;

}



.apply-coupon-btn[data-code]:not([data-code=""]):hover {

  background: #1a1a1a !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;

}



/* REMOVE — outlined */

.apply-coupon-btn[data-code=""] {

  background: #ffffff !important;

  color: #374151 !important;

  border: 1.5px solid #d1d5db !important;

}



.apply-coupon-btn[data-code=""]:hover {

  background: #f3f4f6 !important;

  border-color: #9ca3af !important;

}



/* ── All Offers Toggle ── */

#toggle-all-offers-btn {

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 0.85rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.4px !important;

  color: #000000 !important;

  border-bottom: 1px dashed #000000;

  display: inline-block;

  cursor: pointer;

  padding-bottom: 1px;

  margin-top: 8px !important;

}



#toggle-all-offers-btn i {

  color: #000000 !important;

}





/* ── Calculations Table ── */

.summary-calc-table {

  width: 100%;

}

.lux-heading-serif {

  font-family: 'Roboto Condensed', sans-serif !important;

}

.summary-calc-table tr td {

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 0.95rem;

  padding: 7px 0;

  vertical-align: middle;

}



.summary-calc-label {

  color: #374151;

  font-weight: 500;

}



.summary-calc-val {

  text-align: right;

  font-weight: 700;

  color: #000000;

}



.summary-calc-table tr td.text-success {

  color: #16a34a !important;

}



/* ── Grand Total Row ── */

.summary-total-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 0 12px;

  border-top: 2px solid #000000;

  margin-top: 12px;

}



.summary-total-label {

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 1rem;

  font-weight: 800;

  letter-spacing: 0.8px;

  text-transform: uppercase;

  color: #000000;

}



.summary-total-val {

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 1.3rem;

  font-weight: 900;

  color: #000000;

  letter-spacing: -0.5px;

}



/* ── Payment Method Section ── */

.payment-section {

  background: #f9fafb !important;

  border: 1.5px solid #e5e7eb !important;

  border-radius: 12px !important;

  padding: 14px 18px !important;

}



.payment-section h4 {

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 0.72rem !important;

  font-weight: 800 !important;

  letter-spacing: 0.8px !important;

  text-transform: uppercase !important;

  color: #374151 !important;

  margin-bottom: 8px !important;

}



/* ── Place Order Button ── */

.btn-checkout-primary {

  background: #000000 !important;

  color: #ffffff !important;

  border: none !important;

  border-radius: 12px !important;

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 0.88rem !important;

  font-weight: 800 !important;

  letter-spacing: 1.5px !important;

  text-transform: uppercase !important;

  padding: 15px 24px !important;

  height: auto !important;

  transition: all 0.25s ease !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;

  position: relative;

  overflow: hidden;

}



.btn-checkout-primary::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 60%);

  pointer-events: none;

}



.btn-checkout-primary:hover {

  background: #1a1a1a !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;

  color: #ffffff !important;

}



.btn-checkout-primary:active {

  transform: translateY(0) !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;

}



/* ── Continue Shopping Button ── */

.continue-shopping-btn {

  background-color: #ffffff !important;

  color: #374151 !important;

  border: 1.5px solid #e5e7eb !important;

  border-radius: 12px !important;

  padding: 12px 24px !important;

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 0.82rem !important;

  font-weight: 600 !important;

  letter-spacing: 0.5px !important;

  transition: all 0.2s ease !important;

  text-decoration: none !important;

}



.continue-shopping-btn:hover {

  background-color: #f3f4f6 !important;

  border-color: #9ca3af !important;

  color: #111827 !important;

}



/* ── Order Success Screen ── */

.checkout-success-wrapper {

  background: #ffffff;

  border-radius: 20px;

  border: 1px solid #e5e7eb;

  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);

  padding: 40px 48px;

  margin-top: 24px;

}



.border-right-custom {

  border-right: 1px solid #e5e7eb;

}



.ct-inline-4 {

  width: 64px;

  height: 64px;

  font-size: 1.4rem;

  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.25);

}



.ct-inline-5 {

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 1.8rem !important;

  font-weight: 700 !important;

  color: #000000 !important;

  letter-spacing: -0.3px;

}



.ct-inline-6 {

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 0.92rem !important;

  color: #4b5563 !important;

}



.order-id-link {

  background: #f9fafb !important;

  border: 1.5px solid #e5e7eb !important;

  border-radius: 12px !important;

  font-size: 1rem !important;

  color: #000000 !important;

  transition: all 0.2s ease !important;

}



.order-id-link:hover {

  border-color: #000000 !important;

  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;

}



.order-id-link strong {

  color: #000000 !important;

  font-weight: 900 !important;

}



/* ── Flash Error Alert ── */

.checkout-page-wrapper .alert-danger {

  background: #fef2f2;

  border: 1px solid #fecaca;

  border-radius: 12px;

  color: #991b1b;

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 0.88rem;

  font-weight: 500;

  padding: 14px 20px;

}



/* ── Shipping Method Border Override ── */

.checkout-page-wrapper .pt-3.border-top {

  border-color: #f3f4f6 !important;

}



/* ── "YOUR ORDER" Header in Summary Card ── */

.summary-card .checkout-card-title {

  font-size: 0.82rem !important;

  letter-spacing: 1.5px !important;

}



/* ── Responsive ── */

@media (max-width: 991px) {

  .sticky-summary {

    position: static;

    margin-top: 20px;

  }



  .checkout-card {

    padding: 20px 18px;

  }



  .border-right-custom {

    border-right: none;

    border-bottom: 1px solid #e5e7eb;

    padding-bottom: 24px;

    margin-bottom: 24px;

  }

}



@media (max-width: 575px) {

  .checkout-card {

    padding: 16px 14px;

  }



  .summary-card {

    padding: 18px 16px;

  }



  .checkout-progress-bar li + li::before {

    width: 20px;

    margin: 0 8px;

  }



  .summary-total-val {

    font-size: 1.1rem;

  }

}

/* ============================================================

   FLIPKART STYLE CART REDESIGN

   ============================================================ */



/* Mobile Base Styling */

body {

    background-color: #f1f3f6; /* Classic Flipkart grey background */

}

.cart-page-wrapper {

    background-color: transparent !important;

}



.fk-cart-items-list {

    margin-bottom: 12px;

}



.fk-product-card {

    background: #fff;

    padding: 12px 16px;

    margin-bottom: 12px;

    display: flex;

    flex-direction: column;

    border-bottom: 1px solid #f0f0f0;

}



.fk-product-img-wrapper {

    width: 90px;

    margin-right: 16px;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.fk-product-img-wrapper img {

    width: 100%;

    max-height: 100px;

    object-fit: contain;

    margin-bottom: 16px;

}



/* Custom + / - qty buttons */

.fk-qty-controls {

    display: flex;

    align-items: center;

    border: 1px solid #c2c2c2;

    border-radius: 4px;

    height: 28px;

    width: 100%;

}

.fk-qty-controls button {

    background: none;

    border: none;

    font-size: 18px;

    font-weight: 500;

    width: 28px;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #000;

}

.fk-qty-controls input {

    border: none;

    border-left: 1px solid #c2c2c2;

    border-right: 1px solid #c2c2c2;

    width: calc(100% - 56px);

    text-align: center;

    font-size: 14px;

    font-weight: 500;

    height: 100%;

    padding: 0;

}



.fk-product-details {

    flex: 1;

}



.fk-product-title a {

    font-size: 14px;

    font-weight: 500;

    color: #212121;

    display: block;

    margin-bottom: 6px;

    line-height: 1.3;

}



.fk-product-variations {

    font-size: 12px;

    color: #878787;

    margin-bottom: 8px;

}

.fk-product-variations span {

    margin-right: 10px;

}



.fk-product-price {

    margin-bottom: 12px;

}

.fk-current-price {

    font-size: 18px;

    font-weight: 500;

    color: #212121;

}



.fk-delivery-info {

    font-size: 12px;

    color: #212121;

    padding-bottom: 16px;

    border-bottom: 1px solid #f0f0f0;

    margin-bottom: 12px;

}



.fk-product-actions {

    display: flex;

    gap: 16px;

}

.fk-product-actions a, .fk-product-actions button {

    background: none;

    border: none;

    font-size: 14px;

    font-weight: 500;

    color: #212121;

    text-transform: uppercase;

    display: flex;

    align-items: center;

    gap: 6px;

    text-decoration: none;

}

.fk-product-actions a:hover, .fk-product-actions button:hover {

    color: #2874f0;

}



/* Coupon Section */

.fk-coupon-section {

    background: #fff;

    padding: 16px;

    margin-bottom: 12px;

}

.fk-coupon-trigger {

    background: #f5faff;

    border: 1px solid #e0ebf9;

    padding: 12px 16px;

    border-radius: 6px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 14px;

    font-weight: 500;

    color: #212121;

    cursor: pointer;

}



/* Price Details (Summary) */

.fk-price-details {

    background: #fff;

    padding: 16px;

}

.fk-price-details h3 {

    font-size: 16px;

    font-weight: 500;

    color: #878787;

    text-transform: uppercase;

    border-bottom: 1px solid #f0f0f0;

    padding-bottom: 12px;

    margin-bottom: 12px;

}

.fk-totals-table {

    width: 100%;

}

.fk-totals-table td {

    padding: 8px 0;

    font-size: 14px;

    color: #212121;

    border: none;

}

.fk-totals-table td:last-child {

    text-align: right;

}

.fk-totals-table tfoot td {

    font-size: 16px;

    font-weight: 600;

    border-top: 1px dashed #e0e0e0;

    padding-top: 16px;

    margin-top: 8px;

}



.fk-savings-banner {

    background: #e6f9eb;

    color: #388e3c;

    padding: 10px;

    border-radius: 4px;

    font-size: 14px;

    font-weight: 500;

    margin-top: 16px;

}



/* Sticky Checkout Bar (Mobile) */

.fk-mobile-checkout-bar {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    background: #fff;

    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 16px;

    z-index: 999;

}

.fk-mobile-checkout-price h3 {

    margin: 0;

    font-size: 20px;

    font-weight: 600;

    color: #212121;

}

.fk-mobile-checkout-btn .btn {

    background: #fb641b;

    color: #fff;

    font-weight: 500;

    font-size: 16px;

    padding: 12px 32px;

    border-radius: 4px;

    border: none;

}



/* Desktop Adjustments */

@media (min-width: 992px) {

    .fk-product-card { border: 1px solid #f0f0f0; border-radius: 4px; }

    .fk-coupon-section { border: 1px solid #f0f0f0; border-radius: 4px; }

    .fk-price-details { border: 1px solid #f0f0f0; border-radius: 4px; position: sticky; top: 20px; }

    body { background-color: #fff; }

}

@media (max-width: 991px) {

    .fk-desktop-checkout { display: none; }

    .cart-page-wrapper { padding-bottom: 80px; }

    .page-wrapper { background-color: #f1f3f6; }

}



/* Coupon Modal */

.fk-coupon-modal .modal-content {

    border-radius: 8px;

    border: none;

}

.fk-coupon-card {

    border: 1px solid #e0e0e0;

    border-radius: 4px;

    padding: 12px;

    margin-bottom: 12px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.fk-coupon-code {

    font-weight: 600;

    font-size: 14px;

    color: #212121;

    background: #f5faff;

    padding: 4px 8px;

    border: 1px dashed #2874f0;

    display: inline-block;

    margin-bottom: 6px;

}

.fk-coupon-desc {

    font-size: 13px;

    color: #878787;

}

.fk-apply-direct-btn {

    background: none;

    border: none;

    color: #2874f0;

    font-weight: 600;

    font-size: 14px;

    padding: 8px;

}



/* ─────────────────────────────────────────────────────────────

   COMPLETE LUXURY REDESIGN - PRODUCT CARD (Shop / Display Page)

───────────────────────────────────────────────────────────── */

.display-page .product-default {

  background: transparent !important;

  border: none !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  margin-bottom: 2.2rem !important;

  padding: 0 !important;

  text-align: left !important;

  position: relative !important;

  transition: none !important;

}



.display-page .product-default:hover {

  transform: none !important;

  border: none !important;

  box-shadow: none !important;

}



/* Moderately Balanced Luxury Card & Figure Height */

.display-page .product-default figure {

  position: relative !important;

  overflow: hidden !important;

  border-radius: 8px !important;

  background: #f4f5f7 !important;

  height: 370px !important;

  max-height: none !important;

  margin: 0 !important;

  padding: 0 !important;

  border: 1px solid #f0f1f3 !important;

}



.display-page .product-default figure a.product-image-link {

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  position: relative !important;

}



.display-page .product-default figure img {

  width: 100% !important;

  height: 100% !important;

  max-height: none !important;

  object-fit: cover !important;

  object-position: center top !important;

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;

}



.display-page .product-default:hover figure img {

  transform: scale(1.04) !important;

}



/* Floating Actions On Image: Wishlist (Top-Right), Share (Below Wishlist, Right) */

.display-page .product-default figure .card-floating-share {

  position: absolute !important;

  top: 52px !important;

  right: 8px !important;

  left: auto !important;

  bottom: auto !important;

  z-index: 25 !important;

  margin: 0 !important;

  padding: 0 !important;

  display: flex !important;

  opacity: 1 !important;

  visibility: visible !important;

}



.display-page .product-default figure .card-floating-share .btn-share-grid-product {

  opacity: 1 !important;

  visibility: visible !important;

  display: flex !important;

}



.display-page .product-default figure .card-floating-wishlist,

.display-page .product-default figure a.btn-icon-wish,

.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist {

  position: absolute !important;

  top: 8px !important;

  right: 8px !important;

  left: auto !important;

  bottom: auto !important;

  z-index: 25 !important;

  margin: 0 !important;

  display: flex !important;

  opacity: 1 !important;

  visibility: visible !important;

}



.display-page .product-default figure .card-action-circle,

.display-page .product-default figure .card-floating-share .btn-share-grid-product,

.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist {

  width: 36px !important;

  height: 36px !important;

  min-width: 36px !important;

  border-radius: 50% !important;

  background: rgba(255, 255, 255, 0.95) !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;

  color: #1e293b !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  text-decoration: none !important;

  padding: 0 !important;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.display-page .product-default figure .card-action-circle i,

.display-page .product-default figure .card-floating-share .btn-share-grid-product i,

.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist i {

  font-size: 0.9rem !important;

  line-height: 1 !important;

  color: #1e293b !important;

  margin: 0 !important;

  transition: color 0.15s ease, transform 0.15s ease !important;

}



/* Share Button Hover: Dark Navy */

.display-page .product-default figure .card-floating-share .btn-share-grid-product:hover {

  background: #0f172a !important;

  color: #ffffff !important;

  border-color: #0f172a !important;

  transform: scale(1.08) !important;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;

}



.display-page .product-default figure .card-floating-share .btn-share-grid-product:hover i {

  color: #ffffff !important;

}



/* Wishlist Button: ALWAYS Clean White Circle (Never black!) */

.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist,

.product-default figure a.btn-icon-wish.card-floating-wishlist {

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  color: #475569 !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

}



/* Hover on Wishlist Button: stays White Circle */

.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist:hover,

.product-default figure a.btn-icon-wish.card-floating-wishlist:hover {

  background: #ffffff !important;

  border-color: rgba(0, 0, 0, 0.15) !important;

  transform: scale(1.08) !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;

}



.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist:not(.active) i,

.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist:not(.active):hover i,

.product-default figure a.btn-icon-wish.card-floating-wishlist:not(.active) i,

.product-default figure a.btn-icon-wish.card-floating-wishlist:not(.active):hover i {

  color: #475569 !important;

}



.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist:not(.active) i:before,

.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist:not(.active):hover i:before,

.product-default figure a.btn-icon-wish.card-floating-wishlist:not(.active) i:before,

.product-default figure a.btn-icon-wish.card-floating-wishlist:not(.active):hover i:before {

  content: "" !important; /* outline heart */

}



/* Active Wishlist Button: Red Heart, Clean White Circle (No pink/red border or shade!) */

.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist.active,

.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist.active:hover,

.product-default figure a.btn-icon-wish.card-floating-wishlist.active,

.product-default figure a.btn-icon-wish.card-floating-wishlist.active:hover {

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  color: #e11d48 !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

}



.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist:focus,

.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist.active:focus,

.product-default figure a.btn-icon-wish.card-floating-wishlist:focus,

.product-default figure a.btn-icon-wish.card-floating-wishlist.active:focus {

  outline: none !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

}



.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist.active i,

.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist.active:hover i,

.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist i.active,

.product-default figure a.btn-icon-wish.card-floating-wishlist.active i,

.product-default figure a.btn-icon-wish.card-floating-wishlist.active:hover i,

.product-default figure a.btn-icon-wish.card-floating-wishlist i.active {

  color: #e11d48 !important;

}



.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist.active i:before,

.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist.active:hover i:before,

.display-page .product-default figure a.btn-icon-wish.card-floating-wishlist i.active:before,

.product-default figure a.btn-icon-wish.card-floating-wishlist.active i:before,

.product-default figure a.btn-icon-wish.card-floating-wishlist.active:hover i:before,

.product-default figure a.btn-icon-wish.card-floating-wishlist i.active:before {

  content: "" !important; /* filled red heart */

}



/* Floating Share Dropdown Menu */

.display-page .product-default .share-dropdown-menu {

  position: absolute !important;

  top: calc(100% + 6px) !important;

  bottom: auto !important;

  left: 0 !important;

  right: auto !important;

  z-index: 100 !important;

  background: #ffffff !important;

  border-radius: 8px !important;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.14) !important;

  border: 1px solid #e2e8f0 !important;

  min-width: 140px !important;

  padding: 4px 0 !important;

  list-style: none !important;

}



.display-page .product-default .share-dropdown-item {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  padding: 6px 12px !important;

  font-size: 0.78rem !important;

  font-family: 'Roboto Condensed', sans-serif !important;

  font-weight: 500 !important;

  color: #334155 !important;

  text-decoration: none !important;

  transition: background 0.15s ease !important;

}



.display-page .product-default .share-dropdown-item:hover {

  background: #f1f5f9 !important;

  color: #0f172a !important;

}



/* Floating Purchase Badge (Expands on Hover to Right) */

.display-page .product-default figure .card-floating-badge {

  position: absolute !important;

  bottom: 6px !important;

  left: 6px !important;

  top: auto !important;

  right: auto !important;

  background: rgba(15, 23, 42, 0.88) !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

  color: #ffffff !important;

  border-radius: 20px !important;

  padding: 2.5px 7px !important;

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 8.5px !important;

  font-weight: 600 !important;

  letter-spacing: 0.1px !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 3px !important;

  z-index: 20 !important;

  pointer-events: auto !important;

  cursor: pointer !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;

  white-space: nowrap !important;

  user-select: none !important;

  max-width: calc(100% - 12px) !important;

  box-sizing: border-box !important;

  transform-origin: left bottom !important;

  transition: background 0.3s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;

}



.display-page .product-default figure .card-floating-badge i {

  font-size: 8.5px !important;

  color: #fbbf24 !important;

  transition: transform 0.25s ease !important;

  flex-shrink: 0 !important;

}



.display-page .product-default figure .card-floating-badge .badge-count {

  font-weight: 700 !important;

  color: #ffffff !important;

  flex-shrink: 0 !important;

}



.display-page .product-default figure .card-floating-badge .badge-text {

  max-width: 0 !important;

  opacity: 0 !important;

  overflow: hidden !important;

  white-space: nowrap !important;

  display: inline-block !important;

  vertical-align: middle !important;

  transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin-left 0.25s ease !important;

  color: #f1f5f9 !important;

}



/* Expand smoothly to right side when hovering or tapped (unless explicitly collapsed) */

.display-page .product-default figure .card-floating-badge:hover,

.display-page .product-default figure .card-floating-badge.expanded {

  background: #0f172a !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;

}



.display-page .product-default figure .card-floating-badge:hover i,

.display-page .product-default figure .card-floating-badge.expanded i {

  transform: scale(1.1) !important;

}



.display-page .product-default figure .card-floating-badge:hover .badge-text,

.display-page .product-default figure .card-floating-badge.expanded .badge-text {

  max-width: 220px !important;

  opacity: 1 !important;

  margin-left: 2px !important;

}



/* Force collapse on click even while hovered */

.display-page .product-default figure .card-floating-badge.is-collapsed,

.display-page .product-default figure .card-floating-badge.is-collapsed:hover,

.product-grid-view-badge.premium-hover-badge.is-collapsed,

.product-grid-view-badge.premium-hover-badge.is-collapsed:hover {

  background: rgba(15, 23, 42, 0.88) !important;

  transform: none !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;

}



.display-page .product-default figure .card-floating-badge.is-collapsed i,

.display-page .product-default figure .card-floating-badge.is-collapsed:hover i {

  transform: none !important;

}



.display-page .product-default figure .card-floating-badge.is-collapsed .badge-text,

.display-page .product-default figure .card-floating-badge.is-collapsed:hover .badge-text,

.product-grid-view-badge.is-collapsed .badge-text,

.product-grid-view-badge.is-collapsed:hover .badge-text,

.premium-hover-badge.is-collapsed .badge-text,

.premium-hover-badge.is-collapsed:hover .badge-text {

  max-width: 0 !important;

  opacity: 0 !important;

  margin-left: 0 !important;

}



/* Slide Nav Micro-Buttons */

.display-page .product-default .slide-nav-btn {

  position: absolute !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  width: 26px !important;

  height: 26px !important;

  border-radius: 50% !important;

  background: rgba(255, 255, 255, 0.9) !important;

  backdrop-filter: blur(4px) !important;

  -webkit-backdrop-filter: blur(4px) !important;

  border: 1px solid rgba(0, 0, 0, 0.06) !important;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;

  color: #111111 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 0.7rem !important;

  cursor: pointer !important;

  z-index: 10 !important;

  opacity: 0 !important;

  visibility: hidden !important;

  transition: all 0.2s ease !important;

  padding: 0 !important;

}



.display-page .product-default .slide-nav-btn.prev-slide {

  left: 6px !important;

}



.display-page .product-default .slide-nav-btn.next-slide {

  right: 6px !important;

}



.display-page .product-default:hover .slide-nav-btn {

  opacity: 0.95 !important;

  visibility: visible !important;

}



.display-page .product-default .slide-nav-btn:hover {

  background: #0f172a !important;

  color: #ffffff !important;

  transform: translateY(-50%) scale(1.08) !important;

}



/* Product Details - Compact, Clean, Flush Left (Myntra App Style) */

.display-page .product-default .product-details,

.product-default .product-details {

  padding: 6px 2px 2px 2px !important;

  text-align: left !important;

  background: transparent !important;

}



.display-page .product-default .product-title,

.product-default .product-title {

  margin: 0 0 3px 0 !important;

  text-align: left !important;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;

  font-size: 13.5px !important;

  font-weight: 600 !important;

  line-height: 1.35 !important;

  letter-spacing: 0.1px !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

}



.display-page .product-default .product-title a,

.product-default .product-title a {

  color: #282c3f !important;

  text-decoration: none !important;

  transition: opacity 0.15s ease, color 0.15s ease !important;

}



.display-page .product-default .product-title a:hover,

.display-page .product-default:hover .product-title a,

.product-default .product-title a:hover,

.product-default:hover .product-title a {

  color: #282c3f !important;

  text-decoration: none !important;

}



/* Price Box - Flush Left (₹Price  ₹Strike  X% off) */

.display-page .product-default .price-box,

.product-default .price-box {

  display: flex !important;

  align-items: baseline !important;

  justify-content: flex-start !important;

  gap: 6px !important;

  margin: 0 !important;

  padding: 0 !important;

  flex-wrap: nowrap !important;

  text-align: left !important;

}



.display-page .product-default .price-box .new-price,

.product-default .price-box .new-price {

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;

  font-size: 14px !important;

  color: #282c3f !important;

  font-weight: 700 !important;

  letter-spacing: -0.2px !important;

  line-height: 1 !important;

}



.display-page .product-default .price-box .old-price,

.product-default .price-box .old-price {

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;

  font-size: 12.5px !important;

  color: #3a3d47 !important;

  font-weight: 500 !important;

  text-decoration: line-through !important;

  text-decoration-color: #6b6e7a !important;

  line-height: 1 !important;

}



.display-page .product-default .price-box span.ct-inline-57,

.product-default .price-box span.ct-inline-57 {

  background: transparent !important;

  color: #03a685 !important;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  padding: 0 !important;

  border-radius: 0 !important;

  letter-spacing: 0 !important;

  line-height: 1 !important;

  margin: 0 !important;

}



/* Tablet Responsive Sizing */

@media (max-width: 991px) {

  .display-page .product-default figure,

  .product-default figure,

  .display-page .product-default figure img,

  .product-default figure img {

    height: 270px !important;

    max-height: none !important;

  }

  .display-page .product-default .slide-nav-btn,

  .product-default .slide-nav-btn {

    display: none !important;

  }

}



/* Mobile Responsive Sizing (e.g. 502px width / phones) */

@media (max-width: 767px) {

  .display-page .product-default,

  .product-default {

    margin-bottom: 1.6rem !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    text-align: left !important;

  }

  .display-page .product-default figure,

  .product-default figure,

  .display-page .product-default figure img,

  .product-default figure img {

    height: 235px !important;

    max-height: none !important;

    border-radius: 8px !important;

  }

  .display-page .product-default figure .card-floating-share .btn-share-grid-product,

  .display-page .product-default figure a.btn-icon-wish.card-floating-wishlist,

  .product-default figure .card-floating-share .btn-share-grid-product,

  .product-default figure a.btn-icon-wish.card-floating-wishlist {

    width: 34px !important;

    height: 34px !important;

    min-width: 34px !important;

  }

  .display-page .product-default figure .card-floating-share .btn-share-grid-product i,

  .display-page .product-default figure a.btn-icon-wish.card-floating-wishlist i,

  .product-default figure .card-floating-share .btn-share-grid-product i,

  .product-default figure a.btn-icon-wish.card-floating-wishlist i {

    font-size: 0.82rem !important;

  }

  .display-page .product-default figure .card-floating-badge,

  .product-default figure .card-floating-badge {

    left: 5px !important;

    bottom: 5px !important;

    padding: 2px 5.5px !important;

    font-size: 8px !important;

    gap: 2.5px !important;

    max-width: calc(100% - 10px) !important;

  }

  .display-page .product-default figure .card-floating-badge i,

  .product-default figure .card-floating-badge i {

    font-size: 8px !important;

  }

  .display-page .product-default .slide-nav-btn,

  .product-default .slide-nav-btn {

    display: none !important;

  }

  .display-page .product-default .product-details,

  .product-default .product-details {

    padding: 6px 1px 2px 1px !important;

    text-align: left !important;

  }

  .display-page .product-default .product-title,

  .product-default .product-title {

    text-align: left !important;

    font-size: 13px !important;

    margin-bottom: 3px !important;

    font-weight: 600 !important;

    line-height: 1.35 !important;

  }

  .display-page .product-default .price-box,

  .product-default .price-box {

    display: flex !important;

    justify-content: flex-start !important;

    align-items: baseline !important;

    gap: 5px !important;

    text-align: left !important;

  }

  .display-page .product-default .price-box .new-price,

  .product-default .price-box .new-price {

    font-size: 13.5px !important;

    font-weight: 700 !important;

    color: #282c3f !important;

  }

  .display-page .product-default .price-box .old-price,

  .product-default .price-box .old-price {

    font-size: 12px !important;

    color: #3a3d47 !important;

    font-weight: 500 !important;

    text-decoration-color: #6b6e7a !important;

  }

  .display-page .product-default .price-box span.ct-inline-57,

  .product-default .price-box span.ct-inline-57 {

    font-size: 11.5px !important;

    font-weight: 600 !important;

    color: #03a685 !important;

    background: transparent !important;

    padding: 0 !important;

  }

}









/* Variant Bottom Sheet Styles */

.variant-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.55);

    z-index: 9999998 !important;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity 0.3s ease;

}



.variant-backdrop.show {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}



.variant-bottom-sheet {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background: #fff;

    z-index: 9999999 !important;

    border-top-left-radius: 20px;

    border-top-right-radius: 20px;

    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));

    transform: translateY(100%);

    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);

    max-height: 85vh;

    overflow-y: auto;

    pointer-events: none;

}



.variant-bottom-sheet.show {

    transform: none;

    pointer-events: auto;

}



.vbs-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}



.vbs-header h5 {

    margin: 0;

    font-size: 1.6rem !important;

    font-weight: 800 !important;

    font-family: 'Roboto Condensed', sans-serif !important;

    color: #111;

}



.vbs-close {

    background: transparent;

    border: none;

    font-size: 2.2rem;

    color: #333;

    line-height: 1;

    padding: 0 4px;

    cursor: pointer;

}



.vbs-product-summary {

    display: flex;

    gap: 15px;

    margin-bottom: 15px;

    align-items: center;

}



#vbs-product-image {

    width: 70px;

    height: 85px;

    object-fit: cover;

    border-radius: 6px;

    border: 1px solid #eee;

}



.vbs-product-info {

    flex: 1;

}



.vbs-title {

    margin: 0 0 5px 0 !important;

    font-size: 1.6rem !important;

    font-weight: 800 !important;

    font-family: 'Roboto Condensed', sans-serif !important;

    color: #000 !important;

    line-height: 1.2 !important;

}



.vbs-prices {

    font-size: 1.5rem !important;

    font-weight: 800 !important;

    font-family: 'Roboto Condensed', sans-serif !important;

    color: #000 !important;

}



.vbs-old-price {

    color: #999;

    text-decoration: line-through;

    font-weight: 400;

    margin-right: 8px;

    font-size: 1.1rem;

}



.vbs-new-price {

    color: #111;

}



#vbs-options-container .lux-option-label {

    display: block !important;

    font-size: 1.3rem !important;

    font-weight: 700 !important;

    color: #111 !important;

    margin-bottom: 8px !important;

    font-family: 'Roboto Condensed', sans-serif !important;

}



#vbs-options-container .lux-option-label-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 8px;

}



.vbs-options-container .lux-option-group {

    margin-bottom: 20px;

}



.vbs-footer {

    margin-top: 10px;

    padding-top: 15px;

}



/* ============================================================

   ADMIN HIGH-PERFORMANCE MONTSERRAT FONT STACK (NO LAG)

   ============================================================ */

body.admin-page-bg,

body.admin-page-bg input,

body.admin-page-bg select,

body.admin-page-bg textarea,

body.admin-page-bg button,

body.admin-page-bg label,

body.admin-page-bg p,

body.admin-page-bg span,

body.admin-page-bg a,

body.admin-page-bg div,

body.admin-page-bg h1, body.admin-page-bg h2, body.admin-page-bg h3,

body.admin-page-bg h4, body.admin-page-bg h5, body.admin-page-bg h6,

body.admin-page-bg table, body.admin-page-bg th, body.admin-page-bg td,

body.admin-page-bg .form-control,

body.admin-page-bg .form-control-styled,

body.admin-page-bg .form-label-styled,

body.admin-page-bg .btn,

body.admin-page-bg .card,

body.admin-page-bg .sidebar,

body.admin-page-bg .nav-link,

body.admin-page-bg .badge,

.admin-main,

.herbavi-sidebar-wrapper,

.var-section-card,

.section-card {

  font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

}



/* Preserve Font Awesome & Porto icons font family */

body.admin-page-bg i,

body.admin-page-bg i.fa,

body.admin-page-bg i.fas,

body.admin-page-bg i.far,

body.admin-page-bg i.fab,

body.admin-page-bg .fa,

body.admin-page-bg .fas,

body.admin-page-bg .far,

body.admin-page-bg .fab,

.admin-main i,

.admin-main .fa,

.admin-main .fas,

.admin-main .far,

.admin-main .fab,

.herbavi-sidebar-wrapper i,

.herbavi-sidebar-wrapper .fa,

.herbavi-sidebar-wrapper .fas,

.herbavi-sidebar-wrapper .far,

.herbavi-sidebar-wrapper .fab {

  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'FontAwesome', 'porto', sans-serif !important;

}



@media (max-width: 991px) {

  .header-contact,

  .header-right .header-contact,

  .user-dropdown-container,

  .header-luxury-user-trigger,

  .user-info-name {

    display: none !important;

  }

}



/* Product Image Top-Alignment & Non-Clipping Rules */

.lux-main-img,

img.lux-main-img,

.fk-grid-img-box img {

  object-position: top center !important;

}



.success-item-img,

.order-success-container img,

.fk-product-image img,

.product-img,

.simple-order-row img {

  object-fit: cover !important;

  object-position: top center !important;

  background: #f8fafc !important;

}



/* Hide all breadcrumb bars & links on mobile view (<768px) across all pages */

@media (max-width: 767px) {

  .lux-breadcrumb-bar,

  .premium-breadcrumb-nav,

  .breadcrumb-nav,

  .breadcrumb,

  nav[aria-label="breadcrumb"],

  nav[aria-label="Breadcrumb"] {

    display: none !important;

  }

}



/* Top Product Header Action Icons (Wishlist & Share) */

.lux-top-icon-btn {

  width: 32px !important;

  height: 32px !important;

  border-radius: 50% !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  color: #333333 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

  padding: 0 !important;

  outline: none !important;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;

}



.lux-top-icon-btn:hover {

  background: #f8fafc !important;

  border-color: #000000 !important;

  color: #000000 !important;

  transform: translateY(-1px) scale(1.05) !important;

  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;

}



.lux-top-icon-btn.add-wishlist.active {

  background: #000000 !important;

  border-color: #000000 !important;

  color: #ffffff !important;

}



.lux-top-icon-btn.add-wishlist.active svg {

  fill: #ffffff !important;

  stroke: #ffffff !important;

}



/* Ensure Sidebar Cart is ALWAYS a 100% height Fixed Slide-out Right Drawer & Body Scroll Lock */

body.cart-opened {

  overflow: hidden !important;

  height: 100vh !important;

  touch-action: none !important;

}



body > .mobile-cart,

.mobile-cart,

.cart-dropdown .dropdown-menu.mobile-cart,

.cart-dropdown .mobile-cart {

  position: fixed !important;

  top: 0 !important;

  bottom: 0 !important;

  right: -450px !important;

  left: auto !important;

  width: 380px !important;

  max-width: 92vw !important;

  height: 100vh !important;

  max-height: 100vh !important;

  margin: 0 !important;

  padding: 0 !important;

  transform: none !important;

  border: none !important;

  border-radius: 0 !important;

  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25) !important;

  z-index: 9999999 !important;

  background: #ffffff !important;

  visibility: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.35s ease !important;

}



body.cart-opened > .mobile-cart,

body.cart-opened .mobile-cart,

.mobile-cart.show,

.cart-dropdown.show .mobile-cart,

.cart-dropdown.open .mobile-cart {

  right: 0 !important;

  left: auto !important;

  top: 0 !important;

  bottom: 0 !important;

  transform: none !important;

  visibility: visible !important;

  opacity: 1 !important;

  pointer-events: auto !important;

}



body > .cart-overlay,

.cart-overlay {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  width: 100vw !important;

  height: 100vh !important;

  background: rgba(0, 0, 0, 0.45) !important;

  backdrop-filter: blur(2px) !important;

  z-index: 9999998 !important;

  display: none !important;

  opacity: 0;

  transition: opacity 0.3s ease;

}



body.cart-opened > .cart-overlay,

body.cart-opened .cart-overlay,

.cart-overlay.show,

.cart-dropdown.show .cart-overlay {

  display: block !important;

  opacity: 1 !important;

}



/* ============================================================

   PREMIUM ENLARGED SIDEBAR CART TYPOGRAPHY & LAYOUT

   ============================================================ */

.dropdown-cart-header {

  font-size: 1.25rem !important;

  font-weight: 800 !important;

  letter-spacing: 0.5px !important;

  color: #000000 !important;

  padding-bottom: 14px !important;

  margin-bottom: 16px !important;

}



.mobile-cart .btn-close {

  font-size: 1.6rem !important;

  color: #000000 !important;

}



.dropdown-cart-products {

  max-height: 420px !important;

  margin-bottom: 14px !important;

}



.dropdown-cart-products .product {

  padding: 16px 0 !important;

  gap: 16px !important;

}



.dropdown-cart-products .product-image-container {

  width: 84px !important;

  height: 84px !important;

  border-radius: 10px !important;

}



.dropdown-cart-products .product-title {

  margin: 0 0 6px 0 !important;

}



.dropdown-cart-products .product-title a {

  font-size: 1.2rem !important;

  font-weight: 800 !important;

  color: #000000 !important;

  line-height: 1.35 !important;

}



.dropdown-cart-products .cart-product-info {

  font-size: 1.15rem !important;

  font-weight: 800 !important;

  margin-top: 4px !important;

  gap: 6px !important;

}



.dropdown-cart-products .cart-product-info .cart-product-qty {

  font-size: 1.15rem !important;

  font-weight: 800 !important;

  color: #4b5563 !important;

}



.dropdown-cart-products .cart-product-info .cart-product-times {

  font-size: 1rem !important;

  font-weight: 600 !important;

  color: #9ca3af !important;

}



.dropdown-cart-products .cart-product-info .cart-product-price {

  font-size: 1.3rem !important;

  font-weight: 900 !important;

  color: #000000 !important;

}



.dropdown-cart-products .product-variants-text {

  font-size: 1.05rem !important;

  font-weight: 600 !important;

  color: #374151 !important;

  margin-top: 6px !important;

  line-height: 1.4 !important;

}



.dropdown-cart-products .product-variants-text .variant-sep {

  color: #9ca3af !important;

  margin: 0 5px !important;

}



.dropdown-cart-products .btn-remove-cart-item svg {

  width: 20px !important;

  height: 20px !important;

}



.lux-sidebar-coupon-box {

  padding: 14px 16px !important;

  margin-bottom: 16px !important;

  border-radius: 8px !important;

}



.lux-sidebar-coupon-box span,

.lux-sidebar-coupon-box div > span {

  font-size: 0.95rem !important;

  font-weight: 800 !important;

  color: #000000 !important;

  letter-spacing: 0.5px !important;

}



.lux-sidebar-coupon-box input,

#sidebar_coupon_input {

  font-size: 1.05rem !important;

  font-weight: 700 !important;

  height: 44px !important;

  padding: 8px 12px !important;

  color: #000000 !important;

}



.lux-sidebar-coupon-box button,

.lux-sidebar-coupon-box button[onclick*="applySidebarCoupon"] {

  font-size: 0.95rem !important;

  font-weight: 800 !important;

  height: 44px !important;

  padding: 0 18px !important;

  letter-spacing: 0.5px !important;

}



#sidebar_coupon_msg {

  font-size: 0.95rem !important;

  font-weight: 700 !important;

}



.lux-cart-totals-box {

  padding: 16px 0 8px 0 !important;

  margin-top: 8px !important;

}



.lux-total-row {

  margin-bottom: 8px !important;

}



.lux-total-row .lux-row-label {

  font-size: 1.1rem !important;

  font-weight: 700 !important;

  color: #111827 !important;

}



.lux-total-row .lux-row-val {

  font-size: 1.15rem !important;

  font-weight: 800 !important;

  color: #000000 !important;

}



.lux-final-total-row {

  padding-top: 14px !important;

  margin-top: 10px !important;

}



.lux-final-total-row .lux-total-label {

  font-size: 1.25rem !important;

  font-weight: 800 !important;

  color: #000000 !important;

}



.lux-final-total-row .lux-total-amount {

  font-size: 1.6rem !important;

  font-weight: 900 !important;

  color: #000000 !important;

}



.dropdown-cart-action {

  gap: 10px !important;

  margin-top: 14px !important;

}



.dropdown-cart-action .btn {

  height: 48px !important;

  font-size: 1.1rem !important;

  font-weight: 800 !important;

  letter-spacing: 0.5px !important;

  border-radius: 8px !important;

}



/* ============================================================

   ULTRA-SMOOTH ZERO-JUMP HOME PAGE SCROLLING & CLS STABILITY

   ============================================================ */



/* Disable Y-axis layout jumps on scroll reveal */

.reveal-on-scroll {

  opacity: 1 !important;

  transform: none !important;

  transition: opacity 0.4s ease !important;

  will-change: opacity !important;

}



.reveal-on-scroll.revealed {

  opacity: 1 !important;

  transform: none !important;

}



/* GPU Hardware Acceleration for zero-shake 60fps scrolling */

.home-single-hero,

.elevated-polo-showcase,

.cc-section,

.lux-section-banner,

.about-stratten-section,

.banner-section,

.new-vibes-showcase,

.grid-square,

.image-slider,

.product-default figure,

.product-details {

  transform: translateZ(0) !important;

  backface-visibility: hidden !important;

  -webkit-backface-visibility: hidden !important;

}



/* Pre-allocated Aspect Ratios matching actual image dimensions for zero cropping & zero CLS */

.home-single-hero {

  max-width: 1520px !important;

  margin-left: auto !important;

  margin-right: auto !important;

}



.home-single-hero picture {

  display: block !important;

  width: 100% !important;

  max-width: 1520px !important;

  aspect-ratio: 1520 / 760 !important;

  background: #f1f5f9 !important;

}



.home-single-hero picture img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



@media (max-width: 767px) {

  .home-single-hero {

    min-height: 600px !important;

    height: 600px !important;

    max-height: 600px !important;

    overflow: hidden !important;

  }

  .home-single-hero picture {

    width: 100% !important;

    height: 600px !important;

    max-height: 600px !important;

    aspect-ratio: auto !important;

  }

  .home-single-hero .slide-bg,

  .home-single-hero picture img {

    width: 100% !important;

    height: 600px !important;

    object-fit: cover !important;

    object-position: right center !important;

    display: block !important;

  }

}



.showcase-model-img {

  aspect-ratio: auto !important;

  object-fit: contain !important;

}



.lux-section-banner-bg {

  aspect-ratio: 1685 / 933 !important;

  background: #111827 !important;

}



.lux-section-banner-bg img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



.about-stratten-img-frame {

  aspect-ratio: 736 / 1103 !important;

  background: #f1f5f9 !important;

}



.about-stratten-img-frame img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



.banner-section-link {

  display: block !important;

  width: 100% !important;

  aspect-ratio: 1691 / 930 !important;

  background: #f1f5f9 !important;

}



.banner-section-link img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



.vibes-model-img {

  aspect-ratio: 1536 / 1024 !important;

  object-fit: cover !important;

}



.grid-square .square-box {

  aspect-ratio: 1402 / 1122 !important;

  background: #f1f5f9 !important;

}



.grid-square .square-box img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



.modern-story-card video {

  aspect-ratio: 9 / 16 !important;

  object-fit: cover !important;

}



/* ABSOLUTE ZERO-SHAKE ZERO-JUMP PARALLAX OVERRIDES */

.header-middle.fixed,

.sticky-header.fixed {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  width: 100% !important;

  z-index: 1040 !important;

  background-color: #ffffff !important;

  height: 50px !important;

  min-height: 50px !important;

  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;

  transform: none !important;

  transition: none !important;

}

@media (max-width: 991px) {

  .header-middle.fixed,

  .sticky-header.fixed {

    height: 48px !important;

    min-height: 48px !important;

  }

}



/* Home Page Header: Always Solid White like display-page */

.home-page .header-middle {

  background-color: #ffffff !important;

}



.home-page .header-middle:hover {

  background-color: #ffffff !important;

}



/* Header Container Side Padding & Cart Icon Corner Spacing */

.header-middle .container {

  padding-left: 24px !important;

  padding-right: 28px !important;

}



.header-right {

  padding-right: 12px !important;

  gap: 20px !important;

}



[data-plugin-float-element],

.home-single-hero .slide-bg,

.reveal-on-scroll {

  transform: none !important;

  transition: none !important;

}



/* UNIVERSAL CROSS-DEVICE RESPONSIVE STABILITY (iPhone, Android, Tablets, Desktop) */

html, body {

  width: 100%;

  max-width: 100vw;

  overflow-x: hidden !important;

  -webkit-text-size-adjust: 100%;

  -webkit-tap-highlight-color: transparent;

}



.container,

.page-wrapper,

.main {

  width: 100%;

  max-width: 100%;

  overflow: visible;

}



@media (max-width: 991px) {

  .home-single-hero picture {

    width: 100% !important;

  }

  .modern-story-card {

    width: 260px !important;

    height: 440px !important;

  }

}



@media (max-width: 575px) {

  .modern-story-card {

    width: 210px !important;

    height: 360px !important;

  }

}



/* ============================================================

   ABSOLUTE ZERO CLS & ZERO PAGE-JUMP MEDIA CONTAINER RESERVATIONS

   ============================================================ */

.home-single-hero {

  min-height: 400px;

  background: #f1f5f9;

}

.home-single-hero picture {

  display: block !important;

  width: 100% !important;

  aspect-ratio: 1520 / 760 !important;

  background: #f1f5f9 !important;

}

@media (max-width: 767px) {

  .home-single-hero {

    min-height: 600px !important;

    height: 600px !important;

  }

  .home-single-hero picture {

    height: 600px !important;

    aspect-ratio: auto !important;

  }

}



.cc-section {

  min-height: 180px;

}

.cc-circle-container {

  aspect-ratio: 1 / 1 !important;

}



.strattent-editorial-banner {

  min-height: auto;

  background: transparent;

}

@media (max-width: 991px) {

  .strattent-editorial-banner {

    min-height: 480px;

  }

}

@media (max-width: 575px) {

  .strattent-editorial-banner {

    min-height: 380px;

  }

}



.about-stratten-img-frame {

  aspect-ratio: 1400 / 2100 !important;

  background: #f1f5f9 !important;

  max-height: 590px !important;

}



/* COMPACT SLIM NEW VIBES SHOWCASE WITH ELEGANT B&W HOVER EFFECT & INCREASED HEIGHT */

.new-vibes-showcase {

  min-height: auto !important;

  height: auto !important;

  padding: 24px 0 !important;

  margin: 14px 0 !important;

  background-color: #f4f4f4 !important;

}



.vibes-right-side {

  aspect-ratio: auto !important;

  min-height: auto !important;

  height: auto !important;

  width: 55% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

}



.vibes-model-img {

  width: 100% !important;

  height: auto !important;

  max-height: 580px !important;

  aspect-ratio: auto !important;

  object-fit: cover !important;

  border-radius: 16px !important;

  filter: grayscale(100%) contrast(1.08) brightness(0.96) !important;

  -webkit-filter: grayscale(100%) contrast(1.08) brightness(0.96) !important;

  transition: filter 0.6s ease, -webkit-filter 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.new-vibes-showcase:hover .vibes-model-img,

.vibes-model-img:hover,

.vibes-model-img.vibes-is-color {

  filter: grayscale(0%) contrast(1) brightness(1) !important;

  -webkit-filter: grayscale(0%) contrast(1) brightness(1) !important;

  transform: scale(1.02) !important;

}



.grid-square .square-box {

  aspect-ratio: 4 / 5 !important;

  background: #f1f5f9 !important;

}



.modern-story-card {

  contain: strict;

  background: #111111;

}



.modern-story-card video {

  aspect-ratio: 9 / 16 !important;

  object-fit: cover !important;

  height: 100% !important;

  width: 100% !important;

}



/* ── Right-to-Left Quick Add Size Flyout Popup ── */

.product-default.myntra-card {

  position: relative !important;

}

.product-default.myntra-card:hover,

.product-default.myntra-card:focus-within {

  z-index: 60 !important;

}

.lux-quick-cart-wrap {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  z-index: 25 !important;
}

.lux-quick-cart-wrap:hover,
.lux-quick-cart-wrap.is-open {
  z-index: 1050 !important;
}

.lux-cart-bag-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #282c3f !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
  outline: none !important;
  flex-shrink: 0 !important;
}

.lux-cart-bag-btn:hover,
.lux-quick-cart-wrap.is-open .lux-cart-bag-btn {
  background: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3) !important;
  transform: scale(1.05) !important;
}

.lux-cart-bag-btn i {
  font-size: 15px !important;
  line-height: 1 !important;
}

.lux-size-flyout {
  position: absolute !important;
  right: 42px !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(10px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.2s !important;
  background: #ffffff !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.18), 0 2px 6px -1px rgba(15, 23, 42, 0.08) !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 4px 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  z-index: 1000 !important;
  white-space: nowrap !important;
}

.lux-size-flyout::after {
  content: '' !important;
  position: absolute !important;
  top: -8px !important;
  bottom: -8px !important;
  right: -16px !important;
  width: 20px !important;
}

.lux-quick-cart-wrap:hover .lux-size-flyout,
.lux-quick-cart-wrap.is-open .lux-size-flyout,
.lux-size-flyout.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(-50%) translateX(0) !important;
}

.lux-flyout-tag {
  display: none !important;
}

.lux-size-pill-list {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.lux-size-pill-btn {
  min-width: 25px !important;
  height: 25px !important;
  padding: 0 5px !important;
  border-radius: 6px !important;
  border: none !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  line-height: 1 !important;
}

.lux-size-pill-btn:hover {
  background: #0f172a !important;
  color: #ffffff !important;
  border: none !important;
  transform: scale(1.08) translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25) !important;
}

.lux-size-pill-btn:active {
  transform: scale(0.95) !important;
}

.lux-size-pill-btn.is-loading {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border: none !important;
  cursor: wait !important;
  pointer-events: none !important;
}

.lux-size-pill-btn.is-success {
  background: #0f172a !important;
  color: #ffffff !important;
  border: none !important;
}

.lux-size-flyout-close {
  display: none !important;
}

@media (max-width: 576px) {
  .lux-quick-cart-wrap {
    bottom: 8px !important;
    right: 8px !important;
  }
  .lux-cart-bag-btn {
    width: 30px !important;
    height: 30px !important;
  }
  .lux-cart-bag-btn i {
    font-size: 13.5px !important;
  }
  .lux-size-flyout {
    right: 34px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) translateX(6px) !important;
    padding: 3px 5px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    max-width: calc(100vw / 2 - 40px) !important;
  }
  .lux-size-flyout::after {
    top: -6px !important;
    bottom: -6px !important;
    right: -12px !important;
    width: 14px !important;
    height: auto !important;
  }
  .lux-quick-cart-wrap:hover .lux-size-flyout,
  .lux-quick-cart-wrap.is-open .lux-size-flyout,
  .lux-size-flyout.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(-50%) translateX(0) !important;
  }
  .lux-size-pill-list {
    gap: 2.5px !important;
  }
  .lux-size-pill-btn {
    min-width: 17px !important;
    height: 23px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 0 3px !important;
    border-radius: 4px !important;
  }
}



/* ── STRATTENT LUXURY AUTHENTICATION PAGE ── */

.lux-auth-page-wrapper {

  background: #fafafa !important;

  min-height: calc(100vh - 280px);

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 30px 15px 70px;

  font-family: 'Roboto Condensed', sans-serif !important;

}

.lux-auth-card-container {

  max-width: 480px;

  width: 100%;

  margin: 0 auto;

}

.lux-auth-card {

  background: #ffffff;

  border: 1px solid #e4e4e7;

  border-radius: 20px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);

  padding: 38px 40px 36px;

  position: relative;

  overflow: hidden;

}

.lux-auth-switcher {

  background: #f4f4f5;

  border-radius: 12px;

  padding: 4px;

  display: flex;

  gap: 4px;

  margin-bottom: 26px;

  border: 1px solid #e4e4e7;

}

.lux-switch-btn {

  flex: 1;

  border: none;

  background: transparent;

  border-radius: 9px;

  padding: 10px 14px;

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.8px;

  text-transform: uppercase;

  color: #71717a;

  cursor: pointer;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  outline: none !important;

}

.lux-switch-btn.active {

  background: #000000;

  color: #ffffff;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);

}

.lux-switch-btn:hover:not(.active) {

  color: #000000;

  background: rgba(255, 255, 255, 0.7);

}

.lux-switch-btn i {

  font-size: 12px;

  color: #b0111b !important;

  transition: transform 0.2s ease;

}

.lux-auth-header {

  text-align: center;

  margin-bottom: 24px;

}

.lux-auth-title {

  font-family: 'Bree Serif', serif !important;

  font-size: 28px;

  font-weight: 700;

  color: #b0111b !important; /* Bold Luxury Red */

  margin: 0 0 6px 0;

  line-height: 1.25;

  letter-spacing: 0.3px;

}

.lux-auth-subtitle {

  font-size: 13px;

  color: #52525b;

  margin: 0;

  line-height: 1.5;

  font-weight: 400;

}

.lux-auth-field {

  margin-bottom: 18px;

}

.lux-auth-label {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 11.5px;

  font-weight: 700;

  color: #334155;

  text-transform: uppercase;

  letter-spacing: 0.8px;

  margin-bottom: 6px;

}

.lux-auth-input-wrap {

  position: relative;

  display: flex;

  align-items: center;

  width: 100%;

}

.lux-auth-prefix-icon {

  position: absolute;

  left: 15px;

  color: #a1a1aa;

  font-size: 14px;

  pointer-events: none;

  transition: color 0.18s ease;

  z-index: 2;

}

.lux-auth-input {

  width: 100% !important;

  height: 48px !important;

  background: #ffffff !important;

  border: 1.5px solid #e4e4e7 !important;

  border-radius: 10px !important;

  padding: 0 42px 0 42px !important;

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 14px !important;

  font-weight: 500 !important;

  color: #000000 !important;

  outline: none !important;

  transition: all 0.2s ease !important;

  box-sizing: border-box !important;

}

.lux-auth-input:focus {

  border-color: #000000 !important;

  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;

}

.lux-auth-btn-primary {

  width: 100%;

  height: 50px;

  background: #000000;

  color: #ffffff;

  border: none;

  border-radius: 10px;

  font-family: 'Roboto Condensed', sans-serif !important;

  font-size: 13.5px;

  font-weight: 700;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);

  outline: none !important;

}

.lux-auth-btn-primary:hover {

  background: #18181b;

  color: #ffffff;

  transform: translateY(-1.5px);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);

}

.lux-auth-perks {

  border-top: 1px solid #f4f4f5;

  padding-top: 22px;

  margin-top: 26px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

  text-align: center;

}

.lux-perk-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

}

.lux-perk-item i {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  background: #f4f4f5;

  border: 1px solid #e4e4e7;

  color: #000000;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 11px;

}

.lux-perk-item span {

  font-size: 11px;

  font-weight: 600;

  color: #52525b;

  letter-spacing: 0.3px;

  line-height: 1.2;

}





/* Hero Banner Sharp Edges */
.home-single-hero,
.home-single-hero.banner,
.home-single-hero a,
.home-single-hero picture,
.home-single-hero img,
.home-single-hero .slide-bg {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}


/* Remove black/dark divider lines in footer */
footer,
.footer,
.footer-top,
.footer-middle,
.footer-bottom {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.footer::before,
.footer::after,
.footer-middle::before,
.footer-middle::after,
.footer-bottom::before,
.footer-bottom::after {
    display: none !important;
    content: none !important;
}
.footer hr,
.footer-middle hr,
.footer-bottom hr {
    display: none !important;
}