/* ============================================
   THE BETTY SHOP — Gecko-Inspired Design
   Coastal · Minimal · Laid-back
   ============================================ */

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

:root {
  --white: #f4f1ec;
  --white-pure: #ffffff;
  --sand: #ede8df;
  --sand-light: #f4f1ec;
  --sand-dark: #d4c8b8;
  --cream: #e8e2d8;
  --warm-gray: #8a7e72;
  --text: #1a1a1a;
  --text-light: #6b6159;
  --black: #1a1714;
  --navy: #0d1b2a;
  --navy-light: #1e2d3d;
  --gold: #c4a97d;
  --gold-dim: rgba(196, 169, 125, 0.4);
  --accent: #c4a97d;
  --font-body: 'Montserrat', 'Inter', -apple-system, sans-serif;
  --font-display: 'Bebas Neue', 'Playfair Display', Georgia, serif;
  --font-script: 'Dancing Script', cursive;
  --nav-height: 70px;
  --announcement-height: 36px;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* --- Announcement Bar --- */
.announcement-bar {
  background: var(--navy);
  color: var(--gold);
  text-align: center;
  padding: 10px 16px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  transition: transform 0.4s ease;
  border-bottom: 1px solid rgba(196, 169, 125, 0.15);
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: var(--announcement-height);
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.4s ease, background 0.3s ease, top 0.4s ease;
}

.nav.scrolled {
  top: 0;
  box-shadow: 0 1px 10px rgba(0,0,0,0.05);
}

.nav.hero-visible {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

.nav.hero-visible .nav-link {
  color: white;
}

.nav.hero-visible .nav-link svg {
  stroke: white;
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  height: var(--nav-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.nav-left, .nav-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-right {
  justify-content: flex-end;
}

.nav-link {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  font-weight: 400;
  color: var(--text);
  transition: color 0.3s ease, opacity 0.3s ease;
  text-transform: uppercase;
}

.nav-link:hover {
  opacity: 0.6;
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: all 0.3s ease;
}

.logo-link {
  display: flex;
  justify-content: center;
}

.logo-img {
  height: 60px;
  width: auto;
  object-fit: contain;
  transition: filter 0.3s ease;
}

/* --- Text-Based Logo --- */
.logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-decoration: none;
}

/* The footer lockup used to override the logo's centring with flex-start,
   which left "the" hard against the left edge instead of sitting over the
   middle of "betty shop" the way "est. 2012" does. Centre the lines on each
   other, and let the group shrink to its content so the whole lockup still
   starts at the column's left edge rather than drifting into the middle. */
.footer-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 100%;
}

.footer-brand .logo-text {
  align-items: center;
}

.logo-the {
  font-family: var(--font-script);
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(13,27,42,0.25);
  letter-spacing: 2px;
  margin-bottom: -2px;
}

.logo-name {
  font-family: var(--font-script);
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

.logo-est {
  font-family: var(--font-body);
  font-size: 0.45rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* White variant for footer */
.logo-text-white .logo-the {
  color: rgba(255,255,255,0.3);
}
.logo-text-white .logo-name {
  color: #fff;
}

/* Nav scrolled: logo inherits white when hero visible */
.nav.hero-visible .logo-text .logo-the {
  color: rgba(255,255,255,0.3);
}
.nav.hero-visible .logo-text .logo-name {
  color: #fff;
}
.nav.hero-visible .logo-text .logo-est {
  color: var(--gold);
}

.cart-link {
  position: relative;
  display: flex;
  align-items: center;
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -10px;
  font-size: 0.6rem;
  background: var(--text);
  color: var(--white);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.cart-count.visible {
  opacity: 1;
  transform: scale(1);
}

/* --- Mobile Menu --- */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.mobile-menu-link {
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  transition: opacity 0.3s ease;
}

.mobile-menu-link:hover {
  opacity: 0.5;
}

/* --- Hero Section --- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #1a1714;
}

.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transform: scale(1.05);
  transition: transform 8s ease;
}

.hero:hover .hero-bg-img {
  transform: scale(1.1);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13,27,42,0.4) 0%,
    rgba(13,27,42,0.15) 40%,
    rgba(13,27,42,0.25) 70%,
    rgba(13,27,42,0.6) 100%
  );
  pointer-events: none;
}

.hero-content {
  text-align: center;
  z-index: 1;
  color: white;
  animation: heroFadeIn 1.2s ease-out;
}

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

.hero-subtitle {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 20px;
  color: var(--gold);
  opacity: 1;
}

.hero-logo {
  max-width: clamp(280px, 45vw, 480px);
  height: auto;
  margin: 0 auto;
  filter: brightness(0) invert(1);
}

/* --- Hero Text Logo --- */
.hero-logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.hero-logo-the {
  font-family: var(--font-script);
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: 3px;
  margin-bottom: -4px;
}

.hero-logo-name {
  font-family: var(--font-script);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.hero-logo-est {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
}

.hero-logo-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
}

.hero-tagline {
  font-size: 1rem;
  letter-spacing: 0.08em;
  font-weight: 300;
  margin-top: 16px;
  margin-bottom: 40px;
  color: var(--cream);
  opacity: 0.8;
}

.hero-cta {
  display: inline-block;
  padding: 16px 48px;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.hero-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateY(100%);
  transition: transform 0.4s ease;
  z-index: -1;
}

.hero-cta:hover {
  color: var(--navy);
}

.hero-cta:hover::before {
  transform: translateY(0);
}

.hero-scroll-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  animation: heroFadeIn 1.2s ease-out 0.6s both;
}

.scroll-line {
  width: 1px;
  height: 50px;
  background: white;
  opacity: 0.4;
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.15; transform: scaleY(0.5); }
  50% { opacity: 0.4; transform: scaleY(1); }
}

/* --- Category Strip --- */
.categories {
  padding: 60px 0;
  background: var(--white);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.category-item {
  text-align: center;
  cursor: pointer;
}

.category-img-wrap {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  margin-bottom: 16px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.category-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.category-item:hover .category-img-wrap img {
  transform: scale(1.08);
}

.category-label {
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
}

/* --- Section Headers --- */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 8px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-size: 0.9rem;
  color: var(--text-light);
  font-weight: 300;
}

/* --- Products --- */
.products {
  padding: 80px 0 100px;
}

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

.product-card {
  cursor: pointer;
}

.product-image-wrap {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}

.product-image {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease;
}

.product-card:hover .product-image {
  transform: scale(1.03);
}

.product-placeholder {
  width: 50%;
  opacity: 0.5;
  transition: opacity 0.4s ease;
}

.product-card:hover .product-placeholder {
  opacity: 0.7;
}

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--navy);
  color: var(--gold);
  padding: 5px 12px;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.product-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.35s ease;
}

.product-card:hover .product-actions {
  opacity: 1;
  transform: translateY(0);
}

.quick-add {
  width: 100%;
  padding: 12px;
  border: none;
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.3s ease;
}

.quick-add svg {
  stroke: var(--gold);
}

.quick-add:hover {
  background: #0a1520;
}

.quick-add.added {
  background: #5a7a5a;
}

.product-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.product-info {
  padding: 0 4px;
}

.product-name {
  font-size: 0.92rem;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

.product-detail {
  font-size: 0.78rem;
  color: var(--warm-gray);
  font-weight: 300;
  margin-bottom: 6px;
}

.product-price {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* --- Lookbook Banner --- */
.lookbook-banner {
  padding: 0 40px 80px;
}

.lookbook-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  max-width: 1280px;
  margin: 0 auto;
}

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

.lookbook-large {
  grid-row: 1 / 3;
}

.lookbook-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.lookbook-large img {
  min-height: 580px;
}

.lookbook-small img {
  min-height: 288px;
}

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

.lookbook-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.5) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  color: white;
}

.lookbook-tag {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.8;
  margin-bottom: 8px;
}

.lookbook-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 400;
  margin-bottom: 12px;
}

