/* ═══════════════════════════════════════════════════════
   TANISHQ-INSPIRED DESIGN SYSTEM
   Clean, premium jewellery / fashion ecommerce
   ═══════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --maroon:    #6B1A1A;
  --gold:      #C9A84C;
  --gold-lt:   #e8c96b;
  --cream:     #f8f9fa;
  --light:     #f4f6f8;
  --charcoal:  #1a1a1a;
  --mid:       #666;
  --border:    #ede5dc;
  --white:     #ffffff;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 6px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.14);
  --radius:    4px;
  --radius-lg: 12px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--white);
  color: var(--charcoal);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; transition: color .2s; }

/* ── Container ── */
.container {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ══════════════════════════════════════════════════════
   HEADER — sticky, white, Tanishq-style
══════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  height: 72px;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 0;
}
.header-logo { flex-shrink: 0; margin-right: 32px; }
.header-logo img { max-height: 52px; }
.logo-text {
  font-size: 22px;
  font-weight: 800;
  color: var(--maroon);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Search */
.header-search {
  flex: 1;
  max-width: 540px;
  position: relative;
}
.header-search.has-left-icon input { padding-left: 40px; }
.header-search input {
  width: 100%;
  padding: 10px 48px 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  font-size: 13px;
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--cream);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.header-search input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.12);
  background: #fff;
}
.header-search input::placeholder { color: #aaa; }
.search-submit-btn {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 15px;
}
.search-icons {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-icons button, .search-icons a {
  background: none;
  border: none;
  color: #bbb;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  transition: color .2s;
}
.search-icons button:hover, .search-icons a:hover { color: var(--maroon); }

/* Header action icons */
.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.h-icon-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #444;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: background .2s, color .2s;
  font-family: 'IBM Plex Sans', sans-serif;
}
.h-icon-btn:hover { background: var(--cream); color: var(--maroon); }
.h-icon-btn i { font-size: 18px; }
.h-icon-btn .icon-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .03em;
  margin-top: 2px;
  line-height: 1;
}
.h-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--maroon);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.cart-count { background: var(--maroon); }

/* User menu */
.user-menu-wrap { position: relative; }
.user-menu-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #444;
  background: none;
  border: none;
  cursor: pointer;
  transition: background .2s, color .2s;
  font-family: 'IBM Plex Sans', sans-serif;
}
.user-menu-trigger:hover { background: var(--cream); color: var(--maroon); }
.user-menu-trigger i { font-size: 18px; }
.user-menu-trigger .icon-label { font-size: 9px; font-weight: 600; letter-spacing: .03em; margin-top: 2px; }
.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 240px;
  z-index: 9999;
  overflow: hidden;
}
.user-dropdown.open { display: block; animation: ddFade .18s ease; }
@keyframes ddFade { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.ud-header {
  padding: 16px 18px 12px;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.ud-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ud-name { font-weight: 700; font-size: 14px; color: #222; margin: 0 0 2px; }
.ud-sub  { font-size: 11px; color: #aaa; margin: 0; }
.ud-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  transition: background .15s, color .15s;
  font-family: 'IBM Plex Sans', sans-serif;
}
.ud-link i { width: 16px; text-align: center; color: var(--maroon); font-size: 13px; }
.ud-link:hover { background: var(--cream); color: var(--maroon); }
.ud-divider { height: 1px; background: var(--border); margin: 4px 0; }
.ud-logout { color: #e74c3c !important; }
.ud-logout i { color: #e74c3c !important; }
.ud-logout:hover { background: #fff5f5 !important; }
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: #444;
  cursor: pointer;
  padding: 6px;
  margin-left: 8px;
}

/* ── Category nav ── */
.cat-nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 72px;
  z-index: 999;
}
.cat-nav-inner {
  display: flex;
  align-items: stretch;
  padding: 0 20px;
  overflow: visible;
}
.cat-nav-item { position: relative; flex-shrink: 0; }
.cat-nav-item > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 13px 15px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .2s, border-color .2s;
  letter-spacing: .02em;
}
.cat-nav-item > a:hover,
.cat-nav-item > a.active { color: var(--maroon); border-bottom-color: var(--maroon); }
.cat-nav-item > a .arrow-ic { font-size: 9px; color: #bbb; transition: transform .2s; }
.cat-sub-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 220px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--maroon);
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow-lg);
  z-index: 9000;
  padding: 6px 0;
}
.cat-nav-item.open > .cat-sub-dropdown { display: block; }
.cat-nav-item.open > a .arrow-ic { transform: rotate(180deg); color: var(--maroon); }
.cat-nav-item.open > a { color: var(--maroon); border-bottom-color: var(--maroon); }
.cat-sub-dropdown a {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all .15s;
}
.cat-sub-dropdown a:hover { background: var(--cream); color: var(--maroon); border-left-color: var(--maroon); padding-left: 24px; }
.cat-sub-dropdown .sub-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #bbb;
  padding: 8px 20px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

/* ── Mobile nav ── */
#navOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1100; }
#mobileNav {
  display:none; position:fixed; top:0; left:0;
  width:290px; height:100vh; background:#fff;
  z-index:1200; overflow-y:auto;
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
}
.mob-nav-header {
  background:var(--maroon); padding:18px 20px;
  display:flex; justify-content:space-between; align-items:center;
}
.mob-nav-header span { color:#fff; font-weight:700; font-size:15px; }
.mob-nav-header button { background:none; border:none; color:#fff; font-size:22px; cursor:pointer; }
.mob-nav-link {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 20px; color:#333; text-decoration:none;
  font-size:14px; font-weight:600; border-bottom:1px solid var(--border);
  letter-spacing:.02em; cursor:pointer;
}
.mob-nav-link:hover { color:var(--maroon); background:var(--cream); }
.mob-nav-link .mob-arrow { font-size:11px; color:#bbb; transition:transform .2s; }
.mob-nav-sub { display:none; background:#faf7f3; }
.mob-nav-sub a { display:block; padding:10px 20px 10px 36px; font-size:13px; color:#555; text-decoration:none; border-bottom:1px solid var(--border); }
.mob-nav-sub a:hover { color:var(--maroon); }
.mob-nav-sub.open { display:block; }
.mob-nav-item.open .mob-arrow { transform:rotate(90deg); }
.mobile-search-bar {
  display:none; background:var(--cream); padding:10px 16px;
  border-bottom:1px solid var(--border);
}
.mobile-search-bar form {
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1.5px solid var(--border);
  border-radius:22px; padding:8px 14px;
}
.mobile-search-bar input { flex:1; border:none; outline:none; font-size:13px; background:none; font-family:'IBM Plex Sans',sans-serif; }
.mobile-search-bar button { background:none; border:none; color:var(--maroon); cursor:pointer; }

/* ══════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'IBM Plex Sans', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .22s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--maroon); color: #fff; border-color: var(--maroon); }
.btn-primary:hover { background: #8b2222; border-color: #8b2222; color: #fff; }
.btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-gold:hover { background: #b8972e; border-color: #b8972e; color: #fff; }
.btn-outline { background: transparent; color: var(--maroon); border-color: var(--maroon); }
.btn-outline:hover { background: var(--maroon); color: #fff; }
.btn-outline-gold { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-outline-gold:hover { background: var(--gold); color: #fff; }
.btn-white { background: #fff; color: var(--maroon); border-color: #fff; }
.btn-white:hover { background: var(--cream); }
.btn-sm { padding: 8px 18px; font-size: 11px; }
.btn-lg { padding: 15px 40px; font-size: 14px; }
.btn-full { width: 100%; justify-content: center; }

/* ══════════════════════════════════════════════════════
   HERO SLIDER
══════════════════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
}
.hero-slide {
  display: none;
  position: relative;
  min-height: 520px;
}
.hero-slide.active { display: flex; }
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.18) 60%, transparent 100%);
}
.hero-no-img {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--maroon) 0%, #3d0e0e 60%, #1a0505 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 520px;
  padding: 80px 0;
  max-width: 580px;
  /* This element also carries .container (max-width:1260px; margin:0
     auto). Since this box is itself narrower (580px) than that 1260px,
     margin:auto centered the whole text block in the middle of the
     hero image instead of anchoring it to the left edge of the same
     column the header/nav content aligns to. Overriding margin to 0
     and margin-left to match where a centered 1260px container would
     have started keeps that same left edge without fighting .container
     everywhere else it's used. */
  margin-left: max(24px, calc((100% - 1260px) / 2 + 24px));
  margin-right: 0;
}
.hero-content .eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--gold);
  margin-bottom: 14px;
}
.hero-content h1 {
  font-size: clamp(30px, 4.5vw, 54px);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: .01em;
}
.hero-content p {
  font-size: 15px;
  color: rgba(255,255,255,.82);
  margin-bottom: 32px;
  line-height: 1.75;
  max-width: 440px;
}
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  backdrop-filter: blur(4px);
}
.hero-arrow:hover { background: rgba(255,255,255,.24); }
.hero-prev { left: 20px; }
.hero-next { right: 20px; }
.hero-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none;
  cursor: pointer;
  transition: all .2s;
}
.hero-dot.active { background: var(--gold); width: 24px; border-radius: 4px; }

