/* ==========================================================================
   LUXURY STORE THEME - GLOBAL DESIGN SYSTEM & TOKENS
   ========================================================================== */

:root {
  --color-bg: #f6f6f6;
  --color-bg-soft: #f6f6f6;
  --color-text: #111111;
  --color-text-muted: #6B6B6B;
  --color-border: #E5E2DD;
  --color-accent: #574CD5;
  --color-accent-text: #FFFFFF;
  --color-sale: #B3261E;
  --color-success: #1E7A4C;
  --color-error: #B3261E;
  --color-overlay: rgba(0, 0, 0, 0.45);
  --color-announcement-bg: #111111;
  --color-announcement-text: #FFFFFF;
  
  --font-heading: 'Cormorant Garamond', Garamond, Georgia, serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  --site-max-w: 1440px;
  --header-height-d: 72px;
  --header-height-m: 60px;
  --announcement-height: 36px;
  
  --radius-none: 0px;
  --radius-pill: 999px;
  --shadow-drawer: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background-color: var(--color-bg);
}

main, #main-content {
  flex: 1 0 auto;
  background-color: var(--color-bg);
}

/* Typography Scale */
h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.text-display {
  font-family: var(--font-heading);
  font-size: 64px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.text-h1 {
  font-family: var(--font-heading);
  font-size: 48px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.text-h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.text-h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.text-eyebrow {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}

.text-nav {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.text-small {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.text-price {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}

a:hover {
  opacity: 0.75;
}

/* Container & Grids */
.luxury-container {
  width: 100%;
  max-width: var(--site-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}

.section-py {
  padding-top: 96px;
  padding-bottom: 96px;
}

.section-py-sm {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* Interactive elements & Buttons */
.btn-luxury {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: all 150ms ease-in-out;
  text-align: center;
  border: 1px solid transparent;
  text-decoration: none;
}

.btn-luxury-primary {
  background-color: var(--color-text);
  color: #ffffff;
  border-color: var(--color-text);
}

.btn-luxury-primary:hover {
  background-color: #ffffff;
  color: var(--color-text);
  border-color: var(--color-text);
  opacity: 1;
}

.btn-luxury-secondary {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}

.btn-luxury-secondary:hover {
  background-color: var(--color-text);
  color: #ffffff;
  opacity: 1;
}

.btn-luxury-on-dark {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

.btn-luxury-on-dark:hover {
  background-color: #ffffff;
  color: var(--color-text);
  border-color: #ffffff;
  opacity: 1;
}

.btn-luxury-disabled, .btn-luxury:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

.btn-luxury-full {
  width: 100%;
}

.btn-link-luxury {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  color: var(--color-text);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Inputs & Forms */
.form-group-luxury {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.form-label-luxury {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  color: var(--color-text);
}

.input-luxury, .select-luxury, .textarea-luxury {
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  background-color: #ffffff;
  width: 100%;
  transition: border-color 0.2s ease;
}

.textarea-luxury {
  height: auto;
  padding: 14px 16px;
  min-height: 120px;
  resize: vertical;
}

.input-luxury:focus, .select-luxury:focus, .textarea-luxury:focus {
  border-color: var(--color-text);
  outline: none;
  box-shadow: 0 0 0 1px var(--color-text);
}

.form-error {
  font-size: 12px;
  color: var(--color-sale);
  margin-top: 6px;
}

/* ==========================================================================
   LUXURY STOREFRONT - EXACT HEADER & MEGA MENU (Jo Milano Paris Spec)
   ========================================================================== */

/* 1. Announcement Bar */
.luxury-announcement-bar {
  height: 38px;
  background-color: #000000;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1010;
  padding: 0 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.announcement-text {
  text-align: center;
  color: #ffffff;
}

.announcement-close {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.6;
  line-height: 1;
  padding: 4px;
}
.announcement-close:hover { opacity: 1; }

/* 2. Main Luxury Header */
.luxury-header-wrapper {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.luxury-header {
  height: 74px;
  width: 100%;
  padding: 0 48px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

@media (max-width: 1200px) {
  .luxury-header {
    padding: 0 24px;
  }
}

@media (max-width: 991px) {
  .luxury-header {
    height: 60px;
    padding: 0 16px;
  }
}

/* 3. Left Navigation Menu */
.luxury-nav-list {
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.luxury-nav-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  position: relative;
}

.luxury-nav-link {
  color: #ffffff !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 24px 0 !important;
  opacity: 0.95;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.luxury-nav-link:hover, .luxury-nav-link.active {
  opacity: 0.7 !important;
}

.luxury-nav-link svg.chevron-icon {
  width: 10px;
  height: 6px;
  stroke: #ffffff;
  transition: transform 0.2s ease;
}

.luxury-nav-item.has-mega-menu:hover .luxury-nav-link svg.chevron-icon {
  transform: rotate(180deg);
}

/* 4. Center Brand Typography */
.luxury-brand-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  text-align: center;
}

.luxury-brand-title {
  font-family: 'Unbounded', sans-serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: opacity 0.2s ease;
}

.luxury-brand-title:hover {
  opacity: 0.85;
}

@media (max-width: 991px) {
  .luxury-brand-center {
    position: static;
    transform: none;
    flex: 1;
    text-align: center;
    padding: 0 6px;
  }
  .luxury-brand-title {
    font-size: 13.5px !important;
    letter-spacing: 0.08em !important;
  }
  .luxury-header-right {
    gap: 10px;
  }
}

/* 5. Right Action Utility Icons */
.luxury-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  z-index: 3;
}

.luxury-currency-trigger {
  background: none;
  border: none;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 0;
  opacity: 0.95;
  transition: opacity 0.2s ease;
}

.luxury-currency-trigger:hover {
  opacity: 0.75;
}

.luxury-header-icon-btn {
  background: none;
  border: none;
  color: #ffffff;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.95;
  transition: opacity 0.2s ease;
  position: relative;
  text-decoration: none;
}

.luxury-header-icon-btn:hover {
  opacity: 0.7;
}

.luxury-header-icon-btn svg {
  stroke: #ffffff;
}

.luxury-cart-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  background-color: var(--color-accent, #574CD5);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

.luxury-hamburger-btn {
  background: none;
  border: none;
  color: #ffffff;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 6. Luxury Mega Menu Dropdown */
.luxury-nav-item.has-mega-menu {
  position: static;
}

.luxury-mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #0b0b0b;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7);
  padding: 40px 48px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 280ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 280ms; /* Close grace period: cursor has 280ms to traverse before menu begins closing */
  pointer-events: none;
}

/* Invisible hover bridge so cursor never drops hover between nav item and dropdown */
.luxury-mega-menu::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  height: 24px;
  background: transparent;
  z-index: 1;
}

.luxury-nav-item.has-mega-menu:hover .luxury-mega-menu,
.luxury-nav-item.has-mega-menu.is-active .luxury-mega-menu,
.luxury-mega-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 40ms;
}

.luxury-nav-item.has-mega-menu.is-active .luxury-nav-link svg.chevron-icon {
  transform: rotate(180deg);
}

.luxury-mega-inner {
  max-width: var(--site-max-w, 1440px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.luxury-mega-col-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.luxury-mega-col-title span {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888888;
}

.luxury-mega-view-all {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 0.8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.luxury-mega-view-all:hover { opacity: 1; color: #fff; }

.luxury-mega-items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.luxury-mega-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  gap: 10px;
  color: #ffffff;
}

.luxury-mega-item:hover {
  opacity: 0.8;
}

.luxury-mega-item-img {
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 130px;
  max-height: 130px;
  object-fit: cover;
  background-color: #1a1a1a;
  border-radius: 4px;
}

.luxury-mega-item-name {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #ffffff;
}

.luxury-mega-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.luxury-mega-product-card {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #ffffff;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  transition: background 0.2s ease;
}

.luxury-mega-product-card:hover {
  background: rgba(255, 255, 255, 0.07);
}

.luxury-mega-product-img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  background-color: #1a1a1a;
  border-radius: 2px;
  flex-shrink: 0;
}

.luxury-mega-product-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
}

.luxury-mega-product-price {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #a0a0a0;
  margin-top: 2px;
}

@media (max-width: 1200px) {
  .luxury-mega-menu {
    padding: 32px 28px;
  }
  .luxury-mega-inner {
    gap: 32px;
  }
  .luxury-mega-items-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .luxury-mega-item-img {
    max-width: 100px;
    max-height: 100px;
  }
  .luxury-mega-products-grid {
    gap: 12px;
  }
}

@media (max-width: 1024px) {
  .luxury-mega-menu {
    padding: 24px 20px;
    max-height: calc(85vh - 74px);
    overflow-y: auto;
  }
  .luxury-mega-inner {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .luxury-mega-items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .luxury-mega-item-img {
    max-width: 80px;
    max-height: 80px;
  }
  .luxury-mega-products-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .luxury-mega-product-img {
    width: 44px;
    height: 44px;
  }
  .luxury-mega-product-title {
    font-size: 12px;
  }
}

/* Mobile Header & Drawer */
.mobile-header {
  display: none;
  height: var(--header-height-m);
  align-items: center;
  justify-content: space-between;
}

.luxury-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-overlay);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.luxury-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 85vw;
  max-width: 360px;
  background-color: #ffffff;
  z-index: 2005;
  transform: translateX(-100%);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-drawer.active {
  transform: translateX(0);
}

.mobile-drawer-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--color-border);
}

.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
}

.mobile-drawer-row {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mobile-accordion-content {
  display: none;
  background-color: #fbf9f6;
  padding: 16px 20px 20px 20px;
  border-bottom: 1px solid var(--color-border);
  animation: mobileMenuFadeIn 0.25s ease;
}

.mobile-accordion-content.open {
  display: block !important;
}

@keyframes mobileMenuFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.mobile-mega-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mobile-mega-title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #777777;
}

.mobile-mega-view-all {
  font-size: 12px;
  font-weight: 600;
  color: #111111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mobile-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.mobile-mega-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #edebe8;
  border-radius: 4px;
  text-decoration: none;
  color: #111111;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mobile-mega-item:active, .mobile-mega-item:hover {
  background: #f0ede7;
  border-color: #d8d4cc;
  color: #111111;
}

.mobile-mega-thumb {
  width: 36px;
  height: 36px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  background-color: #eceae5;
}

.mobile-mega-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #777777;
  text-transform: uppercase;
}

.mobile-mega-name {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #222222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-mega-products-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-mega-prod-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #edebe8;
  border-radius: 4px;
  text-decoration: none;
  color: #111111;
  transition: background-color 0.2s ease;
}

.mobile-mega-prod-item:active, .mobile-mega-prod-item:hover {
  background: #f0ede7;
  color: #111111;
}

.mobile-mega-prod-thumb {
  width: 40px;
  height: 40px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  background-color: #eceae5;
}

.mobile-mega-prod-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-mega-prod-title {
  font-size: 13px;
  font-weight: 500;
  color: #111111;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-mega-prod-sub {
  font-size: 11px;
  color: #777777;
}

.mobile-drawer-footer {
  margin-top: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--color-bg-soft);
}

/* Cart Drawer */
.cart-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 440px;
  max-width: 100vw;
  background-color: #ffffff;
  z-index: 2005;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.cart-drawer.active {
  transform: translateX(0);
}

.cart-drawer-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--color-border);
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.cart-item-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}

.cart-item-img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  background-color: var(--color-bg-soft);
}

.cart-qty-stepper {
  display: inline-flex;
  align-items: center;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0 4px;
}

.cart-qty-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
}

.cart-drawer-footer {
  border-top: 1px solid var(--color-border);
  padding: 24px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shipping-progress-bar {
  height: 4px;
  background-color: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 8px;
}

.shipping-progress-fill {
  height: 100%;
  background-color: var(--color-accent);
  transition: width 0.3s ease;
}

/* Product Cards */
.luxury-product-card,
.top-seller-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: transparent !important;
}

.product-card-img-wrap,
.top-seller-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.18;
  background-color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
}

.product-card-img-wrap a,
.top-seller-img-wrap a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card-img-primary,
.product-card-img-hover,
.top-seller-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.product-card-img-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
}

