/* Reset-ish */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

/* Hide vertical scrollbar visually while keeping scroll behavior on mobile only */
@media (max-width: 768px) {
  html {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}

body {
  font-family: "Inconsolata", "Montserrat", sans-serif;
  color: #000000;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-weight: 550;
  touch-action: manipulation;
}

/* WebKit browsers: hide the scrollbar while keeping scrolling enabled */
@media (max-width: 768px) {
  /* WebKit browsers: hide the scrollbar while keeping scrolling enabled */
  body::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
  }
}

/* Keep form controls readable and usable (no forced uppercase or large letter-spacing) */
input,
textarea,
select,
button {
  text-transform: none;
  letter-spacing: normal;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  touch-action: manipulation;
}

/* Prevent double-tap zoom on all interactive elements for app-like feel */
a,
button,
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"] {
  touch-action: manipulation;
}

/* Prevent mobile browsers from auto-zooming when inputs are focused.
   Set text-size-adjust to keep font sizes stable and ensure inputs are at
   least 16px on mobile to avoid iOS Safari zooming when focusing fields. */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 768px) {
  input, textarea, select, button, .btn, #newsletter-email, .top-actions input[type="search"] {
    font-size: 16px !important; /* iOS zoom avoidance */
    -webkit-text-size-adjust: 100% !important;
  }
}

/* Keep logo image unaffected */
.brand .logo img {
  width: 120px;
  height: 100%;
  object-fit: contain;
}

/* CSS variables to tune hero animation and effects */
:root {
  --hero-duration: 36s;
  --hero-easing: cubic-bezier(0.22, 0.9, 0.28, 0.98);
  --hero-small: 15vw;
  --hero-medium: 45vw;
  /* default offset for the right hero block; tweak to move the slider further right */
  --hero-right-offset: 24px;
  /* larger offset for premium wide hero layout */
  --hero-right-offset-large: 48px;
  --hero-overlay: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12),
    rgba(0, 0, 0, 0.08)
  );
  --topbar-hover-bg: rgba(255, 255, 255, 0.06);
  --card-bg: #ffffff;
  --accent-yellow: #ffd54a;
  /* Flying animation defaults - tune to match shop page smoothness */
  --fly-duration: 0.92s;
  --fly-easing: cubic-bezier(0.22, 0.8, 0.28, 1);
  --shop-bg: #e9e7e7de;
  --topbar-height: 86px;
  /* fallback default; will be set via JS at runtime */
  /* Mobile menu icon sizing variables */
  --site-menu-icon-size: 20px;
  /* default hamburger/close icon size */
  --site-mobile-close-size: 24px;
  /* larger close icon inside off-canvas menu */
  --site-hamburger-button-size: 44px;
  /* touch target size for hamburger/close buttons */
}

/* Apply the same flying animation defaults for index pages (ensure parity with shop) */
.index-page {
  --fly-duration: 0.92s;
  --fly-easing: cubic-bezier(0.22, 0.8, 0.28, 1);
}

/* Topbar - modern black & white theme */
.topbar {
  background:   #eeeee3;
  border-bottom: none !important;
  border: none !important;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  box-shadow: none !important;
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
}

/* Ensure the topbar inner has a lower stacking context than the nav pseudo overlay */
.topbar-inner {
  position: relative;
  z-index: 1;
}

.brand .logo {
  height: 54px;
  /* keep friendly topbar height */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  /* let the logo image define its own background */
  color: inherit;
  border-radius: 4px;
  /* subtle rectangle rounding, change to 0 if you want no rounding */
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  border: 0 !important;
  box-shadow: none !important;
  /* remove circular shadow unless desired */
  padding: 0;
  /* remove extra padding since logo image will size itself */
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.brand .logo:active,
.brand .logo:focus,
.brand .logo:focus-visible,
.brand .logo:focus-within {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* If the .logo contains an img, ensure it fits the circular badge */
.brand .logo img {
  height: 100%;
  width: 120px;
  /* keep aspect ratio */
  object-fit: contain;
  /* show full image within the height */
  display: block;
  border-radius: 0;
  /* avoid inheriting circular rounding */
}

/* Logo interaction: pointer cursor, remove text caret, and small shake animation */
.brand .logo {
  cursor: pointer;
  /* clearly indicate clickable */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /* prevent text selection / caret from appearing */
  outline: none !important;
  /* remove focus outline visual (we'll still blur after click in JS) */
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Small menu next to the brand logo (Shop | Men | Women | Login) */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  /* slightly tighter space between logo and links */
}

.brand-links {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.brand-links .small-link {
  color: #000000;
  /* topbar is black initially */
  text-decoration: none;
  font-size: 11px;
  /* reduced text size for a tighter look */
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 6;
  padding: 3px 5px;
  /* slightly smaller padding */
  border-radius: 4px;
  transition: color 0.18s ease, opacity 0.18s ease,
    transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
  will-change: transform, opacity;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /* prevent selection */
  caret-color: transparent;
  /* hide caret if any */
  -webkit-touch-callout: none;
  cursor: pointer;
}

.brand-links .small-link:hover,
.brand-links .small-link:focus {
  opacity: 1;
  transform: translateY(-2px);
  color: var(--accent-yellow);
}

/* Only individual small-links should change color on hover — container hover effect removed */
.brand-links .small-link:focus-visible {
  outline: 3px solid rgba(255, 213, 74, 0.14);
  outline-offset: 3px;
}

/* Focus outline for accessibility (similar to .top-actions small links) */
.brand-links .small-link:focus {
  outline: 3px solid rgba(255, 255, 255, 0.12);
  outline-offset: 3px;
}

/* Add separators using CSS pseudo elements like the screenshot (a simple pipe) */
.brand-links .small-link:not(:last-child)::after {
  content: " |";
  margin-left: 8px;
  color: rgba(0, 0, 0, 0.6);
  opacity: 1;
  transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

/* ------------------------------------------------------------------
  Defensive rule: hide any unintended number input spin controls that
  could appear inside the topbar (some browsers show the spin buttons
  on number inputs; keep hidden in the header to avoid UI noise)       
  ------------------------------------------------------------------ */
.topbar input[type="number"]::-webkit-outer-spin-button,
.topbar input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.topbar input[type="number"] {
  -moz-appearance: textfield;
  appearance: none;
}

/* Defensive: hide any small inline spin controls that might be injected or
  accidentally rendered next to navigation links. This prevents ghosted
  spinner UI from showing beside anchors like Login in the header. */
.topbar .spin-control,
.brand .spin-control {
  display: none !important;
}

/* For small screens: hide the brand-links to keep topbar tidy */
@media (max-width: 640px) {
  .brand-links {
    display: none;
  }
}

.page-content {
  /* helper class used for body padding fallback */
  padding-top: var(--topbar-height);
}

.brand .logo:focus,
.brand .logo:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}



/* Index page: hide caret by default (except search) */
.index-page input[type="text"],
.index-page input[type="email"],
.index-page input[type="tel"],
.index-page textarea,
.index-page [contenteditable],
.index-page input[type="text"]:focus,
.index-page input[type="email"]:focus,
.index-page input[type="tel"]:focus,
.index-page textarea:focus,
.index-page [contenteditable]:focus {
  caret-color: transparent !important;
}

/* Allow caret for header search on home page */
#search,
#search:focus,
#search:focus-visible {
  caret-color: currentColor !important;
}

/* Hide caret for non-editable elements inside the index page as a fallback */
/* Hide caret on non-input elements and allow only in search inputs */
*:not(input):not(textarea):not([contenteditable]) {
  caret-color: transparent !important;
}

#search,
#search:focus,
#search:focus-visible,
#hero-search,
#hero-search:focus,
#hero-search:focus-visible {
  caret-color: currentColor !important;
}

/* Respect reduced motion: disable logo animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .brand .logo.shake,
  .brand .logo:hover {
    animation: none !important;
  }

  .brand-links .small-link,
  .brand-links .small-link::after {
    transition: none !important;
    transform: none !important;
  }
}

.top-actions {
  display: flex;
  gap: 14px;
  align-items: center;
}

.top-actions .small-link {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  opacity: 0.9;
  padding: 6px 8px;
  transition: opacity 0.18s ease, transform 0.12s ease;
  position: relative;
}

.top-actions .small-link::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  bottom: 2px;
  width: 60%;
  height: 2px;
  background: rgba(255, 255, 255, 0.95);
  transition: transform 0.18s ease;
  border-radius: 2px;
}

.top-actions .small-link:hover::after,
.top-actions .small-link:focus::after {
  transform: translateX(-50%) scaleX(1);
}

.top-actions .small-link:hover,
.top-actions .small-link:focus {
  opacity: 1;
  color: #fff;
  transform: translateY(-1px);
}

.cart {
  font-size: 13px;
  color: #fff;
}

/* Cart notification button */
.top-actions .notif-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  margin-right: 30px;
  padding: 8px 10px;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.12s ease;
  cursor: pointer;
}

.top-actions .notif-btn img {
  display: block;
  filter: invert(1) brightness(2);
  width: 24px;
  height: 24px;
}

.top-actions .notif-btn:hover,
.top-actions .notif-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  background: var(--topbar-hover-bg);
  border-radius: 6px;
}