/* ══════════════════════════════════════════════════════
   TRUST STRIP
══════════════════════════════════════════════════════ */
.trust-strip {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  border-right: 1px solid var(--border);
}
.trust-item:last-child { border-right: none; }
.trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.trust-item h4 { font-size: 13px; font-weight: 700; margin-bottom: 2px; color: var(--charcoal); }
.trust-item p  { font-size: 11px; color: var(--mid); margin: 0; }

/* ══════════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════════ */
.section { padding: 60px 0; }
.section-light { background: var(--light); }
.section-header { text-align: center; margin-bottom: 40px; }
.section-header .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.section-header h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 10px;
  letter-spacing: .02em;
}
.section-header p { font-size: 14px; color: var(--mid); max-width: 520px; margin: 0 auto 18px; }
.section-header .divider {
  width: 48px;
  height: 3px;
  background: var(--gold);
  margin: 0 auto;
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════
   CATEGORY CIRCLES (Tanishq style)
══════════════════════════════════════════════════════ */
.cat-circles {
  display: flex;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
}
.cat-circles::-webkit-scrollbar { display: none; }
.cat-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform .2s;
}
.cat-circle:hover { transform: translateY(-4px); }
.cat-circle:hover .cat-circle-img { border-color: var(--maroon); box-shadow: 0 6px 20px rgba(107,26,26,.18); }
.cat-circle-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #e8e8e8;
  background: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, box-shadow .2s;
}
.cat-circle-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-circle-img i { font-size: 32px; color: var(--gold); }
.cat-circle-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--charcoal);
  text-align: center;
  letter-spacing: .03em;
  max-width: 120px;
}

/* ══════════════════════════════════════════════════════
   PRODUCT CARDS
══════════════════════════════════════════════════════ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.product-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .22s, box-shadow .22s;
  position: relative;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #ddd;
}
.product-img {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--light);
}
.product-img a { display: block; width: 100%; height: 100%; }
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.product-card:hover .product-img img { transform: scale(1.06); }
.product-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5ede4, var(--cream));
  color: var(--gold);
  font-size: 48px;
}
.product-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.badge-new {
  background: var(--maroon);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 3px 8px;
  border-radius: 2px;
}
.badge-sale {
  background: var(--gold);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 2px;
}
.product-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .22s, transform .22s;
}
.product-card:hover .product-actions { opacity: 1; transform: translateX(0); }
.action-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e0e0e0;
  color: #333;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
  transition: all .2s;
}
.action-btn:hover { background: var(--maroon); color: #fff; border-color: var(--maroon); }
.action-btn.wishlisted { color: #e74c3c; background: #fff5f5; border-color: #e74c3c; }
.product-info { padding: 14px; }
.product-cat {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}
.product-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-name a { color: var(--charcoal); }
.product-name a:hover { color: var(--maroon); }
.product-price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.price-current { font-size: 16px; font-weight: 700; color: var(--charcoal); }
.price-old { font-size: 12px; color: #bbb; text-decoration: line-through; }
.price-disc { font-size: 11px; font-weight: 700; color: #27ae60; }

/* ══════════════════════════════════════════════════════
   PROMO BANNER STRIP
══════════════════════════════════════════════════════ */
.promo-banner {
  background: linear-gradient(110deg, var(--maroon) 0%, #9b2828 50%, #3d0e0e 100%);
  padding: 64px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.promo-banner::before {
  content: '';
  position: absolute;
  right: -100px;
  top: -100px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(201,168,76,.08);
}
.promo-banner .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.promo-banner h2 {
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: .02em;
}
.promo-banner .coupon {
  display: inline-block;
  background: rgba(201,168,76,.18);
  border: 1.5px dashed var(--gold);
  color: var(--gold);
  font-family: monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 8px 24px;
  border-radius: var(--radius);
  margin: 10px 0 20px;
}
.promo-banner p { color: rgba(255,255,255,.75); font-size: 14px; margin-bottom: 28px; }

/* ══════════════════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════════════════ */
.newsletter-section {
  background: #0f3460;
  padding: 60px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.newsletter-section .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 10px;
}
.newsletter-section h3 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.newsletter-section p { color: rgba(255,255,255,.72); font-size: 14px; margin-bottom: 28px; }
.nl-form {
  display: flex;
  max-width: 460px;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.nl-form input {
  flex: 1;
  padding: 15px 20px;
  border: none;
  font-size: 14px;
  outline: none;
  font-family: 'IBM Plex Sans', sans-serif;
  background: #fff;
  color: #333;
}
.nl-form button {
  background: var(--gold);
  color: #fff;
  border: none;
  padding: 15px 24px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  font-family: 'IBM Plex Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: background .2s;
  white-space: nowrap;
}
.nl-form button:hover { background: #b8972e; }

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.site-footer {
  background: #16213e;
  padding: 56px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer-brand-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 6px;
}
.footer-tagline { font-size: 12px; color: var(--gold); font-style: italic; margin-bottom: 16px; }
.footer-address { color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.9; margin-bottom: 18px; }
.social-icons { display: flex; gap: 8px; }
.social-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-decoration: none;
  transition: all .2s;
}
.social-icon:hover { background: var(--gold); color: #fff; }
.footer-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-links a:hover { color: var(--gold); }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.footer-contact-item i { color: var(--gold); margin-top: 2px; width: 14px; flex-shrink: 0; }
.footer-contact-item a { font-size: 13px; color: rgba(255,255,255,.6); text-decoration: none; }
.footer-contact-item a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 20px 24px;
}
.footer-bottom-inner {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,.4); margin: 0; }
.footer-payment-icons { display: flex; align-items: center; gap: 6px; }
.footer-payment-icons img { height: 24px; opacity: .6; }
.payment-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5);
  padding: 4px 10px;
  border-radius: 3px;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════
   PRODUCTS PAGE
══════════════════════════════════════════════════════ */
.shop-layout {
  display: grid;
  grid-template-columns: 252px 1fr;
  gap: 28px;
  padding: 32px 0 60px;
  align-items: start;
}
.sidebar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  position: sticky;
  top: 145px;
}
.sidebar-section { border-bottom: 1px solid var(--border); padding: 18px 20px; }
.sidebar-section:last-child { border-bottom: none; }
.sidebar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.sidebar-title .toggle-ic { font-size: 10px; color: #bbb; transition: transform .2s; }
.sidebar-body { }
.filter-check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 13px;
  color: #444;
  transition: color .2s;
}
.filter-check:hover { color: var(--maroon); }
.filter-check input { accent-color: var(--maroon); cursor: pointer; }
.price-range { margin-top: 8px; }
.price-inputs { display: flex; gap: 8px; }
.price-inputs input {
  width: 50%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  font-family: 'IBM Plex Sans', sans-serif;
  outline: none;
}
.price-inputs input:focus { border-color: var(--gold); }
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.shop-toolbar .result-count { font-size: 13px; color: var(--mid); }
.sort-select {
  padding: 8px 32px 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: 'IBM Plex Sans', sans-serif;
  outline: none;
  cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%23666'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  color: var(--charcoal);
}
.sort-select:focus { border-color: var(--gold); }

/* ══════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════ */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #444;
  transition: all .2s;
}
.pagination a:hover { background: var(--cream); color: var(--maroon); border-color: var(--maroon); }
.pagination span.current { background: var(--maroon); color: #fff; border-color: var(--maroon); }

/* ══════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
══════════════════════════════════════════════════════ */
.product-detail { padding: 36px 0 60px; }
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.pd-gallery { position: sticky; top: 150px; }
.pd-main-img {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--light);
  margin-bottom: 10px;
}
.pd-main-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-thumb {
  width: 70px;
  height: 70px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s;
  background: var(--light);
}
.pd-thumb:hover, .pd-thumb.active { border-color: var(--maroon); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }

