/* ============================================================
   MARCOS ANDRADE MODA — MAIN STYLESHEET
   Luxury Fashion E-Commerce & Editorial Portfolio
   ============================================================ */

/* -----------------------------------------------
   1. CSS RESET & CUSTOM PROPERTIES
   ----------------------------------------------- */
:root {
  /* Brand Color Palette */
  --black: #0A0A0A;
  --white: #FAFAFA;
  --champagne: #E8D5B0;
  --burgundy: #5C1A1A;
  --dusty-rose: #D4A5A5;
  --slate-blue: #3D5A73;
  --gold: #C9A84C;
  --nude: #C4A882;
  
  /* Neutral Grays */
  --dark-bg: #111111;
  --light-gray: #F5F5F5;
  --medium-gray: #8E8E93;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-color-light: rgba(10, 10, 10, 0.1);
  
  /* Typography */
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-price: 'Montserrat', sans-serif;
  
  /* Standard Spacings */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  
  /* Transition curve */
  --transition-bezier: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-speed: 0.4s;
  
  /* Header Height */
  --header-height: 80px;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--white);
  color: var(--black);
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--white);
}
::-webkit-scrollbar-thumb {
  background: var(--black);
}

/* -----------------------------------------------
   2. TYPOGRAPHY
   ----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-style: italic;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-style: italic;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

p {
  font-size: 0.95rem;
  color: #333333;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all var(--transition-speed) var(--transition-bezier);
}

blockquote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--black);
  border-left: 2px solid var(--champagne);
  padding-left: 1.5rem;
  margin: 2rem 0;
}

.text-light {
  color: var(--white);
}

/* -----------------------------------------------
   3. LAYOUT UTILITIES
   ----------------------------------------------- */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section-padding {
  padding: var(--space-lg) 0;
}

.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .section-padding { padding: var(--space-xl) 0; }
}

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }

/* -----------------------------------------------
   4. BUTTONS & CTAS
   ----------------------------------------------- */
.btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--black);
  cursor: pointer;
  transition: all var(--transition-speed) var(--transition-bezier);
  background: none;
  text-align: center;
}

.btn-primary {
  background-color: var(--black);
  color: var(--white);
}

.btn-primary:hover {
  background-color: transparent;
  color: var(--black);
}

.btn-secondary {
  background-color: transparent;
  color: var(--black);
}

.btn-secondary:hover {
  background-color: var(--black);
  color: var(--white);
}

.btn-gold {
  background-color: var(--champagne);
  border-color: var(--champagne);
  color: var(--black);
}

.btn-gold:hover {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.btn-link {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 5px;
}

.btn-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform var(--transition-speed) var(--transition-bezier);
}

.btn-link:hover::after {
  transform: scaleX(1);
}

/* -----------------------------------------------
   5. PRELOADER
   ----------------------------------------------- */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--black);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-speed) ease-in-out, visibility var(--transition-speed);
}

.preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.preloader__inner {
  text-align: center;
  color: var(--white);
}

.preloader__logo {
  max-width: 150px;
  margin-bottom: 2rem;
  filter: invert(1);
  animation: pulse 2s infinite ease-in-out;
}

.preloader__progress {
  width: 200px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 0 auto 1rem;
  position: relative;
  overflow: hidden;
}

.preloader__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: var(--champagne);
  animation: loadProgress 2.5s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}

.preloader__text {
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--champagne);
  opacity: 0.8;
}

@keyframes loadProgress {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* -----------------------------------------------
   6. COOKIE CONSENT
   ----------------------------------------------- */
.cookie-banner {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  background-color: var(--black);
  color: var(--white);
  padding: 1.5rem var(--space-md);
  z-index: 900;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(150%);
  animation: slideUp 0.8s 3s forwards var(--transition-bezier);
}

.cookie-banner__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.cookie-banner__text {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.cookie-banner__actions {
  display: flex;
  gap: 1rem;
}

.cookie-banner__btn {
  padding: 0.6rem 1.5rem;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
}

.cookie-banner__btn--accept {
  background-color: var(--champagne);
  color: var(--black);
}

.cookie-banner__btn--settings {
  background-color: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 768px) {
  .cookie-banner {
    max-width: 450px;
    right: auto;
  }
}

/* -----------------------------------------------
   7. HEADER & NAVIGATION
   ----------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 800;
  background-color: transparent;
  transition: background-color var(--transition-speed), border-bottom var(--transition-speed);
  border-bottom: 1px solid transparent;
}

.header.scrolled {
  background-color: var(--white);
  border-bottom: 1px solid var(--light-gray);
}

.header__top {
  display: grid;
  grid-template-columns: 80px 1fr 120px;
  align-items: center;
  height: var(--header-height);
  padding: 0 var(--space-md);
}

.header__menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 25px;
}

.header__menu-bar {
  width: 100%;
  height: 1px;
  background-color: var(--black);
  transition: transform var(--transition-speed), opacity var(--transition-speed);
}

.header--transparent:not(.scrolled) .header__menu-bar,
.header--transparent:not(.scrolled) .header__icon,
.header--transparent:not(.scrolled) .header__logo-img {
  /* Dynamic values for dark mode layout in transparent mode */
  filter: invert(1);
}

/* Center Logo */
.header__center {
  display: flex;
  justify-content: center;
}

.header__logo {
  display: block;
}

.header__logo-img {
  max-height: 45px;
  width: auto;
  transition: filter var(--transition-speed);
}

/* Right Icons */
.header__right {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
}

.header__icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--black);
  position: relative;
}