.lookbook-link {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.lookbook-link:hover {
  opacity: 1;
}

/* --- Lifestyle Scroll --- */
.lifestyle {
  padding: 80px 0;
}

.lifestyle-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 40px;
  scrollbar-width: none;
  margin-top: 8px;
}

.lifestyle-scroll::-webkit-scrollbar {
  display: none;
}

.lifestyle-card {
  flex: 0 0 340px;
  scroll-snap-align: start;
  overflow: hidden;
}

.lifestyle-card img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.lifestyle-card:hover img {
  transform: scale(1.04);
}

/* --- Brand Statement --- */
.brand-statement {
  padding: 100px 0;
  background: var(--sand-light);
}

.brand-statement-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.statement-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm-gray);
  font-weight: 400;
  margin-bottom: 20px;
}

.statement-text {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 24px;
  font-style: italic;
}

.statement-body {
  font-size: 0.95rem;
  color: var(--text-light);
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 8px;
}

/* --- Story --- */
.story {
  padding: 0;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

.story-image {
  overflow: hidden;
}

.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 72px;
  background: var(--white);
}

.story-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm-gray);
  font-weight: 400;
  margin-bottom: 16px;
}

.story-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 24px;
  color: var(--text);
}

.story-body {
  font-size: 0.92rem;
  color: var(--text-light);
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 16px;
}