.luxury-product-card:hover .product-card-img-wrap img,
.luxury-product-card:hover .product-card-img-primary,
.top-seller-card:hover .top-seller-img-wrap img {
  transform: scale(1.05);
}

.luxury-product-card:hover .product-card-img-hover {
  opacity: 1;
  transform: scale(1.05);
}

.product-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 2;
}

.badge-sale {
  background-color: var(--color-sale);
  color: #ffffff;
}

.badge-new {
  background-color: var(--color-text);
  color: #ffffff;
}

.badge-soldout {
  background-color: #777777;
  color: #ffffff;
}

.product-card-info,
.top-seller-info {
  padding: 12px 0 4px 0 !important;
  background-color: transparent !important;
}

.product-card-title {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-text);
}

.product-card-shipping {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

.product-card-prices {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-original {
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

@media (max-width: 991px) {
  .shop-layout-wrap {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* Home Sections */
.hero-section {
  position: relative;
  width: 100%;
  height: 90vh;
  min-height: 560px;
  max-height: 900px;
  background-color: #000000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  color: #ffffff;
  padding: 0 24px;
  max-width: 800px;
}

.hero-sound-btn {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background-color: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

/* Video Carousel / Creator Reviews */
.video-reviews-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  scrollbar-width: none;
}
.video-reviews-track::-webkit-scrollbar { display: none; }

.video-card-item {
  flex: 0 0 240px;
  aspect-ratio: 9/16;
  position: relative;
  border-radius: var(--radius-none);
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  background-color: #000;
}

.video-card-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video-card-item:hover .video-card-poster {
  transform: scale(1.05);
}

.video-card-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background-color: rgba(0,0,0,0.6);
  border: 1px solid #ffffff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.video-card-item:hover .video-card-play-icon {
  transform: translate(-50%, -50%) scale(1.1);
}

.video-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
  color: #ffffff;
}

/* Collections Grid */
.collections-4-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.collection-card-item {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: var(--color-bg-soft);
  display: block;
}

.collection-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.collection-card-item:hover .collection-card-img {
  transform: scale(1.05);
}

.collection-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: #ffffff;
}

/* Accordions */
.luxury-accordion {
  border-bottom: 1px solid var(--color-border);
}

.accordion-header {
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}

.accordion-content {
  display: none;
  padding-bottom: 20px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.accordion-content.open {
  display: block;
}

/* Footer */
.luxury-footer {
  background-color: var(--color-bg-soft);
  padding: 64px 0 0;
  margin-top: auto;
  border-top: 1px solid var(--color-border);
}

.footer-grid-4 {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: 48px;
  margin-bottom: 64px;
}

.footer-col-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 20px;
  color: var(--color-text);
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-list a {
  font-size: 14px;
  color: var(--color-text-muted);
}
.footer-links-list a:hover {
  color: var(--color-text);
}

.footer-bottom-bar {
  border-top: 1px solid var(--color-border);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Floating Widget */
.floating-action-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  top: auto;
  transform: none;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background-color: #111111;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  z-index: 90;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.floating-action-widget:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
}

/* Toast System */
.luxury-toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.luxury-toast {
  background-color: var(--color-text);
  color: #ffffff;
  padding: 14px 20px;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-drawer);
  border-left: 3px solid var(--color-accent);
  pointer-events: auto;
  animation: slideInToast 0.3s ease;
}

@keyframes slideInToast {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Cookie Banner */
.cookie-consent-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  padding: 16px 24px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Media Queries */
@media (max-width: 1023px) {
  .luxury-header .header-grid { display: none; }
  .mobile-header { display: flex; }
  .luxury-container { padding-left: 24px; padding-right: 24px; }
  .section-py { padding-top: 64px; padding-bottom: 64px; }
  .collections-4-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .text-display { font-size: 40px; }
  .text-h1 { font-size: 32px; }
  .text-h2 { font-size: 24px; }
  .floating-action-widget { width: 48px; height: 48px; right: 16px; bottom: 16px; top: auto; transform: none; }
}

@media (max-width: 767px) {
  .luxury-container { padding-left: 16px; padding-right: 16px; }
  .section-py { padding-top: 48px; padding-bottom: 48px; }
  .collections-4-grid { grid-template-columns: 1fr; }
  .footer-grid-4 { grid-template-columns: 1fr; gap: 32px; }
  .hero-section { height: 70vh; }
  .cookie-consent-bar { flex-direction: column; align-items: flex-start; }
  .btn-luxury { width: 100%; }
  .cart-drawer { width: 100vw; }
  .luxury-toast-container { top: auto; bottom: 20px; left: 16px; right: 16px; }
  .footer-bottom-bar { flex-direction: column; height: auto; padding: 20px 0; gap: 12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   EXACT 100% JO MILANO PARIS STYLES
   ========================================================================== */

/* --- banner-video.css (Exact Jo Milano Paris Spec) --- */
#banner-video-section, .hero-banner-section {
  position: relative;
  overflow: hidden;
  height: 90vh;
  min-height: 560px;
  max-height: 980px;
  background-color: #000000;
  width: 100%;
}

.hero-video-bg, #bannerVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-video-overlay, .overlay-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  z-index: 2;
  pointer-events: none;
}

.hero-shop-pill {
  position: absolute;
  top: 40px;
  left: 48px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: none;
  transition: all 0.25s ease;
}

.hero-shop-pill:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.hero-brand-display {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(48px, 11.5vw, 155px);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 0.85;
  margin: 0;
  padding-bottom: 6px;
}

.hero-sound-toggle {
  position: absolute;
  bottom: 36px;
  right: 48px;
  z-index: 10;
  background: none;
  border: none;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.hero-sound-toggle:hover {
  opacity: 1;
}

.sound-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.sound-bars span {
  display: inline-block;
  width: 2px;
  background-color: #ffffff;
  border-radius: 1px;
}

.sound-bars span:nth-child(1) { height: 6px; }
.sound-bars span:nth-child(2) { height: 12px; }
.sound-bars span:nth-child(3) { height: 8px; }
.sound-bars span:nth-child(4) { height: 10px; }

@media (max-width: 768px) {
  .hero-shop-pill {
    top: 24px;
    left: 20px;
    padding: 10px 22px;
    font-size: 13px;
  }
  .hero-sound-toggle {
    bottom: 24px;
    right: 20px;
  }
  .hero-brand-display {
    font-size: clamp(32px, 10vw, 68px);
    padding-bottom: 20px;
  }
}


/* ==========================================================================
   TOP SELLER, SCENT FINDER & REVIEWS (Exact Jo Milano Paris Spec)
   ========================================================================== */

/* --- 1. TOP SELLER SECTION --- */
#featured-product-section {
  background-color: #f6f6f6;
  padding: 48px 0 64px 0;
  overflow: hidden;
}

#top-seller-section {
  background-color: #f6f6f6;
  padding: 56px 0 24px 0;
}

.top-seller-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px 24px 48px;
}

.top-seller-heading {
  font-family: 'Unbounded', sans-serif;
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111111;
  margin: 0;
}

.top-seller-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-seller-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111111;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.top-seller-nav-btn:hover { opacity: 1; }

.top-seller-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 0 48px 16px 48px;
  scrollbar-width: none;
}
.top-seller-carousel::-webkit-scrollbar { display: none; }

