@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Prevent horizontal scroll globally (desktop and mobile) */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

/* Sticky header so the fixed mega can anchor under it */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  width: 100%;
  background-color: #E5E1DC;
  padding: 16px 8px 0px 16px;
  font-family: 'TT Norms','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

.header-top {
  padding: 12px 8px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  gap: 20px;
  position: relative;
}

/* Search / Logo / Actions */
.search-container { flex:1; max-width:400px; margin:0 20px; position:relative; }
.logo { flex:1; display:flex; justify-content:center; align-items:center; position:absolute; left:50%; transform:translateX(-50%); }
.logo-img { height:65px; transition:transform .3s ease; }
.logo-img:hover { transform: scale(1.05); }

.search-form { display:flex; width:100%; position:relative; align-items:center; }
.search-input {
  flex:1; padding:12px 16px 12px 45px; border:none; border-bottom:2px solid #191919; border-radius:0;
  font-size:16px; outline:none; background:#E5E1DC; transition:border-bottom-color .3s ease;
}
.search-input:focus { border-bottom-color:#000; }
.search-icon {
  position:absolute; left:12px; top:50%; transform:translateY(-50%); width:22px; height:22px; pointer-events:none; z-index:1;
  filter: invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.user-actions { flex:0 0 auto; display:flex; align-items:center; gap:15px; flex-shrink:0; justify-content:flex-end; }
.user-icons-container { display:flex; align-items:center; gap:12px; margin-left:12px; }
.user-icon {
  display:flex; align-items:center; justify-content:center; width:auto; height:auto; background:transparent;
  color:#191919; text-decoration:none; position:relative; padding:8px;
}
.user-icon:hover { background:transparent; color:#191919; }
.icon-svg { width: 35px; height:35px; fill:currentColor; }
.wishlist-count{
  position:absolute; top:-5px; right:-5px; background:#e74c3c; color:#fff; border-radius:50%; width:20px; height:20px;
  font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:bold; min-width:20px;
}

.auth-buttons { display:flex; gap:10px; align-items:center; }
.btn { padding:10px 20px; border-radius:0; text-decoration:none; font-weight:500; transition:all .3s ease; border:2px solid transparent; display:inline-flex; align-items:center; gap:8px; }
.btn-login { background:#333; color:#fff; border-color:#333; }
.btn-login:hover { background:#000; color:#fff; border-color:#000; }

/* Nav */
.header-navigation { background:transparent; border-bottom:none; padding:0; flex:0 0 auto; display:flex; justify-content:flex-end; align-items:center; margin-left:auto; margin-right:20px; }
.header-navigation .nav-menu { display:flex; list-style:none; margin:0; padding:0; justify-content:center; align-items:center; gap:4px; font-size:18px; }
.header-navigation .nav-item { position:relative; }
.header-navigation .nav-link {
  display:flex; align-items:center; gap:5px; padding:8px 12px; color:#191919; text-decoration:none; font-weight:500; font-size:18px;
  transition:all .3s ease; border-bottom:2px solid transparent;
}
.header-navigation .nav-link:hover { color:#191919; border-bottom-color:#191919; background:rgba(0,0,0,.05); }

/* Hover functionality removed - mega menu only shows on click */

/* ------- MEGA MENU: DESKTOP fixed layer ------- */
.mega-menu {
  position: fixed;              /* true viewport-fixed */
  top: var(--header-bottom, 100px);
  left: 0;
  right: 0;
  width: 100vw;
  background-color: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  z-index: 1101;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  /* IMPORTANT: do NOT use contain here (can break fixed painting) */
}

.mega-menu.show {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Triangle anchored to same header-bottom var */
/* Make the triangle a notch attached to the top of the mega menu */
.mega-menu.show::before {
    content: "";
    position: fixed;
    /* place the triangle so its base touches the mega's top edge */
    top: calc(var(--header-bottom, 100px) - 12px);  /* 12px = triangle height */
    left: var(--triangle-left, 50%);
    transform: translateX(-50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    /* Upward-pointing triangle (tip up, base down) */
    border-top: 12px solid #f5f5f5;                 /* same color as mega background */
    z-index: 1102;
    pointer-events: none;
    /* optional: subtle outline so it sits nicely on top border */
    box-shadow: 0 -1px 0 0 #e0e0e0;
  }
  
  /* If you had a previous downward triangle, remove or override it */
  .mega-menu.show::after { content: none !important; }
  

/* Mega content */
.mega-menu-container { max-width: 1400px; margin: 0 auto; padding: 52px 96px; }
.mega-menu-content { display: flex; gap: 40px; }
.mega-menu-section { flex: 1; }

.fabric-section { padding-left: 0; }
.fabric-image-container { margin-top: 24px; width: 294px; height: 500px; }
.fabric-showcase-image { width:294px; height:500px; object-fit:cover; }

.mega-menu-column { width: 930px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; padding-top:8px; }
.mega-menu-line { width:930px; height:1.5px; background:#333; }
.categories-container { display:flex; gap:24px; margin-top:25px; width:100%; }

.category-column { width:295px; display:flex; flex-direction:column; padding-top:18px; }
.explore-section { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #333; padding-bottom:8px; margin-top:16px; text-decoration:none; color:inherit; }
.explore-text { font-size:16px; font-weight:500; color:#000; text-transform:uppercase; text-align:left; text-decoration:none; }
.explore-arrow { width:16px; height:16px; }
.category-image-section { margin-top:24px; }
.category-image { width:295px; height:350px; object-fit:cover; }

.category-name { font-size:20px; font-weight:700; color:#000; text-transform:uppercase; margin:0 0 8px 0; line-height:1.2; }
.category-description { font-size:14px; font-weight:400; color:#374151; margin:0; line-height:1.4; }

.collection-section { padding-left:0; }
.collections-container { margin-top:24px; width:100%; }
.collection-row { display:flex; gap:24px; margin-bottom:60px; }
.collection-row:last-child { margin-bottom:0; }
.collection-item { width:295px; display:flex; flex-direction:column; }
.collection-image-container { width:100%; margin-bottom:16px; }
.collection-image { width:295px; height:250px; object-fit:cover; }
.collection-details { display:flex; flex-direction:column; }
.collection-name { font-size:20px; font-weight:500; color:#000; text-transform:uppercase; margin:0 0 8px 0; line-height:1.2; }
.collection-description { font-size:14px; font-weight:400; color:#374151; margin:0 0 16px 0; line-height:1.4; }
.collection-explore { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #333; padding-bottom:8px; text-decoration:none; color:inherit; }
.collection-explore:hover { text-decoration:none; color:inherit; }
.explore-collection-text { font-size:16px; font-weight:500; color:#000; text-transform:uppercase; text-align:left; }

.mega-menu-title { font-family:'Collingar','TT Norms','Inter',sans-serif; font-size:32px; text-transform:uppercase; color:#191919; margin:0 0 24px 0; font-weight:600; line-height:1.1; }

/* Sector */
.sectors-container { margin-top:24px; width:100%; }
.sector-row { display:flex; gap:24px; margin-bottom:60px; }
.sector-row:last-child { margin-bottom:0; }
.sector-item { width:400px; height:370px; display:flex; flex-direction:column; }
.sector-image-container { width:100%; margin-bottom:16px; }
.sector-image { width:400px; height:250px; object-fit:cover; }
.sector-details { display:flex; flex-direction:column; flex:1; }
.sector-name { font-size:20px; font-weight:500; color:#000; text-transform:uppercase; margin:0 0 8px 0; line-height:1.2; }
.sector-description { font-size:14px; font-weight:400; color:#374151; margin:0 0 16px 0; line-height:1.4; }
.sector-explore { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #333; padding-bottom:8px; text-decoration:none; color:inherit; }
.sector-explore:hover { text-decoration:none; color:inherit; }
.explore-sector-text { font-size:16px; font-weight:500; color:#000; text-transform:uppercase; text-align:left; }

/* --------- Responsive --------- */
@media (max-width: 1024px) {
  .header-container { flex-wrap:wrap; gap:15px; }
  .search-container { order:3; width:100%; max-width:none; margin:10px 0 0 0; }
  .header-navigation { order:2; width:100%; justify-content:center; }
  .logo-img { height:50px; }
  .user-actions { gap:10px; }
  .btn { padding:8px 16px; font-size:14px; }
  .header-navigation .nav-menu { gap:4px; }
  .header-navigation .nav-link { padding:6px 10px; font-size:18px; }
}

@media (max-width: 768px) {
  /* Prevent horizontal scrolling on mobile */
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  /* Hide desktop-centered logo to avoid overlap */
  /* Hide the desktop-centered logo on mobile to avoid duplicates */
.header-container > .logo { display: none !important; }

/* Constrain rows on mobile */
.site-header, .header-top { width: 100%; }
.mobile-top-row, .mobile-logo-row, .mobile-nav-row { max-width: 360px; margin: 0 auto; }

/* Mobile top row layout: search (left), login (right) - NO logo */
.mobile-top-row{
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  min-height: 48px;           /* ensure enough height for touch targets */
}

/* Mobile logo row - centered */
.mobile-logo-row{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
  padding: 8px 0;
}

/* MOBILE STYLES - Force override desktop rules */
@media (max-width: 768px) {
  .mobile-logo-row { 
    display: flex !important; 
  }
  .mobile-top-row { 
    display: flex !important; 
  }
  .mobile-logo-row .mobile-logo { 
    display: inline-flex !important; 
    width: auto !important;
    height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mobile-logo-row .mobile-logo-img { 
    display: block !important; 
    height: 40px !important;
    width: auto !important;
  }
}

/* Search stretches on the left */
.mobile-top-row .search-container{
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0;               /* prevent overflow */
  margin: 0 !important;
}

.mobile-top-row .search-form{ width: 100% !important; }

.mobile-top-row .search-input{
  width: 100% !important;
  font-size: 12px;
  padding: 10px 12px 10px 36px;
}

.mobile-top-row .search-icon{
  left: 8px;
  width: 16px; height: 16px;
}

/* Login / user actions on the right */
.mobile-top-row .user-actions{
  order: 3 !important;
  margin-left: 8px;           /* tiny gap from search */
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Hide desktop header pieces on mobile */
.header-container > .search-container,
.header-container > .header-navigation,
.header-container > .user-actions { display: none !important; }

/* Keep your existing mobile nav row rules */
.mobile-nav-row{ display: block !important; width: 100%; padding: 6px 12px; }
.mobile-nav-row .header-navigation{ display: block !important; margin: 0; }
.mobile-nav-row .nav-menu{
  display: flex !important; gap: 12px; justify-content: center;
  flex-wrap: nowrap; padding: 0; margin: 0; list-style: none;
}
.mobile-nav-row .nav-item{ margin: 0; }
.mobile-nav-row .nav-link{ font-size: 12px; padding: 6px 8px; text-decoration: none; }

}

@media (min-width: 769px) {
  .mobile-top-row, .mobile-logo-row, .mobile-nav-row { display: none !important; }
}

/* MOBILE STYLES - Force override desktop rules */
@media (max-width: 768px) {
  .mobile-top-row { 
    display: flex !important; 
  }
  .mobile-logo-row { 
    display: flex !important; 
  }
  .mobile-logo-row .mobile-logo { 
    display: inline-flex !important; 
    width: auto !important;
    height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mobile-logo-row .mobile-logo-img { 
    display: block !important; 
    height: 40px !important;
    width: auto !important;
  }
}

@media (max-width: 480px) {
  .header-top { padding:12px 8px; }
  .logo-img { height:40px; }
  .search-input { font-size:14px; padding:8px 12px; }
  .btn { padding:6px 12px; font-size:12px; }
}

/* Login Popup Styles */
.login-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.login-popup.show {
  display: flex;
}

.login-popup-content {
  width: 1125px;
  height: 800px;
  background-color: #ffffff;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.login-image-column {
  width: 525px;
  height: 800px;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-form-column {
  width: 600px;
  height: 800px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 80px 40px 40px 40px;
}

.login-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.login-close-btn:hover {
  background-color: #f0f0f0;
}

.close-icon {
  width: 28px;
  height: 28px;
  fill: #666666;
}

.login-form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 511px;
}

.login-logo {
  height: 60px;
  margin-bottom: 80px;
}

.login-title {
  font-family: 'New York', serif;
  font-size: 52px;
  font-weight: 400;
  text-transform: uppercase;
  color: #191919;
  margin: 0 0 108px 0;
  text-align: center;
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 40px;
}

/* Override contact form styling for login popup */
.login-form .contact-input-wrap {
  width: 450px;
}

.login-form .contact-input-wrap::after {
  content: none;
}

.login-form .contact-input {
  width: 450px;
  background: transparent;
  border: none;
  border-bottom: 2px solid #e0e0e0;
  color: #191919;
  font-family: 'TT Norms', 'Inter', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  padding: 15px 4px;
  outline: none;
  transition: border-color 0.3s ease;
}

.login-form .contact-input:focus {
  border-bottom-color: #191919;
}

.login-form .contact-input::placeholder {
  color: #999999;
  opacity: 0.8;
}

.login-submit-btn {
  width: 100%;
  height: 52px;
  background-color: #191919;
  color: #ffffff;
  border: none;
  font-family: 'TT Norms', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 40px;
}

.login-submit-btn:hover {
  background-color: #333333;
}

.login-signup-text {
  font-family: 'TT Norms', 'Inter', sans-serif;
  font-size: 16px;
  color: #666666;
  text-align: center;
  margin: 0;
}

.signup-link {
  color: #191919;
  text-decoration: none;
  font-weight: 500;
  margin-left: 4px;
}

.signup-link:hover {
  text-decoration: underline;
}

/* Signup Popup Styles */
.signup-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.signup-popup.show {
  display: flex;
}

.signup-popup-content {
  width: 1125px;
  height: 800px;
  background-color: #ffffff;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.signup-image-column {
  width: 525px;
  height: 800px;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.signup-form-column {
  width: 600px;
  height: 800px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 40px 40px 40px;
}

.signup-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.signup-close-btn:hover {
  background-color: #f0f0f0;
}

.signup-form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 511px;
}

.signup-logo {
  height: 60px;
  margin-bottom: 40px;
}

.signup-title {
  font-family: 'New York', serif;
  font-size: 52px;
  font-weight: 400;
  text-transform: uppercase;
  color: #191919;
  margin: 0 0 50px 0;
  text-align: center;
}

.signup-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

/* Override contact form styling for signup popup */
.signup-form .contact-input-wrap {
  width: 450px;
}

.signup-form .contact-input-wrap::after {
  content: none;
}

.signup-form .contact-input {
  width: 450px;
  background: transparent;
  border: none;
  border-bottom: 2px solid #e0e0e0;
  color: #191919;
  font-family: 'TT Norms', 'Inter', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  padding: 15px 4px;
  outline: none;
  transition: border-color 0.3s ease;
}

.signup-form .contact-input:focus {
  border-bottom-color: #191919;
}

.signup-form .contact-input::placeholder {
  color: #999999;
  opacity: 0.8;
}

.signup-submit-btn {
  width: 100%;
  height: 52px;
  background-color: #191919;
  color: #ffffff;
  border: none;
  font-family: 'TT Norms', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 40px;
}

.signup-submit-btn:hover {
  background-color: #333333;
}

.signup-login-text {
  font-family: 'TT Norms', 'Inter', sans-serif;
  font-size: 16px;
  color: #666666;
  text-align: center;
  margin: 0;
}

.login-link {
  color: #191919;
  text-decoration: none;
  font-weight: 500;
  margin-left: 4px;
}

.login-link:hover {
  text-decoration: underline;
}

/* Password toggle button styles */
.password-toggle {
  position: absolute;
  right: -50px; /* moved more left from 10px */
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.password-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.eye-icon {
  width: 20px;
  height: 20px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.password-toggle:hover .eye-icon {
  opacity: 1;
}

/* Adjust input padding to accommodate eye icon */
/*
.login-form .contact-input-wrap:has(.password-toggle) .contact-input,
.signup-form .contact-input-wrap:has(.password-toggle) .contact-input {
  padding-right: 40px;
}
*/

/* Fallback for browsers that don't support :has() */
/* Ensure input text doesn't overlap the toggle (apply universally within auth forms) */
.login-form .contact-input,
.signup-form .contact-input {
  padding-right: 54px; /* increased from 44px to accommodate moved toggle */
}

/* ---------------- Login Popup: Mobile reductions ---------------- */
@media (max-width: 768px) {
  /* Align popup to the far left on mobile */
  .login-popup {
    justify-content: flex-start;  /* horizontal: left */
    align-items: flex-start;      /* vertical: top */
    padding: 300px 0 0 15px;         /* small top and left offset */
    overflow-x: hidden;             /* prevent horizontal scroll on overlay */
  }
  .login-popup-content {
    width: 92vw;
    height: auto;
    flex-direction: column;
    border-radius: 6px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    overflow-x: hidden;            /* lock horizontal scroll */
  }
  .login-image-column { display: none; }
  .login-form-column {
    width: 100%;
    height: auto;
    padding: 24px 16px 20px 16px;
    box-sizing: border-box;        /* include padding in width to avoid overflow */
    overflow-x: hidden;
  }
  .login-form-container { max-width: 320px; }
  .login-logo { height: 40px; margin-bottom: 24px; }
  .login-title { font-size: 28px; margin: 0 0 24px 0; }
  .login-form { gap: 16px; margin-bottom: 24px; }
  .login-form .contact-input-wrap { width: 100%; }
  .login-form .contact-input {
    width: 100%;
    font-size: 14px;
    padding: 12px 4px;
  }
  .password-toggle { right: 0px; }
  .login-submit-btn { height: 44px; font-size: 14px; margin-top: 24px; }
  .login-signup-text { font-size: 14px; }

  /* Signup popup: mirror mobile behavior */
  .signup-popup {
    justify-content: flex-start;  /* horizontal: left */
    align-items: flex-start;      /* vertical: top */
    padding: 300px 0 0 15px;         /* small top and left offset */
    overflow-x: hidden;
  }
  .signup-popup-content {
    width: 92vw;
    height: auto;
    flex-direction: column;
    border-radius: 6px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .signup-image-column { display: none; }
  .signup-form-column {
    width: 100%;
    height: auto;
    padding: 24px 16px 20px 16px;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .signup-form-container { max-width: 320px; }
  .signup-logo { height: 40px; margin-bottom: 24px; }
  .signup-title { font-size: 28px; margin: 0 0 24px 0; }
  .signup-form { gap: 16px; margin-bottom: 24px; }
  .signup-form .contact-input-wrap { width: 100%; }
  .signup-form .contact-input {
    width: 100%;
    font-size: 14px;
    padding: 12px 4px;
  }
  .signup-submit-btn { height: 44px; font-size: 14px; margin-top: 24px; }
  .signup-login-text { font-size: 14px; }
}

@media (max-width: 480px) {
  .login-form-container { max-width: 280px; }
  .login-title { font-size: 24px; }
  .login-submit-btn { height: 40px; font-size: 13px; }
  .signup-form-container { max-width: 280px; }
  .signup-title { font-size: 24px; }
  .signup-submit-btn { height: 40px; font-size: 13px; }
}