.story-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 14px 40px;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.4s ease;
  align-self: flex-start;
}

.story-cta:hover {
  background: var(--navy);
  color: var(--gold);
}

/* --- Signup --- */
.signup {
  padding: 100px 0;
  background: var(--sand);
}

.signup-inner {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

.signup-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm-gray);
  font-weight: 400;
  margin-bottom: 8px;
}

.signup-heading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
}

.signup-sub {
  font-size: 0.9rem;
  color: var(--text-light);
  font-weight: 300;
  margin-bottom: 32px;
}

.signup-form {
  display: flex;
  gap: 0;
  max-width: 440px;
  margin: 0 auto;
}

.signup-input {
  flex: 1;
  padding: 15px 20px;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-right: none;
  background: white;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s ease;
}

.signup-input:focus {
  border-color: var(--text);
}

.signup-input::placeholder {
  color: var(--warm-gray);
  font-weight: 300;
}

.signup-btn {
  padding: 15px 32px;
  background: var(--text);
  color: white;
  border: 1.5px solid var(--text);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 400;
  white-space: nowrap;
}

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

/* --- Footer --- */
.footer {
  padding: 72px 0 40px;
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  border-top: 3px solid var(--gold);
}

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

.footer-logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  margin-bottom: 8px;
}

.footer-tagline {
  margin-top: 14px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 300;
  letter-spacing: 0.03em;
  font-style: italic;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  gap: 16px;
}

.footer-social a {
  color: rgba(255,255,255,0.5);
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: var(--gold);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col-title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 4px;
}

.footer-col a {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  font-weight: 300;
  transition: color 0.3s ease;
}

.footer-col a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(196, 169, 125, 0.15);
}

.footer-bottom p {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  font-weight: 300;
}

.footer-bottom-links {
  display: flex;
  gap: 24px;
}

.footer-bottom-links a {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  font-weight: 300;
  transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
  color: var(--gold);
}

