@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg:           #FAF8F5; /* Ultra-clean breathable studio canvas */
  --surface:      #FFFFFF; /* Pure porcelain white gallery surface */
  --header-bg:    #FFFFFF; /* Pristine white header */
  --footer-bg:    #290D0B; /* Rich red wooden rosewood timber footer */
  --text:         #0A0A0A; /* High-contrast sharp onyx typography */
  --muted:        #686868; /* Clean neutral studio gray */
  --brand:        #C11720; /* Vibrant high-attraction crimson red */
  --brand-2:      #84380B; /* Deep burnt amber wood */
  --line:         #EAE5DF; /* Whisper-light warm limestone border */
  --radius:       6px; /* Crisp architectural woodwork studio corners */
  --shadow:       0 4px 20px -2px rgba(10, 10, 10, 0.04), 0 2px 6px -2px rgba(10, 10, 10, 0.02);
  --shadow-hover: 0 18px 36px -8px rgba(192, 92, 31, 0.16), 0 10px 20px -8px rgba(10, 10, 10, 0.07);
  --transition:   all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

a, a:link, a:visited, a:hover, a:focus, a:active,
.nav a, .menu a, .menu-bar a, .topbar a, .card a, .card h3 a,
.footer a, .header a, .nav-link, .menu-link, .subcat-link {
  text-decoration: none !important;
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6, .logo, .nav a, .btn, .eyebrow, .product-title, .price, .badge, .topbar {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--text);
  text-decoration: none !important;
}

p, .description, .sub-text {
  color: #383633 !important; /* Comfortable magazine editorial reading contrast */
}

/* ── High-Attraction Brand Logo (Matches Red Promo Topbar) ───────── */
.logo, .logo:visited, .logo a {
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: #C11720 !important; /* Vibrant high-attraction crimson red */
  text-decoration: none !important;
  transition: var(--transition);
}

.logo span {
  color: #C11720 !important;
  -webkit-text-fill-color: #C11720 !important;
}

.logo:hover, .logo a:hover {
  color: #9D1118 !important; /* Deep red on hover */
}

/* ── High-Attraction Vibrant Ruby Red Promo Topbar ──────────────── */
.topbar {
  background: #C11720 !important; /* Vibrant high-attraction retail crimson red */
  color: #FFFFFF !important;
  border-bottom: 1px solid #A01117 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
  padding: 9px 0 !important;
  box-shadow: 0 2px 10px rgba(193, 23, 32, 0.22) !important;
}

.topbar-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 0 !important;
}

.topbar .topbar-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

.topbar svg, .topbar-item svg {
  stroke: #FFDC7A !important;
  color: #FFDC7A !important;
  opacity: 1 !important;
  width: 15px !important;
  height: 15px !important;
}

/* ── Topbar Sliding Marquee Announcement Ticker ────────────────────── */
body .topbar .topbar-rotator {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  height: 24px !important;
  overflow: hidden !important;
}