.top-seller-card {
  flex: 0 0 calc((100% - 64px) / 5);
  min-width: 220px;
  max-width: 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1200px) {
  .top-seller-card { flex: 0 0 calc((100% - 32px) / 3); }
}
@media (max-width: 768px) {
  .top-seller-card { flex: 0 0 230px; }
  .top-seller-header, .top-seller-carousel { padding-left: 20px; padding-right: 20px; }
  .top-seller-heading { font-size: 26px; }
}

.top-seller-img-wrap {
  position: relative;
  background-color: #ffffff;
  width: 100%;
  aspect-ratio: 1 / 1.18;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
}

.free-shipping-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8c8c8c;
  z-index: 2;
  pointer-events: none;
}

.top-seller-img-wrap a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-seller-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.top-seller-card:hover .top-seller-img-wrap img {
  transform: scale(1.05);
}

.top-seller-info {
  padding: 12px 0 4px 0;
}

.top-seller-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  overflow: hidden;
}

.top-seller-add-btn {
  background: none;
  border: none;
  padding: 2px 0;
  margin: 0;
  cursor: pointer;
  color: #111111;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 1;
  outline: none;
}

.top-seller-add-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  display: block;
  color: #111111;
}

.top-seller-add-label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: #111111;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  margin-left: 0;
  margin-right: 0;
  transform: translateX(-4px);
  transition: max-width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s ease,
              margin 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  vertical-align: middle;
}

.top-seller-add-btn:hover .top-seller-add-label,
.top-seller-add-btn:focus-visible .top-seller-add-label {
  max-width: 110px;
  opacity: 1;
  margin-left: 6px;
  margin-right: 2px;
  transform: translateX(0);
  pointer-events: auto;
}

.top-seller-add-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.top-seller-title {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: #111111;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  transition: opacity 0.2s ease;
}
.top-seller-title:hover { opacity: 0.75; }

.top-seller-price-row {
  padding-left: 0;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-seller-price {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: #111111;
}

.top-seller-compare-price {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: #8c8c8c;
  text-decoration: line-through;
}

/* --- 2. SCENT FINDER CARD BANNER --- */
.section-scent-finder-banner {
  background-color: #f6f6f6;
  padding: 24px 48px 48px 48px;
}

@media (max-width: 768px) {
  .section-scent-finder-banner {
    padding: 16px 20px 36px 20px;
  }
}

.scent-finder-card {
  background-color: #ffffff;
  padding: 44px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

@media (max-width: 900px) {
  .scent-finder-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
    gap: 24px;
  }
}

.scent-finder-copy {
  max-width: 680px;
}

.scent-finder-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #666666;
  margin-bottom: 12px;
}

.scent-finder-heading {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 300;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #111111;
  line-height: 1.18;
  margin: 0 0 14px 0;
  max-width: 520px;
}

.scent-finder-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #555555;
  line-height: 1.55;
  margin: 0;
}

.scent-finder-btn {
  background-color: #111111;
  color: #ffffff;
  padding: 16px 36px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.scent-finder-btn:hover {
  background-color: #2b2b2b;
  color: #ffffff;
}

/* --- 3. REVIEWS (CREATOR VIDEOS) SECTION (Exact Jo Milano Paris Swiper Layout) --- */
#custom-reviews {
  background-color: #f6f6f6;
  padding: 36px 0 32px 0;
  overflow: hidden;
  position: relative;
}

.video-reviews-section {
  width: 100%;
}

.video-reviews-section h2,
.reviews-section-heading {
  color: var(--Dark, #1f1f1f);
  font-family: 'Unbounded', sans-serif !important;
  font-size: 34px;
  font-style: normal;
  font-weight: 300 !important;
  line-height: 110%;
  text-transform: uppercase;
  padding: 0 48px 24px 48px;
  margin: 0;
  letter-spacing: 0.04em;
}

.video-swiper {
  position: relative;
  padding: 0 48px 52px 48px !important;
  overflow: hidden;
  width: 100%;
  cursor: grab;
}

.video-swiper:active,
.video-swiper.swiper-grabbing {
  cursor: grabbing;
}

.video-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.video-swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  box-sizing: border-box;
}

.video-card {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background-color: #000000;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}

.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.video-card .video-card-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 3;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: auto;
}

.video-card .video-card-play svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}

.video-card:hover .video-card-play {
  transform: translate(-50%, -50%) scale(1.08);
}

.video-card .video-card-pause {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0.55);
  position: absolute;
  top: 12px;
  right: 12px;
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
}

.video-card .video-card-pause svg {
  width: 14px;
  height: 14px;
}

/* Slider Pagination Dots */
.video-swiper .swiper-pagination {
  position: absolute;
  bottom: 16px !important;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 10;
}

.video-swiper .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #000000 !important;
  opacity: 0.25 !important;
  margin: 0 !important;
  transition: all 0.25s ease !important;
  cursor: pointer;
}

.video-swiper .swiper-pagination-bullet-active {
  opacity: 1 !important;
  background-color: #000000 !important;
  transform: scale(1.35) !important;
}

@media (max-width: 768px) {
  .video-reviews-section h2,
  .reviews-section-heading {
    font-size: 24px;
    padding: 0 20px 16px 20px;
  }
  .video-swiper {
    padding: 0 20px 42px 20px !important;
  }
}

/* ==========================================================================
   CATEGORY & COLLECTIONS SECTION (Exact 100% Jo Milano Paris Layout & Interactions)
   ========================================================================== */
#category-section {
  background-color: var(--color-bg);
  padding: 56px 0 72px 0;
  position: relative;
}

#category-section .container-fluid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}

#category-section .category_heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 28px 0;
}

#category-section .category_heading h2 {
  color: #1f1f1f;
  font-family: 'Unbounded', sans-serif !important;
  font-size: 34px;
  font-style: normal;
  font-weight: 300 !important;
  line-height: 110%;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.04em;
}

#category-section .category_heading .top-view-all-coollection-button {
  position: relative;
  display: inline-block;
}

#category-section .category_heading .top-view-all-coollection-button a {
  text-decoration: none;
  color: #1f1f1f;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 125%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding-bottom: 2px;
}

#category-section .category_heading .top-view-all-coollection-button a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background-color: #1f1f1f;
  transition: width 0.3s ease;
}

#category-section .category_heading .top-view-all-coollection-button:hover a::before {
  width: 100%;
}

#category-section .category_heading a svg,
#category-section .top-view-all-coollection-button a svg {
  margin-bottom: 1px;
  margin-left: 2px;
  transition: transform 0.3s ease;
}

#category-section .category_heading .top-view-all-coollection-button:hover a svg {
  transform: translate(3px, -3px);
}

#category-section .collection_boxes {
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;
  margin-left: -12px;
  margin-right: -12px;
  padding: 0;
}

#category-section .collection_column {
  padding: 0 12px;
  flex: 0 0 50%;
  max-width: 50%;
}

#category-section .main_image_content_div {
  padding: 0;
  margin: 0;
  background-color: #ebebeb;
  transition: background-color 0.4s ease;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#category-section .main_image_content_div a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

#category-section .category_image {
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #ebebeb;
}

#category-section .main_image_content_div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#category-section .main_image_content_div:hover img {
  transform: scale(1.05);
}

#category-section .collection-content-main-div {
  padding: 0 28px;
  background-color: #ebebeb;
  transition: background-color 0.4s ease;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#category-section .main_image_content_div:hover .collection-content-main-div {
  background-color: #242424;
}

#category-section .inner-content-div {
  padding: 18px 0;
  border-top: 1px solid #c8c8c8;
  transition: border-color 0.4s ease;
}

#category-section .main_image_content_div:hover .inner-content-div {
  border-top-color: rgba(255, 255, 255, 0.15);
}