.top-actions .notif-btn:hover img,
.top-actions .notif-btn:focus img {
  filter: invert(1) brightness(2.4);
}

.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: #ff4d4f;
  /* accent color that pops on black */
  color: #fff;
  font-size: 14px;
  line-height: 1;
}

.search-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #a09898;
  /* light neutral border for the grey well */
  background: #e2dfdf;
  /* light grey search well */
  border-radius: 28px;
  /* consistent rounded corners */
  padding: 4px 8px;
  height: 36px;
  margin-right: 12px;
  /* space between search and cart */
}

.search-wrap input {
  width: 320px;
  max-width: 380px;
  padding: 6px 8px;
  background: transparent;
  /* search input wrapper - keep minimal */
  border: 0;
  color: #111;
  /* dark text to match grey background */
  outline: none;
  height: 28px;
  font-size: 16px;
  /* 16px prevents mobile zoom on focus */
  box-sizing: border-box;
}

.search-wrap input:focus,
.search-wrap.open {
  background: #ffffff;
  /* white background when search is focused or open */
}

.search-wrap input:focus,
.search-wrap.open input {
  color: #000000;
  /* black text when focused or open */
  font-size: 16px;
}

.search-wrap.open input:not(:focus) {
  background: #ffffff;
  color: #000000;
}

/* Mobile-only hero search bar — default hide on desktop */
.hero-search-bar {
  display: none;
  width: 100%;
  padding: 12px;
  position: relative;
  z-index: 2;
}

@media (max-width: 480px) {
  /* Hide header search to avoid duplication on very small screens */
  .top-actions .search-wrap { display: none; }

  .hero.premium {
    background:  #eeeee3 !important;
    color: #000000;
  }
  .hero-search-bar {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 8px 10px 6px 10px;
    background: transparent;
    transform: translateY(-40px) !important;
    transition: transform 0.16s ease;
  }

  .hero-search-bar .search-wrap {
    width: calc(100% - 28px);
    max-width: 720px;
    margin: 0;
    background:  #f3ecec9a;
    border-radius: 9999px;
    border: 1px solid rgba(145, 136, 136, 0.521);
    padding: 6px 12px;
    box-shadow: 0 10px 28px rgba(114, 112, 112, 0.178);
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    transition: background 0.2s ease;
  }

  .hero-search-bar .search-wrap:focus-within,
  .hero-search-bar .search-wrap input:focus {
    background: #ffffff;
    /* white background when focused or typing */
  }

  .hero-search-bar .search-wrap input {
    flex: 1;
    color: #111111;
    background: transparent;
    border: 0;
    padding: 10px 6px;
    font-size: 16px;
    /* 16px prevents mobile zoom on focus */
    height: 28px;
    box-sizing: border-box;
  }

  .hero-search-bar .search-wrap input::placeholder {
    color: #999999;
  }

  .hero-search-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background-color: transparent;
    color: #d12222;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    transition: transform 0.12s ease, background-color 0.12s ease;
    flex-shrink: 0;
  }

  .hero-search-btn svg { stroke: #3d463c; width: 18px; height: 18px; }

  .hero-search-btn:hover, .hero-search-btn:focus { background-color: #222; transform: translateY(-1px); }

  .hero-search-bar .search-results {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 720px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    padding: 6px;
    z-index: 9999;
    max-height: 320px;
    overflow: auto;
  }

  .hero-search-bar .search-results .result-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
  }

  .hero-search-bar .search-results .result-item:hover,
  .hero-search-bar .search-results .result-item.active { background: rgba(0,0,0,0.04); }

  .hero-search-bar .search-results img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; }

  .hero-search-bar .search-results .result-item-title { font-size: 14px; color: #222; }
  .hero-search-bar .search-results .result-item-price { font-size: 13px; color: #7c7c7c; }
}

/* Mobile-specific: ensure hero background images behave correctly on small screens */
@media (max-width: 768px) {
  .hero.premium .hero-pane {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
    min-height: 420px !important;
  }

  /* adjust hero-left spacing to keep CTAs centered and legible on smaller viewports */
  .hero.premium .hero-left {
    padding-right: 6px !important;
    margin-right: 0 !important;
     transform: translateX(-40px) !important;
    margin-top: 110px !important;
    width: 90% !important;
    margin-left: -50px !important;
  }

  /* ensure hero cta is prominent and centered on mobile */
  .hero.premium .hero-left .cta {
    margin-top: 12px !important;
    display: inline-block !important;
  }
}

/* Make sure hero-three fills correctly and CTA is always above the background */
.hero.premium .hero-pane.hero-three {
  background-size: cover !important;
  background-position: center center !important;
  
}

/* Apply transform to hero-three's hero-left only on mobile */
@media (max-width: 768px) {
  .hero.premium .hero-pane.hero-three .hero-left {
    transform: translateX(5px) !important;
  }
}

.hero.premium .hero-left .cta {
  position: relative !important;
  z-index: 6 !important;
}

/* Add a slight overlay for hero-three so CTAs are visible regardless of image colors */
.hero.premium .hero-pane.hero-three::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  z-index: 2;
}

.hero.premium .hero-pane.hero-three .hero-left { z-index: 3; }

/* Apply transform to hero-five's hero-left only on mobile */
@media (max-width: 768px) {
  .hero.premium .hero-pane.hero-five .hero-left {
    transform: translateX(15px) !important;
  }

  .hero.premium .hero-pane.hero-five .lead {
    margin-left: 35px;
  }
}

/* Header / nav tweaks for smaller devices to avoid overflow and keep nav usable */
@media (max-width: 640px) {
  .topbar-inner {
    padding: 10px 12px;
    gap: 8px;
  }

  .brand .logo img {
    width: 96px;
  }

  .search-wrap input {
    width: 130px;
    max-width: unset;
  }

  .search-wrap {
    padding: 4px 8px;
    margin-right: 6px;
  }

  .top-actions .notif-btn {
    margin-right: 6px;
    padding: 6px 8px;
  }

  .main-nav {
    padding: 8px 0;
  }

  .main-nav ul {
    gap: 10px;
    padding: 6px 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav ul li {
    flex: 0 0 auto;
  }

  .main-nav a {
    font-size: 11px;
    padding: 6px 6px;
  }

  .main-nav .nav-indicator {
    bottom: -6px;
    left: 0;
  }

  .container {
    margin-top: 80px;
  }

  /* Replace the empty gap with an inline search control on mobile */
  .hero-scroller {
    margin-top: -76px;
  }

  /* Duplicate removed - consolidated in earlier @media rule */
}

/* Prevent nav overflow and allow horizontal scrolling for slightly larger phones/tablets */
@media (max-width: 900px) {
  .main-nav ul {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 6px 10px;
    justify-content: flex-start;
  }

  .main-nav ul li {
    flex: 0 0 auto;
  }
}

/* Hero images styling - simplified for single image per pane */
.hero-right img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.search-wrap input::placeholder {
  color: rgb(121, 118, 118);
}

.search-wrap:focus-within {
  border-color: #bdbdbd;
  background: #b4acac;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Search autocomplete dropdown */
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: none;
}

.search-results.show {
  display: block;
}

.search-results .result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #f0f0f0;
}

.search-results .result-item:hover,
.search-results .result-item.active {
  background-color: #f5f5f5;
}

.search-results .result-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.search-results .result-item-content {
  flex: 1;
  min-width: 0;
}

.search-results .result-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-results .result-item-price {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.main-nav {
  /* keep the nav flush with the header; avoid revealing body background */
  border-top: none;
  background: black; /* match topbar so no white seam appears */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  box-shadow: none;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 9998; /* keep just below the topbar */
  padding: 25px 0;
  border-bottom: none;
}

/* Smaller screens: reduce overlap and height so it doesn't crowd the header */
.main-nav ul {
  display: flex;
  list-style: none;
  gap: 36px;
  padding: 0 10px;
  margin: 0 auto;
  height: auto;
  align-items: center;
  justify-content: center;
}

/* Ensure list items are centered vertically */
.main-nav li {
  display: flex;
  align-items: center;
}

.main-nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 3px;
  opacity: 0.88;
  padding: 6px 8px;
  line-height: 1;
  transition: opacity 0.12s ease, color 0.12s ease,
    transform 0.12s cubic-bezier(0.22, 0.9, 0.28, 0.98), background 0.12s ease,
    box-shadow 0.12s ease;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 6px;
  position: relative;
  display: inline-block;
  text-align: center;
  font-family: inherit;
}

/* Hide per-link pseudo-dot since we use a single moving indicator now */
.main-nav a::after {
  display: none !important;
}

/* Mega-menu dropdown under "Collections" in the main nav */
.main-nav .has-mega {
  position: relative;
}

.main-nav .has-mega .collections-link {
  cursor: pointer;
}

.main-nav .mega-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  pointer-events: none;
  background: #ffffff;
  color: #111;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  width: 920px;
  max-width: 92vw;
  padding: 18px 20px;
  z-index: 100;
  transition: opacity 180ms ease, transform 180ms ease;
}

.main-nav .mega-menu .mega-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: flex-start;
}

.main-nav .mega-menu .mega-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 2px 6px;
  cursor: pointer;
}

.main-nav .mega-menu .mega-col:hover {
  transform: translateY(-3px);
}