.header__badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--gold);
  color: var(--white);
  font-family: var(--font-price);
  font-size: 0.6rem;
  font-weight: 600;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Navigation Menu Below Logo */
.header__nav {
  display: none;
  border-top: 1px solid rgba(10, 10, 10, 0.05);
  background-color: var(--white);
}

.header__nav-list {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 3rem;
  padding: 1rem 0;
}

.header__nav-link {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.header__nav-link:hover {
  color: var(--gold);
}

@media (min-width: 1024px) {
  .header__nav {
    display: block;
  }
}

/* -----------------------------------------------
   8. MOBILE MENU OVERLAY
   ----------------------------------------------- */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--black);
  z-index: 950;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
  color: var(--white);
}

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

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

.mobile-menu__logo {
  max-height: 35px;
  filter: invert(1);
}

.mobile-menu__close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
}

.mobile-menu__nav {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 150px);
}

.mobile-menu__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mobile-menu__link {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 1px;
}

.mobile-menu__link:hover {
  color: var(--champagne);
  padding-left: 10px;
}

.mobile-menu__secondary {
  list-style: none;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
}

.mobile-menu__link--secondary {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--medium-gray);
}

.mobile-menu__social {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.mobile-menu__social-link {
  font-size: 1.2rem;
  color: var(--champagne);
}

/* -----------------------------------------------
   9. MOBILE BOTTOM NAVIGATION BAR
   ----------------------------------------------- */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 60px;
  background-color: var(--white);
  border-top: 1px solid var(--light-gray);
  z-index: 750;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
}

.mobile-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--black);
}

.mobile-nav__text {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
  font-weight: 500;
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none;
  }
}

/* -----------------------------------------------
   10. CINEMATIC HERO
   ----------------------------------------------- */
.hero {
  height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  overflow: hidden;
}

.hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  animation: slowZoom 15s infinite alternate ease-in-out;
}

@keyframes slowZoom {
  0% { transform: scale(1.02); }
  100% { transform: scale(1.08); }
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.4) 0%, rgba(10, 10, 10, 0.2) 50%, rgba(10, 10, 10, 0.6) 100%);
  z-index: 2;
}

.hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 800px;
  padding: 0 var(--space-md);
}

.hero__brand {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--champagne);
  display: block;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeInUpSoft 1s 0.5s forwards;
}

.hero__title {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-style: normal;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.1;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeInUpSoft 1.2s 0.8s forwards;
}

.hero__cta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid var(--white);
  padding-bottom: 5px;
  opacity: 0;
  animation: fadeInUpSoft 1.5s 1.2s forwards;
}

.hero__cta:hover {
  color: var(--champagne);
  border-color: var(--champagne);
  padding-left: 8px;
}

.hero__scroll-indicator {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.2);
  display: block;
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background-color: var(--champagne);
  animation: scrollLine 2s infinite ease-in-out;
}

@keyframes scrollLine {
  0% { transform: translateY(-100%); }
  80% { transform: translateY(200%); }
  100% { transform: translateY(200%); }
}

/* -----------------------------------------------
   11. COLLECTION HERO SPLIT
   ----------------------------------------------- */
.collection-hero {
  background-color: var(--white);
}

.collection-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 90vh;
}

.collection-hero__image-col {
  height: 60vh;
  position: relative;
  overflow: hidden;
}

.collection-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection-hero__content-col {
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
}

.collection-hero__season {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 1rem;
  display: block;
}

.collection-hero__title {
  margin-bottom: 2rem;
}

.collection-hero__quote {
  border-left: none;
  padding-left: 0;
  margin: 0 0 2rem 0;
}

.collection-hero__count {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--medium-gray);
  margin-bottom: 2rem;
}

.collection-hero__cta {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--black);
  padding-bottom: 5px;
  margin-bottom: 3.5rem;
}

.collection-hero__cta:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.collection-hero__previews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  border-top: 1px solid var(--light-gray);
  padding-top: 2.5rem;
}

.collection-hero__preview {
  text-align: center;
}

.collection-hero__preview-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  margin-bottom: 0.8rem;
}

.collection-hero__preview-name {
  font-size: 0.7rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collection-hero__preview-price {
  font-family: var(--font-price);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gold);
}

@media (min-width: 1024px) {
  .collection-hero__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .collection-hero__image-col {
    height: auto;
  }
  .collection-hero__content-col {
    padding: var(--space-md) var(--space-lg);
  }
}

/* -----------------------------------------------
   12. PRODUCT CARDS & GRID
   ----------------------------------------------- */
.section-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-header__title {
  font-size: clamp(2rem, 3.5vw, 3rem);
}

.section-header__subtitle {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--medium-gray);
  margin-top: 0.8rem;
}

.product-card {
  position: relative;
  margin-bottom: 2rem;
  transition: transform var(--transition-speed);
}

.product-card__image-wrapper {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: var(--light-gray);
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--transition-bezier);
}

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