#category-section h4.collection-name {
  color: #1f1f1f;
  font-family: 'Inter', sans-serif !important;
  font-size: 19px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 6px 0;
  transition: color 0.3s ease;
}

#category-section .main_image_content_div:hover h4.collection-name {
  color: #ffffff;
}

#category-section .svg-div {
  width: 38px;
  height: 38px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease, color 0.3s ease;
  color: #1f1f1f;
  flex-shrink: 0;
}

#category-section .main_image_content_div:hover .svg-div {
  background-color: #ffffff;
  color: #111111;
}

#category-section p.collection-discription {
  color: #666666;
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

#category-section .main_image_content_div:hover p.collection-discription {
  color: #c4c4c4;
}

#category-section .bottom-view-all-coollection-button {
  display: none;
}

@media screen and (max-width: 991px) {
  #category-section .category_heading h2 {
    font-size: 28px;
  }
  #category-section .container-fluid {
    padding: 0 24px;
  }
}

@media screen and (max-width: 768px) {
  #category-section {
    padding: 36px 0 44px 0;
  }
  #category-section .container-fluid {
    padding: 0 16px;
  }
  #category-section .category_heading {
    padding-bottom: 20px;
    justify-content: space-between;
  }
  #category-section .category_heading h2 {
    font-size: 24px;
  }
  #category-section .category_heading .top-view-all-coollection-button {
    display: none;
  }
  #category-section .collection_boxes {
    row-gap: 16px;
    margin-left: 0;
    margin-right: 0;
  }
  #category-section .collection_column {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
  }
  #category-section .collection-content-main-div {
    padding: 0 20px;
  }
  #category-section h4.collection-name {
    font-size: 17px;
  }
  #category-section .bottom-view-all-coollection-button {
    display: block;
    text-align: center;
    margin-top: 24px;
  }
  #category-section .bottom-view-all-coollection-button a {
    text-decoration: none;
    color: #1f1f1f;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}

/*# sourceMappingURL=/cdn/shop/t/17/assets/video-reviews-section.css.map */


/* --- collapsible-content.css --- */
.collapsible-content{position:relative;z-index:0}.collapsible-section-layout{padding-bottom:5rem;padding-top:5rem}span.open-close-svg-div{position:absolute;right:0;transition:.3s ease}.outer-main-row{padding:0 2rem}.collapsible-content-heading{color:var(--Dark, #1f1f1f);font-family:Unbounded;font-size:40px;font-style:normal;font-weight:300!important;line-height:110%;text-transform:uppercase}.accordion__title{display:inline-block;min-height:1.6rem;margin:0;word-break:break-word;color:var(--Dark, #1f1f1f);font-family:Unbounded;font-size:30px;font-style:normal;font-weight:300!important;line-height:130%;max-width:700px;width:100%}.collapsible-content-header{text-align:left;padding-left:0rem;padding-top:3rem;background:#f5f5f5}.collapsible-content{padding-bottom:128px}@media screen and (min-width:1301px)and (max-width:1440px){.collapsible-content{padding-bottom:128px}}@media screen and (min-width:1025px)and (max-width:1100px){.accordion__title{font-size:26px}.accordion summary{padding:25px 0}}@media screen and (min-width:901px)and (max-width:990px){.accordion__title{font-size:24px}.accordion summary{padding:20px 0}}@media screen and (min-width:769px)and (max-width:900px){.accordion__title{font-size:20px}.accordion summary{padding:20px 0}}@media screen and (min-width:600px)and (max-width:768px){.collapsible-content{padding-bottom:65px}.accordion__title{font-size:18px}.accordion summary{padding:20px 0}.collapsible-content-heading{font-size:30px}}@media screen and (min-width:426px)and (max-width:600px){.collapsible-content{padding-bottom:65px}.accordion__title{font-size:16px;max-width:440px}.accordion summary{padding:15px 0}.collapsible-content-heading{font-size:30px}.outer-main-row{padding:0 10px}}@media screen and (min-width:376px)and (max-width:425px){.collapsible-content{padding-bottom:65px}.outer-main-row{padding:0 10px}.collapsible-content-heading{font-size:24px}.accordion__title{font-size:20px;max-width:350px}.accordion__content{font-size:14px}.accordion summary{padding:15px 0}.collapsible-content-header{padding-top:1rem}}@media screen and (min-width:321px)and (max-width:376px){.collapsible-content{padding-bottom:65px}.outer-main-row{padding:0 25px}.collapsible-content-heading{font-size:24px}.accordion__title,.accordion__content{font-size:14px}.accordion summary{padding:15px 0}.collapsible-content-header{padding-top:1rem}}@media screen and (max-width:320px){.collapsible-content{padding-bottom:65px}.outer-main-row{padding:0 1rem}.collapsible-content-heading{font-size:24px}.accordion__title{font-size:14px;max-width:250px}.accordion__content{font-size:14px}.accordion summary{padding:15px 0}.collapsible-content-header{padding-top:1rem}}@media screen and (min-width:750px){.collapsible-section-layout{padding-bottom:7rem;padding-top:7rem}}.collapsible-content__media{background:transparent}.collapsible-content__media--small{height:19.4rem}.collapsible-content__media--large{height:43.5rem}@media screen and (min-width:750px){.collapsible-content__media--small{height:31.4rem}.collapsible-content__media--large{height:69.5rem}}@media screen and (min-width:750px){.collapsible-content__grid--reverse{flex-direction:row-reverse}}.collapsible-content-wrapper-narrow{margin:0 auto;padding-right:1.5rem;padding-left:1.5rem;max-width:100%}.collapsible-content__header{word-break:break-word}.collapsible-content__heading{margin-bottom:2rem;margin-top:0}@media screen and (min-width:750px){.collapsible-content__heading{margin-bottom:3rem}}.collapsible-none-layout .accordion+.accordion{border-top:0}.collapsible-row-layout .accordion:not(:first-child):not(.color-background-1){margin-top:1rem}.caption-with-letter-spacing+h2{margin-top:1rem}@media screen and (min-width:750px){.collapsible-content .accordion{margin-top:0}}.collapsible-row-layout .accordion{border:var(--text-boxes-border-width) solid rgba(var(--color-foreground),var(--text-boxes-border-opacity));margin-bottom:1.5rem;transform:perspective(0)}.collapsible-row-layout .accordion summary,.collapsible-row-layout .accordion .accordion__content{padding:1.5rem}.collapsible-row-layout .accordion .accordion__content{padding-top:0}.collapsible-content summary:hover .accordion__title{text-decoration:none;text-underline-offset:.3rem}@supports not (inset: 10px){@media screen and (min-width:750px){.collapsible-content__grid:not(.collapsible-content__grid--reverse) .grid__item:last-child,.collapsible-content__grid--reverse .collapsible-content__grid-item{padding-left:5rem;padding-right:0}}@media screen and (min-width:990px){.collapsible-content__grid:not(.collapsible-content__grid--reverse) .grid__item:last-child,.collapsible-content__grid--reverse .collapsible-content__grid-item{padding-left:7rem}}}
/*# sourceMappingURL=/cdn/shop/t/17/assets/collapsible-content.css.map */


/* --- custom-header.css --- */
@media screen and (min-width:426px)and (max-width:768px){.header{padding:8px 1rem!important}}@media screen and (min-width:376px)and (max-width:425px){.header{padding:8px 1rem!important}}@media screen and (min-width:321px)and (max-width:375px){.header{padding:8px 1rem!important}}@media screen and (max-width:320px){.header{padding:8px 1rem!important}}.header__menu-item-white span{color:#fff;text-decoration:none}.menu-drawer__localization.header-localization span{color:#000}.header__menu-item-black span{text-decoration:none}
/*# sourceMappingURL=/cdn/shop/t/17/assets/custom-header.css.map */


/* --- component-mega-menu.css --- */
/** Shopify CDN: Minification failed

Line 280:0 Unexpected "}"

**/
.mega-menu {
  position: static;
  transition: 0.3s easy-in-out;
}

.mega-menu__content {
  background-color: rgb(var(--color-background));
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 100%;
}

.shopify-section-header-sticky .mega-menu__content {
  max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem);
}

.header-wrapper--border-bottom .mega-menu__content {
  border-top: 0;
}

.mega-menu .mega-menu__content {
  overflow-y: hidden;
  max-height: 0;
  transition: 0.6s;
}

.mega-menu.active .mega-menu__content {
  max-height: 800px;
  transition: 0.6s;
  overflow-y: hidden;
}

@media screen and (min-width: 989px) {
  .header-wrapper:has(.mega-menu.active) {
    background: #1f1f1f;
    transition: background 0.6s;
  }

  body:has(.mega-menu.active) {
    overflow-y: hidden;
  }
}

.header-wrapper {
  background: transparent;
  transition: background 0.6s;
}

.header-wrapper:has(.mega-menu.active) .bg {
  display: block;
}

.header-wrapper:has(.mega-menu.active) .icon-cart-new {
  stroke: #fff !important;
}

.header-wrapper:has(.mega-menu.active) .cart-count-bubble {
  background-color: white;
  color: #1f1f1f;
}

.header-wrapper:has(.mega-menu.active) .cart-count-bubble-icon {
  color: #1f1f1f !important;
}

.header-wrapper:has(.mega-menu.active) .cart-count-bubble-icon span {
  color: white !important;
}

.header-wrapper:has(.mega-menu.active) .icon-cart-empty {
  stroke: white;
}

.header-wrapper:has(.mega-menu.active) .header__menu-item span:before {
  background-color: #fff !important;
}

.mega-menu svg.icon_caret-filter {
  margin-left: 3px;
  transition: transform 0.6s;
}

.mega-menu.active .filter_icon {
  stroke: #fff;
}

.mega-menu.active svg.icon_caret-filter {
  transform: rotate(180deg);
  transition: transform 0.6s;
}

.mega-menu.active .header-wrapper {
  background-color: #848484;
}

.mega-menu .mega-menu__list {
  opacity: 0;
  transition: opacity 0.6s;
}

.mega-menu.active .mega-menu__list {
  opacity: 1;
  overflow-y: hidden;
}

body.mega-menu.active {
  overflow-y: hidden;
}

.mega-menu__list {
  padding-top: 37px;
  padding-bottom: 37px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  list-style: none;
}

.mega-menu__link {
  display: block;
  padding-bottom: 0.6rem;
  padding-top: 0.6rem;
  text-decoration: none;
  transition: text-decoration var(--duration-short) ease;
  word-wrap: break-word;
  color: var(--White, #fff);
  /* Desktop/H3 */
  font-family: Unbounded !important;
  font-size: 30px;
  font-style: normal;
  font-weight: 300 !important;
  line-height: 130%;
  /* 39px */
}

#child-0 {
  padding-right: 90px;
}

#child-0 a {
  padding-bottom: 16px;
  white-space: nowrap;
}

#child-1 a {
  padding-bottom: 10px;
  white-space: nowrap;
}