/* --- Cart Drawer --- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.cart-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 90vw;
  background: white;
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.4s ease;
  display: flex;
  flex-direction: column;
}

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

.cart-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.cart-drawer-header h3 {
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cart-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  padding: 4px;
  transition: opacity 0.3s ease;
}

.cart-close:hover {
  opacity: 0.5;
}

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

.cart-empty {
  text-align: center;
  padding: 60px 0;
}

.cart-empty p {
  color: var(--warm-gray);
  font-size: 0.9rem;
  font-weight: 300;
  margin-bottom: 20px;
}

.cart-shop-link {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 400;
  color: var(--text);
  border-bottom: 1px solid var(--text);
  padding-bottom: 2px;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  align-items: start;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.cart-item-image {
  aspect-ratio: 3/4;
  background: var(--sand-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-image svg {
  width: 40%;
  opacity: 0.4;
}

.cart-item-info h4 {
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 4px;
}

.cart-item-info p {
  font-size: 0.75rem;
  color: var(--warm-gray);
  font-weight: 300;
}

.cart-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--warm-gray);
  text-decoration: underline;
  font-family: var(--font-body);
  transition: color 0.3s ease;
}

.cart-item-remove:hover {
  color: var(--text);
}

.cart-drawer-footer {
  padding: 24px 28px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 0.9rem;
  font-weight: 500;
}

.cart-checkout-btn {
  width: 100%;
  padding: 16px;
  background: var(--navy);
  color: var(--gold);
  border: none;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-bottom: 12px;
}

.cart-checkout-btn:hover {
  background: #0a1520;
}

.cart-shipping-note {
  text-align: center;
  font-size: 0.72rem;
  color: var(--warm-gray);
  font-weight: 300;
}

/* --- Brand Stripe Divider --- */
.brand-stripe {
  display: flex;
  flex-direction: column;
}

.stripe-navy {
  height: 6px;
  background: var(--navy);
}

.stripe-gold {
  height: 4px;
  background: var(--gold);
}

.stripe-cream {
  height: 3px;
  background: var(--cream);
}

/* --- Scroll Animations --- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Full-Bleed Banners (Gecko Style) --- */
.full-banner {
  position: relative;
  height: 80vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.full-banner-bg {
  position: absolute;
  inset: 0;
}

.full-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 8s ease;
}

.full-banner:hover .full-banner-img {
  transform: scale(1.05);
}

.full-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,27,42,0.5) 0%, rgba(13,27,42,0.7) 100%);
  pointer-events: none;
}

.full-banner-content {
  text-align: center;
  z-index: 1;
  color: white;
}

.full-banner-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
  color: var(--gold);
  opacity: 1;
}

.full-banner-heading {
  font-family: var(--font-script);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: 0;
}

.full-banner-body {
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.7;
  opacity: 0.8;
  margin-bottom: 28px;
}

.full-banner-cta {
  display: inline-block;
  padding: 16px 48px;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.full-banner-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateY(100%);
  transition: transform 0.4s ease;
  z-index: -1;
}

.full-banner-cta:hover {
  color: var(--navy);
}

.full-banner-cta:hover::before {
  transform: translateY(0);
}

/* --- Triple Tiles (3-column category grid) --- */
.triple-tiles {
  /* No padding — tiles go edge to edge */
}

.triple-tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.tile-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  cursor: pointer;
}

.tile-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.tile-item:hover img {
  transform: scale(1.06);
}

.tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,27,42,0.1) 0%, rgba(13,27,42,0.55) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background 0.4s ease;
}

.tile-item:hover .tile-overlay {
  background: linear-gradient(180deg, rgba(13,27,42,0.15) 0%, rgba(13,27,42,0.65) 100%);
}

.tile-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--gold);
  opacity: 1;
  margin-bottom: 8px;
}

.tile-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.tile-title-large {
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.1;
}

/* --- Lookbook Row (6-column image grid) --- */
.lookbook-row {
  /* No padding — edge to edge */
}

.lookbook-row-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.lookbook-row-item {
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.lookbook-row-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

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

/* --- Store Info Banner --- */
.store-banner {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.store-banner-bg {
  position: absolute;
  inset: 0;
}

.store-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,27,42,0.6) 0%, rgba(13,27,42,0.85) 100%);
  pointer-events: none;
}

.store-banner-content {
  z-index: 1;
  text-align: center;
  color: white;
}

.store-info-card {
  background: rgba(13,27,42,0.5);
  backdrop-filter: blur(16px);
  padding: 56px 72px;
  max-width: 520px;
  border: 1px solid rgba(196, 169, 125, 0.2);
}