.product-card__quick-view,
.product-card__add {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.2rem;
  background-color: rgba(10, 10, 10, 0.9);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transform: translateY(101%);
  transition: transform 0.4s var(--transition-bezier);
  backdrop-filter: blur(5px);
}

.product-card:hover .product-card__quick-view,
.product-card:hover .product-card__add {
  transform: translateY(0);
}

.product-card__info {
  padding-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.product-card__collection {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--medium-gray);
}

.product-card__name {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.product-card__price {
  font-family: var(--font-price);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--black);
}

.product-card__swatches {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.product-card__swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid transparent;
  display: inline-block;
  cursor: pointer;
}

.product-card__swatch--active {
  box-shadow: 0 0 0 1.5px var(--white), 0 0 0 2.5px var(--black);
}

/* Asymmetric Editorial Grid */
.new-arrivals__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.new-arrivals__side {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .new-arrivals__side {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .new-arrivals__grid {
    grid-template-columns: 1.5fr 1fr;
  }
  .new-arrivals__side {
    grid-template-columns: 1fr;
    align-content: space-between;
  }
  .product-card--large {
    height: 100%;
  }
  .product-card--large .product-card__image-wrapper {
    height: calc(100% - 70px);
  }
}

.section-footer {
  text-align: center;
  margin-top: var(--space-lg);
}

.section-footer__link {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  border-bottom: 1px solid var(--black);
  padding-bottom: 4px;
}

.section-footer__link:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* -----------------------------------------------
   13. COLLECTIONS ARCHIVE (Horizontal Scroll)
   ----------------------------------------------- */
.collections-archive {
  background-color: var(--light-gray);
  padding: var(--space-lg) 0;
}

.collections-archive__scroll {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--space-md) var(--space-md);
  scrollbar-width: none; /* Firefox */
}

.collections-archive__scroll::-webkit-scrollbar {
  display: none; /* Safari & Chrome */
}

.collection-card {
  flex: 0 0 85vw;
  scroll-snap-align: start;
}

.collection-card__image-wrapper {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
}

.collection-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--transition-bezier);
}

.collection-card:hover .collection-card__image {
  transform: scale(1.08);
}

.collection-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.1) 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  color: var(--white);
}

.collection-card__season {
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.collection-card__name {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 300;
  letter-spacing: 1px;
  margin-bottom: 0.2rem;
}

.collection-card__count {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.5rem;
}

.collection-card__cta {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  align-self: flex-start;
  border-bottom: 1px solid var(--white);
  padding-bottom: 4px;
}

.collection-card__cta:hover {
  color: var(--champagne);
  border-color: var(--champagne);
}

@media (min-width: 768px) {
  .collection-card {
    flex: 0 0 45vw;
  }
}

@media (min-width: 1024px) {
  .collection-card {
    flex: 0 0 23vw;
  }
  .collections-archive {
    padding: var(--space-xl) 0;
  }
}

/* -----------------------------------------------
   14. SHOPPABLE LOOKBOOK
   ----------------------------------------------- */
.lookbook__editorial {
  position: relative;
}

.lookbook__image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.lookbook__image {
  width: 100%;
  height: 80vh;
  object-fit: cover;
}

.lookbook__hotspot {
  position: absolute;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 100;
  outline: none;
}

.lookbook__hotspot-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--white);
  opacity: 0.4;
  transform: scale(1);
  animation: pulse 2s infinite ease-out;
}

.lookbook__hotspot-dot {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--white);
  border: 1px solid var(--black);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: transform var(--transition-speed) var(--transition-bezier);
}

.lookbook__hotspot:hover .lookbook__hotspot-dot {
  transform: scale(1.3);
  background-color: var(--champagne);
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.5; }
  50% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}

.lookbook__hotspot-card {
  position: absolute;
  background-color: var(--white);
  padding: 1rem;
  border: 1px solid var(--light-gray);
  box-shadow: 0 10px 30px rgba(10, 10, 10, 0.15);
  width: 220px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all var(--transition-speed) var(--transition-bezier);
}

.lookbook__hotspot-card.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lookbook__hotspot-card-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.lookbook__hotspot-card-name {
  font-size: 0.75rem;
  font-weight: 500;
}

.lookbook__hotspot-card-price {
  font-family: var(--font-price);
  font-size: 0.8rem;
  color: var(--gold);
}

.lookbook__hotspot-card-link {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  border-bottom: 1px solid var(--black);
  align-self: flex-start;
  padding-bottom: 2px;
  margin-top: 4px;
}

/* -----------------------------------------------
   15. THE DESIGNER SECTION
   ----------------------------------------------- */
.designer {
  background-color: var(--black);
  color: var(--white);
}

.designer__grid {
  display: grid;
  grid-template-columns: 1fr;
}

.designer__image-col {
  height: 60vh;
  position: relative;
  overflow: hidden;
}

.designer__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter var(--transition-speed);
}

.designer:hover .designer__image {
  filter: grayscale(0);
}

.designer__content-col {
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
}

.designer__tag {
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--champagne);
  display: block;
  margin-bottom: 1.5rem;
}