body .topbar .rotator-item {
  display: none !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(35px) !important;
  opacity: 0 !important;
  white-space: nowrap !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

body .topbar .rotator-item.active {
  display: block !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: translateY(0) translateX(0) !important;
  opacity: 1 !important;
  animation: marqueeSlideIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes marqueeSlideIn {
  0% {
    opacity: 0;
    transform: translateX(35px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Override bulky legacy italic serif on mobile promo & force Login display */
@media (max-width: 900px) {
  body .topbar {
    display: block !important;
    padding: 6px 0 !important;
    overflow: visible !important;
  }
  body .topbar-content,
  body .topbar .topbar-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 4px 12px !important;
    gap: 8px !important;
  }
  body .topbar .topbar-item.hide-mobile,
  body .topbar .topbar-item:not(.topbar-promo-mobile).hide-mobile {
    display: none !important;
  }
  body .topbar .topbar-item:first-child {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  /* Prevent announcement rotator from stacking or pushing Login off screen */
  body .topbar .topbar-item:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    justify-content: center !important;
    text-align: center !important;
  }
  body .topbar .topbar-rotator {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  body .topbar .rotator-item {
    display: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    font-size: 12.5px !important;
    line-height: 22px !important;
    text-align: center !important;
  }
  body .topbar .rotator-item.active {
    display: inline-block !important;
    position: relative !important;
    opacity: 1 !important;
    text-align: center !important;
  }
  body .topbar .rotator-item.hide-mobile-offer {
    display: none !important;
  }
  /* Hide topbar login button on mobile since it is available in menu */
  body .topbar .topbar-account,
  body .topbar .topbar-item:not(.topbar-promo-mobile).topbar-account {
    display: none !important;
  }
  body .topbar .topbar-account a,
  body .topbar .topbar-account a:visited {
    color: #C11720 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }
  body .topbar .topbar-account svg {
    stroke: #C11720 !important;
  }
  body .topbar .topbar-item.topbar-promo-mobile,
  body .topbar .topbar-item:last-child.topbar-promo-mobile {
    display: none !important; /* Hide empty legacy promo wrapper on mobile to save space */
  }
}

/* ── Left-Aligned Logo & Centered Search Bar on Desktop ──────────── */
.header {
  background: #FFFFFF !important;
}

@media (min-width: 901px) {
  .header > .container.header-inner,
  .header .header-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 36px !important;
    align-items: center !important;
    background: transparent !important;
    width: 97% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 14px 0 !important;
  }

  .logo {
    order: 1 !important;
    justify-self: start !important;
  }

  .nav-left.header-search-wrap {
    order: 2 !important;
    justify-self: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .nav-right {
    order: 3 !important;
    justify-self: end !important;
  }

  .nav-left .header-search-form {
    width: 100% !important;
    max-width: 500px !important;
    height: 44px !important;
    border-radius: 6px !important;
    background: #F4F1EA !important;
    border: 1.5px solid #E2DED7 !important;
    box-shadow: 0 2px 8px rgba(10, 10, 10, 0.02) !important;
    transition: all 0.2s ease !important;
  }

  .nav-left .header-search-form:focus-within {
    border-color: #C05C1F !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(192, 92, 31, 0.1) !important;
  }

  .nav-left .header-search-input {
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 22px !important;
    font-size: 14px !important;
    color: #0A0A0A !important;
  }

  .nav-left .header-search-btn {
    border-radius: 0 6px 6px 0 !important;
    padding: 0 22px !important;
    background: #111111 !important;
    transition: background 0.2s ease !important;
  }

  .nav-left .header-search-btn:hover {
    background: #C05C1F !important;
  }
}

/* ── Executive Two-Line Contact Phone Callout Badge ─────────────── */
.header-contact-phone {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #FAF8F5 !important;
  border: 1.5px solid #EAE5DF !important;
  padding: 6px 20px 6px 8px !important;
  border-radius: 6px !important;
  font-family: 'Outfit', sans-serif !important;
  box-shadow: 0 4px 14px rgba(10, 10, 10, 0.04) !important;
  transition: var(--transition) !important;
  cursor: default;
}

.header-contact-phone:hover {
  background: #FFFFFF !important;
  border-color: #C05C1F !important;
  box-shadow: 0 6px 22px rgba(192, 92, 31, 0.14) !important;
  transform: translateY(-2px) !important;
}

.header-contact-phone .phone-icon-wrap {
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #C05C1F 0%, #9F4613 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(192, 92, 31, 0.28) !important;
  flex-shrink: 0 !important;
}

.header-contact-phone .phone-icon-wrap svg {
  stroke: #FFFFFF !important;
  width: 19px !important;
  height: 19px !important;
}

.header-contact-phone .phone-text-wrap {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.15 !important;
}

.header-contact-phone .phone-label-top {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #726E69 !important;
  margin-bottom: 3px !important;
}

.header-contact-phone .phone-number {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: #111111 !important;
  transition: var(--transition) !important;
}

.header-contact-phone:hover .phone-number {
  color: #C05C1F !important;
}

.topbar-account a:hover {
  text-decoration: underline !important;
  color: #FFDC7A !important;
}

/* ── Sticky Minimal Header & Right-Aligned Menu Bar ─────────────── */
.menu-bar {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid #EAE5DF !important;
  box-shadow: 0 4px 16px rgba(10, 10, 10, 0.02);
}

@media (min-width: 901px) {
  /* Hide top header wishlist and cart buttons on desktop */
  .header .nav-right .mobile-header-icon {
    display: none !important;
  }

  .menu-bar .container,
  .menu-bar .menu-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .menu {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Right-align wishlist and cart action capsule buttons in menubar */
  .menu-bar-actions.desktop-only,
  .menu-bar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-left: auto !important;
  }

  .menu-bar-actions .cart-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    background: #FAF8F5 !important;
    border: 1.5px solid #EAE5DF !important;
    color: #121212 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(10, 10, 10, 0.02) !important;
    transition: var(--transition) !important;
    text-decoration: none !important;
  }

  .menu-bar-actions .cart-icon-btn:hover {
    background: #111111 !important;
    color: #FFFFFF !important;
    border-color: #111111 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(10, 10, 10, 0.15) !important;
  }

  .menu-bar-actions .cart-icon-btn svg {
    stroke: #C05C1F !important;
    width: 18px !important;
    height: 18px !important;
  }

  .menu-bar-actions .cart-icon-btn:hover svg {
    stroke: #E4A373 !important;
  }
  .menu-bar-actions .cart-badge {
    background: #C05C1F !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
  }

  /* ── Unbreakable Desktop Dropdown, Submenu & Mega Menu Architecture ── */
  body .menu-inner,
  body .menu-bar .container {
    position: relative !important;
  }
  body .menu {
    position: static !important;
  }
  body .nav-dropdown:not(.has-mega) {
    position: relative !important;
  }
  body .nav-dropdown.has-mega,
  body .has-mega {
    position: static !important;
  }

  body .nav-mega-menu {
    position: absolute !important;
    top: calc(100% - 2px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 1050 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top: 3px solid #C11720 !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 24px 60px rgba(10, 10, 10, 0.15) !important;
    padding: 32px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(6px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
  }

  /* Hover bridge: invisible area above mega menu to catch cursor between button and panel */
  body .nav-mega-menu::before {
    content: '' !important;
    position: absolute !important;
    top: -30px !important;
    left: 0 !important;
    right: 0 !important;
    height: 30px !important;
    z-index: 1 !important;
    pointer-events: auto !important;
  }

  /* Neutralize original style.css :hover rules — JS controls everything via js-menu-open */
  body .has-mega:hover > .nav-mega-menu,
  body .nav-dropdown:hover > .nav-dropdown-menu,
  body .nav-dropdown.keep-open > .nav-dropdown-menu,
  body .has-mega:hover .nav-mega-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* JS-controlled open state — sole mechanism for showing mega menu */
  body .has-mega.js-menu-open > .nav-mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
  }

  /* Robust Flexbox layout and high-contrast styling to guarantee item visibility */
  body .nav-mega-menu .mega-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 32px 24px !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body .nav-mega-menu .mega-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 1 180px !important;
    min-width: 160px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body .nav-mega-menu .mega-col-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #EAE5DF !important;
    margin-bottom: 6px !important;
    text-decoration: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: color 0.15s ease !important;
  }

  body .nav-mega-menu .mega-col-img {
    width: 32px !important;
    height: 32px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    border: 1px solid #EAE5DF !important;
    display: inline-block !important;
    visibility: visible !important;
  }

  body .nav-mega-menu .mega-sub-link {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #4B4641 !important;
    padding: 5px 0 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body .nav-mega-menu .mega-sub-link:hover,
  body .nav-mega-menu .mega-col-head:hover,
  body .nav-mega-menu .mega-footer-link:hover {
    color: #C11720 !important;
    padding-left: 5px !important;
  }

  body .nav-mega-menu .mega-footer {
    display: flex !important;
    justify-content: flex-end !important;
    border-top: 1px solid #EAE5DF !important;
    margin-top: 24px !important;
    padding-top: 16px !important;
    width: 100% !important;
    visibility: visible !important;
  }

  body .nav-mega-menu .mega-footer-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #C11720 !important;
    text-decoration: none !important;
    visibility: visible !important;
  }

  body .nav-dropdown-menu {
    position: absolute !important;
    top: calc(100% - 4px) !important;
    left: 0 !important;
    margin: 0 !important;
    z-index: 1050 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important;
    border-radius: 6px !important;
    padding: 6px 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(6px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
  }

  body .nav-sub-dropdown {
    position: relative !important;
  }
  body .nav-sub-menu {
    position: absolute !important;
    top: -6px !important;
    left: calc(100% - 6px) !important;
    margin: 0 !important;
    z-index: 1060 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important;
    border-radius: 6px !important;
    padding: 6px 0 !important;
    min-width: 220px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(6px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
  }

  body .nav-sub-menu.open-left {
    left: auto !important;
    right: calc(100% - 6px) !important;
  }

  /* Invisible hover bridges */
  body .nav-dropdown-menu::after,
  body .nav-sub-menu::after,
  body .nav-sub-menu::before {
    content: '' !important;
    position: absolute !important;
    top: -25px !important;
    bottom: -25px !important;
    left: -25px !important;
    right: -25px !important;
    z-index: -1 !important;
    pointer-events: auto !important;
  }

  /* Neutralize original style.css :hover/.is-open rules for dropdowns and submenus */
  body .nav-sub-dropdown:hover > .nav-sub-menu,
  body .nav-sub-menu.is-open {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* JS-controlled open states — sole mechanism for showing/hiding */
  body .nav-dropdown.js-menu-open > .nav-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
  }

  body .nav-sub-dropdown.js-menu-open > .nav-sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
  }

  body .nav-dropdown-menu a,
  body .nav-sub-menu a {
    display: block !important;
    padding: 10px 18px !important;
    color: #2D2D2D !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    white-space: nowrap !important;
  }

  body .nav-dropdown-menu a:hover,
  body .nav-sub-menu a:hover,
  body .nav-sub-parent:hover {
    background: #FAF3E6 !important; /* Soft warm wooden accent on hover */
    color: #C11720 !important;      /* Attraction ruby red text on hover */
  }
}

/* ── Mobile Responsive Override & Header Perfection ───────────────── */
@media (max-width: 900px) {
  /* Hide desktop-only items and heavy callouts on small devices */
  .hide-mobile,
  .header-contact-phone,
  body .menu-bar-actions,
  body .menu-bar-actions.desktop-only,
  .menu-bar-actions,
  .menu-bar-actions.desktop-only,
  .admin-link {
    display: none !important;
  }

  /* Ensure Logo gets breathing room without truncation */
  .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    gap: 12px !important;
  }

  .header-inner .logo {
    flex: 1 1 auto !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 22px !important;
    max-width: 55% !important;
    line-height: 1.2 !important;
  }

  /* Align right side icons symmetrically */
  .header-inner .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  /* Style mobile Wishlist, Cart, and Toggle menu as equal 38px architectural boxes */
  .header .nav-right .mobile-header-icon,
  .header .nav-right .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    background: #FAF8F5 !important;
    border: 1.5px solid #EAE5DF !important;
    border-radius: 6px !important;
    color: #121212 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(10, 10, 10, 0.02) !important;
    position: relative !important;
    transition: all 0.2s ease !important;
  }

  .header .nav-right .mobile-header-icon:active,
  .header .nav-right .menu-toggle:active {
    transform: scale(0.95) !important;
    border-color: #C05C1F !important;
  }

  .header .nav-right .mobile-header-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #C05C1F !important;
  }

  /* Floating corner badge count for mobile app feel */
  .header .nav-right .mobile-header-icon .cart-badge {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: #C05C1F !important;
    color: #FFFFFF !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2px 5px !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 14px !important;
    border-radius: 4px !important;
    text-align: center !important;
    border: 1.5px solid #FFFFFF !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  }

  /* ── Liberate Mobile Menu from Stacking Context & Backdrop Traps ── */
  .menu-bar, .menu-inner, .menu-bar .container {
    position: static !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
    overflow: visible !important;
  }

  .mobile-search-bar, .hero, .main, .home-sidebar {
    position: relative !important;
    z-index: 1 !important;
  }

  .header {
    position: relative !important;
    z-index: 1000 !important;
  }

  /* Reliable Mobile Navigation Drawer Styling */
  .menu {
    display: none !important;
  }

  .menu.is-open {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    background: #FFFFFF !important;
    z-index: 999999 !important;
    box-shadow: 0 18px 48px rgba(10, 10, 10, 0.35) !important;
    border-top: 1px solid #EAE5DF !important;
    border-bottom: 3px solid #C05C1F !important;
    padding: 16px 20px !important;
    gap: 6px !important;
    max-height: 82vh !important;
    overflow-y: auto !important;
  }

  .menu.is-open a,
  .menu.is-open .nav-drop-btn {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #121212 !important;
    border-radius: 6px !important;
    border-bottom: 1px solid #F6F3EF !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }

  .menu.is-open a:hover,
  .menu.is-open .nav-drop-btn:hover {
    background: #FAF8F5 !important;
    color: #C05C1F !important;
    padding-left: 22px !important;
  }
}

.nav a, .nav-drop-btn {
  color: #121212 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: capitalize !important;
  font-size: 14.5px !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  transition: var(--transition);
}

.nav a:hover, .nav-drop-btn:hover {
  background: rgba(192, 92, 31, 0.08) !important;
  color: #C05C1F !important;
}

/* ── Airy Ivory Studio Showcase Hero Section ─────────────────────── */
.hero {
  background: linear-gradient(135deg, #F6F2EB 0%, #EFE8DD 100%);
  background-size: cover;
  background-position: center;
  padding: 115px 0 !important;
  position: relative;
  border-radius: 0 !important;
  border-bottom: 1px solid #E2DED7 !important;
  box-shadow: 0 8px 25px -10px rgba(10, 10, 10, 0.04);
  overflow: hidden;
}

.hero.has-bg-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.hero.has-bg-image::before {
  display: none !important;
}

.hero.has-bg-image::after {
  display: none !important;
}

.hero.has-bg-image .container {
  position: relative;
  z-index: 2;
}

.hero.has-bg-image .hero-content-box {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: 740px !important;
  margin: 0 auto !important;
  box-shadow: none !important;
}

.hero.has-bg-image .eyebrow {
  background: rgba(0, 0, 0, 0.55) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  padding: 6px 18px !important;
  display: inline-block !important;
  margin-bottom: 16px !important;
}

.hero.has-bg-image h1 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 28px rgba(0, 0, 0, 0.85) !important;
}

.hero.has-bg-image p {
  color: #FFFFFF !important;
  font-weight: 500 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.85) !important;
}

.hero.has-bg-image .btn {
  background: var(--brand, #C11720) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.hero.has-bg-image .btn:hover {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
  pointer-events: none;
}

.hero h1 {
  font-size: 52px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.15 !important;
  margin-bottom: 16px;
  color: #0A0A0A !important;
  text-shadow: none !important;
}

.hero p {
  font-size: 19px !important;
  color: #4B4742 !important;
  max-width: 640px;
  font-weight: 400;
  margin: 0 auto 30px !important;
}

.hero .eyebrow {
  background: #FFFFFF !important;
  color: #C05C1F !important;
  padding: 6px 18px !important;
  border-radius: 4px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  border: 1px solid #E2DED7 !important;
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.04) !important;
  display: inline-block !important;
}

@media (max-width: 768px) {
  .hero {
    padding: 50px 16px !important;
  }
  .hero.has-bg-image {
    background-size: cover !important;
    background-position: center center !important;
    padding: 50px 16px !important;
  }
  .hero.has-bg-image .hero-content-box {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .hero h1 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }
  .hero p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
  }
  .hero .eyebrow {
    font-size: 10px !important;
    padding: 5px 14px !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.1em !important;
  }
  .hero .btn {
    padding: 10px 22px !important;
    font-size: 13.5px !important;
  }
}

/* ── Sleek Section Headers & Studio Category Pills ───────────────── */
.section-head {
  background: #FFFFFF !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.home-main .section {
  padding-top: 0 !important;
  padding-bottom: 12px !important;
}

.section-head::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 5px;
  background: #111111 !important;
}

.section-head h1, .section-head h2 {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--text) !important;
}

.section-head .eyebrow {
  color: var(--brand) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 6px !important;
}

.category-pills a {
  background: #FFFFFF !important;
  border: 1.5px solid var(--line) !important;
  color: var(--text) !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 5px rgba(10, 10, 10, 0.02);
  transition: var(--transition);
}

.category-pills a:hover, .category-pills a.active {
  background: #111111 !important;
  color: #FFFFFF !important;
  border-color: #111111 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(10, 10, 10, 0.16);
}

/* ── Master Product Card Architecture ────────────────────────────── */
.card {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  border: 1px solid #EAE5DF !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 16px rgba(10, 10, 10, 0.03) !important;
}

.card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 36px rgba(10, 10, 10, 0.1) !important;
  border-color: #D6D0C7 !important;
}