.store-name {
  font-family: var(--font-script);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 16px;
}

.store-divider {
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 16px;
}

.store-tagline {
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
  opacity: 1;
  margin-bottom: 12px;
}

.store-detail {
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.6;
  opacity: 0.7;
  margin-bottom: 20px;
}

.store-est {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 12px;
}

.store-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 300;
  opacity: 0.7;
}

.store-social a {
  transition: opacity 0.3s ease;
}

.store-social a:hover {
  opacity: 1;
}

.store-social span {
  opacity: 0.4;
}

/* --- Shop Page --- */
.shop-header {
  padding: 140px 0 60px;
  text-align: center;
}

.shop-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
}

.shop-subtitle {
  font-size: 0.92rem;
  color: var(--text-light);
  font-weight: 300;
}

/* --- Footer note --- */
.footer-note {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  font-weight: 300;
  margin-bottom: 16px;
}

.footer-signup-form {
  display: flex;
  gap: 0;
}

.footer-signup-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(196, 169, 125, 0.3);
  border-right: none;
  background: rgba(255,255,255,0.05);
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #fff;
  font-weight: 300;
  outline: none;
  min-width: 0;
}

.footer-signup-input:focus {
  border-color: var(--gold);
}

.footer-signup-input::placeholder {
  color: rgba(255,255,255,0.3);
}

.footer-signup-btn {
  padding: 12px 20px;
  background: var(--gold);
  color: var(--navy);
  border: 1px solid var(--gold);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  white-space: nowrap;
}

.footer-signup-btn:hover {
  background: #d4b98d;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .container {
    padding: 0 28px;
  }

  .nav-inner {
    padding: 0 28px;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .lookbook-row-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }

  .nav-left {
    display: none;
  }

  .nav-right .nav-link:not(.cart-link):not(.nav-search) {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-inner {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }

  .logo-img {
    height: 40px;
  }

  .hero-cta,
  .full-banner-cta {
    padding: 14px 36px;
    font-size: 0.75rem;
  }

  .full-banner {
    height: 60vh;
    min-height: 400px;
  }

  .triple-tiles-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .tile-item {
    aspect-ratio: 16 / 9;
  }

  .lookbook-row-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .store-info-card {
    padding: 40px 32px;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .product-actions {
    opacity: 1;
    transform: translateY(0);
  }

  .quick-add {
    padding: 10px;
    font-size: 0.7rem;
  }

  .product-name {
    font-size: 0.82rem;
  }

  .product-detail {
    font-size: 0.7rem;
  }

  .product-price {
    font-size: 0.8rem;
  }

  .shop-header {
    padding: 120px 0 40px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-col {
    align-items: center;
  }

  .footer-signup-form {
    justify-content: center;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 100svh;
  }

  .hero-logo {
    max-width: 220px;
  }

  .lookbook-row-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── The Lookbook lead-in ──────────────────────────────────────────────── */
.closet-intro {
  padding: 84px 24px 40px;
  background: var(--white);
}
.closet-intro .section-header {
  margin-bottom: 0;
}
.closet-cta {
  display: inline-block;
  margin-top: 26px;
  padding: 16px 48px;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 0.4s ease;
}
.closet-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateY(100%);
  transition: transform 0.4s ease;
  z-index: -1;
}
.closet-cta:hover { color: var(--navy); }
.closet-cta:hover::before { transform: translateY(0); }
@media (max-width: 640px) {
  .closet-intro { padding: 56px 20px 30px; }
  .closet-cta { padding: 15px 34px; }
}

/* ── Looks: large editorial cards of finished outfits ────────────────── */
.fitwall { padding: 92px 24px 78px; background: var(--white); }
.fitwall .section-header { margin-bottom: 44px; }

.lookgrid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 28px; max-width: 1240px; margin: 0 auto;
}
.look-card {
  flex: 0 1 340px; max-width: 380px;
  display: block; text-decoration: none; color: inherit;
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
}
.look-card:hover { transform: translateY(-6px); }

/* The look itself, on plain paper, the way a flat-lay is shot. */
.look-stage {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5;
  background: var(--white-pure); overflow: hidden;
  box-shadow: 0 2px 6px rgba(13,27,42,0.05);
  transition: box-shadow 0.45s ease;
}
.look-card:hover .look-stage { box-shadow: 0 22px 48px -22px rgba(13,27,42,0.4); }
.look-piece { position: absolute; display: block; }
.look-piece img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 8px 16px rgba(13,27,42,0.16));
}
.look-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Credit block, magazine style: name, who made it, how many liked it. */
.look-meta { display: block; padding: 20px 2px 0; text-align: center; }
.look-name { display: block; }
.look-name {
  font-family: var(--font-display);
  font-size: 1.35rem; letter-spacing: 0.04em; color: var(--text);
  margin: 0 0 6px; line-height: 1.1;
}
.look-by {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--warm-gray); margin: 0;
}
.look-by em { font-style: normal; color: var(--text); }
.look-likes {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 9px; font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--gold);
}
.fitwall-foot { text-align: center; margin-top: 56px; }