.designer__title {
  margin-bottom: 2.5rem;
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.designer__philosophy {
  border-left: 2px solid var(--champagne);
  padding-left: 1.5rem;
  font-size: 1.4rem;
  font-style: italic;
  margin-bottom: 2.5rem;
}

.designer__bio {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.designer__bio p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.8;
}

.designer__cta {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid var(--white);
  padding-bottom: 5px;
}

.designer__cta:hover {
  color: var(--champagne);
  border-color: var(--champagne);
}

@media (min-width: 1024px) {
  .designer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .designer__image-col {
    height: auto;
  }
  .designer__content-col {
    padding: var(--space-md) var(--space-lg);
  }
}

/* -----------------------------------------------
   16. SUSTAINABILITY SECTION
   ----------------------------------------------- */
.sustainability {
  background-color: var(--white);
}

.sustainability__pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.sustainability__card {
  padding: 3rem 2rem;
  background-color: var(--light-gray);
  border: 1px solid transparent;
  transition: all var(--transition-speed) var(--transition-bezier);
}

.sustainability__card:hover {
  background-color: var(--white);
  border-color: var(--champagne);
  box-shadow: 0 15px 40px rgba(10, 10, 10, 0.05);
}

.sustainability__icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 1.5rem;
}

.sustainability__card-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
}

.sustainability__card-text {
  font-size: 0.85rem;
  line-height: 1.7;
  color: #555555;
}

@media (min-width: 768px) {
  .sustainability__pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -----------------------------------------------
   17. JOURNAL PREVIEW SECTION
   ----------------------------------------------- */
.journal {
  background-color: var(--white);
  border-top: 1px solid var(--light-gray);
}

.journal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.journal-card {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border: 1px solid var(--light-gray);
  transition: box-shadow var(--transition-speed);
}

.journal-card:hover {
  box-shadow: 0 15px 40px rgba(10, 10, 10, 0.08);
}

.journal-card__image-wrapper {
  aspect-ratio: 16/10;
  overflow: hidden;
}

.journal-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--transition-bezier);
}

.journal-card:hover .journal-card__image {
  transform: scale(1.04);
}

.journal-card__content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.journal-card__category {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
  font-weight: 500;
}

.journal-card__title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 400;
}

.journal-card__excerpt {
  font-size: 0.85rem;
  color: #666666;
  line-height: 1.6;
}

.journal-card__link {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  border-bottom: 1px solid var(--black);
  align-self: flex-start;
  padding-bottom: 2px;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .journal__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -----------------------------------------------
   18. CLIENT COMMUNITY SHOWCASE
   ----------------------------------------------- */
.community {
  background-color: var(--white);
  padding: var(--space-lg) 0;
}

.community__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: var(--space-lg);
}

.community__item {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background-color: var(--light-gray);
}

.community__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--transition-bezier);
}

.community__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  opacity: 0;
  transition: opacity 0.4s var(--transition-bezier);
  padding: 1rem;
  text-align: center;
}

.community__item:hover .community__overlay {
  opacity: 1;
}

.community__item:hover .community__image {
  transform: scale(1.05);
}

.community__product {
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 500;
}

.community__link {
  color: var(--champagne);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--champagne);
  padding-bottom: 2px;
}

.community__hashtag {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-style: italic;
}

@media (min-width: 768px) {
  .community__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}

/* -----------------------------------------------
   19. NEWSLETTER & PRIVILEGES
   ----------------------------------------------- */
.newsletter {
  background-color: var(--black);
  padding: var(--space-lg) 0;
}

.newsletter__container {
  max-width: 800px;
  margin: 0 auto;
}

.newsletter__frame {
  border: 1px solid var(--gold);
  padding: 4rem 2rem;
  text-align: center;
  color: var(--white);
}

.newsletter__title {
  font-size: 1.8rem;
  letter-spacing: 4px;
  margin-bottom: 1rem;
  color: var(--champagne);
}

.newsletter__text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1px;
  margin-bottom: 3rem;
  line-height: 1.6;
}

.newsletter__form {
  max-width: 500px;
  margin: 0 auto 1.5rem;
}

.newsletter__input-group {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 0.5rem;
}

.newsletter__input {
  background: none;
  border: none;
  width: 100%;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.5rem;
  outline: none;
}

.newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.newsletter__submit {
  background: none;
  border: none;
  color: var(--champagne);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 2px;
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem;
  white-space: nowrap;
}

.newsletter__submit:hover {
  color: var(--white);
}

.newsletter__promise {
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--medium-gray);
}

/* -----------------------------------------------
   20. PERSONAL SHOPPING SECTION
   ----------------------------------------------- */
.personal-shopping {
  background-color: var(--white);
}

.personal-shopping__grid {
  display: grid;
  grid-template-columns: 1fr;
}

.personal-shopping__image-col {
  height: 50vh;
  position: relative;
  overflow: hidden;
}

.personal-shopping__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.personal-shopping__content-col {
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 500px;
  margin: 0 auto;
}

.personal-shopping__title {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
}

.personal-shopping__text {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #444444;
  margin-bottom: 2.5rem;
}

.personal-shopping__cta {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  background-color: var(--black);
  padding: 1rem 2.5rem;
  border: 1px solid var(--black);
}

.personal-shopping__cta:hover {
  background-color: transparent;
  color: var(--black);
}