.card-img-wrap {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #FAF8F5 !important;
  border-radius: 12px 12px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}

.card-img-wrap img,
.card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card:hover .card-img-wrap img {
  transform: scale(1.06) !important;
}

/* Crisp Typography & Pricing Overrides for Cards */
.card h3, .card h3 a, .card a {
  color: #111111 !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.card h3 {
  margin: 0 0 6px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 38px !important;
}

.card:hover h3, .card a:hover h3, .card a:hover {
  color: #C11720 !important;
  text-decoration: none !important;
}

.price {
  color: #111111 !important; /* Bold authoritative onyx black pricing */
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
}

.price .price-old {
  color: #888888 !important; /* Clean studio gray */
  font-weight: 400 !important;
  font-size: 13px !important;
  text-decoration: line-through !important;
  margin-right: 6px !important;
}

/* Twin Action Buttons inside Cards */
.card .btn-row {
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.card .btn-row form {
  flex: 1 !important;
  margin: 0 !important;
}

.card .btn-row .btn {
  width: 100% !important;
  height: 38px !important;
  padding: 0 10px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.card .btn-row form:first-child .btn,
.card .btn-row .btn-light {
  background: #F5F3EF !important;
  color: #111111 !important;
  border: 1px solid #EAE5DF !important;
}

.card .btn-row form:first-child .btn:hover,
.card .btn-row .btn-light:hover {
  background: #111111 !important;
  color: #FFFFFF !important;
  border-color: #111111 !important;
}

.card .btn-row form:last-child .btn,
.card .btn-row .btn-primary {
  background: #C11720 !important;
  color: #FFFFFF !important;
  border: 1.5px solid #C11720 !important;
}

.card .btn-row form:last-child .btn:hover,
.card .btn-row .btn-primary:hover {
  background: #9D1118 !important;
  border-color: #9D1118 !important;
}

.btn-wishlist {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid #EAE5DF !important;
  box-shadow: 0 4px 12px rgba(10, 10, 10, 0.05) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
}

.btn-wishlist:hover {
  background: #111111 !important;
  border-color: #111111 !important;
  transform: scale(1.14) !important;
  color: #FFFFFF !important;
}

/* ── 2-Column Mobile Product Grid Styling ───────────────────────── */
@media (max-width: 900px) {
  .grid, .products-grid, .shop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .card {
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .card-img-wrap {
    aspect-ratio: 3 / 4 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
  }

  .card .body {
    padding: 10px 8px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  .card h3, .card h3 a {
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .card .badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
    margin-bottom: 4px !important;
    display: inline-block !important;
  }

  .price {
    font-size: 14px !important;
    font-weight: 800 !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
  }

  .price .price-old {
    font-size: 11.5px !important;
  }

  .btn-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    padding-top: 6px !important;
    margin-top: auto !important;
  }

  .btn-row form .btn {
    padding: 8px 2px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    letter-spacing: -0.01em !important;
    text-align: center !important;
  }

  .btn-wishlist {
    width: 32px !important;
    height: 32px !important;
    top: 8px !important;
    right: 8px !important;
  }
  .btn-wishlist svg {
    width: 16px !important;
    height: 16px !important;
  }
/* ── Master Polished Single Product Page Layout ───────────────────── */
body .section:has(.product-page) {
  padding-top: 24px !important;
  padding-bottom: 40px !important;
}

body .section:has(.product-page) .container {
  max-width: 1380px !important;
  width: 96% !important;
  margin: 0 auto !important;
}

@media (min-width: 901px) {
  .mobile-product-header,
  .show-mobile {
    display: none !important;
  }

  .product-page {
    display: grid !important;
    grid-template-columns: 716px 1fr !important;
    gap: 48px !important;
    align-items: start !important;
  }

  .product-gallery {
    position: sticky !important;
    top: 100px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 22px !important;
    max-width: 716px !important;
    width: 100% !important;
  }

  .product-thumbnails {
    width: 110px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
  }

  .thumbnail-item {
    width: 110px !important;
    height: 136px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1.5px solid #EAE5DF !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: #FFFFFF !important;
  }

  .thumbnail-item.active,
  .thumbnail-item:hover {
    border-color: #111111 !important;
    box-shadow: 0 4px 12px rgba(10, 10, 10, 0.12) !important;
  }

  .thumbnail-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .product-image-wrapper {
    flex: 1 !important;
    max-width: 584px !important;
    height: 715px !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 12px !important;
    border: 1px solid #EAE5DF !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    box-shadow: 0 8px 30px rgba(10, 10, 10, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .product-main-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #FFFFFF !important;
    border-radius: 0 !important;
  }

  .product-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }
}

.product-image-wrapper {
  background: #FFFFFF !important;
  border-radius: 10px !important;
  border: 1px solid #EAE5DF !important;
  aspect-ratio: 3 / 4 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-main-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #FFFFFF !important;
}

/* ── Single Product Inline Actions (Quantity + Add to Cart + Buy Now) ─ */
.product-inline-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

.product-inline-actions .quantity-input-wrapper {
  display: flex !important;
  align-items: stretch !important;
  height: 48px !important;
  flex: 0 0 126px !important;
  max-width: 126px !important;
  width: 126px !important;
  border: 1.5px solid #EAE5DF !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(10, 10, 10, 0.04) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.product-inline-actions .quantity-btn {
  width: 40px !important;
  height: 48px !important;
  border: none !important;
  background: #F5F3EF !important;
  color: #111111 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: var(--transition) !important;
}

.product-inline-actions .quantity-btn.minus {
  border-right: 1px solid #EAE5DF !important;
}

.product-inline-actions .quantity-btn.plus {
  border-left: 1px solid #EAE5DF !important;
}

.product-inline-actions .quantity-btn:hover {
  background: #111111 !important;
  color: #FFFFFF !important;
}

.product-inline-actions .quantity-input {
  width: 46px !important;
  height: 48px !important;
  text-align: center !important;
  border: none !important;
  background: #FFFFFF !important;
  color: #111111 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
}

.product-inline-actions .btn {
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  text-align: center !important;
}

.product-inline-actions .btn-primary {
  background: #111111 !important;
  color: #FFFFFF !important;
  border: 1.5px solid #111111 !important;
  box-shadow: 0 4px 12px rgba(10, 10, 10, 0.16) !important;
}

.product-inline-actions .btn-primary:hover {
  background: #2C2926 !important;
  border-color: #2C2926 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(10, 10, 10, 0.3) !important;
}

.product-inline-actions .btn-secondary {
  background: #C11720 !important;
  color: #FFFFFF !important;
  border: 1.5px solid #C11720 !important;
  box-shadow: 0 4px 14px rgba(193, 23, 32, 0.28) !important;
}

.product-inline-actions .btn-secondary:hover {
  background: #9D1118 !important;
  border-color: #9D1118 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(193, 23, 32, 0.42) !important;
}

/* Prevent horizontal overflow on product page */
.product-page, .product-details, .product-form, .product-inline-actions {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

@media (max-width: 900px) {
  .product-inline-actions {
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .product-inline-actions .quantity-input-wrapper {
    flex: 0 0 100px !important;
    max-width: 100px !important;
    height: 44px !important;
  }
  .product-inline-actions .quantity-btn {
    width: 30px !important;
    height: 44px !important;
    font-size: 15px !important;
  }
  .product-inline-actions .quantity-input {
    width: 40px !important;
    height: 44px !important;
    font-size: 13.5px !important;
  }
  .product-inline-actions .btn {
    height: 44px !important;
    padding: 0 6px !important;
    font-size: 12.5px !important;
    gap: 4px !important;
    min-width: 0 !important;
    flex: 1 1 0% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  .product-inline-actions .btn svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 380px) {
  .product-inline-actions .btn svg {
    display: none !important;
  }
  .product-inline-actions .btn {
    font-size: 11.5px !important;
    padding: 0 2px !important;
  }
}

/* ── Distinct Dual-Button Styling (Add to Cart vs Buy Now) ────────── */

/* Add to Cart: Matte Onyx Studio Black */
.btn-light,
.btn-row form:first-child .btn {
  background: #111111 !important;
  color: #FFFFFF !important;
  border: 1px solid #111111 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 12px rgba(10, 10, 10, 0.16) !important;
  transition: var(--transition) !important;
}

.btn-light:hover,
.btn-row form:first-child .btn:hover {
  background: #2C2926 !important;
  border-color: #2C2926 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(10, 10, 10, 0.3) !important;
}

/* Buy Now: Signature Retail Crimson Red (Matching Topbar) */
.btn,
.btn-secondary,
.btn-row form:last-child .btn {
  background: #C11720 !important;
  color: #FFFFFF !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  border: 1px solid #C11720 !important;
  border-radius: 6px !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 14px rgba(193, 23, 32, 0.28) !important;
  transition: var(--transition) !important;
}

.btn:hover,
.btn-secondary:hover,
.btn-row form:last-child .btn:hover {
  background: #9D1118 !important;
  border-color: #9D1118 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(193, 23, 32, 0.42) !important;
}

/* ── Minimalist Form Controls ────────────────────────────────────── */
input, select, textarea {
  border-radius: 12px !important;
  border: 1.5px solid var(--line) !important;
  background: #FFFFFF !important;
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 0.2s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(192, 92, 31, 0.12) !important;
  outline: none !important;
}

/* ── Rich Red Wooden Rosewood Minimalist Footer ──────────────────── */
.footer,
.footer-bottom {
  background: linear-gradient(135deg, #2D0D0B 0%, #170504 100%) !important;
  color: #FFFFFF !important;
}

.footer {
  border-top: 1px solid #4D1C17 !important;
  padding: 60px 0 30px !important;
}

.footer h3,
.footer h4,
.footer .footer-title,
.footer strong {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
}

.footer p,
.footer span,
.footer li,
.footer div,
.footer-bottom p,
.footer-bottom span {
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  opacity: 0.95 !important;
}

.footer a,
.footer a:link,
.footer a:visited,
.footer-bottom a {
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
  font-size: 13.5px !important;
  display: inline-block !important;
  opacity: 0.95 !important;
}

.footer a:hover,
.footer a:focus,
.footer-bottom a:hover {
  color: #FFC107 !important; /* High-attraction vibrant gold hover glow */
  opacity: 1 !important;
  text-decoration: none !important;
  transform: translateX(4px) !important;
}

.footer .footer-currency label {
  color: #FFFFFF !important;
}

.footer .footer-currency select {
  background: #3B1411 !important;
  color: #FFFFFF !important;
  border: 1px solid #5C221C !important;
}

.footer-bottom {
  background: transparent !important;
  border-top: 1px solid #471A15 !important;
  margin-top: 40px !important;
  padding-top: 20px !important;
  color: #FFFFFF !important;
}

/* ── Clean Minimalist Sidebar Filter & Categories ────────────────── */
.home-sidebar .sidebar-inner,
.sidebar-inner.panel {
  background: #FFFFFF !important;
  border: 1px solid #EAE5DF !important;
  border-radius: 16px !important;
  padding: 22px 20px !important;
  box-shadow: 0 4px 18px rgba(10, 10, 10, 0.03) !important;
}

.home-sidebar .sidebar-inner h3,
.sidebar-inner.panel h3 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0A0A0A !important;
  letter-spacing: -0.02em !important;
  border-bottom: 1px solid #EFECE7 !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

/* Price Slider & Track Polish */
.price-range-wrap {
  padding: 4px 0 0 !important;
}

.price-range-track {
  height: 36px !important;
  margin-bottom: 16px !important;
  background: transparent !important;
}

.price-range-track::before {
  background: #EFECE7 !important;
  height: 6px !important;
  border-radius: 6px !important;
}

.price-range-fill {
  background: #111111 !important;
  height: 6px !important;
  border-radius: 6px !important;
}

.price-range-slider::-webkit-slider-thumb {
  width: 18px !important;
  height: 18px !important;
  background: #C05C1F !important;
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(10, 10, 10, 0.3) !important;
  margin-top: -6px !important;
}

.price-range-slider::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  background: #C05C1F !important;
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(10, 10, 10, 0.3) !important;
}

/* Price Number Inputs */
.price-inputs-row {
  gap: 8px !important;
  margin-top: 6px !important;
}

.price-input-box {
  background: #FAF8F5 !important;
  border: 1px solid #E2DED7 !important;
  border-radius: 10px !important;
  padding: 7px 12px !important;
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.02) !important;
  transition: border-color 0.2s ease !important;
}

.price-input-box:focus-within {
  border-color: #C05C1F !important;
  box-shadow: 0 0 0 3px rgba(192, 92, 31, 0.1) !important;
}

.price-input-box span {
  color: #C05C1F !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}

.price-input-box input {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  color: #0A0A0A !important;
  font-size: 13.5px !important;
}

.price-range-sep {
  color: #C05C1F !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 0 2px !important;
}

#priceFilterForm2 .btn,
.sidebar-inner .btn {
  background: #111111 !important;
  color: #FFFFFF !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(10, 10, 10, 0.15) !important;
  margin-top: 16px !important;
}

#priceFilterForm2 .btn:hover,
.sidebar-inner .btn:hover {
  background: #C05C1F !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(192, 92, 31, 0.3) !important;
}

/* Category Sidebar Navigation Polish */
.cat-row {
  padding: 9px 12px !important;
  border-radius: 6px !important;
  color: #121212 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  border: 1px solid transparent !important;
}

.cat-row:hover {
  background: #FAF8F5 !important;
  color: #C05C1F !important;
  border-color: #EAE5DF !important;
  padding-left: 16px !important;
}

.cat-row.cat-active {
  background: #111111 !important;
  color: #FFFFFF !important;
  border-color: #111111 !important;
  box-shadow: 0 4px 12px rgba(10, 10, 10, 0.18) !important;
}

.cat-row.cat-active .cat-name,
.cat-row.cat-active span {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.cat-count {
  background: #F3EFE9 !important;
  color: #686868 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 2px 9px !important;
  border-radius: 4px !important;
  border: 1px solid #E0DBD3 !important;
}

.cat-row:hover .cat-count {
  background: #FFFFFF !important;
  color: #C05C1F !important;
  border-color: #C05C1F !important;
}

.cat-row.cat-active .cat-count {
  background: #C05C1F !important;
  color: #FFFFFF !important;
  border-color: #C05C1F !important;
}

.mpf-wrap {
  background: #FFFFFF !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 6px !important;
}

/* ── Global Crisp Architectural Corner Polish (Woodwork Theme) ───── */
input, select, textarea, button, .btn, .card, .panel, .sidebar-inner, .badge, .alert, .box {
  border-radius: 6px !important;
}