@media (max-width: 640px) {
  .fitwall { padding: 62px 18px 56px; }
  .fitwall .section-header { margin-bottom: 30px; }
  .lookgrid { gap: 34px; }
  .look-card { flex: 0 1 100%; max-width: 420px; }
  .look-name { font-size: 1.2rem; }
}

/* ── Lead hero: two photographs blended, card floating over ───────────── */
.lead-hero {
  position: relative;
  min-height: min(84vh, 880px);
  /* Nothing sits above it, so it clears the fixed announcement bar and nav
     itself. The +1px is the nav's own bottom border. */
  /* +1px is the nav's own bottom border; the rest is breathing room so the
     card is not pinned to the nav. */
  padding-top: calc(var(--announcement-height) + var(--nav-height) + 1px + 52px);
  padding-bottom: 62px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--navy);
}
.lead-bg { position: absolute; inset: 0; }
.lead-img {
  position: absolute; top: 0; height: 100%;
  object-fit: cover; display: block;
}
.lead-img.base { left: 0; width: 100%; object-position: center 22%; }
.lead-overlay {
  position: absolute; inset: 0; pointer-events: none;
  /* Light: the photograph should read. The card behind the text carries the
     contrast instead, so legibility does not depend on drowning the picture. */
  background: linear-gradient(180deg, rgba(13,27,42,0.10) 0%, rgba(13,27,42,0.40) 100%);
}
.lead-hero .store-banner-content { position: relative; z-index: 1; padding: 0 20px; }

@media (max-width: 900px) {
  .lead-hero {
    min-height: 0;
    padding-top: calc(var(--announcement-height) + var(--nav-height) + 1px + 38px);
    padding-bottom: 48px;
  }
}