#child-1 {
  border-right: 1px solid var(--Dark-Grey, #848484);
  border-left: 1px solid var(--Dark-Grey, #848484);
  width: fit-content;
  padding-bottom: 100px;
}

#child-2 .last_link {
  display: none;
}

#child-2 .heading_with_view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
}

#child-2 .view_all_link {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

#child-2 .view_all_link a {
  transition: transform 0.3s ease;
  /* Add transition effect */
}

#child-2 .view_all_link:hover a {
  transform: translateX(-5px);
  /* Move the link 5 pixels to the left */
}

#child-2 .view_all_link::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -8px;
  width: 0;
  height: 1px;
  /* Set the height/thickness of the line */
  background-color: rgb(var(--color-foreground));
  /* Adjust the color of the line */
  transition: width 0.3s ease;
  /* Add a transition for a smooth effect */
}

#child-2 .view_all_link:hover::after {
  width: 100%;
}

#child-2 .view_all_link a {
  color: var(--White, #fff);
  font-family: Inter !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 400 !important;
  text-decoration: none;
  line-height: 125%;
}

#child-0 .view_all_link {
  display: none;
}

#child-1 .view_all_link {
  display: none;
}

#child-0 img {
  display: none;
}

#child-1 img {
  display: none;
}

#child-1 a {
  color: var(--White, #fff);
  text-align: left;
  /* Desktop/Body Short */
  font-family: Inter !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 300 !important;
  line-height: 125%;
  /* 20px */
  padding-left: 24px;
  padding-right: 24px;
  width: fit-content;
  padding-right: 80px;
}

#child-2 img {
  width: 100%;
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: 60% 55%;
  max-height: 302px;
}

.mega-menu__link--level-2 {
  font-weight: bold;
}

.heading_with_view a {
  position: relative;
}

/* #child-0 .heading_with_view a::after {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(var(--color-foreground));
  transition: width 0.3s ease; */
}

.header--top-center .mega-menu__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0;
}

.header--top-center .mega-menu__list > li {
  width: 16%;
  padding-right: 2.4rem;
}

.mega-menu__link {
  position: relative;
  display: inline-block;
}

/* Initially, set the pseudo-element's width to 0 */
.mega-menu__link::after {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 0;
  height: 1px;
  /* Set the height/thickness of the line */
  background-color: rgb(var(--color-foreground));
  /* Adjust the color of the line */
  transition: width 0.3s ease;
  /* Add a transition for a smooth effect */
}

#child-1 .mega-menu__link::after {
  left: 24px;
  bottom: 7px;
}

#child-1 .mega-menu__link:hover::after {
  width: 70%;
}

#child-2 .mega-menu__link:hover::after {
  width: 0;
}

.mega-menu__link:hover::after {
  width: 100%;
}

.mega-menu__link--active:hover {
  text-decoration-thickness: 0.2rem;
}

.mega-menu .mega-menu__list--condensed {
  display: block;
}

.mega-menu__list--condensed .mega-menu__link {
  font-weight: normal;
}

/* ==========================================================================
   BLOG / NEWS PAGE (Exact Jo Milano Paris Layout & Typography)
   ========================================================================== */
.main-blog-wrapper {
  background-color: var(--color-bg);
}

.main-blog-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 48px 80px 48px;
}

.blog_breadcrumbs {
  margin-bottom: 24px;
}

.blog_breadcrumbs .breadcumbs_inner {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #1f1f1f;
}

.blog_breadcrumbs .breadcumbs_inner a {
  text-decoration: none;
  color: #1f1f1f;
}

.blog_breadcrumbs .breadcumbs_inner a:hover {
  text-decoration: underline;
}

.main-blog-title {
  color: var(--Dark, #1f1f1f);
  font-family: 'Unbounded', sans-serif !important;
  font-size: 44px;
  font-style: normal;
  font-weight: 300 !important;
  line-height: 110%;
  text-transform: uppercase;
  margin: 0 0 32px 0;
  letter-spacing: 0.02em;
}

/* Blog Filter Pills */
.blog-tags-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 48px;
}

.blog-tag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 9999px;
  border: 1px solid #1f1f1f;
  background-color: transparent;
  color: #1f1f1f;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.blog-tag-pill:hover,
.blog-tag-pill.active {
  background-color: #1f1f1f;
  color: #ffffff;
}

/* Blog Article Rows */
.blog-articles-list {
  display: flex;
  flex-direction: column;
}

.blog-article-item {
  padding: 36px 0;
  border-bottom: 1px solid #d5d5d5;
  transition: border-color 0.4s ease;
}

.blog-article-item:hover {
  border-bottom-color: #1f1f1f;
}

.article-card-row {
  display: grid;
  grid-template-columns: 280px 1.25fr 1fr;
  gap: 40px;
  align-items: center;
}

.article-image-col {
  width: 100%;
}

.article-image-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 2px;
}

.article-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.article-card-row:hover .article-image-wrap img {
  transform: scale(1.04);
}

.article-info-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
}

.article-date {
  color: #1f1f1f;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.article-title {
  margin: 0;
  padding: 0;
  text-transform: none !important;
}