@media (min-width: 1024px) {
  .personal-shopping__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .personal-shopping__image-col {
    height: auto;
  }
  .personal-shopping__content-col {
    padding: var(--space-md) var(--space-lg);
  }
}

/* -----------------------------------------------
   21. THE SHOP PAGE (TIENDA.HTML)
   ----------------------------------------------- */
.page-header {
  position: relative;
  height: 50vh;
  width: 100%;
  background-color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
}

.page-header__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.page-header__content {
  position: relative;
  z-index: 10;
}

.page-header__title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.breadcrumbs {
  padding: 1.5rem 0;
  display: flex;
  gap: 8px;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--medium-gray);
  border-bottom: 1px solid var(--light-gray);
  margin-bottom: 2rem;
}

.breadcrumbs__link:hover {
  color: var(--black);
}

.breadcrumbs__sep {
  opacity: 0.5;
}

.breadcrumbs__current {
  color: var(--black);
  font-weight: 500;
}

/* Filter bar styling */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--light-gray);
  margin-bottom: 3rem;
}

.filter-bar__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-bar__chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-bar__chips::-webkit-scrollbar {
  display: none;
}

.filter-bar__chip {
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--light-gray);
  background-color: var(--light-gray);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-speed);
}

.filter-bar__chip--active {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.filter-bar__sort {
  position: relative;
}

.filter-bar__select {
  padding: 0.5rem 2rem 0.5rem 1rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--light-gray);
  background-color: var(--white);
  cursor: pointer;
  appearance: none;
  outline: none;
}

.filter-bar__sort::after {
  content: '\f107';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  pointer-events: none;
}

.filter-bar__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--black);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  cursor: pointer;
}

.filter-bar__toggle:hover {
  background-color: var(--black);
  color: var(--white);
}

/* Filter Panel Drawer */
.filter-panel {
  display: none;
  background-color: var(--light-gray);
  padding: 2.5rem;
  border: 1px solid var(--border-color-light);
  margin-top: 1rem;
  animation: fadeIn var(--transition-speed);
}

.filter-panel.active {
  display: block;
}

.filter-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .filter-panel__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.filter-group__title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  margin-bottom: 1.2rem;
}

.filter-group__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.filter-group__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-group__checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--medium-gray);
  cursor: pointer;
  position: relative;
}

.filter-group__checkbox:checked {
  background-color: var(--black);
  border-color: var(--black);
}

.filter-group__checkbox:checked::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--white);
  font-size: 0.6rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.filter-group__label {
  font-size: 0.8rem;
  color: #333333;
  cursor: pointer;
}

/* Size Chips Filter */
.filter-group__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-group__size-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--medium-gray);
  background: none;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-speed);
}

.filter-group__size-btn:hover,
.filter-group__size-btn.active {
  background-color: var(--black);
  color: var(--white);
  border-color: var(--black);
}

/* Color Circle Filters */
.filter-group__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-group__color-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--medium-gray);
  cursor: pointer;
  position: relative;
}

.filter-group__color-btn.active {
  box-shadow: 0 0 0 1.5px var(--white), 0 0 0 2.5px var(--black);
}

/* Price Range Slider */
.price-range__slider {
  width: 100%;
  margin-top: 1rem;
  accent-color: var(--black);
}

.price-range__values {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-family: var(--font-price);
  color: var(--medium-gray);
  margin-top: 8px;
}

.filter-panel__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  border-top: 1px solid rgba(10, 10, 10, 0.05);
  padding-top: 2rem;
  margin-top: 1rem;
}

.filter-panel__btn {
  padding: 0.8rem 2rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--black);
  cursor: pointer;
}

.filter-panel__btn--clear {
  background: none;
  color: var(--black);
}

.filter-panel__btn--apply {
  background-color: var(--black);
  color: var(--white);
}

/* Tienda layout */
.tienda__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.tienda__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .tienda__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .tienda__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tienda__footer {
  text-align: center;
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.tienda__count {
  font-size: 0.8rem;
  color: var(--medium-gray);
  letter-spacing: 1px;
}

/* -----------------------------------------------
   22. INDIVIDUAL PRODUCT PAGE (PRODUCTO.HTML)
   ----------------------------------------------- */
.product-detail {
  padding: var(--space-md) 0;
}

.product-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .product-detail__grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* Gallery styling */
.product-detail__gallery {
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
}

.product-detail__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.product-detail__thumb {
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--light-gray);
}

.product-detail__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity var(--transition-speed);
}

.product-detail__thumb.active .product-detail__thumb-img,
.product-detail__thumb:hover .product-detail__thumb-img {
  opacity: 1;
}

.product-detail__main-wrapper {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: var(--light-gray);
}

.product-detail__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--transition-bezier);
}

.product-detail__zoom-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: rgba(10, 10, 10, 0.8);
  color: var(--white);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(5px);
  z-index: 10;
}

@media (min-width: 768px) {
  .product-detail__gallery {
    flex-direction: row;
  }
  .product-detail__thumbs {
    grid-template-columns: 1fr;
    width: 90px;
    height: max-content;
  }
}

/* Purchase details styling */
.product-detail__info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.product-detail__tag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--light-gray);
  padding-bottom: 1rem;
}