/* ── The lookbook page ────────────────────────────────────────────────── */
.lookbook-page {
  padding: calc(var(--announcement-height) + var(--nav-height) + 72px) 24px 88px;
  background: var(--white);
  min-height: 78vh;
}
.lookbook-page .section-header { margin-bottom: 52px; }
.lookbook-loading {
  text-align: center; color: var(--warm-gray);
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.lookbook-empty {
  max-width: 460px; margin: 0 auto; text-align: center;
  border: 1px dashed var(--sand-dark); padding: 54px 30px; background: var(--sand-light);
}
.empty-title {
  font-family: var(--font-display); font-size: 1.7rem;
  letter-spacing: 0.03em; margin: 0 0 12px; color: var(--text);
}
.lookbook-empty p {
  font-size: 0.88rem; line-height: 1.7; color: var(--text-light); margin: 0 0 22px;
}
.lookbook-foot { text-align: center; margin-top: 62px; }
@media (max-width: 640px) {
  .lookbook-page {
    padding: calc(var(--announcement-height) + var(--nav-height) + 46px) 18px 64px;
  }
  .lookbook-page .section-header { margin-bottom: 34px; }
}

/* ── Hero calls to action ─────────────────────────────────────────────── */
.lead-lines { margin-bottom: 22px !important; }
.lead-acts {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.lead-cta {
  display: inline-block; text-decoration: none;
  padding: 14px 26px;
  border: 1.5px solid rgba(196,169,125,0.55);
  color: var(--gold);
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.lead-cta:hover { background: rgba(196,169,125,0.14); color: #fff; }
.lead-cta.primary {
  background: var(--gold); border-color: var(--gold); color: var(--navy);
}
.lead-cta.primary:hover { background: #d8bf94; border-color: #d8bf94; color: var(--navy); }
@media (max-width: 640px) {
  .lead-acts { flex-direction: column; }
  .lead-cta { padding: 13px 20px; }
}

/* ── Nav centring on small screens ────────────────────────────────────── */
/* The nav is `1fr auto 1fr`, but on a phone the right group collapses to
   nothing while the burger does not, so the two side columns came out
   unequal (102px against 71px) and the wordmark sat off centre. Pinning
   the sides to the same width makes the centring independent of content. */
@media (max-width: 900px) {
  /* Centre it against the bar itself rather than against a grid column whose
     width depends on what happens to be in the groups either side. */
  .nav-inner { position: relative; grid-template-columns: 46px 1fr 46px; }
  .logo-link {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
  }
  .nav-right { justify-content: flex-end; }
}

/* The hero card does its own work now that the overlay is light. The tint
   below was set by measuring contrast against the brightest part of the
   photograph that sits behind the text, not by eye. */
.lead-hero .store-info-card {
  margin: 0 auto;
  background: rgba(13,27,42,0.66);
  border-color: rgba(196,169,125,0.34);
  /* Smaller and tighter, so the photograph frames it on every side and it
     reads as floating rather than as a panel filling the space. */
  max-width: 384px;
  padding: 34px 38px 38px;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,0.62);
}
.lead-hero .store-wave-icon {
  display: block;
  margin: 0 auto 16px;
}
.lead-hero .store-name {
  font-size: 2.45rem;
  /* Dancing Script carries tall ascenders and long descenders, so the two
     lines drifted apart at the default leading. */
  line-height: 0.98;
  margin-bottom: 14px;
}
.lead-hero .store-divider { margin-bottom: 16px; }
/* The proposition is the point of the page; it should not be dimmed to 70%,
   which was dragging it to 4.4:1 against the bright part of the photograph. */
.lead-hero .lead-lines { opacity: 1; color: rgba(255,255,255,0.92); }
/* Gold on this card measures 3.1:1, under the 4.5:1 needed at this size, so
   the second call to action keeps the gold rule and takes white text. */
.lead-cta { color: #fff; }
.lead-cta:hover { color: #fff; }

/* ── Hero card on a phone ─────────────────────────────────────────────── */
/* Kept at the end deliberately: the .lead-hero card rules above have the same
   specificity, so an override placed earlier in the file loses to them. */
@media (max-width: 900px) {
  /* The card was shrink-to-fit at ~254px inside ~350px of room, and the two
     buttons stacked, so it came out 0.63 wide-to-tall against 0.90 on the
     desktop: a tall slot rather than the near-square panel. Give it a real
     width and tighten the vertical rhythm. */
  /* .lead-hero is a flex row, so this wrapper shrink-fit to its content and
     capped the card at ~242px however wide the phone was. Full width here is
     what lets the card's own width mean anything. */
  .lead-hero .store-banner-content { width: 100%; }
  .lead-hero .store-info-card {
    width: min(312px, 100%);
    padding: 20px 22px 22px;
  }
  .lead-hero .store-name { font-size: 2rem; }
  .lead-hero .store-wave-icon { margin-bottom: 12px; }
  .lead-hero .store-divider { margin-bottom: 12px; }
  .lead-hero .lead-lines { margin-bottom: 12px !important; }
  .lead-acts { gap: 8px; }
  .lead-cta { padding: 11px 18px; }
}