.main-nav .mega-menu .mega-col {
  transition: transform 160ms cubic-bezier(0.22, 0.9, 0.28, 0.98),
    box-shadow 160ms ease;
}

.main-nav .mega-menu .mega-col-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.main-nav .mega-menu .mega-col-head img.mega-col-logo {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  display: inline-block;
}

.main-nav .mega-menu h4 {
  font-size: 0.82rem;
  font-weight: 400;
  margin: 0;
  color: rgba(0, 0, 0, 0.9);
  letter-spacing: 1px;
}

.main-nav .mega-menu p,
.main-nav .mega-menu a {
  font-size: 12px;
  line-height: 1.3;
}

.main-nav .mega-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav .mega-menu a {
  display: block;
  padding: 6px 0;
  color: #111;
  text-decoration: none;
  font-size: 12px;
  opacity: 0.9;
}

.main-nav .mega-menu a:hover,
.main-nav .mega-menu a:focus {
  color: var(--accent);
}

.main-nav .has-mega:hover .mega-menu,
.main-nav .has-mega:focus-within .mega-menu,
.main-nav .has-mega.open .mega-menu {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

@media (max-width: 820px) {
  /* On mobile, we hide the megamenu by default and allow JS to toggle the `.open` class */
  .main-nav .mega-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    width: 100%;
    padding: 12px 0;
    box-shadow: none;
    background: transparent;
    display: none;
  }

  .main-nav .has-mega.open .mega-menu {
    display: block;
  }

  .main-nav .mega-menu .mega-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .main-nav .mega-menu .mega-col {
    padding: 8px 16px;
  }
}

/* Tablet breakpoint: two columns for medium screens */
@media (min-width: 820px) and (max-width: 1199px) {
  .main-nav .mega-menu {
    width: 760px;
  }

  .main-nav .mega-menu .mega-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

/* Desktop: larger spacing */
@media (min-width: 1200px) {
  .main-nav .mega-menu {
    width: 960px;
    padding: 22px 26px;
  }

  .main-nav .mega-menu .mega-columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
}

/* When visible, the indicator sits centered (JS sets `left`) and scales into view */
.main-nav.show-indicator .nav-indicator {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Hide the moving indicator when a mega menu (Collections) is open to avoid
  showing a steady marker under the Collections trigger. JS toggles the
  `.mega-open` class on `.main-nav` when any megamenu opens. */
.main-nav.mega-open .nav-indicator {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(6px) scale(0.6) !important;
}

/* diamond marker removed per request */
/* previously used: .main-nav li:first-child a::before */

/* Reduce motion preference: simple hover without transforms */
@media (prefers-reduced-motion: reduce) {
  .main-nav a {
    transition: none;
    transform: none;
  }

  .main-nav a::after {
    transition: none;
    transform: none;
  }
}

/* Keyboard focus styles for accessibility */
.top-actions .small-link:focus,
.top-actions .notif-btn:focus {
  outline: 3px solid rgba(255, 255, 255, 0.08);
  outline-offset: 3px;
  border-radius: 4px;
}

.main-nav a:focus {
  outline: 3px solid rgba(0, 0, 0, 0.08);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Inconsolata visual style for the main nav */
.inconsolata-nav {
  font-family: "Inconsolata", monospace;
  font-optical-sizing: auto;
  font-weight: 700;
  /* choose weight matching the nav emphasis */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.inconsolata-nav a {
  font-family: inherit;
  font-weight: inherit;
}

/* Active link styling for main nav - yellow text on desktop only */
@media (min-width: 820px) {
  .main-nav a.active {
    color: rgba(210, 223, 39, 0.801) !important;
    opacity: 1 !important;
  }
}

/* Hero */
.hero {
  background: #dedede;
  color: #111;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
  z-index: 1;
}

/* Subtle, light overlay to keep contrast with copy while matching image greys */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.02)
  );
  z-index: 0;
}

/* Play/pause state (class controlled by JS) */
.hero.paused .hero-scroller {
  animation-play-state: paused;
}

/* Hero controls (top-right) */
.hero-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  display: flex;
  gap: 8px;
}

.hero-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.hero-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

.hero-toggle:focus {
  outline: 2px solid rgba(255, 255, 255, 0.12);
  outline-offset: 2px;
}

/* Animation: Seamless horizontal loop — slide left, teleport to right, slide back */
/* Hero scroller - duplicate inner content so background remains visible and prevents white gap */
.hero-scroller {
  display: flex;
  width: 400vw;
  transform: translateZ(0);
  overflow: visible;
}

.hero-pane {
  width: 100vw;
  flex: 0 0 auto;
  box-sizing: border-box;
  position: relative;
}

/* Prevent interactions with duplicated (hidden) hero pane for accessibility */
.hero-pane[aria-hidden="true"] {
  pointer-events: none;
  user-select: none;
  opacity: 1 !important;
}

/* Hero pane one background image styling */
.hero.premium .hero-pane.hero-one {
  background-image: linear-gradient(rgba(7, 6, 3, 0.637), rgba(134, 143, 60, 0.36)), url("../emy/em1.jpg") !important;
  background-size: cover, cover !important;
  background-position: center 30%, center 30% !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: fixed !important;
  background-color: transparent !important;
  min-height: 700px;
}

.hero.premium .hero-pane.hero-two {
  background-image: linear-gradient(rgba(7, 6, 3, 0.637), rgba(134, 143, 60, 0.36)), url("../emy/em1.jpg") !important;
  background-size: cover, cover !important;
  background-position: center 30%, right 30% !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: fixed !important;
  background-color: transparent !important;
  min-height: 700px;
  position: relative;
}

  .hero.premium .hero-pane.hero-three {
  background-image: linear-gradient(rgba(7, 6, 3, 0.637), rgba(134, 143, 60, 0.36)), url("../emy/em4.jpg") !important;
  background-size: cover, cover !important;
  /* center the image and make it vertically centered for better cropping across viewport sizes */
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  /* fixed attachment is visually appealing on desktop but can behave oddly on touch devices */
  background-attachment: fixed !important;
  background-color: transparent !important;
  /* Desktop: keep previously used large min-height for visual stability */
  min-height: 700px;
}

.hero.premium .hero-pane.hero-five {
  background-image: linear-gradient(rgba(7, 6, 3, 0.637), rgba(134, 143, 60, 0.36)), url("../emy/em5.jpg") !important;
  background-size: cover, cover !important;
  background-position: center 30%, right 20% !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: fixed !important;
  background-color: transparent !important;
  min-height: 900px;
}

/* Animate the scroller with pane-focused steps across 4 panes */
@keyframes heroPanes {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-100vw);
  }

  45% {
    transform: translateX(-100vw);
  }

  50% {
    transform: translateX(-200vw);
  }

  70% {
    transform: translateX(-200vw);
  }

  75% {
    transform: translateX(-300vw);
  }

  95% {
    transform: translateX(-300vw);
  }

  100% {
    transform: translateX(0);
  }
}

.hero-scroller {
  will-change: transform;
  animation: heroPanes var(--hero-duration) var(--hero-easing) infinite;
}

/* Respect reduced motion accessibility preference */
@media (prefers-reduced-motion: reduce) {
  .hero-scroller {
    animation: none !important;
  }

  .hero-right .slide {
    transition: none !important;
    transform: none !important;
  }
}

/* Mobile and tablet: adjust image sizes */
@media (max-width: 900px) {
  /* adjust image sizes for smaller screens */
  .hero-right {
    width: 320px !important;
    height: 320px !important;
  }
}

/* Premium hero overrides */
.hero.premium {
  padding: 84px 0 120px;
  background: linear-gradient(
    180deg,
    rgba(8, 9, 10, 0.08),
    rgba(0, 0, 0, 0.04)
  );
}

.hero.premium .container {
  max-width: 1280px;
}

@media (min-width: 1280px) {
  .hero.premium {
    padding: 0px 0;
  }

  .hero.premium .hero-left {
    transform: translateY(186px);
  }
}

.hero.premium .hero-left {
  width: 48%;
  padding-right: 28px;
  position: relative;
  z-index: 3;
  overflow: visible;
}

.hero.premium .hero-left .brand-title {
  font-family: "Montserrat", "Inconsolata", sans-serif;
  font-weight: 900;
  font-size: 72px;
  letter-spacing: 10px;
  margin-bottom: 8px;
  color: #0b0b0b;
  /* dark heading on light overlay */
  text-transform: uppercase;
  text-shadow: 0 4px 8px rgba(202, 196, 196, 0.658), 0 1px 0 rgba(255,255,255,0.03);
}

.hero.premium .lead {
  color: rgba(0, 0, 0, 0.72);
  margin-bottom: 18px;
  font-size: 16px;
  letter-spacing: 1.6px;
  text-transform: none;
  /* keep sentence case for the subcopy */
}