.pd-info { }
.pd-breadcrumb { font-size: 12px; color: var(--mid); margin-bottom: 16px; }
.pd-breadcrumb a { color: var(--mid); text-decoration: none; }
.pd-breadcrumb a:hover { color: var(--maroon); }
.pd-breadcrumb span { margin: 0 6px; }
.pd-cat { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.pd-name { font-size: clamp(20px, 2.5vw, 28px); font-weight: 700; color: var(--charcoal); margin-bottom: 12px; line-height: 1.3; }
.pd-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.pd-stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; }
.pd-rating-count { font-size: 12px; color: var(--mid); }
.pd-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.pd-price { font-size: 26px; font-weight: 700; color: var(--charcoal); }
.pd-mrp { font-size: 15px; color: #bbb; text-decoration: line-through; }
.pd-discount { font-size: 13px; font-weight: 700; color: #27ae60; }
.pd-desc { font-size: 14px; color: #555; line-height: 1.85; margin-bottom: 22px; }
.pd-meta-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.pd-meta-table tr { border-bottom: 1px solid var(--border); }
.pd-meta-table tr:last-child { border-bottom: none; }
.pd-meta-table td { padding: 9px 4px; font-size: 13px; vertical-align: top; }
.pd-meta-table td:first-child { color: var(--mid); width: 120px; font-weight: 600; }
.pd-meta-table td:last-child { color: var(--charcoal); }
.pd-colors { margin-bottom: 20px; }
.pd-colors-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--charcoal); margin-bottom: 10px; }
.pd-color-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #ddd;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.color-swatch:hover, .color-swatch.active { transform: scale(1.15); box-shadow: 0 0 0 2px var(--maroon); }
.pd-actions { display: flex; gap: 12px; margin-bottom: 20px; }
.pd-qty { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pd-qty button {
  width: 38px;
  height: 46px;
  background: var(--cream);
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--charcoal);
  transition: background .2s;
}
.pd-qty button:hover { background: var(--border); }
.pd-qty input {
  width: 50px;
  height: 46px;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-family: 'IBM Plex Sans', sans-serif;
  outline: none;
}
.pd-trust { display: flex; gap: 20px; margin-top: 20px; flex-wrap: wrap; }
.pd-trust-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mid); }
.pd-trust-item i { color: var(--gold); }

/* Reviews */
.reviews-section { padding: 40px 0; border-top: 1px solid var(--border); }
.reviews-section h3 { font-size: 20px; font-weight: 700; margin-bottom: 24px; }
.review-card { padding: 20px 0; border-bottom: 1px solid var(--border); }
.review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.review-stars { color: var(--gold); font-size: 13px; }
.review-author { font-weight: 600; font-size: 13px; }
.review-date { font-size: 11px; color: var(--mid); margin-left: auto; }
.review-body { font-size: 13px; color: #555; line-height: 1.7; }

/* ══════════════════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════════════════ */
.breadcrumb-bar {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mid);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--mid); text-decoration: none; }
.breadcrumb a:hover { color: var(--maroon); }
.breadcrumb .sep { color: #ccc; font-size: 10px; }
.breadcrumb .current { color: var(--charcoal); font-weight: 600; }

/* ══════════════════════════════════════════════════════
   FORMS — Login, Checkout, Contact
══════════════════════════════════════════════════════ */
.form-page { padding: 48px 0 60px; }
.form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 480px;
  margin: 0 auto;
}
.form-card h2 { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.form-card .subtitle { font-size: 13px; color: var(--mid); margin-bottom: 28px; }
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 7px;
}
.form-control {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: 'IBM Plex Sans', sans-serif;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  color: var(--charcoal);
  background: #fff;
}
.form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.1);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-divider { text-align: center; color: #bbb; font-size: 12px; margin: 16px 0; position: relative; }
.form-divider::before, .form-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  background: var(--border);
}
.form-divider::before { left: 0; }
.form-divider::after { right: 0; }