.article-title a {
  color: var(--Dark, #1f1f1f);
  font-family: 'Unbounded', sans-serif !important;
  font-size: 28px;
  font-style: normal;
  font-weight: 300 !important;
  line-height: 125%;
  text-decoration: none;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: color 0.2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-title a:hover {
  color: #555555;
}

.article-tags {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-tag {
  color: var(--Dark-Grey, #848484);
  font-family: 'Manrope', sans-serif !important;
  font-size: 11px;
  font-weight: 500 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.article-excerpt-col {
  padding-left: 12px;
}

.article-excerpt-text {
  color: var(--Dark, #1f1f1f);
  font-family: 'Inter', sans-serif !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 180%;
  margin: 0;
}

@media (max-width: 1024px) {
  .article-card-row {
    grid-template-columns: 240px 1fr;
    gap: 24px;
  }
  .article-excerpt-col {
    grid-column: 1 / -1;
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  .main-blog-container {
    padding: 24px 20px 48px 20px;
  }
  .main-blog-title {
    font-size: 28px;
    margin-bottom: 24px;
  }
  .blog-tags-nav {
    gap: 8px;
    margin-bottom: 32px;
  }
  .blog-tag-pill {
    padding: 8px 18px;
    font-size: 13px;
  }
  .article-card-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .article-title a {
    font-size: 20px;
  }
}

/* ==========================================================================
   LOVED BY CREATORS PAGE (Exact Jo Milano Paris Layout & Typography)
   ========================================================================== */
.dev-trused-hero-wrapper * {
  padding: 0;
  margin: 0;
}

.dev-trused-hero-wrapper {
  padding-top: 56px;
  padding-bottom: 64px;
  background-color: var(--color-bg);
}

.dev-trused-hero-inner {
  padding: 0 48px;
  max-width: 1440px;
  margin: 0 auto;
}

.dev-trused-hero-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--Dark, #1f1f1f);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
  margin-bottom: 40px;
}

.dev-trused-hero-breadcrumbs a {
  text-decoration: none;
  color: var(--Dark, #1f1f1f);
}

.dev-trused-hero-breadcrumbs a:hover {
  text-decoration: underline;
}

.dev-trused-hero-word {
  display: block;
  color: #000000;
  font-family: 'Unbounded', sans-serif !important;
  font-size: 132px;
  font-style: normal;
  font-weight: 200 !important;
  line-height: 100%;
  text-transform: uppercase;
}

@media (max-width: 1440px) {
  .dev-trused-hero-word {
    font-size: calc(100vw / 11);
  }
}

.dev-trused-hero-words {
  display: flex;
  justify-content: space-between;
  max-width: 1100px;
  margin-left: auto;
}

@media (max-width: 1440px) {
  .dev-trused-hero-words {
    max-width: calc(100vw / 1.3090909091);
  }
}

.dev-trused-hero-image-and-text-wrapper {
  display: grid;
  grid-template-columns: 46.66% 51.5%;
  align-items: flex-end;
  gap: 24px;
}

.dev-trused-hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.dev-trused-hero-text-wrapper {
  color: var(--Dark, #1f1f1f);
  font-family: 'Inter', sans-serif !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 180%;
  margin-top: 16px;
  max-width: 379px;
}

@media (max-width: 990px) {
  .dev-trused-hero-word {
    font-size: calc(100vw / 11.5);
  }
  .dev-trused-hero-inner {
    padding: 0 20px;
  }
}

@media (max-width: 768px) {
  .dev-trused-hero-wrapper {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .dev-trused-hero-image-and-text-wrapper {
    gap: 16px;
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column-reverse;
  }
  .dev-trused-hero-text-wrapper {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .dev-trused-hero-word {
    font-size: 42px;
  }
  .dev-trused-hero-breadcrumbs {
    margin-bottom: 20px;
  }
}

/* Creator Players Gallery */
.dev-players-gallery-section {
  padding: 48px 0;
  background-color: var(--color-bg);
}

.dev-players-gallery-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}

.dev-players-gallery-heading {
  margin-bottom: 32px;
}

.dev-players-gallery-heading h2,
.dev-players-gallery-heading p {
  letter-spacing: 0;
  padding: 0;
  margin: 0;
  color: var(--Dark, #1f1f1f);
  font-family: 'Unbounded', sans-serif !important;
  font-size: 40px;
  font-style: normal;
  font-weight: 300 !important;
  line-height: 110%;
  text-transform: uppercase;
}

.dev-players-gallery {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  touch-action: pan-y;
  transition: transform 0.2s ease-out;
}

.dev-players-gallery--two-videos {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}

.dev-players-gallery .video-card {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background-color: #000000;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.dev-players-gallery--two-videos .video-card {
  aspect-ratio: 16 / 9;
}

.dev-players-gallery .video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dev-players-pagination {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 36px;
  -webkit-user-select: none;
  user-select: none;
}

.dev-players-pagination .page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  color: #1f1f1f;
  text-decoration: none;
  font-family: 'Inter', sans-serif !important;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transition: all 0.2s ease;
}

.dev-players-pagination .page-btn[aria-current="page"],
.dev-players-pagination .page-btn.active {
  background-color: #1f1f1f;
  color: #ffffff;
}

.dev-players-pagination .ellipsis {
  pointer-events: none;
  font-size: 18px;
  line-height: 1;
  color: #1f1f1f;
}

.dev-players-gallery-button {
  color: #1f1f1f;
  background-color: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 125%;
  padding: 16px 36px;
  border-radius: 9999px;
  border: 1px solid #1f1f1f;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 40px auto 0;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dev-players-gallery-button:hover {
  background-color: #1f1f1f;
  color: #ffffff;
}

@media (max-width: 1200px) {
  .dev-players-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 990px) {
  .dev-players-gallery-inner {
    padding: 0 20px;
  }
}

@media (max-width: 768px) {
  .dev-players-gallery-section {
    padding: 32px 0;
  }
  .dev-players-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .dev-players-gallery-heading h2,
  .dev-players-gallery-heading p {
    font-size: 26px;
  }
  .dev-players-gallery-heading {
    margin-bottom: 20px;
  }
  .dev-players-pagination {
    margin-top: 20px;
    gap: 10px;
  }
  .dev-players-pagination .page-btn {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
  .dev-players-gallery-button {
    padding: 12px 24px;
    margin-top: 24px;
    font-size: 13px;
  }
}


@media screen and (max-width: 1280px) {
  #child-1 a {
    padding-right: 20px;
  }

  #child-0 {
    padding-right: 0;
  }
}


/* --- new-footer-section.css --- */
.main_footer_heading h2{font-family:Unbounded;font-size:132px;font-style:normal;font-weight:300!important;line-height:100%;text-transform:uppercase}.main_footer_heading{text-align:center;padding-bottom:149px}.footer__content-top.container-fluid{padding:0 2rem;position:relative}.newsletter-form__field-wrapper .field__input:hover{border-bottom:1px solid transparent;transition:.3s ease}.footer__blocks-wrapper.col-12.scroll-trigger.animate--slide-in{display:flex;justify-content:space-evenly;padding:0 0rem;margin:0 auto}.footer__content-bottom{border-top:none;padding-top:1rem}p.footer-block__heading.inline-richtext{color:#848484;font-family:Manrope;font-size:12px;font-weight:400;line-height:15px;letter-spacing:.04em;text-align:left;padding-left:20px;text-transform:uppercase}footer a.link.link--text.list-menu__item.list-menu__item--link{font-family:Inter;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0em;text-align:center;text-decoration:none;display:inline-block;position:relative;color:#fff}.list-menu__item--link:before{content:"";position:absolute;left:0;bottom:5px;height:1px;width:0;background-color:#fff;transition:.3s ease}ul.footer-block__details-content.list-unstyled li:hover a:before{width:100%;transition:.3s ease}ul.footer-block__details-content.list-unstyled li{padding-left:20px}.footer-block__details-content.rte{padding-left:20px;font-family:Inter;font-size:16px;font-weight:400;line-height:20px;letter-spacing:0em}.footer-block__details-content a[href^="mailto:"]{font-size:12px}.footer-block__details-content p{display:inline-block;position:relative}.footer-block__details-content p:before{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background-color:#fff;transition:.3s ease}.footer-block__details-content:hover p:before{width:100%;transition:.3s ease}.footer-block--newsletter.scroll-trigger.animate--slide-in{position:absolute;top:68%;right:20%}.footer-block__newsletter p.footer-block__heading.inline-richtext{font-family:Unbounded;font-size:30px;font-weight:300!important;line-height:39px;letter-spacing:0em;text-align:left;color:#fff;padding-left:0%;margin-top:15px;text-transform:lowercase}.field:after,.select:after,.customer .field:after,.customer select:after,.localization-form__select:after{display:none}.newsletter-form__field-wrapper .field__input{padding-right:5rem;border-bottom:1px solid #848484;background:transparent}label.field__label{font-family:Inter;font-size:16px;font-weight:400;line-height:20px;letter-spacing:0em;text-align:left}.footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center) .footer__copyright{text-align:right;display:flex;justify-content:space-between;color:#848484;font-family:Manrope;font-size:12px}.footer__content-bottom.scroll-trigger.animate--slide-in{margin-top:40px}.footer__content-bottom-wrapper.container-fluid{padding:0 5rem}.footer-block__details-content.rte p a{text-decoration:none}.newsletter-form{align-items:flex-start;margin:0 auto;max-width:55rem}.newsletter-form__field-wrapper{max-width:54rem}.footer__copyright.caption{font-family:Manrope;font-size:12px;font-weight:400;line-height:15px;letter-spacing:.04em;text-align:left;text-transform:uppercase}.copyright__content{font-family:Manrope;font-size:12px;font-weight:400;line-height:15px;letter-spacing:.04em;text-align:left}.copyright__content a{text-decoration:none;position:relative;display:inline-block}.copyright__content a:before{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background-color:#000;transition:.3s ease}.policies li:before{display:none}.footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center) .footer__copyright{width:100%}.copyright_links{padding-left:30px}ul.policies.list-unstyled li{padding:0 13px}.newsletter-form__button .icon{width:1.5rem;display:none}.developer-main-div span{color:var(--Dark-Grey, #848484);text-align:center;font-variant-numeric:lining-nums proportional-nums;font-family:Manrope;font-size:12px;font-style:normal;font-weight:400;line-height:125%;letter-spacing:.48px;text-transform:uppercase;position:relative;display:inline-block;padding:0 5px}.developer-name:before{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background-color:#000;transition:.3s ease}.design_develop .developer-main-div:hover .developer-name:before{width:100%;transition:.3s ease}.field__input:focus{box-shadow:none}.field__input:focus .field__label{display:none!important;transition:.5s ease}.footer:not(.color-background-1){border-top:none;position:relative;overflow:hidden}.main_footer_heading h2{display:none}@media screen and (min-width:1441px){.main_footer_heading h2{font-size:134px;display:block}.footer__content-top svg{display:none}}@media screen and (min-width:1301px)and (max-width:1440px){.footer-block--newsletter.scroll-trigger.animate--slide-in{right:16%}.main_footer_heading{padding-bottom:40px}.main_footer_heading h2{font-size:119px}}@media screen and (min-width:1201px)and (max-width:1300px){.footer-block--newsletter.scroll-trigger.animate--slide-in{right:12%}.footer__copyright caption{display:flex;justify-content:space-between}.copyright_links{padding-left:30px}.design_develop{padding-left:20%}.main_footer_heading{padding-bottom:50px}.main_footer_heading h2{font-size:109px}}@media screen and (min-width:1106px)and (max-width:1200px){.footer-block--newsletter.scroll-trigger.animate--slide-in{right:7%}.copyright_links{padding-left:4%}.design_develop{padding-left:6%}.main_footer_heading{padding-bottom:40px}.main_footer_heading h2{font-size:100px}}@media screen and (min-width:1037px)and (max-width:1105px){.footer-block--newsletter.scroll-trigger.animate--slide-in{right:8%}.footer-block__newsletter p.footer-block__heading.inline-richtext{font-size:26px}footer a.link.link--text.list-menu__item.list-menu__item--link{font-size:14px}.design_develop{padding-left:3%;gap:20px}.copyright_links{padding-left:1%}.footer-block__details-content.rte{font-size:14px}.main_footer_heading{padding-bottom:50px}.main_footer_heading h2{font-size:94px}}@media screen and (min-width:991px)and (max-width:1037px){.footer-block--newsletter.scroll-trigger.animate--slide-in{right:8%}.footer-block__newsletter p.footer-block__heading.inline-richtext{font-size:24px}footer a.link.link--text.list-menu__item.list-menu__item--link{font-size:12px}.footer-block__details-content.rte{font-size:12px}.copyright__content,.developer-main-div span{font-size:11px}.copyright_links{padding-left:1%}.design_develop{padding-left:1%;gap:20px}.main_footer_heading{padding-bottom:40px}.main_footer_heading h2{font-size:89px}}@media screen and (min-width:901px)and (max-width:990px){.main_footer_heading{padding-bottom:35px}.main_footer_heading h2{font-size:81px}.footer-block__newsletter p.footer-block__heading.inline-richtext{font-size:18px;line-height:30px;margin-top:5px;margin-bottom:1rem}.copyright_links{padding-left:15px}.design_develop{padding-left:10px;gap:10px}.footer-block--newsletter.scroll-trigger.animate--slide-in{top:82%;right:0%}.footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center) .footer__copyright{text-align:left;padding-left:6rem}.footer__content-bottom-wrapper{display:inline}.footer__content-bottom.scroll-trigger.animate--slide-in{margin-top:20px}.footer__content-bottom{padding-top:0rem}.copyright__content,.developer-main-div span{font-size:11px}}@media screen and (min-width:769px)and (max-width:900px){.footer__copyright span{font-size:10px}.main_footer_heading{padding-bottom:25px}.main_footer_heading h2{font-size:68px}.footer__blocks-wrapper .footer-block:nth-child(5){position:absolute;right:0;top:79px}.footer__blocks-wrapper .footer-block:nth-child(6){position:absolute;right:0;top:180px}.footer-block__heading{margin-bottom:1rem}.footer-block--newsletter.scroll-trigger.animate--slide-in{position:relative;top:0;right:0}.footer-block__newsletter p.footer-block__heading.inline-richtext{text-align:center;margin-top:7px}.copyright_links{padding-left:10px;text-align:center}.design_develop{padding-left:10px;gap:10px}.footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center) .footer__copyright{text-align:left}}@media screen and (min-width:601px)and (max-width:768px){.main_footer_heading{padding-bottom:30px}.main_footer_heading h2{font-size:52px}.footer__blocks-wrapper .footer-block:nth-child(5){position:absolute;right:0;top:156px}.footer__blocks-wrapper .footer-block:nth-child(6){position:absolute;right:0;top:40%}.footer-block__heading{margin-bottom:1rem}.footer-block--newsletter.scroll-trigger.animate--slide-in{position:relative;top:0;right:0}.footer-block__newsletter p.footer-block__heading.inline-richtext{text-align:center;margin-top:7px}.copyright_links{padding-left:10px;text-align:center}.design_develop{padding-left:10px;gap:10px}.footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center) .footer__copyright{text-align:left}footer a.link.link--text.list-menu__item.list-menu__item--link{font-size:14px}.footer-block__details-content.rte{font-size:14px}.copyright__content,.developer-main-div span{font-size:11px}}@media screen and (min-width:426px)and (max-width:600px){.main_footer_heading{padding-bottom:25px}.main_footer_heading h2{font-size:34px}.footer__blocks-wrapper .footer-block:nth-child(5){position:absolute;right:0;top:55%}.footer__blocks-wrapper .footer-block:nth-child(6){position:absolute;right:0;top:58%}.footer-block__heading{margin-bottom:1rem}.footer-block--newsletter.scroll-trigger.animate--slide-in{position:relative;top:0;right:0}.footer-block__newsletter p.footer-block__heading.inline-richtext{text-align:center;margin-top:7px;font-size:25px;order:-1}.copyright_links{padding-left:4px;text-align:center}.design_develop{padding-left:5px;display:block}.footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center) .footer__copyright{text-align:left;flex-direction:column;align-items:center}.policies{display:flex;flex-direction:column}.policies li a{font-size:12px}footer a.link.link--text.list-menu__item.list-menu__item--link{font-size:14px}.footer-block__details-content.rte{font-size:14px}.footer__content-bottom.scroll-trigger.animate--slide-in{margin-top:12px}.copyright__content,.developer-main-div span{font-size:12px}}@media screen and (min-width:375px)and (max-width:426px){.footer__content-top.container-fluid{padding:0 2rem;position:relative}.footer-block--newsletter.scroll-trigger.animate--slide-in{position:relative;top:0;right:-2px}.main_footer_heading{padding-bottom:32px}.main_footer_heading h2{font-size:34px}.footer__blocks-wrapper .footer-block:nth-child(5){position:absolute;right:0;top:55%}.footer__blocks-wrapper .footer-block:nth-child(6){position:absolute;right:0;top:58%}.footer-block__heading{margin-bottom:1rem}.footer-block--newsletter{margin-top:0rem}.footer-block__newsletter{flex-direction:column-reverse}.footer-block__newsletter p.footer-block__heading.inline-richtext{font-size:20px;margin:0;text-transform:lowercase}.newsletter-form__field-wrapper .field__input{border-bottom:2px solid #c4c2c2}.footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center) .footer__copyright{text-align:center;display:block}.policies li{display:block;text-align:center}.footer__copyright.caption,.copyright__content{text-align:center}.design_develop{padding:10px 0;display:flex;justify-content:center}.copyright_links{padding-left:0}.copyright_content_section{color:var(--Dark-Grey, #848484);text-align:center;font-family:Manrope;font-size:12px;font-style:normal;font-weight:400;line-height:125%;letter-spacing:.48px;text-transform:uppercase;padding:10px 0}.policies li a{padding:1rem 0;display:block;color:var(--Dark-Grey, #848484);text-align:center;font-variant-numeric:lining-nums proportional-nums;font-family:Manrope;font-size:12px;font-style:normal;font-weight:400;line-height:125%;letter-spacing:.48px;text-transform:uppercase}.footer__content-bottom{border-top:none}.footer__content-bottom.scroll-trigger.animate--slide-in{margin-top:10px}}@media screen and (max-width:390px){.main_footer_heading{padding:32px 16px}ul.footer-block__details-content.list-unstyled li,p.footer-block__heading.inline-richtext{padding-left:16px}.main_footer_heading h2{font-size:28px}.footer-block--newsletter.scroll-trigger.animate--slide-in{right:0}}@media screen and (min-width:321px)and (max-width:375px){.footer__content-top.container-fluid{padding:0 1rem;position:relative}.footer-block--newsletter.scroll-trigger.animate--slide-in{position:relative;top:0;right:0}.main_footer_heading{padding-bottom:32px}.main_footer_heading h2{font-size:27px}.footer__blocks-wrapper .footer-block:nth-child(5){position:absolute;right:0;top:55%}.footer__blocks-wrapper .footer-block:nth-child(6){position:absolute;right:0;top:58%}.footer-block__heading{margin-bottom:1rem}.footer-block--newsletter{margin-top:0rem}.footer-block__newsletter{flex-direction:column-reverse}.footer-block__newsletter p.footer-block__heading.inline-richtext{font-size:20px;margin:0;text-transform:lowercase}.newsletter-form__field-wrapper .field__input{border-bottom:2px solid #c4c2c2}.footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center) .footer__copyright{text-align:center;display:block}.policies li{display:block;text-align:center}.footer__copyright.caption,.copyright__content{text-align:center}.design_develop{padding:10px 0;display:flex;justify-content:center}.copyright_links{padding-left:0}.copyright_content_section{color:var(--Dark-Grey, #848484);text-align:center;font-family:Manrope;font-size:12px;font-style:normal;font-weight:400;line-height:125%;letter-spacing:.48px;text-transform:uppercase;padding:10px 0}.policies li a{padding:1rem 0;display:block;color:var(--Dark-Grey, #848484);text-align:center;font-variant-numeric:lining-nums proportional-nums;font-family:Manrope;font-size:12px;font-style:normal;font-weight:400;line-height:125%;letter-spacing:.48px;text-transform:uppercase}.footer__content-bottom{border-top:none}.footer__content-bottom.scroll-trigger.animate--slide-in{margin-top:10px}.footer-block__details-content.rte{font-size:15px}footer a.link.link--text.list-menu__item.list-menu__item--link{font-size:15px}}@media screen and (max-width:320px){.field__input,.select__select,.customer .field input,.customer select{min-width:calc(28rem + (var(--inputs-border-width) * 2))}.footer__content-top.container-fluid{padding:0 0rem;position:relative}.footer-block--newsletter.scroll-trigger.animate--slide-in{position:relative;top:0;right:0}.main_footer_heading{padding-bottom:32px}.main_footer_heading h2{font-size:25px}.footer__blocks-wrapper .footer-block:nth-child(5){position:absolute;right:0;top:55%}.footer__blocks-wrapper .footer-block:nth-child(6){position:absolute;right:0;top:60%}.footer-block__heading{margin-bottom:1rem}.footer-block--newsletter{margin-top:0rem}.footer-block__newsletter{flex-direction:column-reverse;padding:0 13px}.footer-block__newsletter p.footer-block__heading.inline-richtext{font-size:18px;margin:0;text-transform:lowercase}.newsletter-form__field-wrapper .field__input{border-bottom:2px solid #c4c2c2}.footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center) .footer__copyright{text-align:center;display:block}.policies li{display:block;text-align:center}.footer__copyright.caption,.copyright__content{text-align:center}.design_develop{padding:10px 0;display:flex;justify-content:center}.copyright_links{padding-left:0}.copyright_content_section{color:var(--Dark-Grey, #848484);text-align:center;font-family:Manrope;font-size:12px;font-style:normal;font-weight:400;line-height:125%;letter-spacing:.48px;text-transform:uppercase;padding:10px 0}.policies li a{padding:1rem 0;display:block;color:var(--Dark-Grey, #848484);text-align:center;font-variant-numeric:lining-nums proportional-nums;font-family:Manrope;font-size:12px;font-style:normal;font-weight:400;line-height:125%;letter-spacing:.48px;text-transform:uppercase}.footer__content-bottom{border-top:none}.footer__content-bottom.scroll-trigger.animate--slide-in{margin-top:10px}.footer-block__details-content.rte{font-size:13px;padding-left:15px}footer a.link.link--text.list-menu__item.list-menu__item--link{font-size:13px;line-height:13px}.footer__content-bottom-wrapper.container-fluid{padding:0 2rem}}
/*# sourceMappingURL=/cdn/shop/t/17/assets/new-footer-section.css.map */



/* ==========================================================================
   Luxury Theme Precision Dark Pagination
   ========================================================================== */
.luxury-pagination-nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.luxury-pagination,
.pagination {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-user-select: none;
  user-select: none;
  flex-wrap: wrap !important;
}

.luxury-pagination .page-item,
.pagination .page-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  list-style: none !important;
  background: transparent !important;
}

.luxury-pagination .page-link,
.pagination .page-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e2e2 !important;
  color: #111111 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}

.luxury-pagination .page-link svg,
.pagination .page-link svg {
  display: block !important;
  flex-shrink: 0 !important;
  transition: stroke 0.2s ease, transform 0.2s ease !important;
}

/* Hover on interactive pages */
.luxury-pagination .page-item:not(.active):not(.disabled) .page-link:hover,
.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
  background-color: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.18) !important;
}

.luxury-pagination .page-item:not(.active):not(.disabled) .page-link:hover svg,
.pagination .page-item:not(.active):not(.disabled) .page-link:hover svg {
  stroke: #ffffff !important;
}

.luxury-pagination .page-item:not(.active):not(.disabled) .page-prev:hover svg,
.pagination .page-item:not(.active):not(.disabled) .page-prev:hover svg {
  transform: translateX(-1px);
}

.luxury-pagination .page-item:not(.active):not(.disabled) .page-next:hover svg,
.pagination .page-item:not(.active):not(.disabled) .page-next:hover svg {
  transform: translateX(1px);
}

/* Active Page (Exact Theme Dark Color) */
.luxury-pagination .page-item.active .page-link,
.pagination .page-item.active .page-link,
.pagination .active > .page-link {
  z-index: 2 !important;
  background-color: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 10px rgba(17, 17, 17, 0.22) !important;
  cursor: default !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Disabled State */
.luxury-pagination .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link,
.pagination .disabled > .page-link {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border-color: #eaeaea !important;
  color: #b8b8b8 !important;
  box-shadow: none !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
}

.luxury-pagination .page-item.disabled .page-link svg,
.pagination .page-item.disabled .page-link svg {
  stroke: #b8b8b8 !important;
}

/* Ellipsis Item */
.luxury-pagination .page-link.page-ellipsis,
.pagination .page-link.page-ellipsis,
.luxury-pagination .page-ellipsis,
.pagination .page-ellipsis {
  min-width: 32px !important;
  width: 32px !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #888888 !important;
  font-size: 15px !important;
  letter-spacing: 2px !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* Remove Bootstrap blue outline */
.luxury-pagination .page-link:focus,
.pagination .page-link:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.25) !important;
}

/* Mobile Responsive */
@media (max-width: 576px) {
  .luxury-pagination,
  .pagination {
    gap: 6px !important;
  }

  .luxury-pagination .page-link,
  .pagination .page-link {
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 13px !important;
  }

  .luxury-pagination .page-link.page-ellipsis,
  .pagination .page-link.page-ellipsis {
    min-width: 24px !important;
    width: 24px !important;
    font-size: 13px !important;
  }
}


/* ==========================================================================
   Luxury Search Pop-up Modal & Live Suggestions
   ========================================================================== */
.luxury-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background-color: #ffffff;
  z-index: 2100;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  padding: 36px 0 40px 0;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.35s;
}

.luxury-search-overlay.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.luxury-search-container {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
}

.luxury-search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.luxury-search-title {
  font-family: 'Unbounded', sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111111;
}

.luxury-search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #e5e5e5;
  color: #111111;
  cursor: pointer;
  transition: all 0.2s ease;
}

.luxury-search-close:hover {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
}

.luxury-search-form {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.luxury-search-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.luxury-search-input-icon {
  position: absolute;
  left: 18px;
  color: #888888;
  pointer-events: none;
}

.luxury-search-input {
  width: 100%;
  height: 54px;
  padding: 0 46px 0 52px;
  background-color: #f6f6f6;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #111111;
  transition: all 0.2s ease;
  outline: none;
}

.luxury-search-input:focus {
  background-color: #ffffff;
  border-color: #111111;
  box-shadow: 0 0 0 1px #111111;
}

.luxury-search-clear-btn {
  position: absolute;
  right: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: #d8d8d8;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.luxury-search-clear-btn:hover {
  background: #111111;
  color: #ffffff;
}

.luxury-search-submit-btn {
  height: 54px;
  padding: 0 32px;
  font-size: 12px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

/* Popular search chips */
.luxury-search-popular {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.popular-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #888888;
  text-transform: uppercase;
}

.popular-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.popular-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background-color: #f6f6f6;
  border: 1px solid #e5e5e5;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  color: #111111;
  text-decoration: none;
  transition: all 0.2s ease;
}

.popular-chip:hover {
  background-color: #111111;
  border-color: #111111;
  color: #ffffff;
}

/* Results panel */
.luxury-search-results {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #eeeeee;
  animation: searchFadeIn 0.22s ease-out;
}

@keyframes searchFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.search-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888888;
  margin-bottom: 14px;
}

/* Categories row */
.search-categories-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.search-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #f6f6f6;
  border: 1px solid #e2e2e2;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: #111111;
  text-decoration: none;
  transition: all 0.2s ease;
}

.search-category-pill:hover {
  background-color: #111111;
  border-color: #111111;
  color: #ffffff;
}

.search-category-pill svg {
  transition: transform 0.2s ease;
}

.search-category-pill:hover svg {
  transform: translateX(2px);
}

/* Products grid */
.search-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.search-product-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  background-color: #fcfcfc;
  border: 1px solid #eeeeee;
  text-decoration: none;
  transition: all 0.2s ease;
}

.search-product-item:hover {
  background-color: #ffffff;
  border-color: #111111;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.search-product-thumb {
  width: 54px;
  height: 64px;
  object-fit: cover;
  background-color: #ffffff;
  border: 1px solid #f0f0f0;
  padding: 4px;
  flex-shrink: 0;
}

.search-product-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.search-product-name {
  font-size: 13px;
  font-weight: 500;
  color: #111111;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-product-price {
  font-size: 13px;
  font-weight: 600;
  color: #111111;
}

.search-view-all-row {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #eeeeee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-view-all-btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111111;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #111111;
  padding-bottom: 2px;
  transition: opacity 0.2s ease;
}

.search-view-all-btn:hover {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .luxury-search-form {
    flex-direction: column;
  }
  .luxury-search-submit-btn {
    width: 100%;
    height: 48px;
  }
  .search-products-grid {
    grid-template-columns: 1fr;
  }
}