.hero.premium .cta {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 28px;
  background: linear-gradient(90deg, #000000, #141414);
  color: #ffffff;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 1px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.hero.premium .cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
}

.hero.premium .hero-right {
  width: 52%;
  display: flex;
  justify-content: flex-end;
  transform: translateX(var(--hero-right-offset-large));
  transition: transform 240ms cubic-bezier(0.22, 0.9, 0.28, 0.98);
}

.hero.premium .hero-right {
  width: 540px;
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero.premium .hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.28, 0.98);
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.hero.premium .hero-right img:hover {
  transform: scale(1.04);
}

/* Manual hero navigation (bottom center) removed */

/* Decorative image behind the left hero block with softened edges.
   Technique: two pseudo-elements —
   - ::before: larger blurred silhouette behind the main image
   - ::after: sharp image with a radial mask that fades edges to transparent
   This preserves accessibility (content remains separate) while blending edges. */
.hero.premium .hero-left {
  position: relative;
}

.hero.premium .hero-left::before {
  content: "";
  position: absolute;
  top: 88%;
  right: -40px;
  /* slightly further back so the blur spreads outside the main image */
  left: auto !important;
  transform: translateY(-50%) translateX(-120px) !important;
  width: 600px;
  /* a bit larger so the blur softens beyond the foreground image */
  height: 760px;
  background-image: url("../images/model.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(8px) saturate(0.96);
  /* reduced blur for a subtler halo */
  opacity: 0.44;
  /* slightly increased opacity to compensate */
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.18);
  z-index: 1;
  pointer-events: none;
}

.hero.premium .hero-left::after {
  content: "";
  position: absolute;
  top: 88%;
  right: -10px !important;
  /* align visually with previous placement */
  left: auto !important;
  transform: translateY(-50%) translateX(-140px) !important;
  width: 520px;
  height: 640px;
  background-image: url("../images/model.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.98;
  /* keep the foreground image mostly opaque */
  border-radius: 12px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.2);
  z-index: 2;
  /* stay below the content children (which remain z-index:3) */
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    closest-side,
    black 62%,
    rgba(0, 0, 0, 0.65) 76%,
    transparent 100%
  );
  mask-image: radial-gradient(
    closest-side,
    black 62%,
    rgba(0, 0, 0, 0.65) 76%,
    transparent 100%
  );
}

.hero.premium .hero-left * {
  position: relative;
  z-index: 3;
}

@media (max-width: 900px) {
  /* Hide the decorative background on smaller screens to avoid layout overlap */
  .hero.premium .hero-left::before,
  .hero.premium .hero-left::after {
    display: none;
  }
}

/* Make the hero scroller friendly on devices <= 1000px wide: stack panes, center copy, and scale images */
@media (max-width: 1000px) {
  /* Keep the hero visually similar to desktop: side-by-side layout and same slider height */
  .hero {
    padding: 84px 0 120px;
  }

  .hero .container {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    justify-content: center;
  }

  /* Keep the scroller wide so the horizontal animation still functions on mobile */
  .hero-scroller {
    width: 400vw !important;
    display: flex;
    flex-direction: row;
    gap: 0;
    animation: heroPanes var(--hero-duration) var(--hero-easing) infinite;
  }

  .hero-pane {
    width: 100vw !important;
    flex: 0 0 auto;
  }

  /* Keep copy & slider side-by-side on tablets and larger phones to match desktop layout */
  .hero-left {
    width: 48% !important;
    padding: 20px 22px;
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero-left .brand-title {
    font-size: 42px !important;
    letter-spacing: 6px !important;
    margin-bottom: 10px !important;
  }

  .hero-left .lead {
    font-size: 16px !important;
    margin-bottom: 12px !important;
    max-width: 100%;
  }

  .hero-left .cta {
    position: static !important;
    transform: none !important;
    padding: 12px 20px;
    border-radius: 24px;
    z-index: 40;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.6px;
    margin-top: 12px;
    width: fit-content;
  }

  .hero-right {
    width: 52% !important;
    margin-top: 0 !important;
    transform: none !important;
    justify-content: center !important;
    position: relative;
    display: flex;
    align-items: center;
  }

  /* Maintain desktop slider height while allowing width to scale to screen width */
  .hero-right {
    width: min(540px, 92%) !important;
    height: 420px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box;
    position: relative;
  }

  .hero-right img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  /* Remove offsets and decorative backgrounds which can overlap on smaller screens */
  .hero.premium .hero-left::before,
  .hero.premium .hero-left::after,
  .hero.premium .hero-right::before,
  .hero.premium .hero-right::after {
    display: none !important;
  }

  /* Slightly reduce spacing for the hero search control and keep it visible */
  .hero-search-bar {
    display: flex !important;
    padding: 6px 10px;
    transform: translateY(-20px);
  }

  /* When we clone CTAs into the slider, hide the original left CTA and style clones */
  body.cta-cloned .hero-left > .cta {
    display: none !important;
  }

  /* Cloned CTA styling: fully-visible black button with white text and clear focus/hover states */
  /* CTA styling */
  .hero-left .cta {
    background: #000;
    color: #fff;
    opacity: 1;
    transition: opacity 160ms ease;
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-transform: uppercase;
  }
}

/* Slightly larger decorative image on wide screens to add visual weight */
@media (min-width: 1280px) {
  .hero-right {
    height: 600px !important;
  }

  .hero.premium .hero-left::before {
    top: 90%;
    /* slightly lower on very wide screens */
    right: -20px !important;
    left: auto !important;
    transform: translateY(-50%) translateX(-160px) !important;
    width: 840px;
    height: 980px;
    opacity: 0.36;
  }

  .hero.premium .hero-left::after {
    top: 90%;
    right: -10px !important;
    left: 290px !important;
    transform: translateY(-50%) translateX(-160px) !important;
    width: 680px;
    height: 860px;
    opacity: 0.88;
  }
}

/* Decorative background for right-side slider panes (copy of left styles but mirrored)
   Each hero pane will get a matching decorative background using the same sizing and mask.
  We'll add examples for hero-one..hero-five with unique images. */
.hero.premium .hero-right {
  position: relative;
}

.hero.premium .hero-right::before {
  content: "";
  position: absolute;
  top: 88%;
  left: -40px;
  /* mirror placement for right side */
  transform: translateY(-50%) translateX(120px) !important;
  width: 600px;
  height: 760px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(8px) saturate(0.96);
  opacity: 0.44;
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.18);
  z-index: 1;
  pointer-events: none;
}

.hero.premium .hero-right::after {
  content: "";
  position: absolute;
  top: 88%;
  left: -10px !important;
  transform: translateY(-50%) translateX(140px) !important;
  width: 520px;
  height: 640px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.98;
  border-radius: 12px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.2);
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    closest-side,
    black 62%,
    rgba(0, 0, 0, 0.65) 76%,
    transparent 100%
  );
  mask-image: radial-gradient(
    closest-side,
    black 62%,
    rgba(0, 0, 0, 0.65) 76%,
    transparent 100%
  );
}

/* Hide on small screens similar to left decorations */
@media (max-width: 900px) {
  .hero.premium .hero-right::before,
  .hero.premium .hero-right::after {
    display: none;
  }
}

/* Specific background images for each hero pane (assign different images per pane) */

.hero-pane.hero-two .hero-right::before,
.hero-pane.hero-two .hero-right::after {
  /* Decorative image removed: keep one image per pane */
  background-image: none !important;
}

/* Override the large left-pane decorative images for the second hero pane so the big model.jpg
   is replaced with sho3.jpg as well. This ensures the 'big' model image behind the copy is
   replaced and only sho3.jpg will be shown for hero-two. */
.hero-pane.hero-two .hero-left::before,
.hero-pane.hero-two .hero-left::after {
  background-image: none !important;
}

.hero-pane.hero-three .hero-right::before,
.hero-pane.hero-three .hero-right::after {
  background-image: none !important;
}