.product-detail__col-tag {
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

.product-detail__piece-no {
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--medium-gray);
}

.product-detail__name {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  line-height: 1.1;
  font-weight: 400;
}

.product-detail__quote {
  border-left: none;
  padding-left: 0;
  margin: 0;
  font-size: 1.1rem;
  color: #555555;
}

.product-detail__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-detail__price {
  font-family: var(--font-price);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--black);
}

.product-detail__limit-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--burgundy);
  background-color: rgba(92, 26, 26, 0.08);
  padding: 0.4rem 1rem;
  font-weight: 600;
  border-radius: 2px;
}

/* Swatches selector */
.product-detail__section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  margin-bottom: 0.8rem;
  display: block;
}

.product-detail__color-name {
  color: var(--medium-gray);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: none;
  margin-left: 5px;
}

.product-detail__colors {
  display: flex;
  gap: 15px;
}

.product-detail__color-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-color-light);
  cursor: pointer;
  position: relative;
  transition: box-shadow var(--transition-speed);
}

.product-detail__color-swatch.active {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--black);
}

/* Sizes selector */
.product-detail__size-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.product-detail__size-guide {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 1px solid var(--black);
  padding-bottom: 2px;
  cursor: pointer;
}

.product-detail__sizes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.product-detail__size-btn {
  height: 45px;
  border: 1px solid var(--light-gray);
  background-color: var(--white);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-speed);
}

.product-detail__size-btn:hover:not(.sold-out) {
  border-color: var(--black);
  background-color: var(--black);
  color: var(--white);
}

.product-detail__size-btn.active {
  border-color: var(--black);
  background-color: var(--black);
  color: var(--white);
}

.product-detail__size-btn.sold-out {
  opacity: 0.35;
  cursor: not-allowed;
  position: relative;
}

.product-detail__size-btn.sold-out::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: var(--black);
  transform: rotate(-35deg);
}

/* Made to Order Toggle */
.product-detail__made-to-order {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--light-gray);
  padding: 1rem;
  border-radius: 2px;
  font-size: 0.8rem;
  margin-top: 1rem;
}

/* Quantity and Buttons styling */
.product-detail__purchase-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 15px;
  margin-top: 1rem;
}

.product-detail__qty {
  display: flex;
  border: 1px solid var(--border-color-light);
  height: 50px;
  align-items: center;
  justify-content: space-between;
}