/* ══════════════════════════════════════════════════════
   CART & CHECKOUT
══════════════════════════════════════════════════════ */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  padding: 36px 0 60px;
  align-items: start;
}
.checkout-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.checkout-box-header {
  background: var(--cream);
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.checkout-box-body { padding: 20px; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
}
.cart-table td { padding: 14px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 14px; }
.cart-table tr:last-child td { border-bottom: none; }
.cart-thumb { width: 60px; height: 72px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius); }
.order-summary-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; position: sticky; top: 160px; }
.order-summary-box h3 { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; color: #555; border-bottom: 1px solid var(--border); }
.summary-row:last-of-type { border-bottom: none; }
.summary-total { display: flex; justify-content: space-between; padding: 14px 0 6px; font-size: 16px; font-weight: 700; }

/* Payment options */
.pay-opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 10px;
  transition: border-color .2s, background .2s;
}
.pay-opt:hover { border-color: var(--gold); }
.pay-opt.sel { border-color: var(--maroon); background: #fff9f6; }
.pay-opt input[type="radio"] { margin-top: 3px; accent-color: var(--maroon); }

/* ══════════════════════════════════════════════════════
   ACCOUNT PAGE
══════════════════════════════════════════════════════ */
.account-layout {
  display: flex;
  gap: 0;
  min-height: 70vh;
  border-top: 1px solid var(--border);
  padding: 0 0 60px;
}
.account-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--border);
  position: sticky;
  top: 145px;
  align-self: flex-start;
}
.acc-sidebar-label {
  padding: 16px 20px 10px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.acc-sidebar-link {
  display: block !important;
  padding: 13px 20px !important;
  font-size: 13px !important;
  color: #555 !important;
  border-bottom: 1px solid #f0ece5 !important;
  text-decoration: none !important;
  border-left: 3px solid transparent !important;
  transition: all .15s !important;
  font-weight: 500 !important;
}
.acc-sidebar-link:hover {
  background: var(--cream) !important;
  color: var(--charcoal) !important;
}
.acc-sidebar-link.active {
  background: var(--cream) !important;
  color: var(--maroon) !important;
  border-left-color: var(--maroon) !important;
  font-weight: 700 !important;
}
.acc-sidebar-link.danger { color: #e74c3c !important; }
.account-content { flex: 1; padding: 32px 36px; min-width: 0; }
.account-content h2 { font-size: 24px; font-weight: 700; margin-bottom: 24px; }

/* ══════════════════════════════════════════════════════
   ALERTS & BADGES
══════════════════════════════════════════════════════ */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-ok  { background: #eafaf1; color: #1e7d3a; border: 1px solid #b7dfca; }
.alert-err { background: #fdf0ef; color: #c0392b; border: 1px solid #f5c6c1; }
.alert-info { background: #edf3ff; color: #1a56db; border: 1px solid #c3d8fa; }

.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; font-size: 10px; font-weight: 700; padding: 0 5px; }
.badge-count { background: var(--maroon); color: #fff; }

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.status-pending    { background: #fef3cd; color: #856404; }
.status-confirmed  { background: #d1ecf1; color: #0c5460; }
.status-processing { background: #d4edda; color: #155724; }
.status-shipped    { background: #cce5ff; color: #004085; }
.status-delivered  { background: #d4edda; color: #155724; }
.status-cancelled  { background: #f8d7da; color: #721c24; }

/* ══════════════════════════════════════════════════════
   TABLES (Orders etc)
══════════════════════════════════════════════════════ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 12px 14px;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.data-table td { padding: 14px; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--cream); }

/* ══════════════════════════════════════════════════════
   TOAST NOTIFICATION
══════════════════════════════════════════════════════ */
.toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background: #1a1a1a;
  color: #fff;
  padding: 13px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  animation: toastIn .28s ease;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 320px;
}
.toast.success { border-left: 4px solid #27ae60; }
.toast.error   { border-left: 4px solid #e74c3c; }
.toast.info    { border-left: 4px solid var(--gold); }
@keyframes toastIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════════════════════
   EMPTY STATES
══════════════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--mid);
}
.empty-state .empty-icon {
  font-size: 56px;
  color: var(--border);
  margin-bottom: 20px;
}
.empty-state h3 { font-size: 20px; font-weight: 700; color: var(--charcoal); margin-bottom: 8px; }
.empty-state p { font-size: 14px; margin-bottom: 24px; }

/* ══════════════════════════════════════════════════════
   UTILITY
══════════════════════════════════════════════════════ */
.text-center { text-align: center; }
.text-maroon { color: var(--maroon); }
.text-gold   { color: var(--gold); }
.text-mid    { color: var(--mid); }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.fw-700 { font-weight: 700; }
.d-flex { display: flex; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(3,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .header-search { display: none; }
  .mobile-toggle { display: block; }
  .mobile-search-bar { display: block; }
  .cat-nav { display: none; }
  .header-inner { padding: 0 16px; }
  .shop-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .product-detail-grid { grid-template-columns: 1fr; }
  .pd-gallery { position: static; }
  .checkout-layout { grid-template-columns: 1fr; }
  .account-layout { flex-direction: column; }
  .account-sidebar { width: 100%; position: static; border-right: none; border-bottom: 1px solid var(--border); }
  .acc-sidebar-link { display: inline-block !important; border-bottom: none !important; border-right: 1px solid var(--border) !important; padding: 10px 16px !important; border-left: none !important; }
  .acc-sidebar-link.active { border-left: none !important; border-bottom: 2px solid var(--maroon) !important; }
  .account-content { padding: 24px 16px; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item { border-right: none; border-bottom: 1px solid var(--border); }
  .trust-item:nth-child(odd) { border-right: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .products-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .form-row { grid-template-columns: 1fr; }
  .container { padding: 0 16px; }
  .section { padding: 40px 0; }
  .h-icon-btn .icon-label { display: none; }
  .user-menu-trigger .icon-label { display: none; }
  .h-icon-btn { width: 40px; height: 40px; }
  .hero-content { padding: 60px 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item { border-right: none !important; }
}
@media (max-width: 380px) {
  .products-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   HERO SLIDER JS
══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   COMPREHENSIVE FIXES — v2
   ═══════════════════════════════════════════════════════ */

/* 1. IBM Plex Sans everywhere */
* { font-family: 'IBM Plex Sans', sans-serif; }

/* 2. Header constrained to container */
.site-header { width: 100%; }
.header-inner {
  max-width: 1260px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
/* Logo size */
.header-logo img { max-height: 44px !important; }
.logo-text { font-size: 20px !important; }

/* Cat nav intentionally NOT constrained to the header's 1260px box —
   it previously was (max-width:1260px; margin:0 auto), which centered
   the whole row and left a large empty gap on both sides once there
   were enough categories to need the scroll wrapper. The nav is a
   full-bleed strip (see .cat-nav / .cat-nav-scroll), so its row of
   items should run edge-to-edge too. */

/* 3. Hero slider height — responsive via clamp() instead of fixed
   pixel breakpoints. A fixed 620px (or 420px/320px on mobile) box
   forces "cover" to crop a wide/landscape banner photo down to a
   thin vertical strip on narrow screens, which is what made the
   banner image look "not fit" on phones. Scaling the height with
   the viewport width keeps a sensible, less-cropped frame at every
   size while still filling the box edge-to-edge (no letterboxing).
   .hero-bg keeps background-size:cover + background-position:center
   so the image itself always fills this box with no gaps. */
.hero-slide { min-height: clamp(280px, 52vw, 620px) !important; }

/* 4. Product card actions — right side vertical, NO eye icon clutter */
.product-actions {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  bottom: auto !important;
  left: auto !important;
  flex-direction: column !important;
  gap: 6px !important;
  display: flex !important;
  opacity: 0 !important;
  transform: translateX(8px) !important;
  transition: opacity .22s, transform .22s !important;
  background: none !important;
  padding: 0 !important;
  width: auto !important;
}
.product-card:hover .product-actions {
  opacity: 1 !important;
  transform: translateX(0) !important;
}
.action-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid #ddd !important;
  color: #333 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  transition: all .2s !important;
}
.action-btn:hover {
  background: var(--maroon) !important;
  color: #fff !important;
  border-color: var(--maroon) !important;
}

/* 5. Breadcrumb — reduce gap to product detail */
.breadcrumb-bar { padding: 10px 0 !important; }
.product-detail,
.pd-layout,
section.product-detail { padding-top: 20px !important; }

/* 6. Footer logo size */
.site-footer .footer-brand-name { font-size: 22px !important; }
.site-footer img[alt] { max-height: 44px !important; }

/* 7. Category circles — bigger spacing */
.cat-circles { gap: 36px !important; }
.cat-circle-img { width: 120px !important; height: 120px !important; }
.cat-circle:hover .cat-circle-img { border-color: var(--maroon) !important; }

/* 8. Auth page */
.auth-wrap {
  min-height: calc(100vh - 180px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  background: var(--light);
}
.auth-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 32px rgba(0,0,0,.10);
  padding: 40px;
  width: 100%;
  max-width: 460px;
}
.auth-tabs {
  display: flex;
  border-bottom: 2px solid #ebebeb;
  margin-bottom: 28px;
}
.auth-tab {
  flex: 1;
  text-align: center;
  padding: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #999;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .2s, border-color .2s;
}
.auth-tab.active { color: var(--maroon); border-bottom-color: var(--maroon); }
.auth-tab:hover { color: var(--maroon); }
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 7px;
}
.form-control {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  font-family: 'IBM Plex Sans', sans-serif;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  color: #1a1a1a;
  background: #fff;
}
.form-control:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(107,26,26,.08);
}
.btn-block { width: 100%; justify-content: center; }
.alert-error {
  background: #fdf0ef;
  color: #c0392b;
  border: 1px solid #f5c6c1;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 9. Scroll animations */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ── TANISHQ-STYLE FOOTER ── */
.site-footer {
  background: #16213e !important;
  padding: 0 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}
.footer-top {
  padding: 56px 0 40px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-top-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-col-brand {}
.footer-app-section { margin-top: 24px; }
.footer-app-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 14px;
}
.footer-app-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.footer-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 9px 14px;
  color: #fff;
  text-decoration: none;
  transition: background .2s;
}
.footer-app-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.footer-app-btn i { font-size: 20px; }
.footer-app-btn .app-txt p { font-size: 10px; color: rgba(255,255,255,.6); line-height: 1; margin-bottom: 2px; }
.footer-app-btn .app-txt strong { font-size: 13px; font-weight: 700; }

.footer-col-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: .02em;
}
.footer-col-links { list-style: none; padding: 0; margin: 0; }
.footer-col-links li { margin-bottom: 12px; }
.footer-col-links a {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .2s;
  line-height: 1.4;
}
.footer-col-links a:hover { color: var(--gold); }
.footer-col-links a.highlighted { color: var(--gold); font-weight: 600; }

.footer-contact-phone {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: .02em;
}
.footer-chat-label {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.footer-chat-num {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  margin-bottom: 18px;
}
.footer-chat-icons { display: flex; gap: 12px; }
.footer-chat-icons a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  font-size: 16px;
  text-decoration: none;
  transition: all .2s;
}
.footer-chat-icons a:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.4); }

/* Footer social + payments row */
.footer-middle {
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-middle-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-social-label {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-right: 4px;
}
.footer-social-icons { display: flex; gap: 10px; align-items: center; }
.footer-social-icons a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  font-size: 15px;
  text-decoration: none;
  transition: all .2s;
}
.footer-social-icons a:hover { background: rgba(255,255,255,.16); color: #fff; }

.footer-payment-row {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-payment-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pay-icon {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  letter-spacing: .04em;
}

.footer-bottom2 {
  padding: 18px 0;
}
.footer-bottom2-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom2 p {
  font-size: 12px;
  color: rgba(255,255,255,.35);
  margin: 0;
}
.footer-bottom2 a { color: rgba(255,255,255,.45); text-decoration: none; }
.footer-bottom2 a:hover { color: rgba(255,255,255,.75); }

@media (max-width: 900px) {
  .footer-top-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .auth-card { padding: 28px 20px; }
}
@media (max-width: 600px) {
  .footer-top-grid { grid-template-columns: 1fr; }
  .footer-middle-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .auth-wrap { padding: 24px 16px; }
  .auth-card { padding: 24px 16px; }
}

/* Logo size + nav label size — single source of truth (previously
   redeclared 3x across this file with conflicting !important values
   fighting each other and header.php's inline nav styles) */
.header-logo img { max-height: 50px !important; width: auto !important; }
.logo-text { font-size: 18px !important; }
.header-logo { margin-right: 20px !important; }
.cat-nav-item > a { font-size: 13px !important; font-weight: 600 !important; }

/* ── Nav icons ── */
.cat-nav-item > a i.arrow-ic { font-size: 9px; color: #bbb; transition: transform .2s; }
.cat-nav-item > a i:not(.arrow-ic) { font-size: 13px; opacity: .75; }

/* ── Product page: reduce breadcrumb-to-product gap ── */
.breadcrumb-bar { padding: 8px 0 !important; margin-bottom: 0 !important; }
section.product-detail { padding-top: 10px !important; }
.pd-layout { margin-top: 0 !important; }

/* ── Add to cart button: pulse on click ── */
@keyframes cartPulse {
  0% { transform: scale(1); }
  40% { transform: scale(.94); }
  70% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.cart-pulse { animation: cartPulse .35s ease !important; }

/* ── Cart qty improved ── */
.cart-qty { border: 1.5px solid #d0d0d0 !important; border-radius: 6px !important; overflow: hidden !important; }
.cqb { width: 40px !important; height: 42px !important; font-size: 20px !important; }
.cqb:hover { background: var(--maroon) !important; color: #fff !important; }
.cqi { height: 42px !important; font-size: 15px !important; font-weight: 700 !important; }
.cart-remove-btn {
  width: 36px !important; height: 36px !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 6px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.cart-remove-btn:hover { color: #e74c3c !important; border-color: #e74c3c !important; background: #fff0f0 !important; }

/* ═══════════════════════════════════════════════════════
   CAT-NAV — layout, spacing and hover states live in the
   inline <style> block in includes/header.php (loaded right
   next to the markup it styles). This file used to redeclare
   the same selectors here with !important, which silently beat
   header.php's values and left the menu more cramped than
   designed (11px icons instead of 13px, 11px padding instead
   of 16px) plus killed the hero image's readability overlay.
   Both duplicate blocks were removed — see the logo/nav-label
   rule above for the one remaining override this file owns.
   ═══════════════════════════════════════════════════════ */

/* Horizontal scroll wrapper around the nav row (markup in header.php,
   never styled there — this file is the only place that gives it
   overflow behavior). Without this, a category list longer than the
   header width has nowhere to go: the row spills past its container
   and the whole page gains a horizontal scrollbar, which is exactly
   the "header menu not proper" bug — cut-off items with no way to
   scroll to them. flex-shrink:0 on .cat-nav-item (set in header.php)
   is what keeps each label full-width instead of getting squashed. */
.cat-nav-scroll {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cat-nav-scroll::-webkit-scrollbar { display: none; }

/* Dropdown portal — positioned via JS (toggleNavItem in header.php)
   so it can escape the sticky header's stacking context. This is
   the only nav-dropdown styling unique to this file. */
.cat-sub-dropdown-portal {
  display: none;
  position: fixed !important;
  background: #fff !important;
  min-width: 220px !important;
  max-height: 75vh !important;
  overflow-y: auto !important;
  border: 1px solid #ddd !important;
  border-top: 3px solid var(--maroon) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.15) !important;
  z-index: 99999 !important;
  padding: 6px 0 8px !important;
}
.cat-sub-dropdown-portal.open { display: block !important; }
.cat-sub-dropdown-portal a {
  display: block !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  color: #333 !important;
  text-decoration: none !important;
  border-left: 3px solid transparent !important;
  white-space: nowrap !important;
  transition: all .15s !important;
}
.cat-sub-dropdown-portal a:hover {
  background: #fdf8f2 !important;
  color: var(--maroon) !important;
  border-left-color: var(--maroon) !important;
  padding-left: 22px !important;
}
.cat-sub-dropdown-portal .sub-header {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #bbb !important;
  padding: 8px 18px 7px !important;
  border-bottom: 1px solid #f0ebe4 !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════
   GRID & CATEGORY LAYOUT OVERRIDES
══════════════════════════════════════════════════════ */

/* 3-col product grid on home + shop pages */
.products-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
}

/* Shop category sidebar layout stays correct */
.shop-layout .products-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Responsive overrides */
@media (max-width: 900px) {
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
}
@media (max-width: 500px) {
  .products-grid { grid-template-columns: repeat(1, 1fr) !important; gap: 12px !important; }
}

/* ── Category circles: 6 per row, then 5 ── */
.cat-circles {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 20px 16px !important;
  justify-items: center !important;
  overflow-x: unset !important;
  padding-bottom: 0 !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* Second row (items 7-11) auto-centered via grid */
/* We use CSS grid auto-placement — 6 first row, 5 second row
   To center the 5 in second row, use a wrapper trick */
.cat-circles .cat-circle {
  flex-shrink: unset !important;
  width: 100% !important;
  max-width: 120px !important;
}

/* Center the second row (items 7–11 of 11) */
.cat-circles-wrap {
  overflow: hidden;
}
/* Row 1: 6 items, Row 2: 5 items centered */
/* Using named grid areas would need inline PHP — instead use nth-child 
   and CSS grid with auto-fill to visually center row 2 */
.cat-circles::after {
  content: '';
  /* No pseudo item needed - grid handles it */
}

/* The second row centering trick:
   grid has 6 cols. Row 2 has 5 items → they start at col 1.
   To center: offset using a half-column.
   We do this with a before pseudo on the 7th item */
.cat-circle:nth-child(7) {
  grid-column-start: 1;
  /* shift by half a column to center 5 items in 6-col grid */
  margin-left: calc(50% + 8px) !important;
}
/* Actually simpler: wrap rows manually */

/* Reset nth-child margin - instead use subgrid or offset */
.cat-circle:nth-child(7) { margin-left: 0 !important; }

/* Clean centering approach: use flex for second row */
.cat-circles {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}
.cat-circle {
  width: 120px !important;
  flex-shrink: 0 !important;
  flex-basis: 120px !important;
}

@media (max-width: 768px) {
  .cat-circles { gap: 16px !important; }
  .cat-circle { width: 90px !important; flex-basis: 90px !important; }
  .cat-circle-img { width: 90px !important; height: 90px !important; }
}
@media (max-width: 480px) {
  .cat-circles { gap: 12px !important; }
  .cat-circle { width: 76px !important; flex-basis: 76px !important; }
  .cat-circle-img { width: 76px !important; height: 76px !important; }
}

/* ══════════════════════════════════════════════════════
   HOME PAGE HOVER ANIMATIONS
══════════════════════════════════════════════════════ */

/* Product card hover lift + shadow */
.product-card {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}
.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.13) !important;
  border-color: #ddd !important;
}

/* Product image zoom on hover */
.product-img img {
  transition: transform .45s ease !important;
}
.product-card:hover .product-img img {
  transform: scale(1.08) !important;
}

/* Product card name color transition */
.product-name a { transition: color .2s !important; }
.product-card:hover .product-name a { color: var(--maroon) !important; }

/* Category circle hover */
.cat-circle {
  transition: transform .25s ease !important;
}
.cat-circle:hover {
  transform: translateY(-5px) !important;
}
.cat-circle-img {
  transition: border-color .25s, box-shadow .25s !important;
}
.cat-circle:hover .cat-circle-img {
  border-color: var(--maroon) !important;
  box-shadow: 0 6px 20px rgba(107,26,26,.20) !important;
}
.cat-circle-name {
  transition: color .2s !important;
}
.cat-circle:hover .cat-circle-name {
  color: var(--maroon) !important;
}

/* Trust strip hover */
.trust-item {
  transition: background .2s !important;
  border-radius: 8px !important;
}
.trust-item:hover { background: #fdf8f2 !important; }
.trust-icon {
  transition: transform .25s, background .25s !important;
}
.trust-item:hover .trust-icon {
  transform: scale(1.12) rotate(-5deg) !important;
}

/* Section headings underline animation */
.section-header .divider {
  transition: width .4s ease !important;
  width: 48px;
}
.section:hover .section-header .divider,
.section-light:hover .section-header .divider {
  width: 80px !important;
}

/* Add to cart button ripple */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.18);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.btn-primary:hover::after { transform: scaleX(1); }

/* Hero content text fade-up on load */
.hero-content {
  animation: heroFadeUp .8s ease both;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal for sections */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════
   FINAL LAYOUT FIXES
══════════════════════════════════════════════════════ */

/* Category circles — full container width, 6 per row */
.cat-circles {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 24px !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  justify-items: center !important;
  overflow-x: unset !important;
}

/* Second row: 5 items centered in a 6-col grid */
/* Items 7-11 → start at col 1. Center by placing item 7 at col 1 but 
   shifting the whole second row. Use a CSS trick: */
.cat-circle { width: 100% !important; max-width: 140px !important; flex-shrink: 0 !important; }
.cat-circle-img { width: 120px !important; height: 120px !important; }

/* Center 5 items in row 2 of a 6-col grid:
   item7 starts at col 1, but to center 5 in 6 cols we need half-col offset.
   Use: item7 starts at col 1, but shift entire grid to center using auto margins in flex */

/* Use flex instead for simpler centering control */
.cat-circles {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0 !important;
  max-width: 100% !important;
}

.cat-circle {
  width: calc(100% / 6 - 20px) !important;
  max-width: 160px !important;
  min-width: 100px !important;
  margin: 10px !important;
}

.cat-circle-img {
  width: 120px !important;
  height: 120px !important;
}

@media (max-width: 900px) {
  .cat-circle {
    width: calc(100% / 4 - 16px) !important;
    min-width: 80px !important;
    max-width: 120px !important;
    margin: 8px !important;
  }
  .cat-circle-img { width: 90px !important; height: 90px !important; }
}

@media (max-width: 560px) {
  .cat-circle {
    width: calc(100% / 3 - 12px) !important;
    margin: 6px !important;
    max-width: 100px !important;
  }
  .cat-circle-img { width: 76px !important; height: 76px !important; }
  .cat-circle-name { font-size: 11px !important; }
}

/* New arrivals: always 3 cols in 2 rows = 6 products */
.section .products-grid,
.section-light .products-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* ══════════════════════════════════════════════════════
   FULL-WIDTH SECTIONS (no container constraint)
══════════════════════════════════════════════════════ */

/* Full-width section wrapper — replaces .container in home sections */
.full-section {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
}

/* Products grid inside full-section — 3 cols, full width */
.full-section .products-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Category circles inside full-section — fill width */
.full-section .cat-circles {
  max-width: 100% !important;
  width: 100% !important;
  justify-content: center !important;
}

/* Section header stays centered */
.full-section .section-header {
  text-align: center !important;
  max-width: 600px !important;
  margin: 0 auto 36px !important;
}

/* View all button row */
.full-section .text-center { text-align: center !important; }

@media (max-width: 900px) {
  .full-section { padding: 0 16px !important; }
  .full-section .products-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 500px) {
  .full-section .products-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════
   HOME SECTIONS — TRUE FULL WIDTH, 4 COLUMNS
══════════════════════════════════════════════════════ */

/* Remove section horizontal padding so full-section hits page edge */
.section,
.section-light {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Full-section: edge-to-edge with comfortable internal padding */
.full-section {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 40px !important;
  box-sizing: border-box !important;
}

/* 4-column product grid inside full-section */
.full-section .products-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
}

/* Category circles full width */
.full-section .cat-circles {
  width: 100% !important;
  max-width: 100% !important;
  justify-content: center !important;
}

/* Section header stays readable */
.full-section .section-header {
  max-width: 640px !important;
  margin: 0 auto 36px !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .full-section .products-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .full-section { padding: 0 16px !important; }
  .full-section .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 480px) {
  .full-section .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}

/* ══════════════════════════════════════════════════════
   DEFINITIVE FULL-WIDTH 4-COLUMN FIX
══════════════════════════════════════════════════════ */

/* Section: truly full width, no horizontal padding */
body .section,
body .section-light {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Full-section wrapper: full width, comfortable padding */
body .full-section {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}

/* Products grid: 4 columns, full width */
body .full-section .products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Category circles: full width */
body .full-section .cat-circles {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 20px !important;
}

/* Section header: centered text, not constrained */
body .full-section .section-header {
  text-align: center !important;
  max-width: 640px !important;
  margin: 0 auto 36px !important;
}

/* Responsive: 2 cols on tablet, 2 on mobile */
@media (max-width: 1024px) {
  body .full-section .products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 700px) {
  body .full-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body .full-section .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════
   TESTIMONIALS (home page)
══════════════════════════════════════════════════════ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.testimonial-quote-icon {
  color: var(--gold);
  font-size: 20px;
  opacity: .5;
  margin-bottom: 10px;
}
.testimonial-stars { margin-bottom: 14px; font-size: 13px; display: flex; gap: 3px; }
.testimonial-text {
  font-size: 14px;
  line-height: 1.85;
  color: var(--mid);
  margin-bottom: 22px;
  flex: 1;
}
.testimonial-person { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.testimonial-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--maroon);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
}
.testimonial-name { font-size: 13px; font-weight: 700; color: var(--charcoal); }
.testimonial-role { font-size: 11px; color: #aaa; margin-top: 1px; }

@media (max-width: 900px) {
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   HOMEPAGE — Brand Intro / Discover Collections /
   Signature Collections / Find Your Moment /
   Made Especially For You / Our Story
══════════════════════════════════════════════════════ */

.brand-intro { text-align: center; padding: 8px 0 4px; }
.brand-intro-text {
  max-width: 680px;
  margin: 0 auto 8px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--mid);
}
.brand-intro-text p { margin: 0; }

/* Discover Collections — 3 big mood tiles (Light / Breathe / Gift) */
.discover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.discover-tile {
  position: relative;
  display: block;
  height: 360px;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  background: linear-gradient(135deg, var(--maroon), #3d0f0f);
  isolation: isolate;
}
.discover-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.discover-tile:hover img { transform: scale(1.06); }
.discover-tile-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; color: rgba(255,255,255,.18);
}
.discover-tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.6) 100%);
  z-index: 1;
}
.discover-tile-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 24px;
  color: #fff;
}
.discover-tile-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.discover-tile-name { font-family:'Montserrat',sans-serif; font-size: 24px; font-weight: 700; letter-spacing: .04em; margin: 0 0 8px; }
.discover-tile-cta { font-size: 12px; font-weight: 600; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; }

/* Find Your Moment — mood cards */
.moment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.moment-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 34px 20px;
  border-radius: 14px;
  background: var(--cream);
  border: 1px solid #f0e4d6;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.moment-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0,0,0,.08); }
.moment-icon {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--maroon); font-size: 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.moment-title { font-family:'Montserrat',sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--charcoal); text-transform: uppercase; }
.moment-desc { font-size: 13px; color: var(--mid); line-height: 1.6; }

/* Made Especially For You — promo band */
.mfy-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  background: var(--maroon);
  border-radius: 18px;
  padding: 48px 52px;
  color: #fff;
}
.mfy-band .eyebrow { color: var(--gold) !important; }
.mfy-band h2 { font-family:'Montserrat',sans-serif; font-size: 30px; margin: 8px 0 16px; letter-spacing: .02em; color: #fff; }
.mfy-band p { font-size: 14.5px; line-height: 1.85; color: rgba(255,255,255,.85); margin-bottom: 22px; max-width: 480px; }
.mfy-visual {
  display: flex; align-items: center; justify-content: center;
  height: 220px; border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 64px; color: var(--gold);
}
.mfy-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Our Story — split band */
.story-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.story-visual {
  height: 340px; border-radius: 14px;
  background: linear-gradient(135deg, var(--cream), #f0e2cd);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 56px;
  overflow: hidden; position: relative;
}
.story-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.story-text h2 { font-family:'Montserrat',sans-serif; font-size: 28px; margin: 8px 0 16px; color: var(--charcoal); letter-spacing:.02em; }
.story-text p { font-size: 14.5px; line-height: 1.9; color: var(--mid); margin-bottom: 22px; }

@media (max-width: 900px) {
  .discover-grid { grid-template-columns: 1fr; }
  .discover-tile { height: 260px; }
  .moment-grid { grid-template-columns: 1fr; }
  .mfy-band { grid-template-columns: 1fr; padding: 34px 26px; }
  .mfy-visual { height: 160px; }
  .story-band { grid-template-columns: 1fr; }
  .story-visual { height: 220px; }
}

/* ══════════════════════════════════════════════════════
   SIGNATURE COLLECTIONS — 5-per-row category grid
══════════════════════════════════════════════════════ */
.signature-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px 20px;
}
.signature-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  text-decoration: none;
}
.signature-tile-img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.signature-tile:hover .signature-tile-img {
  border-color: var(--maroon);
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.1);
}
.signature-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.signature-tile-img i { font-size: 28px; color: var(--gold); }
.signature-tile-name { font-size: 13px; font-weight: 600; color: var(--charcoal); line-height: 1.3; }

@media (max-width: 900px) {
  .signature-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .signature-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .signature-tile-img { width: 84px; height: 84px; }
}

/* ══════════════════════════════════════════════════════
   FIND YOUR MOMENT — mood pills
══════════════════════════════════════════════════════ */
.moment-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.moment-pill {
  display: inline-flex;
  align-items: center;
  padding: 15px 30px;
  border-radius: 40px;
  background: #fff;
  border: 1.5px solid var(--border);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.moment-pill:hover {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff;
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .moment-pill { padding: 12px 20px; font-size: 11.5px; }
}

/* ══════════════════════════════════════════════════════
   MADE ESPECIALLY FOR YOU — bullet line
══════════════════════════════════════════════════════ */
.mfy-bullets {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

/* ══════════════════════════════════════════════════════
   CLOSING CTA — full-width banner before footer
══════════════════════════════════════════════════════ */
.closing-cta {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--maroon), #2b0a0a);
  padding: 80px 40px;
  text-align: center;
  color: #fff;
}
.closing-cta h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  letter-spacing: .03em;
  margin: 0 0 26px;
  color: #fff;
}
@media (max-width: 600px) {
  .closing-cta { padding: 54px 24px; }
  .closing-cta h2 { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════
   MINI HERO — Fragrance / Find Your Moment page headers
══════════════════════════════════════════════════════ */
.mini-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--maroon) 0%, #3d0f0f 60%, #2b0a0a 100%);
  padding: 74px 32px;
  text-align: center;
  color: #fff;
}
.mini-hero-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 220px; color: rgba(255,255,255,.06); pointer-events: none;
}
.mini-hero-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.mini-hero .eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.mini-hero h1 {
  font-family: 'Montserrat', sans-serif; font-size: clamp(26px, 4vw, 40px);
  font-weight: 700; letter-spacing: .02em; margin: 0 0 16px; color: #fff;
}
.mini-hero p { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.85); margin: 0 auto 26px; max-width: 480px; }
.mini-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.mini-hero-scroll {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.75); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  margin-top: 6px;
}
.mini-hero-scroll:hover { color: #fff; }
@media (max-width: 600px) {
  .mini-hero { padding: 54px 20px; border-radius: 14px; }
  .mini-hero-icon { font-size: 140px; }
}

/* ══════════════════════════════════════════════════════
   DISCOVERY CARDS — Family / Feeling / Moment pick grids
   (reuses .moment-card's look; adds a 6-card layout + an
   optional example line under the description)
══════════════════════════════════════════════════════ */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pick-grid .moment-card { cursor: pointer; }
.pick-example {
  font-size: 11.5px; color: var(--gold); line-height: 1.6; margin-top: -4px;
}
@media (max-width: 900px) {
  .pick-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pick-grid { grid-template-columns: 1fr; }
}

/* Simple two-column promo band (Create Your Own Fragrance / gifting CTAs) */
.promo-split {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 28px;
  background: var(--cream);
  border: 1px solid #f0e4d6;
  border-radius: 16px;
  padding: 32px 36px;
}
.promo-split-icon {
  width: 76px; height: 76px; border-radius: 50%;
  background: #fff; color: var(--maroon); font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.06); flex-shrink: 0;
}
.promo-split h2 { font-family:'Montserrat',sans-serif; font-size: 22px; color: var(--charcoal); margin-bottom: 6px; }
.promo-split h3 { font-size: 15px; color: var(--maroon); font-weight: 700; margin-bottom: 8px; }
.promo-split p { font-size: 14px; color: var(--mid); line-height: 1.7; margin-bottom: 16px; }
@media (max-width: 600px) {
  .promo-split { grid-template-columns: 1fr; text-align: center; padding: 26px 22px; }
  .promo-split-icon { margin: 0 auto; }
}

/* Corporate gifting enquiry strip */
.corp-cta-strip {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  background: var(--maroon); color: #fff; border-radius: 14px; padding: 22px 28px; margin-bottom: 28px;
}
.corp-cta-strip p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 460px; }
.corp-cta-strip strong { color: var(--gold); }

/* ══════════════════════════════════════════════════════
   FRAGRANCE PAGE — light editorial layout
══════════════════════════════════════════════════════ */

/* Hero: light band, italic accent word, real product photo below */
.frag-hero { text-align: center; }
.frag-hero .eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--maroon); margin-bottom: 14px;
}
.frag-hero h1 {
  font-size: clamp(28px, 4.4vw, 44px); font-weight: 700; color: var(--charcoal);
  letter-spacing: .01em; margin: 0 0 18px; line-height: 1.25;
}
.frag-hero h1 em { font-style: italic; font-family: Georgia, 'Times New Roman', serif; color: var(--maroon); font-weight: 400; }
.frag-hero p { font-size: 15px; color: var(--mid); max-width: 480px; margin: 0 auto 26px; line-height: 1.8; }
.frag-hero-photo {
  margin-top: 8px; border-radius: 20px; overflow: hidden; max-width: 720px;
  margin-left: auto; margin-right: auto; box-shadow: var(--shadow-lg);
}
.frag-hero-photo img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }

/* Section spine — small vertical label running down the left edge,
   desktop only (mobile keeps the normal centered eyebrow instead). */
.spine-section { position: relative; }
.spine-label {
  display: none;
  position: absolute; left: -4px; top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
@media (min-width: 1180px) {
  .spine-label { display: block; }
  .spine-section .container { position: relative; padding-left: 36px; }
}

/* By Fragrance Family — plain white/cream cards */
.family-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.family-card {
  display: flex; flex-direction: column; gap: 12px; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 26px 24px; text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.family-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.family-card-icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--cream);
  display: flex; align-items: center; justify-content: center; color: var(--maroon); font-size: 19px;
}
.family-card h3 { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--charcoal); }
.family-card p { font-size: 13px; color: var(--mid); line-height: 1.6; margin: 0; }
.family-card-examples { font-size: 11.5px; color: var(--gold); line-height: 1.6; }
.family-card-cta { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--maroon); display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.family-card:hover .family-card-cta { text-decoration: underline; }

/* By Feeling — full-color cards, one accent per card via inline style */
.feeling-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feeling-card {
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  border-radius: 14px; padding: 26px 24px; text-decoration: none; color: #fff;
  transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden;
}
.feeling-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feeling-card-icon {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px;
}
.feeling-card h3 { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.feeling-card p { font-size: 13px; color: rgba(255,255,255,.88); line-height: 1.6; margin: 0; }
.feeling-card-cta { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; opacity: .9; }
.feeling-card:hover .feeling-card-cta { text-decoration: underline; opacity: 1; }

/* Explore Our Fragrances — small thumbnail + caption grid */
.thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 20px; }
.thumb-card { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.thumb-card-img {
  width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--cream);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.thumb-card-img img { width: 100%; height: 100%; object-fit: cover; }
.thumb-card-img i { font-size: 22px; color: #ddd; }
.thumb-card-name { font-size: 13.5px; font-weight: 700; color: var(--charcoal); line-height: 1.4; margin-bottom: 2px; }
.thumb-card-fam { font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

/* Can't Find — slim horizontal strip */
.frag-slim-strip {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--cream); border: 1px solid #f0e4d6; border-radius: 14px; padding: 20px 26px;
}
.frag-slim-strip-icon {
  width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--maroon); font-size: 18px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-sm);
}
.frag-slim-strip-text { flex: 1; min-width: 220px; }
.frag-slim-strip-text h3 { font-size: 15px; font-weight: 700; color: var(--charcoal); margin-bottom: 2px; }
.frag-slim-strip-text p { font-size: 13px; color: var(--mid); margin: 0; }

/* Final CTA — bold text + real photo split, replaces the maroon band
   just on this page (the shared .closing-cta stays as-is elsewhere) */
.frag-final-split {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 40px;
  background: var(--cream); border-radius: 20px; padding: 48px; overflow: hidden;
}
.frag-final-split h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; color: var(--charcoal); margin-bottom: 14px; line-height: 1.25; }
.frag-final-split p { font-size: 14.5px; color: var(--mid); line-height: 1.8; margin-bottom: 24px; max-width: 420px; }
.frag-final-photo { border-radius: 16px; overflow: hidden; height: 320px; }
.frag-final-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .family-grid, .feeling-grid { grid-template-columns: repeat(2, 1fr); }
  .thumb-grid { grid-template-columns: repeat(2, 1fr); }
  .frag-final-split { grid-template-columns: 1fr; padding: 34px 26px; text-align: center; }
  .frag-final-split p { margin-left: auto; margin-right: auto; }
  .frag-final-photo { height: 220px; }
}
@media (max-width: 560px) {
  .family-grid, .feeling-grid, .thumb-grid { grid-template-columns: 1fr; }
  .frag-hero-photo img { max-height: 260px; }
  .frag-slim-strip { flex-direction: column; text-align: center; }
}

/* ══════════════════════════════════════════════════════
   FIND YOUR MOMENT — split hero (real photo + italic-serif title)
══════════════════════════════════════════════════════ */
.fym-hero {
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 40px;
  background: var(--cream); border-radius: 20px; padding: 56px 48px; overflow: hidden;
}
.fym-hero h1 {
  font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400;
  font-size: clamp(34px, 4.4vw, 52px); color: var(--charcoal); line-height: 1.15; margin-bottom: 10px;
}
.fym-hero-sub {
  font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700;
  color: var(--charcoal); margin-bottom: 12px;
}
.fym-hero p:not(.fym-hero-sub) { font-size: 14.5px; color: var(--mid); line-height: 1.8; margin-bottom: 26px; max-width: 420px; }
.fym-hero-photo { border-radius: 16px; overflow: hidden; height: 340px; }
.fym-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Vertical numbered step rail — desktop-only decorative guide down
   the right margin, echoing the Fragrance page's .spine-label pattern */
.step-rail-section { position: relative; }
.step-rail-marker { display: none; }
@media (min-width: 1180px) {
  .step-rail-section .container { position: relative; padding-right: 118px; }
  .step-rail-marker {
    display: block; position: absolute; right: -4px; top: 4px; width: 104px; text-align: center;
  }
  .step-rail-num {
    width: 32px; height: 32px; border-radius: 50%; background: var(--maroon); color: #fff;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 10px;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
  }
  .step-rail-label { font-size: 11px; color: var(--mid); line-height: 1.5; }
}

/* Choose Your Moment — photo cards with an icon badge overlapping
   the image's bottom edge */
.moment-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.moment-photo-card {
  display: block; background: #fff; border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; text-align: center; text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.moment-photo-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.moment-photo-card-img { height: 150px; }
.moment-photo-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.moment-photo-card-icon {
  width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--maroon);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); margin: -23px auto 0; position: relative; z-index: 1;
}
.moment-photo-card-body { padding: 16px 18px 22px; }
.moment-photo-card-body h3 { font-family: 'Montserrat', sans-serif; font-size: 14.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--charcoal); margin: 10px 0 6px; }
.moment-photo-card-body p { font-size: 13px; color: var(--mid); line-height: 1.6; margin: 0 0 10px; }
.moment-photo-card-cta { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--maroon); display: inline-flex; align-items: center; gap: 6px; }
.moment-photo-card:hover .moment-photo-card-cta { text-decoration: underline; }

/* Gifting step — split image/content cards */
.gift-split-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gift-split-card {
  display: flex; background: #fff; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.gift-split-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gift-split-card-img { flex: 0 0 40%; min-height: 150px; }
.gift-split-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gift-split-card-body { flex: 1; padding: 20px 18px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.gift-split-card-icon {
  width: 36px; height: 36px; border-radius: 50%; background: var(--cream); color: var(--maroon);
  display: flex; align-items: center; justify-content: center; font-size: 14px; margin-bottom: 4px;
}
.gift-split-card-body h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--charcoal); }
.gift-split-card-body p { font-size: 12.5px; color: var(--mid); line-height: 1.6; margin: 0; }
.gift-split-card-cta { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--maroon); display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.gift-split-card:hover .gift-split-card-cta { text-decoration: underline; }

/* Need Help — real photo + content split (replaces the plain icon
   promo previously used here; .promo-split is left as-is, unused) */
.fym-help-split {
  display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: 32px;
  background: var(--cream); border: 1px solid #f0e4d6; border-radius: 18px; overflow: hidden;
}
.fym-help-photo { height: 100%; min-height: 220px; }
.fym-help-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fym-help-body { padding: 32px 36px 32px 4px; }
.fym-help-body h2 { font-family:'Montserrat',sans-serif; font-size: 22px; color: var(--charcoal); margin-bottom: 6px; }
.fym-help-body h3 { font-size: 15px; color: var(--maroon); font-weight: 700; margin-bottom: 8px; }
.fym-help-body p { font-size: 14px; color: var(--mid); line-height: 1.7; margin-bottom: 18px; }

@media (max-width: 900px) {
  .fym-hero { grid-template-columns: 1fr; text-align: center; padding: 40px 28px; }
  .fym-hero p:not(.fym-hero-sub) { margin-left: auto; margin-right: auto; }
  .fym-hero-photo { height: 240px; order: -1; margin-bottom: 8px; }
  .moment-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .gift-split-grid { grid-template-columns: 1fr; }
  .fym-help-split { grid-template-columns: 1fr; }
  .fym-help-photo { height: 200px; }
  .fym-help-body { padding: 26px 26px 32px; text-align: center; }
}
@media (max-width: 560px) {
  .moment-photo-grid { grid-template-columns: 1fr; }
  .gift-split-card { flex-direction: column; }
  .gift-split-card-img { flex: none; height: 140px; }
}

/* ══════════════════════════════════════════════════════
   BREATHE — split hero (real photo + title), matching the
   Fragrance / Find Your Moment split-hero pattern
══════════════════════════════════════════════════════ */
.brt-hero {
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 40px;
  background: var(--cream); border-radius: 20px; padding: 56px 48px; overflow: hidden;
}
.brt-hero h1 { font-family: 'Montserrat', sans-serif; font-size: clamp(32px, 4vw, 46px); font-weight: 700; letter-spacing: .02em; color: var(--charcoal); margin-bottom: 8px; }
.brt-hero-sub { font-size: 16px; font-weight: 700; color: var(--maroon); margin-bottom: 12px; }
.brt-hero p:not(.brt-hero-sub) { font-size: 14.5px; color: var(--mid); line-height: 1.8; margin-bottom: 26px; max-width: 440px; }
.brt-hero-photo { border-radius: 16px; overflow: hidden; height: 340px; }
.brt-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Shop By Collection — plain white cards, one per Breathe collection */
.breathe-collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.breathe-collection-card {
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 26px 24px; text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.breathe-collection-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.breathe-collection-icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--cream);
  display: flex; align-items: center; justify-content: center; color: var(--maroon); font-size: 19px;
}
.breathe-collection-card h3 { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--charcoal); }
.breathe-collection-card p { font-size: 12.5px; color: var(--mid); line-height: 1.6; margin: 0; }
.breathe-collection-cta { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--maroon); display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.breathe-collection-card:hover .breathe-collection-cta { text-decoration: underline; }