/* Make hero-three right decorative images blend into background so sharp corners don't appear */
.hero-pane.hero-three .hero-right::before {
  /* soft halo behind the main content */
  filter: blur(8px) saturate(0.96);
  opacity: 0.44;
  border-radius: 20px;
  /* match the generic right decoration */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-pane.hero-three .hero-right::after {
  /* sharp foreground image with a radial mask to fade edges to transparent */
  border-radius: 12px;
  opacity: 0.98;
  -webkit-mask-image: radial-gradient(
    closest-side,
    black 62%,
    rgba(0, 0, 0, 0.65) 76%,
    transparent 100%
  );
  mask-image: radial-gradient(
    closest-side,
    black 62%,
    rgba(0, 0, 0, 0.65) 76%,
    transparent 100%
  );
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Match hero-two: override the large left-pane decorative images for the third hero pane
   so the big model.jpg behind the copy is replaced with capp.jpg as well. */
.hero-pane.hero-three .hero-left::before,
.hero-pane.hero-three .hero-left::after {
  background-image: none !important;
}

/* Make hero-three left decorative images blend into background so sharp corners don't appear */
.hero-pane.hero-three .hero-left::before {
  filter: blur(8px) saturate(0.96);
  opacity: 0.44;
  border-radius: 20px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-pane.hero-three .hero-left::after {
  border-radius: 12px;
  opacity: 0.98;
  -webkit-mask-image: radial-gradient(
    closest-side,
    black 62%,
    rgba(0, 0, 0, 0.65) 76%,
    transparent 100%
  );
  mask-image: radial-gradient(
    closest-side,
    black 62%,
    rgba(0, 0, 0, 0.65) 76%,
    transparent 100%
  );
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-pane.hero-four .hero-right::before,
.hero-pane.hero-four .hero-right::after {
  /* pane-four was removed from markup; this background is left commented for potential future reuse */
  /* background-image: url('../images/zmale1\ \(13\).jpg'); */
  display: none;
}

.hero-pane.hero-five .hero-right::before,
.hero-pane.hero-five .hero-right::after {
  background-image: none !important;
}

/* Make hero-five right decorative images blend into background so sharp corners don't appear */
.hero-pane.hero-five .hero-right::before {
  /* soft halo behind the main content */
  filter: blur(8px) saturate(0.96);
  opacity: 0.44;
  border-radius: 20px;
  /* match the generic right decoration */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-pane.hero-five .hero-right::after {
  /* sharp foreground image with a radial mask to fade edges to transparent */
  border-radius: 12px;
  opacity: 0.98;
  -webkit-mask-image: radial-gradient(
    closest-side,
    black 62%,
    rgba(0, 0, 0, 0.65) 76%,
    transparent 100%
  );
  mask-image: radial-gradient(
    closest-side,
    black 62%,
    rgba(0, 0, 0, 0.65) 76%,
    transparent 100%
  );
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Override the large left-pane decorative images for the fifth hero pane so the big model.jpg
   is replaced with the matching zmale1 (16) image as well. */
.hero-pane.hero-five .hero-left::before,
.hero-pane.hero-five .hero-left::after {
  background-image: none !important;
}

/* .hero-pane.hero-six .hero-right::before, .hero-pane.hero-six .hero-right::after{
  background-image: url('..images/zmale1\ \(12\).jpg');
} */

/* Slight border radius & accent for the topbar brand to match the premium layout */
.topbar-inner .brand .logo img {
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

/* ------------------------------------------------------------------ */
/* Force-hide hero pseudo-elements (decorative backgrounds) so there's
   exactly one visible image per hero pane. Keeps all text and markup
   intact while removing duplicated visuals on desktop. */
.hero-pane .hero-left::before,
.hero-pane .hero-left::after,
.hero-pane .hero-right::before,
.hero-pane .hero-right::after {
  display: none !important;
  background-image: none !important;
  content: none !important;
}

/* Responsive tuning for premium hero */
@media (max-width: 900px) {
  .hero.premium {
    padding: 48px 0;
  }

  .hero.premium .brand-title {
    font-size: 46px;
  }

  .hero.premium .hero-right {
    width: 340px;
    height: 320px;
  }

  .hero.premium .hero-left {
    width: 100%;
    padding-right: 0;
  }

  .hero.premium .hero-right {
    width: 100%;
    margin-top: 18px;
    justify-content: flex-start;
    transform: none;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Allow wider containers for the shop page so 5 columns show nicely */
.container.catalog {
  max-width: 1400px;
}

.container.narrow {
  max-width: 1000px;
}

.hero .container {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-left {
  width: 55%;
}

.hero-left {
  text-align: left;
}

/* Animate left content when slides change */
.hero-left {
  transition: transform 360ms cubic-bezier(0.22, 0.8, 0.3, 1),
    opacity 360ms ease;
  opacity: 1 !important;
}

.hero-left.slide-transition-forward {
  transform: translateX(-20px);
  opacity: 0;
}

.hero-left.slide-transition-back {
  transform: translateX(20px);
  opacity: 0;
}

.hero-left {
  will-change: transform, opacity;
}

/* Subtle 'libreath' float in/out animation for left/right pane components */
@keyframes softFloatIn {
  from {
    transform: translateY(10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes softFloatOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-6px);
    opacity: 0;
  }
}

.hero-left.animated-in {
  animation: softFloatIn 360ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

.hero-left.animated-out {
  animation: softFloatOut 300ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

.brand-title {
  font-size: 44px;
  letter-spacing: 10px;
  margin-bottom: 12px;
  font-weight: 800;
}

.lead {
  font-size: 18px;
  opacity: 0.95;
  margin-bottom: 18px;
}

.lead {
  font-size: 18px;
  opacity: 0.95;
  margin-bottom: 18px;
}

.cta {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 10px 14px;
  text-decoration: none;
  border-radius: 3px;
  font-size: 14px;
}

.hero-right {
  width: 45%;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 4;
  transform: translateX(var(--hero-right-offset));
  transition: transform 240ms cubic-bezier(0.22, 0.9, 0.28, 0.98);
}

.hero-right img.product {
  width: 320px;
  max-width: 100%;
  transform: translateY(10px);
}

/* Slider removed - using single images per pane */
.hero-right img.product {
  width: 320px;
  max-width: 100%;
  transform: translateY(10px);
}

/* Ensure images fill their slide, have no border, and blend at edges for a seamless visual */
/* If slides are <img> elements (as in index.html), apply the same rules directly to .slide elements */
.hero-right .slide {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border: 0;
  box-shadow: none;
  border-radius: inherit;
}

/* Subtle edge fade to help adjacent slides blend visually. This uses CSS masks where supported. */
.hero-right .slide {
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 1) 88%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 1) 88%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* If a slide is positioned left/right (prev/next) slightly soften its edges for better blending */
.hero-right .slide.is-prev,
.hero-right .slide.is-next {
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 18%,
    rgba(0, 0, 0, 1) 82%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 18%,
    rgba(0, 0, 0, 1) 82%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Hero images - simplified single image per pane */

/* New Arrivals */
.product-catalog {
  padding: 36px 0 140px;
background:  #eeeee37e !important;

}

.product-catalog h2 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #333;
  margin-bottom: 8px;
}

.product-catalog hr {
  border: 0;
  border-top: 1px solid #e6e6e6;
  margin-bottom: 22px;
}

/* Subtle full-width divider under the hero section */
.hero-divider {
  display: block;
  border: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(119, 116, 116, 0.349) 0%,
    rgba(238, 236, 236, 0.856) 50%,
    rgba(0, 0, 0, 0.02) 100%
  );
  /* subtle grey gradient */
  margin: 22px 0;
  /* space above/below */
  opacity: 0.95;
}

@media (max-width: 640px) {
  .hero-divider {
    margin: 14px 0;
  }
}

.container.catalog {
  max-width: 1400px;
  margin: 0 auto;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(5, 220px);
  gap: 38px;
  justify-content: center;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

/* Responsive: 5 columns on wide screens, drop to 4/3/2/1 at breakpoints (fixed 220px columns) */
@media (max-width: 1400px) {
  .catalog-grid {
    grid-template-columns: repeat(4, 220px);
    gap: 34px;
    justify-content: center;
  }
}

@media (max-width: 1100px) {
  .catalog-grid {
    grid-template-columns: repeat(3, 220px);
    gap: 30px;
    justify-content: center;
  }
}

.product-card {
  text-align: center;
  padding: 18px;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid #ececec;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  flex: 1 1 auto;
}

.product-card img {
  width: 100%;
  max-width: 180px;
  height: 180px;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
  background: var(--card-bg);
  padding: 12px;
  border-radius: 6px;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.product-card .meta {
  margin-top: -19px;
}

.product-card .title {
  font-size: 11px;
  color: #666;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.product-card .price {
  font-size: 13px;
  color: #222;
  font-weight: 700;
  margin-top: 6px;
}

.product-card .stars {
  margin-top: 6px;
}

/* Star rating widget: use layered unicode stars with an overlay to show partial (half / decimal) ratings */
.product-card .stars {
  --star-size: 12px;
  font-size: var(--star-size);
  --percent: 100%;
  --star-color: #d4af37;
  /* premium gold */
  display: inline-block;
  position: relative;
  line-height: 1;
  font-weight: 700;
  font-family: "Inconsolata", "Montserrat", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial;
  color: #dcdcdc;
  /* fallback/empty star color */
  letter-spacing: 3px;
}

.product-card .rating-value {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  color: #333;
  /* neutral text color for the numeric value */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Flying image (clone) animation */
.flying-clone {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  transition: transform var(--fly-duration) var(--fly-easing),
    opacity calc(var(--fly-duration) - 0.08s) ease;
  transform-origin: center center;
  will-change: transform, opacity;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

/* small pop on cart to indicate success */
.topbar .cart.cart-pop {
  transform: scale(1.08);
  transition: transform calc(var(--fly-duration) / 5) var(--fly-easing);
}

.product-card .stars::before {
  content: "★★★★★";
  color: #dcdcdc;
  /* empty stars */
  -webkit-text-stroke: 0 transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.product-card .stars::after {
  content: "★★★★★";
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: var(--percent, 0%);
  white-space: nowrap;
  transition: width 0.18s ease;
  /* Use a subtle gradient and clip to text to create a metallic gold feel */
  background: linear-gradient(
    180deg,
    #fff9e6 0%,
    #ffd54a 30%,
    #d4af37 70%,
    #b88a12 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Small shadow on empty stars for depth and darker edge */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  /* slight highlight + drop shadow for 'popped out' look */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Visual feedback when adding to cart */
.product-card.added-to-cart {
  outline: 2px solid rgba(46, 98, 165, 0.12);
  transform: translateY(-4px);
  transition: transform 0.12s ease, outline 0.12s ease;
}

.product-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.product-card:hover img {
  transform: scale(1.06);
}

/* Product wrapper used for non-shop page catalog cards */
.product-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  width: 220px;
  max-width: 100%;
}

/* Button base & Add button style for catalog cards */
.btn {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.product-wrap .btn-add {
  background: #111;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  margin-top: 8px;
  width: 140px;
  margin-top: 12px;
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
  align-self: center;
}

.product-wrap .btn-add:hover,
.product-wrap .btn-add:focus {
  background: #222;
  color: var(--accent-yellow);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
  outline: none;
}

.product-wrap .btn-add:active {
  background: #191919;
  color: var(--accent-yellow);
}

.product-wrap .btn-add:focus {
  box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.08);
}

/* WhatsApp UI removed */

/* Enhanced main-nav hover and active styles
   - underline grow (uses ::before since ::after is disabled earlier)
   - subtle moving sheen using background-gradient on hover
   - active support via `.active` or `aria-current="page"`
*/
.main-nav a {
  /* allow subtle sheen/background animation */
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 40%,
    rgba(255, 255, 255, 0.1) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: -60% 0;
}

.main-nav a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 64%;
  height: 3px;
  background: #111;
  border-radius: 3px;
  transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.18s ease;
  opacity: 0.95;
  pointer-events: none;
}

/* Remove the steady underline rectangle for the 'Collections' link (mega menu trigger).
  This keeps the visual anchor for normal nav links while avoiding a permanent
  underline on the non-navigating Collections trigger. */
.main-nav .collections-link::before {
  display: none !important;
}

.main-nav a:hover,
.main-nav a:focus {
  color: #000;
  /* slightly darker on hover */
  transform: translateY(-2px);
}

.main-nav a:hover::before,
.main-nav a:focus::before {
  transform: translateX(-50%) scaleX(1);
}

.main-nav a:hover {
  background-size: 160% 100%;
  background-position: 120% 0;
  transition: background-size 0.68s cubic-bezier(0.2, 0.9, 0.3, 1),
    background-position 0.68s cubic-bezier(0.2, 0.9, 0.3, 1),
    transform 0.12s ease;
}

/* Active / current page state: visible, slightly bolder and anchored underline */
.main-nav a.active,
.main-nav a[aria-current="page"] {
  color: #000;
  font-weight: 800;
}

.main-nav a.active::before,
.main-nav a[aria-current="page"]::before {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

/* Keep behaviour simple for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .main-nav a {
    background-size: 0% 100% !important;
    background-position: 0 0 !important;
  }

  .main-nav a::before {
    transition: none !important;
    transform: translateX(-50%) scaleX(1) !important;
  }

  .main-nav a:hover {
    transform: none !important;
  }
}

/* Mobile header: apply shop.html mobile header behavior across other pages
   Centers the brand logo in the topbar on small screens and hides desktop nav.
*/
@media (max-width: 640px) {
  .topbar {
    padding-top: 30px;
  }

  .topbar-inner {
    max-width: 500px;
    width: calc(100% - 20px);
    margin: 0 auto;
    padding: 8px 10px 22px 10px;
    gap: 8px;
    position: relative;
  }

  .topbar-inner .brand .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
  }

  .brand .logo img {
    width: 86px;
    height: auto;
  }

  .main-nav {
    display: none;
  }
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .hero-left {
    width: 60%;
  }

  .hero-right {
    width: 40%;
  }

  .catalog-grid {
    grid-template-columns: repeat(2, 220px);
    justify-content: center;
  }

  .search-wrap input {
    width: 180px;
  }

  .hero-right .slide {
    flex: 0 0 48%;
  }
}

@media (max-width: 640px) {
  .topbar-inner {
    padding: 10px 16px;
  }

  .brand .logo {
    height: 36px;
    font-size: 13px;
  }

  .main-nav ul {
    gap: 12px;
    overflow: auto;
    padding: 6px 10px;
  }

  .main-nav {
    min-height: 56px;
  }

  /* Mobile: constrain header content to max-width:500px for narrow devices */
  @media (max-width: 500px) {
    .topbar-inner {
      max-width: 500px;
      width: calc(100% - 20px);
      margin: 0 auto;
      padding: 8px 10px;
      gap: 8px;
      align-items: center;
      display: flex;
      justify-content: space-between;
    }

    .brand .logo img {
      height: 36px;
      width: auto;
      max-width: 140px;
    }

    .brand-links {
      display: none;
    }

    .search-wrap {
      display: none;
    }

    .top-actions .notif-btn {
      margin-right: 0;
      padding: 8px;
    }

    .top-actions .notif-btn img {
      width: 22px;
      height: 22px;
    }

    .main-nav {
      padding: 6px 0;
    }

    /* Hide desktop main-nav on small screens; use hamburger menu instead */
    .main-nav {
      display: none;
    }

    .main-nav ul {
      gap: 8px;
      overflow-x: auto;
      padding: 6px 8px;
      justify-content: flex-start;
    }

    .main-nav a {
      font-size: 11px;
      padding: 6px 6px;
    }

    .main-nav .has-mega .mega-menu {
      display: none !important;
    }

    /* badge size on very small screens */
    .notif-badge {
      font-size: 13px;
      padding: 0 6px;
      min-width: 20px;
      height: 20px;
    }

    /* Add top padding to the fixed header at very small widths to create breathing space */
    .topbar {
      padding-top: 30px;
    }
  }

  .hero {
    padding: 40px 0;
  }

  .hero .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .hero-left {
    width: 100%;
  }

  .hero-right {
    width: 100%;
    justify-content: flex-start;
    transform: none;
  }

  .hero-right img.product {
    width: 220px;
  }

  .hero-right {
    width: 220px;
    height: 220px;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
  }
}

/* Revert to single-column on ultra-small phones to mirror shop page layout (<= 360px) */
@media (max-width: 360px) {
  .catalog-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .product-wrap {
    gap: 8px;
  }
  .product-card .thumb {
    max-width: 100px;
    height: 100px;
  }
  .product-card .title {
    font-size: 12px;
  }
  .product-wrap .btn-add {
    width: 100%;
  }
}

/* Mobile: 2-column grid for product catalog on max-width 500px */
@media (max-width: 500px) {
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    justify-content: stretch;
    padding: 0;
  }

  .product-wrap {
    width: 100%;
    max-width: 100%;
    gap: 6px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .product-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .product-card img {
    max-width: 100%;
    height: 180px;
    padding: 0;
    object-fit: cover;
  }

  .product-card .meta {
    padding: 10px;
  }

  .product-card .title {
    font-size: 11px;
    letter-spacing: 0.5px;
  }

  .product-card .price {
    font-size: 13px;
  }

  .btn-add {
    width: 100%;
    font-size: 13px;
    margin-top: -17px;
    margin-bottom: 15px;
    padding: 8px 12px !important;
  }
}

/* Hero mobile refinements for very small screens (<= 480px): stack content, center text, scale fonts and CTA */
@media (max-width: 480px) {
  .hero {
    padding: 36px 0 48px;
  }

  .hero .container {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
  }

  .hero-left {
    width: 100% !important;
    padding: 12px 8px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 130px !important;
    margin-right: 0 !important;
  }

  .hero-left .brand-title {
    font-size: 20px !important;
    line-height: 1.08 !important;
    letter-spacing: 2px !important;
    margin-bottom: 6px !important;
  }

  /* Larger / visually heavier H1 for MEN'S COLLECTION on mobile without moving it */
  .hero.premium .hero-pane.hero-one .brand-title {
    font-size: 28px !important;
    font-weight: 900 !important;
    text-shadow: 0 4px 8px rgba(202, 196, 196, 0.658), 0 1px 0 rgba(255,255,255,0.03) !important;
    letter-spacing: 2px !important;
  }

  /* Apply same larger / heavier H1 styling to other hero panes on mobile */
  .hero.premium .hero-pane.hero-two .brand-title,
  .hero.premium .hero-pane.hero-three .brand-title,
  .hero.premium .hero-pane.hero-five .brand-title {
    font-size: 26px !important;
    font-weight: 900 !important;
     text-shadow: 0 4px 8px rgba(202, 196, 196, 0.658), 0 1px 0 rgba(255,255,255,0.03) !important;
    letter-spacing: 2px !important;
  }

  .hero-left .lead {
    font-size: 13px !important;
    margin-bottom: 3px !important;
    max-width: 100% !important;
    text-align: right !important;
    color: #000000 !important;
   
  }

  .hero.premium .cta {
    background: linear-gradient(90deg, #0b1e2b, #46380b41) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  /* Make image area compact and full-width under the text on very small devices */
  .hero-right {
    width: 100% !important;
    height: auto !important;
    margin-top: 10px !important;
    display: block !important;
    justify-content: center !important;
  }

  .hero-right img {
    width: 100% !important;
    height: auto !important;
    max-height: 320px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }

  /* Reduce decoration/overlays that cause wrapped widths */
  .hero.premium .hero-left::before,
  .hero.premium .hero-left::after,
  .hero.premium .hero-right::before,
  .hero.premium .hero-right::after {
    display: none !important;
  }

  /* Ensure hero background images behave well on small screens: don't use fixed attachment, adjust size & position */
  .hero.premium .hero-pane {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    /* Use viewport-aware height on mobile — slightly reduced so there's a small visible gap */
    min-height: calc(40vh - var(--topbar-height)) !important; 
    margin-top: 40px;
    position: relative;
  }

  /* Remove bottom padding from the hero container on mobile so panes exactly meet the divider */
  .hero {
    padding-bottom: 0 !important;
  }


  /* Fine tune the hero one background to show subject on smaller devices */
  .hero.premium .hero-pane.hero-one {
    background-position: center 30% !important;
    margin-bottom: -70px !important;
  }
  /* Add dimmed gradient overlay specifically for mobile to improve legibility */
  .hero.premium .hero-pane.hero-one {
    background-image: linear-gradient(rgba(233, 230, 204, 0.637), rgba(134, 143, 60, 0.36)), url("../emy/em1.jpg") !important;
    background-size: cover, cover !important;
    background-position: center 30%, center 30% !important;
    background-repeat: no-repeat, no-repeat !important;
  }

  /* Move hero-one (MEN'S COLLECTION) text to the right on mobile */
  .hero.premium .hero-pane.hero-one .hero-left {
    margin-left: 20px !important;
  }

 

  /* Dim overlays for hero-two/three/five on mobile for better text contrast */
  .hero.premium .hero-pane.hero-two {
    background-image: linear-gradient(rgba(233, 230, 204, 0.637), rgba(134, 143, 60, 0.36)), url("../emy/em2.jpg") !important;
    background-size: cover, cover !important;
    background-position: center 30%, right 30% !important;
    background-repeat: no-repeat, no-repeat !important;

  }
  .hero.premium .hero-pane.hero-three {
    background-image: linear-gradient(rgba(233, 230, 204, 0.637), rgba(134, 143, 60, 0.36)), url("../emy/em4.jpg") !important;
    background-size: cover, cover !important;
    /* center and vertically center the image on mobile for consistent cropping */
    background-position: center center, center center !important;
    background-repeat: no-repeat, no-repeat !important;
    /* Ensure this pane fills most of the visible viewport on mobile (beneath the topbar). Reduced for compact display. */
    min-height: calc(40vh - var(--topbar-height)) !important;
    height: calc(70vh - var(--topbar-height)) !important;
  }
  .hero.premium .hero-pane.hero-five {
background-image: linear-gradient(rgba(233, 230, 204, 0.637), rgba(134, 143, 60, 0.36)), url("../emy/em5.jpg") !important;
    background-size: cover, cover !important;
    background-position: center 30%, right 20% !important;
    background-repeat: no-repeat, no-repeat !important;
  }

 

  /* Keep hero-left placement consistent on mobile for other panes */
  .hero.premium .hero-pane.hero-two .hero-left,
  .hero.premium .hero-pane.hero-three .hero-left,
  .hero.premium .hero-pane.hero-five .hero-left {
    width: 100% !important;
    padding: 12px 8px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 130px !important;
    margin-right: 70px !important;
  }

  /* Move hero-two's text further down on mobile to differentiate positioning */
  .hero.premium .hero-pane.hero-two .hero-left {
    margin-top: 200px !important;
    margin-left: 120px !important;
  }

  /* Move hero-three (HOODIES) text further down on mobile by 200px (from 130px -> 330px) */
  .hero.premium .hero-pane.hero-three .hero-left {
    margin-top: 220px !important;
  }

  /* Make only hero-two's lead text yellow on mobile */
  .hero.premium .hero-pane.hero-two .lead {
    color: #000000 !important;
  }

  /* Make only hero-three's lead text black on mobile */
  .hero.premium .hero-pane.hero-three .lead {
    color: #000000 !important;
  }

  /* Move hero-five (FEMALE WEARS) text down 200px on mobile */
  .hero.premium .hero-pane.hero-five .hero-left {
    margin-top: 330px !important;
  }
}

/* Extra small screens (iPhone SE, small Android phones) - optimize hero-three display */
@media (max-width: 375px) {
  .hero.premium .hero-pane {
    min-height: 480px !important;
  }

  .hero.premium .hero-pane.hero-three {
    min-height: 560px !important;
  }
}

/* On very small screens make the card responsive - mirror shop.css 520px rules */
@media (max-width: 520px) {
  .product-wrap { width: 100%; }
  .product-card .meta { padding: 14px; }
  .product-card img { max-width: 140px; height: 140px; }
}

/* Hamburger icon - visible only on small screens (<=500px) */
.hamburger {
  display: none;
  background: transparent !important;
  border: 0 !important;
  padding: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-width: var(--site-hamburger-button-size);
  min-height: var(--site-hamburger-button-size);
  outline: none !important;
  box-shadow: none !important;
}

.hamburger:active,
.hamburger:focus,
.hamburger:focus-visible,
.hamburger:focus-within {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
}

.hamburger .bar {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  margin: 4px 0;
  border-radius: 2px;
  transition: transform 180ms cubic-bezier(0.22, 0.9, 0.28, 0.98),
    opacity 120ms ease;
}

/* Use SVG icons instead of bars: show the burger open icon by default and the cancel icon when `.open` is present */
.hamburger svg {
  width: var(--site-menu-icon-size);
  height: var(--site-menu-icon-size);
  display: inline-block;
}

.hamburger .hamburger-open {
  display: inline-block;
}

.hamburger .hamburger-close {
  display: none !important;
}

.hamburger.open .hamburger-open {
  display: none;
}

.hamburger.open .hamburger-close {
  display: none !important;
}

.hamburger {
  color: #fff !important;
  background: transparent !important;
}

.hamburger.open {
  background: transparent !important;
  padding: 4px;
  border-radius: 4px;
  color: #ffffff !important;
}

/* Ensure the SVG close icon is white when the button is visible */
.hamburger .hamburger-close svg,
.hamburger.open .hamburger-close svg {
  stroke: #ffffff !important;
  fill: none !important;
}

.hamburger .bar {
  display: none;
}

/* Mobile menu (off-canvas from left like Gmail) */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 85%;
  max-width: 320px;
  background: #eeeee3;
  color: #000000;
  transform: translateX(-100%);
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 99998;
  overflow-y: auto;
  overflow-x: hidden;
  will-change: transform;
  /* subtle Gmail-like shadow */
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.08);
  border-right: 1px solid rgba(0,0,0,0.06);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu-inner {
  padding: 16px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}

.mobile-menu .brand-links.mobile-brand-links {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* keep quick links together on the left */
  gap: 6px;
  /* slightly tighter gap between Men/Women */
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Mobile logo block (appears above quick links) */
.mobile-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 4px 0;
}
.mobile-logo .logo img {
  width: 120px;
  height: auto;
  display:block;
}

.mobile-menu .brand-links .small-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: #000000;
  background: transparent; /* don't show a background by default; only hover/active */
  border-radius: 10px;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  text-transform: capitalize;
  transition: background 120ms ease, transform 120ms ease;
}

/* Top row for logo + avatar */
.mobile-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.mobile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #e83b3b;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.mobile-menu .brand-links .small-link:hover,
.mobile-menu .brand-links .small-link:focus {
  background: rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* Active quick link in the mobile brand row */
.mobile-menu .brand-links .small-link.clicked-active {
  background: rgba(232, 59, 59, 0.12);
  color: #e83b3b;
}

/* Checkout badge in the mobile main nav */
.mobile-main-nav li a.checkout-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-main-nav li a .checkout-count {
  position: absolute;
  top: -6px;
  right: -10px;
  display: none;
  background: #e23b3b;
  color: #fff;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 18px;
}

.mobile-menu .mobile-main-nav ul {
  list-style: none;
  padding: 12px 0;
  margin: 8px 0;
}

.mobile-menu .mobile-main-nav li {
  padding: 0;
  margin: 0;
}

.mobile-menu .mobile-main-nav li + li {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.mobile-menu .mobile-main-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  padding-left: 12px;
  color: #000000;
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0px;
  text-transform: capitalize;
  transition: background 120ms ease, color 120ms ease;
}

.mobile-menu .mobile-main-nav a:hover {
  background: rgba(232, 59, 59, 0.04);
  color: #000000;
  outline: none;
}

.mobile-menu .mobile-main-nav a:focus,
.mobile-menu .mobile-main-nav a:focus-visible {
  outline: none;
  background: transparent;
}

.mobile-menu .mobile-main-nav a:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(232,59,59,0.08);
}

.mobile-menu .mobile-main-nav a.clicked-active {
  background: rgba(232, 59, 59, 0.12);
  color: #e83b3b;
  border-radius: 999px;
  margin: 4px 0;
  padding-right: 12px;
  margin-left: -200px;
  padding-left: 213px;
}

.mobile-menu .mobile-main-nav a .nav-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 8px;
}
.mobile-menu .mobile-main-nav a .nav-icon img {
  width: 18px;
  height: 18px;
  display:block;
  margin-right: 8px;
  filter: none; /* show original SVG colors */
  object-fit: contain;
}
.mobile-menu .mobile-main-nav a .nav-icon.placeholder {
  width: 28px;
  height: 28px;
  background: #f0f0f0;
  border-radius: 6px;
  display: inline-block;
}
.mobile-menu .mobile-main-nav a.clicked-active .nav-icon {
  background: #ffffff00;
}
.mobile-menu .mobile-main-nav a.clicked-active .nav-icon img {
  filter: invert(11%) sepia(95%) saturate(500%) hue-rotate(357deg) brightness(102%) contrast(100%);
}

/* Make icon placeholders and default non-active icons look muted */
.mobile-menu .mobile-main-nav a .nav-icon.placeholder {
  background: #dad6d6;
}
.mobile-menu .mobile-main-nav a .nav-icon img {
  object-fit: contain;
}

.mobile-menu-close:focus {
  outline: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}

@media (max-width: 420px) {
  .mobile-menu {
    width: 75%;
  }

  .mobile-menu .brand-links .small-link {
    padding: 8px 10px;
  }
}

/* ============================================================
   MOBILE MENU - CONSOLIDATED STYLES
   ============================================================ */

.mobile-main-nav .has-mega {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 6px;
}

.mobile-main-nav .has-mega .collections-link {
  display: flex;
  justify-content: flex-start; /* keep icon + text together on the left */
  align-items: center;
  gap: 8px; /* reduce gap between icon and text */
  padding: 14px 48px 14px 20px; /* shift text right with increased left padding */
  color: #000000;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  text-transform: capitalize;
  position: relative; /* allow absolute chevron placement */
}

.mobile-main-nav .has-mega .collections-link::after {
  content: "▾";
  font-size: 12px;
  color: rgba(0, 0, 0, 0.7);
  transition: transform 160ms ease;
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.mobile-main-nav .has-mega.open .collections-link {
  color: #ffffff;
  background: #e83b3b;
}

.mobile-main-nav .has-mega.open .collections-link::after {
  transform: rotate(180deg);
}

.mobile-main-nav .has-mega .mega-menu {
  display: none;
  padding: 12px;
  margin-top: 8px;
  background: #fff;
  color: #111;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

/* Make collections icon slightly smaller so text sits closer */
.mobile-main-nav .has-mega .collections-link .nav-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.mobile-main-nav .has-mega.open .mega-menu {
  display: block;
}

.mobile-main-nav .has-mega .mega-menu .mega-columns {
  display: block;
  gap: 8px;
}

.mobile-main-nav .has-mega .mega-menu .mega-col {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 6px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}

.mobile-main-nav .has-mega .mega-col:last-child {
  border-bottom: none;
}

.mobile-main-nav .has-mega .mega-col-head img {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
}

.mobile-main-nav .has-mega .mega-menu h4 {
  color: #000000;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.mobile-main-nav .has-mega .mega-menu a {
  color: #111;
}

/* Account dropdown menu in mobile nav */


.mobile-menu-close {
  border: 0;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  padding: 12px;
  cursor: pointer;
  position: fixed;
  top: 12px;
  right: 12px;
  left: auto;
  width: 56px;
  height: 56px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 140ms ease, transform 140ms ease, opacity 160ms ease;
  z-index: 999999;
}

.hamburger.open .hamburger-close {
  background: transparent !important;
  width: 50px;
  height: 50px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  box-shadow: none !important;
}

.mobile-menu-close svg {
  width: var(--site-mobile-close-size, 18px);
  height: var(--site-mobile-close-size, 18px);
  display: inline-block;
}

/* ===== CONSOLIDATED: Transparent background for all close/hamburger button states ===== */
.hamburger,
.hamburger.open,
.hamburger .hamburger-close,
.hamburger.open .hamburger-close,
.mobile-menu-close,
button.hamburger,
button.hamburger.open,
button.hamburger .hamburger-close,
button.hamburger.open .hamburger-close,
.topbar .hamburger,
.topbar .hamburger.open,
.topbar button.hamburger.open,
svg.icon-cancel {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.hamburger .hamburger-close svg,
.hamburger.open .hamburger-close svg,
.mobile-menu-close svg {
  stroke: #ffffff !important;
  fill: none !important;
}

.mobile-menu-close:hover,
.mobile-menu-close:focus {
  background: transparent !important;
  transform: translateY(-2px);
}

/* Keep the hamburger button itself transparent on hover/focus */
.hamburger:hover,
.hamburger:focus,
.hamburger:focus-visible,
.hamburger.open:hover,
.hamburger.open:focus,
.hamburger.open:focus-visible,
.hamburger .hamburger-close:hover,
.hamburger.open .hamburger-close:hover {
  background: transparent !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99997;
  opacity: 0;
  transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.mobile-menu-backdrop.hidden {
  pointer-events: none;
  opacity: 0;
}

.mobile-menu-backdrop.visible {
  pointer-events: auto;
  opacity: 1;
}

/* Burger morph into X when open */
.hamburger.open .bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.hamburger.open .bar:nth-child(2) {
  opacity: 0;
  transform: translateX(-8px);
}

.hamburger.open .bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Prevent background scrolling while mobile menu is open */
body.no-scroll {
  overflow: hidden;
}

/* Smaller, lighter variant for the checkout page overlay */
@media (max-width: 500px) {
  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  /* Make hamburger icon black in mobile mode */
  .hamburger {
    color: #000000 !important;
  }

  .hamburger svg path {
    fill: #000000 !important;
    stroke: #000000 !important;
  }

  .hamburger .hamburger-open {
    color: #000000 !important;
  }

  .hamburger .hamburger-open svg,
  .hamburger .hamburger-open svg path {
    fill: #000000 !important;
    stroke: #000000 !important;
  }

  .hamburger .hamburger-close svg,
  .hamburger.open .hamburger-close svg {
    stroke: #000000 !important;
  }

  /* Make cart icon black in mobile mode */
  .top-actions .notif-btn img {
    filter: none !important;
  }

  /* Ensure the topbar inner center contains logo, hamburger & cart */
  .topbar-inner {
    justify-content: space-between;
    position: relative;
  }

  /* Center the logo horizontally in the header and vertically aligned */
  .topbar-inner .brand .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
  }

  /* Place the hamburger at the left edge of the header so logo remains centered */
  .brand .hamburger {
    order: 0;
    margin-right: 0;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
  }

  /* Keep the cart fixed to the right inside top-actions */
  .top-actions {
    position: relative;
  }

  /* Increase hero image size on max-width 500px (iPhone 12, etc.) */
  .hero-right {
    width: 100% !important;
    height: 500px !important;
    transform: none !important;
  }

  .hero-right img {
    width: 100% !important;
    height: 100% !important;
  }
}

/* Mobile header background (max-width: 480px) */
@media (max-width: 480px) {
  .topbar {
    /* Make background a neutral cream on small screens */
    background: #eeeee3 !important;
  }

  /* Mobile logo override: use nano.png, hide inner <img> if present and display
     the logo as a background to avoid needing HTML changes. This gives a
     consistent, single-file mobile logo across pages. */
  .topbar-inner .brand .logo img {
    display: none !important;
  }

  .topbar-inner .brand .logo {
    display: inline-block !important;
    width: 88px !important;
    height: 88px !important;
    background-image: url("../images/nano.png") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center center !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
}

/* FINAL OVERRIDE: Ensure hamburger button is absolutely transparent in all states */
#hamburgerBtn,
#hamburgerBtn.open,
button#hamburgerBtn,
button#hamburgerBtn.open {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Force SVG and its children to be transparent */
#hamburgerBtn svg,
#hamburgerBtn.open svg,
svg.icon-cancel,
svg.hamburger-close,
svg.icon-cancel path,
svg.hamburger-close path {
  background: transparent !important;
  background-color: transparent !important;
  stroke: #ffffff !important;
  fill: none !important;
}

/* Specific rules for the close icon when button is open */
#hamburgerBtn.open .icon-cancel,
#hamburgerBtn.open .hamburger-close {
  background: transparent !important;
  background-color: transparent !important;
}

/* Mobile mode: Make hamburger and cart icons black */
@media (max-width: 500px) {
  #hamburgerBtn svg,
  #hamburgerBtn.open svg,
  svg.icon-cancel,
  svg.hamburger-close,
  svg.icon-cancel path,
  svg.hamburger-close path {
    stroke: #000000 !important;
    fill: #000000 !important;
  }

  #hamburgerBtn svg path {
    fill: #000000 !important;
  }

  .hamburger svg path {
    fill: #000000 !important;
  }

  .top-actions .notif-btn img {
    filter: invert(0) !important;
  }
}

/* Coming Soon Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 200000;
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

/* Page loader overlay */
.loader-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(167, 163, 120, 0.562);
  z-index: 999999;
  transition: opacity 280ms ease, visibility 280ms ease;
}
.loader-overlay[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-spinner svg { width: 64px; height: 64px; display: block; }
.loader-spinner circle:nth-child(2) { stroke-dasharray: 126; stroke-dashoffset: 126; transform-origin: 50% 50%; animation: spin 1s linear infinite, dash 2.6s ease-in-out infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes dash { 0% { stroke-dashoffset: 126; } 50% { stroke-dashoffset: 31.5; } 100% { stroke-dashoffset: 126; } }

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.modal-content {
  position: relative;
  z-index: 10001;
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 8px;
  padding: 40px 30px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

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

.modal-body {
  text-align: center;
}

.modal-body h2 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.modal-body p {
  font-size: 14px;
  color: #666666;
  margin-bottom: 25px;
  letter-spacing: 0.5px;
  text-transform: none;
  font-weight: 400;
  line-height: 1.6;
}

.modal-body .btn-primary {
  background: #111111;
  color: #ffffff;
  border: none;
  padding: 10px 25px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.3s ease;
  letter-spacing: 1.5px;
}

.modal-body .btn-primary:hover {
  background: #333333;
}

.modal-body .btn-primary:active {
  transform: scale(0.98);
}