.product-detail__qty-btn {
  background: none;
  border: none;
  width: 25px;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.product-detail__qty-input {
  width: 30px;
  border: none;
  background: none;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  outline: none;
}

.product-detail__add-to-cart {
  height: 50px;
  border: 1px solid var(--black);
  background-color: var(--black);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.product-detail__add-to-cart:hover {
  background-color: transparent;
  color: var(--black);
}

.product-detail__buy-now {
  height: 50px;
  border: 1px solid var(--champagne);
  background-color: var(--champagne);
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.product-detail__buy-now:hover {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.product-detail__actions {
  display: flex;
  gap: 2rem;
  border-top: 1px solid var(--light-gray);
  border-bottom: 1px solid var(--light-gray);
  padding: 1.2rem 0;
}

.product-detail__action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-detail__action-btn:hover {
  color: var(--gold);
}

/* Shipping and Care List */
.product-detail__meta-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-size: 0.8rem;
  color: #555555;
}

.product-detail__meta-list li {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Tabs Panel */
.product-tabs {
  margin-top: 5rem;
}

.product-tabs__nav {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--light-gray);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.product-tabs__nav::-webkit-scrollbar {
  display: none;
}

.product-tabs__btn {
  padding: 1.2rem 2.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  color: var(--medium-gray);
}

.product-tabs__btn.active {
  color: var(--black);
}

.product-tabs__btn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--black);
  transform: scaleX(0);
  transition: transform var(--transition-speed) var(--transition-bezier);
}

.product-tabs__btn.active::after {
  transform: scaleX(1);
}

.product-tabs__content-panel {
  display: none;
  padding: 3rem 0;
  animation: fadeIn var(--transition-speed);
}

.product-tabs__content-panel.active {
  display: block;
}

.product-tabs__text {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #444444;
  max-width: 800px;
  margin: 0 auto;
}

.product-tabs__text p {
  margin-bottom: 1.5rem;
}

/* Size Guide Table */
.size-table-wrapper {
  overflow-x: auto;
  margin-top: 1.5rem;
}

.size-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-align: center;
}

.size-table th, 
.size-table td {
  padding: 1rem;
  border: 1px solid var(--light-gray);
}

.size-table th {
  background-color: var(--light-gray);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.size-table tr:nth-child(even) {
  background-color: rgba(10, 10, 10, 0.02);
}

/* Star ratings for reviews */
.rating-summary {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--light-gray);
  padding-bottom: 2rem;
}

.rating-summary__num {
  font-size: 4rem;
  font-family: var(--font-heading);
  line-height: 1;
}

.rating-summary__stars {
  color: var(--gold);
  font-size: 1.2rem;
}

.rating-summary__count {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--medium-gray);
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.review-item {
  border-bottom: 1px solid var(--light-gray);
  padding-bottom: 2.5rem;
}

.review-item__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.review-item__name {
  font-size: 0.85rem;
  font-weight: 500;
}

.review-item__date {
  font-size: 0.75rem;
  color: var(--medium-gray);
}

.review-item__stars {
  color: var(--gold);
  font-size: 0.8rem;
  margin-bottom: 0.8rem;
}

.review-item__meta {
  font-size: 0.7rem;
  color: var(--medium-gray);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.review-item__text {
  font-size: 0.85rem;
  line-height: 1.7;
  color: #444444;
}

/* -----------------------------------------------
   23. LOOKBOOK GALLERY PAGE (LOOKBOOK.HTML)
   ----------------------------------------------- */
.lookbook-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.lookbook-item {
  position: relative;
  overflow: hidden;
}

.lookbook-item__image-wrapper {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.lookbook-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.5s var(--transition-bezier);
}

.lookbook-item:hover .lookbook-item__image {
  transform: scale(1.05);
}

.lookbook-item__content {
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lookbook-item__col {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
  font-weight: 500;
}

.lookbook-item__title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.2;
}

.lookbook-item__meta {
  font-size: 0.75rem;
  color: var(--medium-gray);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.lookbook-item__desc {
  font-size: 0.9rem;
  color: #444444;
  margin-top: 0.5rem;
}

.lookbook-item__link {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  border-bottom: 1px solid var(--black);
  align-self: flex-start;
  padding-bottom: 4px;
  margin-top: 1rem;
}

/* -----------------------------------------------
   24. PERSONAL STYLE SERVICE (ESTILO-PERSONAL.HTML)
   ----------------------------------------------- */
.style-service__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .style-service__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  border: 1px solid var(--light-gray);
  padding: 3.5rem 2.5rem;
  text-align: center;
  background-color: var(--white);
  transition: all var(--transition-speed);
}

.service-card:hover {
  border-color: var(--champagne);
  box-shadow: 0 15px 40px rgba(10, 10, 10, 0.05);
  transform: translateY(-5px);
}

.service-card__icon {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  display: block;
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.service-card__desc {
  font-size: 0.85rem;
  color: #555555;
  line-height: 1.6;
  margin-bottom: 2rem;
  min-height: 80px;
}

.service-card__price {
  font-family: var(--font-price);
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 2.5rem;
  display: block;
}

.service-card__btn {
  width: 100%;
}

/* Style Quiz Section */
.quiz-section {
  background-color: var(--light-gray);
  padding: var(--space-xl) 0;
}

.quiz-container {
  max-width: 700px;
  margin: 0 auto;
  background-color: var(--white);
  padding: 4rem 3rem;
  box-shadow: 0 15px 50px rgba(10, 10, 10, 0.04);
}

.quiz-progress {
  width: 100%;
  height: 2px;
  background-color: var(--light-gray);
  margin-bottom: 3rem;
  position: relative;
}

.quiz-progress__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 16.6%;
  background-color: var(--gold);
  transition: width var(--transition-speed) var(--transition-bezier);
}

.quiz-question {
  display: none;
}

.quiz-question.active {
  display: block;
  animation: fadeIn var(--transition-speed);
}

.quiz-question__title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 2.5rem;
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

@media (min-width: 768px) {
  .quiz-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

.quiz-option {
  border: 1px solid var(--border-color-light);
  padding: 1.5rem;
  cursor: pointer;
  transition: all var(--transition-speed);
  font-size: 0.85rem;
  font-weight: 400;
  text-align: center;
}

.quiz-option:hover {
  border-color: var(--black);
  background-color: var(--light-gray);
}

.quiz-option.selected {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.quiz-results {
  display: none;
  text-align: center;
  animation: fadeIn 0.8s;
}

.quiz-results.active {
  display: block;
}

.quiz-results__title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.quiz-results__desc {
  font-size: 0.95rem;
  color: #444444;
  margin-bottom: 3rem;
  line-height: 1.8;
}

/* -----------------------------------------------
   25. SUSTAINABILITY PAGE (SOSTENIBILIDAD.HTML)
   ----------------------------------------------- */
.sustainability-detail {
  margin-bottom: var(--space-xl);
}

.sustainability-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
  margin-bottom: var(--space-xl);
}

.sustainability-row__image-col {
  aspect-ratio: 16/10;
  overflow: hidden;
}

.sustainability-row__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sustainability-row__content-col {
  max-width: 550px;
}

.sustainability-row__num {
  font-family: var(--font-heading);
  font-size: 4rem;
  color: var(--champagne);
  line-height: 1;
  margin-bottom: 1rem;
}

.sustainability-row__title {
  font-size: 2.2rem;
  margin-bottom: 1.2rem;
}

.sustainability-row__text {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #444444;
}

@media (min-width: 1024px) {
  .sustainability-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .sustainability-row:nth-child(even) .sustainability-row__image-col {
    order: 2;
  }
}

/* -----------------------------------------------
   26. CART / CHECKOUT SIDEBAR & PAGES
   ----------------------------------------------- */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  max-width: 450px;
  height: 100vh;
  background-color: var(--white);
  z-index: 900;
  box-shadow: -10px 0 40px rgba(10, 10, 10, 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(101%);
  transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
}

.cart-sidebar.open {
  transform: translateX(0);
}

.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(10, 10, 10, 0.5);
  z-index: 850;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-speed), visibility var(--transition-speed);
}

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

.cart-sidebar__header {
  padding: 1.5rem var(--space-md);
  border-bottom: 1px solid var(--light-gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-sidebar__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 400;
}

.cart-sidebar__close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

.cart-sidebar__body {
  flex: 1;
  padding: var(--space-md);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cart-sidebar__empty {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cart-sidebar__empty-icon {
  font-size: 3rem;
  color: var(--light-gray);
}

.cart-sidebar__empty-text {
  font-size: 0.85rem;
  color: var(--medium-gray);
}

.cart-sidebar__empty-btn {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--black);
  padding-bottom: 2px;
}

.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr 30px;
  gap: 15px;
  align-items: start;
}

.cart-item__image-wrapper {
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: var(--light-gray);
}

.cart-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-item__name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--black);
}