@media (max-width: 900px) {
  .brt-hero { grid-template-columns: 1fr; text-align: center; padding: 40px 28px; }
  .brt-hero p:not(.brt-hero-sub) { margin-left: auto; margin-right: auto; }
  .brt-hero-photo { height: 240px; order: -1; margin-bottom: 8px; }
  .breathe-collection-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .breathe-collection-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   GIFT — split hero, examples showcase, type cards, and
   the reusable Gift Enquiry modal (mirrors Breathe's split
   hero + product.php's Customize modal, new class names)
══════════════════════════════════════════════════════ */
.gift-hero {
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 40px;
  background: var(--cream); border-radius: 20px; padding: 56px 48px; overflow: hidden;
}
.gift-hero h1 { font-family: 'Montserrat', sans-serif; font-size: clamp(32px, 4vw, 46px); font-weight: 700; letter-spacing: .02em; color: var(--charcoal); margin-bottom: 12px; }
.gift-hero p { font-size: 14.5px; color: var(--mid); line-height: 1.8; margin-bottom: 26px; max-width: 460px; }
.gift-hero-photo { border-radius: 16px; overflow: hidden; height: 340px; }
.gift-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gifting Examples — photo showcase grid */
.gift-examples-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gift-example-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; cursor: pointer; font-family: inherit;
  padding: 0; text-align: left; transition: transform .2s, box-shadow .2s;
}
.gift-example-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gift-example-img { height: 160px; background: var(--light); }
.gift-example-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gift-example-label { font-size: 13px; font-weight: 700; color: var(--charcoal); padding: 14px 16px; }

/* Corporate / Return / Custom type cards */
.gift-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gift-type-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 32px 28px; text-align: center; transition: transform .2s, box-shadow .2s;
}
.gift-type-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gift-type-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--cream);
  display: flex; align-items: center; justify-content: center; color: var(--maroon);
  font-size: 22px; margin: 0 auto 18px;
}
.gift-type-card h3 { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: var(--charcoal); margin-bottom: 10px; }
.gift-type-card p { font-size: 13px; color: var(--mid); line-height: 1.7; margin-bottom: 20px; }