.cart-item__meta {
  font-size: 0.7rem;
  color: var(--medium-gray);
  text-transform: uppercase;
}

.cart-item__price {
  font-family: var(--font-price);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--black);
  margin-top: 4px;
}

.cart-item__remove {
  background: none;
  border: none;
  font-size: 0.95rem;
  color: var(--medium-gray);
  cursor: pointer;
  align-self: start;
}

.cart-item__remove:hover {
  color: var(--burgundy);
}

.cart-sidebar__footer {
  padding: var(--space-md);
  border-top: 1px solid var(--light-gray);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.cart-sidebar__summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.cart-sidebar__summary-row--total {
  font-family: var(--font-price);
  font-weight: 600;
  font-size: 1rem;
}

.cart-sidebar__checkout-btn {
  width: 100%;
  padding: 1.2rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--black);
  background-color: var(--black);
  color: var(--white);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-speed);
}

.cart-sidebar__checkout-btn:hover {
  background-color: transparent;
  color: var(--black);
}

/* -----------------------------------------------
   27. FOOTER STRUCTURE
   ----------------------------------------------- */
.footer {
  background-color: var(--black);
  color: var(--white);
  padding: var(--space-xl) 0 var(--space-md);
  border-top: 1px solid var(--border-color);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.footer__col--brand {
  max-width: 300px;
}

.footer__logo-link {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.footer__logo-img {
  max-height: 40px;
  filter: invert(1);
}

.footer__tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--champagne);
  margin-bottom: 2rem;
}

.footer__title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 1.5rem;
}

.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer__link {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer__link:hover {
  color: var(--white);
  padding-left: 5px;
}

.footer__social {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.footer__social-link {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer__social-link:hover {
  color: var(--champagne);
}

.footer__bottom {
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  text-align: center;
}

.footer__bottom-left {
  font-size: 0.75rem;
  color: var(--medium-gray);
}

.footer__payments {
  display: flex;
  gap: 1rem;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.4);
}

.footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--medium-gray);
}

.footer__bottom-link:hover {
  color: var(--white);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 2fr repeat(4, 1fr);
  }
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .footer__bottom-links {
    justify-content: flex-end;
  }
}

/* -----------------------------------------------
   28. FORMS & DECORATORS
   ----------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1.5rem;
}

.form-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--black);
}

.form-input, 
.form-select, 
.form-textarea {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--border-color-light);
  background-color: var(--white);
  outline: none;
  transition: border-color var(--transition-speed);
}

.form-input:focus, 
.form-select:focus, 
.form-textarea:focus {
  border-color: var(--black);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* -----------------------------------------------
   29. UTILITY CLASSES & ACCESSIBILITY
   ----------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 2rem; }
.mt-4 { margin-top: 4rem; }
.mt-5 { margin-top: 6rem; }
.mt-6 { margin-top: 8rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 2rem; }
.mb-4 { margin-bottom: 4rem; }
.mb-5 { margin-bottom: 6rem; }
.mb-6 { margin-bottom: 8rem; }

.pb-6 { padding-bottom: 8rem; }

/* -----------------------------------------------
   30. SEARCH OVERLAY DESIGN
   ----------------------------------------------- */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s;
}

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

.search-overlay__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--black);
  transition: transform var(--transition-speed);
}

.search-overlay__close:hover {
  transform: rotate(90deg);
}

.search-overlay__content {
  width: 90%;
  max-width: 600px;
  text-align: center;
}

.search-overlay__form {
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--black);
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
}

.search-overlay__input {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-style: italic;
  outline: none;
  color: var(--black);
  padding: 0.5rem 0;
  width: 100%;
}

.search-overlay__input::placeholder {
  color: var(--medium-gray);
  opacity: 0.5;
}

.search-overlay__submit-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--black);
  cursor: pointer;
}

.search-overlay__suggestions {
  text-align: left;
}

.search-overlay__suggestions-title {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--medium-gray);
  margin-bottom: 1rem;
}

.search-overlay__suggestions-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
}

.search-suggestion-btn {
  background-color: var(--light-gray);
  border: 1px solid var(--border-color-light);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.search-suggestion-btn:hover {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* Wishlist Active State Indicator */
.product-card__btn-wishlist.active i,
.product-detail__action-btn.active i {
  font-weight: 900;
  color: var(--burgundy);
}