/* Gift Enquiry modal — mirrors .customize-* on product.php */
.gift-enquiry-overlay {
  display: none; position: fixed; inset: 0; background: rgba(20,15,10,.55);
  z-index: 2000; align-items: center; justify-content: center; padding: 20px;
}
.gift-enquiry-overlay.open { display: flex; animation: geFade .18s ease; }
@keyframes geFade { from{opacity:0} to{opacity:1} }
.gift-enquiry-modal {
  position: relative; background: #fff; border-radius: 14px; width: 100%;
  max-width: 560px; max-height: 90vh; overflow-y: auto; padding: 32px 30px 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
}
.gift-enquiry-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 26px; line-height: 1; color: #aaa; cursor: pointer;
}
.gift-enquiry-close:hover { color: var(--maroon); }
.gift-enquiry-title { font-size: 18px; font-weight: 700; color: var(--charcoal); margin-bottom: 8px; }
.gift-enquiry-sub { font-size: 13px; color: #888; line-height: 1.6; margin-bottom: 22px; }
.gift-upload-box {
  border: 1.5px dashed #d8cfc4; border-radius: 8px; padding: 20px; text-align: center;
  cursor: pointer; color: #999; font-size: 13px; transition: border-color .2s, background .2s;
}
.gift-upload-box:hover { border-color: var(--gold); background: var(--light); }
.gift-upload-box img { max-height: 140px; max-width: 100%; border-radius: 6px; display: block; margin: 0 auto; }
.gift-enquiry-submit-btn {
  width: 100%; height: 48px; background: var(--maroon); color: #fff; border: none;
  border-radius: 6px; font-size: 13px; font-weight: 700; font-family: inherit;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; display: flex;
  align-items: center; justify-content: center; gap: 10px; margin-top: 6px;
  transition: background .2s, opacity .2s;
}
.gift-enquiry-submit-btn:hover { background: #8b2222; }
.gift-enquiry-submit-btn:disabled { opacity: .6; cursor: not-allowed; }
.gift-enquiry-msg { font-size: 13px; margin-top: 10px; text-align: center; min-height: 18px; }

@media (max-width: 900px) {
  .gift-hero { grid-template-columns: 1fr; text-align: center; padding: 40px 28px; }
  .gift-hero p { margin-left: auto; margin-right: auto; }
  .gift-hero-photo { height: 240px; order: -1; margin-bottom: 8px; }
  .gift-examples-grid { grid-template-columns: repeat(2, 1fr); }
  .gift-type-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gift-examples-grid { grid-template-columns: 1fr; }
  .gift-enquiry-modal { padding: 26px 18px 22px; }
}

/* ══════════════════════════════════════════════════════
   CHECKOUT — payment method cards (.pay-option). This class
   was used in checkout.php's markup and JS but never had a
   CSS rule anywhere, so radio/icon/title/description stacked
   as unstyled blocks instead of a neat row.
══════════════════════════════════════════════════════ */
.pay-option {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; margin-bottom: 12px;
  border: 2px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.pay-option:last-of-type { margin-bottom: 0; }
.pay-option:hover { border-color: #d8cfc4; }
.pay-option.selected { border-color: var(--maroon); background: #fff8f8; }
.pay-option input[type="radio"] { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--maroon); }
.pay-option > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pay-option > div strong { font-size: 14px; color: var(--charcoal); }
.pay-option > div small { font-size: 12px; color: #888; line-height: 1.5; }
.pay-option.pay-disabled { opacity: .55; cursor: not-allowed; }
.pay-option > span:last-child { margin-left: auto; flex-shrink: 0; }
@media (max-width: 480px) {
  .pay-option { padding: 14px; gap: 10px; }
}