/*
Theme Name: Mae-Luk
Theme URI: https://www.mae-luk.co.za
Author: The Color Blue (design) / Lead Loud Marketing (build)
Author URI: https://leadloudmarketing.com
Description: Custom WooCommerce theme for Mae-Luk — South African artisanal pajama brand. "Dream in Colour". 1:1 conversion of the approved HTML prototype.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mae-luk
Tags: e-commerce, woocommerce, custom
WC requires at least: 8.0
WC tested up to: 9.0
*/


:root {
  --peach: #F4A384;
  --coral: #E8765A;
  --olive: #8B9A5B;
  --sage: #A8B88C;
  --cream: #FFF8F0;
  --warm-white: #FFFDF9;
  --blush: #F7C5B8;
  --sky: #C2D4E0;
  --charcoal: #2C2C2C;
  --text: #3A3A3A;
  --text-light: #6B6B6B;
  --gold: #C9A96E;
  --pink-light: #FDEEE8;
  --olive-dark: #6B7A3F;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-ui: 'Outfit', system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

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

/* ==================== ANNOUNCEMENT BAR ==================== */
.announcement-bar {
  background: var(--olive);
  color: var(--charcoal);
  text-align: center;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  font-style: italic;
}
.announcement-bar .dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--charcoal);
  margin: 0 14px 3px;
  vertical-align: middle;
  opacity: 0.45;
}

/* ==================== NAVIGATION ==================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--warm-white);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease;
}
.nav.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--charcoal);
  text-decoration: none;
  letter-spacing: 1px;
}
.nav-logo span {
  font-weight: 300;
  color: var(--coral);
}
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color 0.3s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--coral);
  transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: var(--coral); }

.nav-icons {
  display: flex;
  gap: 20px;
  align-items: center;
}
.nav-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.nav-icon:hover { opacity: 1; }

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  margin: 5px 0;
  transition: 0.3s;
}

/* ==================== HERO SECTION ==================== */
.hero {
  position: relative;
  height: 90vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,248,240,0.7) 0%, rgba(255,248,240,0.5) 50%, rgba(255,248,240,0.25) 100%), linear-gradient(to bottom, rgba(44,44,44,0.28) 0%, rgba(44,44,44,0.22) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 40px;
  max-width: 720px;
  text-align: center;
}
.hero-tag {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--olive-dark);
  margin-bottom: 20px;
  font-weight: 500;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--charcoal);
  margin-bottom: 24px;
}
.hero h1 em {
  font-style: italic;
  color: var(--coral);
  font-weight: 400;
}
.hero-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--charcoal);
  max-width: 500px;
  margin: 0 auto 36px;
  font-weight: 400;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  background: var(--coral);
  color: white;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 4px 20px rgba(232,118,90,0.3);
}
.btn-primary:hover {
  background: var(--charcoal);
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(0,0,0,0.2);
}
.btn-primary svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
}
.btn-primary:hover svg {
  transform: translateX(4px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: transparent;
  color: var(--charcoal);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--charcoal);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-outline:hover {
  background: var(--charcoal);
  color: white;
}

/* ==================== MARQUEE ==================== */
.marquee {
  overflow: hidden;
  background: var(--cream);
  padding: 16px 0;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.marquee-track {
  display: flex;
  animation: marquee 30s linear infinite;
  width: max-content;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  color: var(--text-light);
}
.marquee-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  flex-shrink: 0;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==================== SECTION SHARED ==================== */
.section {
  padding: 100px 40px;
}
.section-sm {
  padding: 60px 40px;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
}
.section-header {
  text-align: center;
  margin-bottom: 60px;
}
.section-tag {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--olive-dark);
  margin-bottom: 16px;
  font-weight: 500;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.15;
}
.section-title em {
  font-style: italic;
  color: var(--coral);
}

/* ==================== CATEGORIES / SHOP ==================== */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.category-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3/4;
  group: true;
}
.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.category-card:hover img {
  transform: scale(1.06);
}
.category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  transition: background 0.4s;
}
.category-card:hover .category-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 60%);
}
.category-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: white;
  margin-bottom: 8px;
}
.category-count {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}
.category-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s ease;
}
.category-card:hover .category-arrow {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== STORY SECTION ==================== */
.story-section {
  background: var(--cream);
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.story-images {
  position: relative;
}
.story-img-main {
  width: 85%;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}
.story-img-accent {
  position: absolute;
  bottom: -30px;
  right: 0;
  width: 55%;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
  border: 4px solid var(--cream);
}
.story-content {
  padding-right: 20px;
}
.story-content .section-tag {
  text-align: left;
}
.story-content h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 46px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--charcoal);
  margin-bottom: 28px;
}
.story-content h2 em {
  font-style: italic;
  color: var(--coral);
}
.story-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-light);
  margin-bottom: 20px;
  font-weight: 300;
}
.story-highlight {
  display: flex;
  gap: 32px;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.story-stat {
  text-align: center;
}
.story-stat-number {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: var(--coral);
}
.story-stat-label {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 4px;
}

/* ==================== FEATURES STRIP ==================== */
.features-strip {
  background: var(--charcoal);
  padding: 48px 40px;
}
.features-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.feature-item {
  text-align: center;
  color: white;
}
.feature-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  opacity: 0.9;
}
.feature-label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.feature-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  font-weight: 300;
}

/* ==================== PRODUCT CARDS ==================== */
.products-section {
  background: var(--warm-white);
}
.products-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}
.products-filters {
  display: flex;
  gap: 8px;
}
.filter-btn {
  padding: 10px 24px;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 50px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.3s;
}
.filter-btn.active, .filter-btn:hover {
  background: var(--charcoal);
  color: white;
  border-color: var(--charcoal);
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.product-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.product-img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #f5f0eb;
}
.product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.product-card:hover .product-img-wrap img {
  transform: scale(1.04);
}
.product-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  border-radius: 50px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
}
.badge-new {
  background: var(--coral);
  color: white;
}
.badge-limited {
  background: var(--olive);
  color: white;
}
.product-quick-add {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  padding: 14px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.4s ease;
  cursor: pointer;
}
.product-card:hover .product-quick-add {
  opacity: 1;
  transform: translateY(0);
}
.product-info {
  padding: 20px;
}
.product-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.product-type {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-light);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.product-price {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--coral);
}
.product-sizes {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.size-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
  color: var(--text-light);
  transition: all 0.2s;
  cursor: pointer;
}
.size-dot:hover {
  border-color: var(--coral);
  color: var(--coral);
}
.size-dot.sold-out {
  opacity: 0.3;
  text-decoration: line-through;
  pointer-events: none;
}
.product-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.product-card-link:hover .product-name { color: var(--coral); }
.product-bag-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 10px;
  background: var(--cream);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--olive-dark);
}
.product-bag-note svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ==================== FEATURE PRODUCT CARDS (3-product home grid) ==================== */
.featured-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 24px; }
.feature-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(0,0,0,0.18); }
.feature-card .product-name { font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--charcoal); margin-bottom: 4px; }
.feature-card:hover .product-name { color: var(--coral); }
.feature-img {
  position: relative;
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
}
.feature-img::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><g fill='none' stroke='rgba(0,0,0,0.4)' stroke-width='1.4' opacity='0.55'><circle cx='20' cy='20' r='6'/><circle cx='20' cy='20' r='2.5' fill='rgba(0,0,0,0.35)'/><path d='M14 20 Q14 14 20 14 Q26 14 26 20 Q26 26 20 26 Q14 26 14 20Z'/><path d='M20 8 Q24 12 24 16 M20 32 Q16 28 16 24 M8 20 Q12 24 16 24 M32 20 Q28 16 24 16'/><circle cx='65' cy='65' r='5'/><circle cx='65' cy='65' r='2' fill='rgba(0,0,0,0.35)'/><path d='M60 65 Q60 60 65 60 Q70 60 70 65 Q70 70 65 70 Q60 70 60 65Z'/><path d='M65 55 Q68 58 68 62 M65 75 Q62 72 62 68'/><path d='M48 30 L52 28 L52 32 Z' fill='rgba(0,0,0,0.35)'/><path d='M40 50 L44 48 L44 52 Z' fill='rgba(0,0,0,0.35)'/><path d='M75 35 L78 33 L78 37 Z' fill='rgba(0,0,0,0.35)'/></g></svg>");
  background-size: 110px;
  opacity: 0.85;
}
.feature-img.var-rose { background: linear-gradient(135deg, #FDEEE8 0%, #F7C5B8 50%, #F4A384 100%); }
.feature-img.var-indigo { background: linear-gradient(135deg, #E8EDF3 0%, #8AA3C5 100%); }
.feature-img.var-mini-rose { background: linear-gradient(135deg, #FFF4ED 0%, #FBD0BC 100%); }
.feature-badge {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 12px; border-radius: 50px;
  font-family: var(--font-ui); font-size: 10px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
  z-index: 2;
}
.feature-badge-best { background: var(--charcoal); color: white; }
.feature-badge-new { background: white; color: var(--charcoal); }
.feature-badge-soon { background: var(--olive); color: white; }

.feature-info { padding: 20px 22px 26px; flex: 1; display: flex; flex-direction: column; }
.feature-type { font-family: var(--font-ui); font-size: 11px; color: var(--text-light); letter-spacing: 0.5px; margin-bottom: 12px; text-transform: uppercase; }
.feature-price-row { margin-bottom: 14px; }
.feature-price { font-family: var(--font-ui); font-size: 16px; font-weight: 500; color: var(--coral); }
.feature-patterns {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.feature-swatches { display: flex; align-items: center; }
.feature-dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
  margin-left: -6px;
}
.feature-dot:first-child { margin-left: 0; }
.feature-pattern-count { font-family: var(--font-ui); font-size: 11px; color: var(--text-light); letter-spacing: 0.4px; }

/* ==================== ARTISAN BANNER ==================== */
.artisan-banner {
  background: linear-gradient(135deg, var(--blush) 0%, var(--pink-light) 50%, var(--cream) 100%);
  padding: 80px 40px;
  text-align: center;
}
.artisan-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 300;
  font-style: italic;
  color: var(--charcoal);
  max-width: 700px;
  margin: 0 auto 20px;
  line-height: 1.3;
}
.artisan-banner p {
  font-size: 14px;
  color: var(--text-light);
  max-width: 550px;
  margin: 0 auto;
  line-height: 1.7;
  font-weight: 300;
}

/* ==================== SIZE GUIDE ==================== */
.size-guide {
  background: white;
}
.size-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 40px;
}
.size-tab {
  padding: 12px 28px;
  background: transparent;
  border: none;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--text-light);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}
.size-tab.active {
  color: var(--coral);
  border-bottom-color: var(--coral);
}
.size-table-wrap {
  max-width: 800px;
  margin: 0 auto;
  overflow-x: auto;
}
.size-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 14px;
}
.size-table thead {
  background: var(--cream);
}
.size-table th {
  padding: 14px 20px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-light);
  text-align: center;
}
.size-table th:first-child {
  text-align: left;
}
.size-table td {
  padding: 14px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  color: var(--text);
}
.size-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--charcoal);
}
.size-table tbody tr:hover {
  background: var(--pink-light);
}
.size-note {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-light);
  font-style: italic;
}

/* ==================== CARE INSTRUCTIONS ==================== */
.care-section {
  background: var(--olive);
  color: white;
  text-align: center;
}
.care-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}
.care-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.care-icon {
  width: 48px;
  height: 48px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.care-label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  opacity: 0.9;
}

/* ==================== TESTIMONIALS ==================== */
.testimonials {
  background: var(--warm-white);
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testimonial-card {
  background: white;
  border-radius: 16px;
  padding: 36px;
  position: relative;
}
.testimonial-stars {
  color: var(--gold);
  font-size: 16px;
  margin-bottom: 16px;
  letter-spacing: 2px;
}
.testimonial-text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 20px;
}
.testimonial-author {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
}
.testimonial-location {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 2px;
}
.testimonial-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blush);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--coral);
  margin-bottom: 16px;
}

/* ==================== FAQ ==================== */
.faq-section {
  background: var(--cream);
}
.faq-list {
  max-width: 720px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--charcoal);
  text-align: left;
}
.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-light);
  flex-shrink: 0;
  transition: all 0.3s;
}
.faq-item.open .faq-icon {
  background: var(--coral);
  border-color: var(--coral);
  color: white;
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-item.open .faq-answer {
  max-height: 300px;
  padding-bottom: 24px;
}
.faq-answer p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-light);
  font-weight: 300;
}

/* ==================== NEWSLETTER ==================== */
.newsletter {
  background: var(--charcoal);
  color: white;
  text-align: center;
  padding: 80px 40px;
}
.newsletter h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 300;
  margin-bottom: 12px;
}
.newsletter h2 em {
  font-style: italic;
  color: var(--peach);
}
.newsletter p {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 32px;
  font-weight: 300;
}
.newsletter-form {
  display: flex;
  gap: 0;
  max-width: 480px;
  margin: 0 auto;
}
.newsletter-input {
  flex: 1;
  padding: 16px 24px;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-right: none;
  border-radius: 50px 0 0 50px;
  background: rgba(255,255,255,0.05);
  color: white;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}
.newsletter-input::placeholder {
  color: rgba(255,255,255,0.4);
}
.newsletter-input:focus {
  border-color: var(--peach);
}
.newsletter-submit {
  padding: 16px 32px;
  background: var(--coral);
  color: white;
  border: none;
  border-radius: 0 50px 50px 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
}
.newsletter-submit:hover {
  background: var(--peach);
}

/* ==================== FOOTER ==================== */
.footer {
  background: var(--cream);
  padding: 60px 40px 32px;
}
.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 16px;
}
.footer-brand span {
  color: var(--coral);
  font-weight: 300;
}
.footer-tagline {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.6;
  max-width: 280px;
  font-weight: 300;
}
.footer-col h4 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 20px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--text-light);
  text-decoration: none;
  margin-bottom: 12px;
  transition: color 0.3s;
  font-weight: 300;
}
.footer-col a:hover {
  color: var(--coral);
}
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-copy {
  font-size: 12px;
  color: var(--text-light);
}
.footer-socials {
  display: flex;
  gap: 16px;
}
.footer-social {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s;
}
.footer-social:hover {
  background: var(--coral);
  border-color: var(--coral);
  color: white;
}
.payment-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}
.payment-icon {
  padding: 4px 12px;
  background: white;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 0.5px;
}

/* ==================== ANIMATIONS ==================== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== MOBILE RESPONSIVE ==================== */
.contact-page-grid { /* responsive handled below */ }
@media (max-width: 1024px) {
  .contact-page-grid { grid-template-columns: 1fr !important; }
  .contact-form-row { grid-template-columns: 1fr !important; }
  .nav-links { display: none; }
  .mobile-menu-btn { display: block; }
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .care-grid { grid-template-columns: repeat(2, 1fr); }
  .heritage-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  #bag-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .policies-grid { grid-template-columns: 1fr !important; }
  .featured-grid { grid-template-columns: 1fr !important; max-width: 400px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .section { padding: 60px 20px; }
  .nav-inner { padding: 14px 20px; }
  .hero { height: 80vh; min-height: 500px; }
  .hero-content { padding: 0 24px; }
  .categories-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .features-grid { grid-template-columns: 1fr; }
  .story-highlight { flex-direction: column; gap: 20px; }
  .products-header { flex-direction: column; gap: 20px; align-items: flex-start; }
  .newsletter-form { flex-direction: column; }
  .newsletter-input { border-radius: 50px; border-right: 1.5px solid rgba(255,255,255,0.2); }
  .newsletter-submit { border-radius: 50px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .care-grid { grid-template-columns: 1fr 1fr; }
}


/* =================================================== */
/* ============ PAGE-SPECIFIC: SHOP ================== */
/* =================================================== */


:root {
  --peach: #F4A384;
  --coral: #E8765A;
  --olive: #8B9A5B;
  --sage: #A8B88C;
  --cream: #FFF8F0;
  --warm-white: #FFFDF9;
  --blush: #F7C5B8;
  --sky: #C2D4E0;
  --charcoal: #2C2C2C;
  --text: #3A3A3A;
  --text-light: #6B6B6B;
  --gold: #C9A96E;
  --pink-light: #FDEEE8;
  --olive-dark: #6B7A3F;
  --border: rgba(0,0,0,0.08);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-ui: 'Outfit', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text); background: var(--warm-white); -webkit-font-smoothing: antialiased; }

/* ANNOUNCEMENT BAR */
.announcement-bar {
  background: var(--olive); color: var(--charcoal); text-align: center;
  padding: 12px 20px; font-family: var(--font-display); font-size: 15px; font-style: italic;
}
.announcement-bar .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--charcoal); margin: 0 14px 3px; vertical-align: middle; opacity: 0.45; }

/* NAV */
.nav { position: sticky; top: 0; z-index: 1000; background: var(--warm-white); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--charcoal); text-decoration: none; letter-spacing: 1px; }
.nav-logo span { font-weight: 300; color: var(--coral); }
.nav-links { display: flex; gap: 32px; align-items: center; list-style: none; }
.nav-links a {
  font-family: var(--font-ui); font-size: 13px; font-weight: 400; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text); text-decoration: none; transition: color 0.3s;
}
.nav-links a:hover, .nav-links a.active { color: var(--coral); }
.nav-icons { display: flex; gap: 20px; align-items: center; }
.nav-icon { width: 20px; height: 20px; cursor: pointer; opacity: 0.7; }
.nav-icon:hover { opacity: 1; }
.cart-link { position: relative; color: var(--charcoal); }
.cart-count { position: absolute; top: -6px; right: -8px; background: var(--coral); color: white; font-family: var(--font-ui); font-size: 10px; font-weight: 600; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* PAGE HEADER */
.shop-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: 50px 40px 20px;
}
.breadcrumb { font-family: var(--font-ui); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-light); margin-bottom: 20px; }
.breadcrumb a { color: var(--text-light); text-decoration: none; }
.breadcrumb a:hover { color: var(--coral); }
.breadcrumb .sep { margin: 0 10px; opacity: 0.5; }
.breadcrumb .current { color: var(--charcoal); }

.shop-eyebrow { font-family: var(--font-ui); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--olive-dark); margin-bottom: 14px; }
.shop-title { font-family: var(--font-display); font-size: clamp(40px,5vw,60px); font-weight: 300; color: var(--charcoal); line-height: 1.05; margin-bottom: 14px; }
.shop-title em { font-style: italic; color: var(--coral); }
.shop-intro { font-size: 15px; line-height: 1.7; color: var(--text-light); font-weight: 300; max-width: 620px; }

/* FILTER + TOOLBAR */
.shop-toolbar {
  max-width: 1400px; margin: 30px auto 0; padding: 0 40px;
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border); padding-top: 24px;
}
.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-pill {
  background: white; border: 1.5px solid var(--border); border-radius: 50px;
  padding: 10px 20px; font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text); cursor: pointer;
  transition: all 0.2s;
}
.filter-pill:hover { border-color: var(--coral); color: var(--coral); }
.filter-pill.active { background: var(--charcoal); color: white; border-color: var(--charcoal); }
.filter-pill .count { font-size: 10px; opacity: 0.6; margin-left: 4px; }

.toolbar-right { display: flex; align-items: center; gap: 18px; }
.result-count { font-family: var(--font-ui); font-size: 12px; color: var(--text-light); letter-spacing: 0.5px; }
.sort-wrap {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: white; border: 1.5px solid var(--border); border-radius: 8px; padding: 0 14px; height: 42px;
}
.sort-wrap label { font-family: var(--font-ui); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-light); }
.sort-wrap select {
  border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 13px; color: var(--charcoal); cursor: pointer; font-weight: 500;
  padding-right: 4px;
}

/* PRODUCT GRID */
.products-section {
  max-width: 1400px; margin: 30px auto 60px; padding: 0 40px;
  display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start;
}
.sidebar {
  position: sticky; top: 90px;
  background: var(--cream); border-radius: 16px; padding: 26px 24px;
}
.sidebar-block { margin-bottom: 28px; }
.sidebar-block:last-child { margin-bottom: 0; }
.sidebar h4 {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--charcoal); margin-bottom: 14px; font-weight: 600;
}
.sidebar-list { display: flex; flex-direction: column; gap: 8px; }
.sidebar-item {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--text); cursor: pointer; padding: 4px 0;
  transition: color 0.2s;
}
.sidebar-item:hover { color: var(--coral); }
.sidebar-item .check {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border);
  margin-right: 10px; flex-shrink: 0; position: relative;
}
.sidebar-item.checked .check { background: var(--coral); border-color: var(--coral); }
.sidebar-item.checked .check::after {
  content: ''; position: absolute; top: 1px; left: 4px; width: 4px; height: 8px;
  border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sidebar-item .label { flex: 1; }
.sidebar-item .count { color: var(--text-light); font-size: 12px; }

.size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.size-chip {
  height: 32px; border-radius: 6px; border: 1.5px solid var(--border); background: white;
  font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--text);
  cursor: pointer; transition: all 0.2s;
}
.size-chip:hover { border-color: var(--coral); color: var(--coral); }
.size-chip.active { background: var(--charcoal); color: white; border-color: var(--charcoal); }

.price-range {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-light);
  margin-top: 6px;
}
.price-range input[type="range"] { width: 100%; accent-color: var(--coral); }

.clear-filters {
  background: none; border: none; padding: 0; margin-top: 6px;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--coral); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

.products-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.product-card {
  background: white; border-radius: 14px; overflow: hidden; cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.15); }
.product-card.hidden { display: none; }
.product-img-wrap { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--cream); }
.product-image { width: 100%; height: 100%; position: relative; }
.product-image::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><g fill='none' stroke='rgba(0,0,0,0.4)' stroke-width='1.4' opacity='0.55'><circle cx='20' cy='20' r='6'/><circle cx='20' cy='20' r='2.5' fill='rgba(0,0,0,0.35)'/><path d='M14 20 Q14 14 20 14 Q26 14 26 20 Q26 26 20 26 Q14 26 14 20Z'/><path d='M20 8 Q24 12 24 16 M20 32 Q16 28 16 24 M8 20 Q12 24 16 24 M32 20 Q28 16 24 16'/><circle cx='65' cy='65' r='5'/><circle cx='65' cy='65' r='2' fill='rgba(0,0,0,0.35)'/><path d='M60 65 Q60 60 65 60 Q70 60 70 65 Q70 70 65 70 Q60 70 60 65Z'/><path d='M65 55 Q68 58 68 62 M65 75 Q62 72 62 68'/><path d='M48 30 L52 28 L52 32 Z' fill='rgba(0,0,0,0.35)'/><path d='M40 50 L44 48 L44 52 Z' fill='rgba(0,0,0,0.35)'/><path d='M75 35 L78 33 L78 37 Z' fill='rgba(0,0,0,0.35)'/></g></svg>");
  background-size: 110px; opacity: 0.85;
}
/* Variants */
.var-rose .product-image { background: linear-gradient(135deg, #FDEEE8 0%, #F7C5B8 50%, #F4A384 100%); }
.var-coral .product-image { background: linear-gradient(135deg, #FFF4ED 0%, #F4A384 50%, #E8765A 100%); }
.var-cheetah .product-image { background: linear-gradient(135deg, #FFF4E8 0%, #E8B57E 100%); }
.var-indigo .product-image { background: linear-gradient(135deg, #E8EDF3 0%, #8AA3C5 100%); }
.var-tide .product-image { background: linear-gradient(135deg, #DCE6EF 0%, #6E8AA8 100%); }
.var-sage .product-image { background: linear-gradient(135deg, #EDF1E3 0%, #A8B88C 100%); }
.var-marigold .product-image { background: linear-gradient(135deg, #FFF6DC 0%, #E8B85A 100%); }
.var-midnight .product-image { background: linear-gradient(135deg, #4A4F65 0%, #2C2C2C 100%); }
.var-tropical .product-image { background: linear-gradient(135deg, #FFE9D6 0%, #E08066 50%, #B85A45 100%); }
.var-mini-rose .product-image { background: linear-gradient(135deg, #FFF4ED 0%, #FBD0BC 100%); }
.var-mini-cheetah .product-image { background: linear-gradient(135deg, #FFF8EE 0%, #F0CFA0 100%); }
.var-mini-indigo .product-image { background: linear-gradient(135deg, #EFF2F7 0%, #B5C2D4 100%); }

.product-badge {
  position: absolute; top: 14px; left: 14px;
  padding: 5px 11px; border-radius: 50px;
  font-family: var(--font-ui); font-size: 9px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.badge-new { background: white; color: var(--charcoal); }
.badge-limited { background: var(--coral); color: white; }
.badge-soon { background: var(--olive); color: white; }
.badge-back { background: var(--gold); color: white; }
.badge-best { background: var(--charcoal); color: white; }
.product-quick-add {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(44,44,44,0.92); color: white; text-align: center;
  padding: 12px; font-family: var(--font-ui); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
  opacity: 0; transform: translateY(100%); transition: all 0.3s ease;
}
.product-card:hover .product-quick-add { opacity: 1; transform: translateY(0); }

.product-info { padding: 18px 20px 24px; flex: 1; display: flex; flex-direction: column; }
.product-name { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--charcoal); margin-bottom: 4px; line-height: 1.2; }
.product-card:hover .product-name { color: var(--coral); }
.product-type { font-family: var(--font-ui); font-size: 11px; color: var(--text-light); letter-spacing: 0.5px; margin-bottom: 10px; text-transform: uppercase; }
.product-price-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.product-price { font-family: var(--font-ui); font-size: 16px; font-weight: 500; color: var(--coral); }
.product-compare { font-family: var(--font-ui); font-size: 13px; color: var(--text-light); text-decoration: line-through; }
.product-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.size-dot {
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 50px; border: 1px solid rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 10px; font-weight: 500; color: var(--text-light);
  transition: all 0.2s;
}
.size-dot.sold-out { opacity: 0.3; text-decoration: line-through; }
.product-bag-note {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  padding: 5px 9px; background: var(--cream); border-radius: 999px;
  font-family: var(--font-ui); font-size: 9px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--olive-dark);
}
.product-bag-note svg { width: 11px; height: 11px; flex-shrink: 0; }

.product-patterns {
  display: flex; align-items: center; gap: 14px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.pattern-swatches { display: flex; align-items: center; }
.pattern-dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
  margin-left: -6px;
}
.pattern-dot:first-child { margin-left: 0; }
.pattern-count {
  font-family: var(--font-ui); font-size: 11px; color: var(--text-light);
  letter-spacing: 0.4px;
}

/* EMPTY STATE */
.empty-state {
  grid-column: 1 / -1;
  text-align: center; padding: 80px 30px;
  background: var(--cream); border-radius: 16px;
}
.empty-state h3 { font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--charcoal); margin-bottom: 10px; }
.empty-state p { font-size: 14px; color: var(--text-light); margin-bottom: 20px; }
.empty-state button {
  background: var(--coral); color: white; border: none; border-radius: 8px;
  padding: 12px 24px; font-family: var(--font-ui); font-size: 12px; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer;
}

/* PROMO BAND (Children's coming soon) */
.coming-soon-band {
  max-width: 1400px; margin: 0 auto 60px; padding: 0 40px;
}
.coming-soon-inner {
  background: linear-gradient(135deg, var(--blush) 0%, var(--peach) 100%);
  border-radius: 20px; padding: 40px 50px; color: white; display: flex;
  align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.coming-soon-inner h3 { font-family: var(--font-display); font-size: clamp(26px,3vw,36px); font-weight: 400; line-height: 1.2; max-width: 480px; }
.coming-soon-inner p { font-size: 14px; line-height: 1.7; max-width: 380px; opacity: 0.95; }
.notify-form { display: flex; gap: 0; background: white; border-radius: 50px; padding: 4px; }
.notify-form input { flex: 1; border: none; outline: none; padding: 0 18px; min-width: 200px; font-size: 14px; background: transparent; }
.notify-form button { background: var(--charcoal); color: white; border: none; border-radius: 50px; padding: 12px 22px; font-family: var(--font-ui); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }

/* FOOTER */
.footer { background: var(--charcoal); color: rgba(255,255,255,0.7); padding: 60px 40px 30px; }
.footer-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: white; margin-bottom: 14px; }
.footer-brand span { color: var(--coral); font-weight: 300; }
.footer-tagline { font-size: 13px; line-height: 1.7; max-width: 300px; }
.footer-col h4 { font-family: var(--font-ui); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: white; margin-bottom: 16px; }
.footer-col a { display: block; color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13px; padding: 5px 0; transition: color 0.2s; }
.footer-col a:hover { color: var(--coral); }
.footer-bottom { max-width: 1400px; margin: 40px auto 0; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.5); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .products-section { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .coming-soon-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 640px) {
  .nav-inner, .shop-header, .shop-toolbar, .products-section, .coming-soon-band { padding-left: 20px; padding-right: 20px; }
  .products-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .shop-toolbar { flex-direction: column; align-items: flex-start; }
  .toolbar-right { width: 100%; justify-content: space-between; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}


/* =================================================== */
/* ============ PAGE-SPECIFIC: PRODUCT =============== */
/* =================================================== */


:root {
  --peach: #F4A384;
  --coral: #E8765A;
  --olive: #8B9A5B;
  --sage: #A8B88C;
  --cream: #FFF8F0;
  --warm-white: #FFFDF9;
  --blush: #F7C5B8;
  --sky: #C2D4E0;
  --charcoal: #2C2C2C;
  --text: #3A3A3A;
  --text-light: #6B6B6B;
  --gold: #C9A96E;
  --pink-light: #FDEEE8;
  --olive-dark: #6B7A3F;
  --border: rgba(0,0,0,0.08);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-ui: 'Outfit', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
}

/* ANNOUNCEMENT BAR */
.announcement-bar {
  background: var(--olive);
  color: var(--charcoal);
  text-align: center;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
}
.announcement-bar .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--charcoal); margin: 0 14px 3px; vertical-align: middle; opacity: 0.45; }

/* NAV */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--warm-white);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--charcoal);
  text-decoration: none;
  letter-spacing: 1px;
}
.nav-logo span { font-weight: 300; color: var(--coral); }
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--coral); }
.nav-icons { display: flex; gap: 20px; align-items: center; }
.nav-icon { width: 20px; height: 20px; cursor: pointer; opacity: 0.7; }
.nav-icon:hover { opacity: 1; }
.cart-link { position: relative; color: var(--charcoal); }
.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--coral);
  color: white;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* BREADCRUMB */
.breadcrumb {
  max-width: 1400px;
  margin: 0 auto;
  padding: 22px 40px 0;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-light);
}
.breadcrumb a { color: var(--text-light); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--coral); }
.breadcrumb .sep { margin: 0 10px; opacity: 0.5; }
.breadcrumb .current { color: var(--charcoal); }

/* PRODUCT MAIN */
.product-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 40px 80px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
}

/* GALLERY */
.gallery { display: grid; grid-template-columns: 80px 1fr; gap: 16px; }
.gallery-thumbs { display: flex; flex-direction: column; gap: 12px; }
.thumb {
  width: 80px;
  height: 100px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  background: var(--cream);
  transition: border-color 0.2s;
}
.thumb.active { border-color: var(--coral); }
.thumb:hover { border-color: var(--peach); }
.gallery-main {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream);
  aspect-ratio: 4/5;
}
.product-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, #FDEEE8 0%, #F7C5B8 50%, #F4A384 100%);
}
.product-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><g fill='none' stroke='%23B85A45' stroke-width='1.4' opacity='0.55'><circle cx='20' cy='20' r='6'/><circle cx='20' cy='20' r='2.5' fill='%23B85A45'/><path d='M14 20 Q14 14 20 14 Q26 14 26 20 Q26 26 20 26 Q14 26 14 20Z'/><path d='M20 8 Q24 12 24 16 M20 32 Q16 28 16 24 M8 20 Q12 24 16 24 M32 20 Q28 16 24 16'/><circle cx='65' cy='65' r='5'/><circle cx='65' cy='65' r='2' fill='%23B85A45'/><path d='M60 65 Q60 60 65 60 Q70 60 70 65 Q70 70 65 70 Q60 70 60 65Z'/><path d='M65 55 Q68 58 68 62 M65 75 Q62 72 62 68'/><path d='M48 30 L52 28 L52 32 Z' fill='%23B85A45'/><path d='M40 50 L44 48 L44 52 Z' fill='%23B85A45'/><path d='M75 35 L78 33 L78 37 Z' fill='%23B85A45'/></g></svg>");
  background-size: 110px;
  opacity: 0.85;
}
.product-image-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 1px;
}
.gallery-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: white;
  color: var(--charcoal);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 50px;
  z-index: 3;
}
.gallery-zoom {
  position: absolute;
  bottom: 18px;
  right: 18px;
  background: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Variant gradients for thumbs */
.thumb.var-1 .product-image { background: linear-gradient(135deg, #FDEEE8 0%, #F7C5B8 50%, #F4A384 100%); }
.thumb.var-2 .product-image { background: linear-gradient(160deg, #F7C5B8 0%, #E8765A 100%); }
.thumb.var-3 .product-image { background: linear-gradient(135deg, #FFF8F0 0%, #F7C5B8 100%); }
.thumb.var-4 .product-image { background: linear-gradient(135deg, #E8765A 0%, #B85A45 100%); }
.thumb .product-image::before { background-size: 60px; opacity: 0.6; }

/* PRODUCT INFO */
.product-info { padding-top: 8px; }
.product-category {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--olive-dark);
  margin-bottom: 14px;
}
.product-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--charcoal);
  margin-bottom: 14px;
}
.product-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.stars { color: var(--gold); font-size: 16px; letter-spacing: 1px; }
.review-link {
  font-size: 13px;
  color: var(--text-light);
  text-decoration: none;
  border-bottom: 1px solid var(--text-light);
  padding-bottom: 1px;
}
.review-link:hover { color: var(--coral); border-color: var(--coral); }
.product-price {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--coral);
  margin-bottom: 6px;
}
.product-price .compare {
  text-decoration: line-through;
  color: var(--text-light);
  font-size: 22px;
  margin-left: 10px;
}
.tax-note {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 24px;
}
.product-short-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-light);
  font-weight: 300;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

/* SIZE SELECTOR */
.option-row { margin-bottom: 22px; }

/* PATTERN PICKER */
.pattern-options {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.pattern-swatch {
  position: relative;
  width: 56px;
  cursor: pointer;
  text-align: center;
}
.pattern-swatch .swatch-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 3px;
  background: white;
  transition: border-color 0.2s;
}
.pattern-swatch .swatch-circle .inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: 200%;
  background-position: center;
  border: 1px solid rgba(0,0,0,0.1);
}
.pattern-swatch.selected .swatch-circle { border-color: var(--coral); }
.pattern-swatch.selected::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}
.pattern-swatch .swatch-label {
  display: block;
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--text-light);
  text-transform: uppercase;
  white-space: nowrap;
}
.pattern-swatch.selected .swatch-label { color: var(--charcoal); font-weight: 500; }
.pattern-swatch:hover .swatch-circle { border-color: var(--peach); }
.selected-pattern-name {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--coral);
  text-transform: uppercase;
  font-weight: 500;
}
.option-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 12px;
}
.option-label .size-link {
  font-size: 11px;
  color: var(--coral);
  text-decoration: none;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--coral);
  padding-bottom: 1px;
  cursor: pointer;
}
.size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.size-pill {
  min-width: 50px;
  height: 44px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: white;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}
.size-pill:hover { border-color: var(--coral); color: var(--coral); }
.size-pill.selected { background: var(--charcoal); border-color: var(--charcoal); color: white; }
.size-pill.sold-out {
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.3);
  text-decoration: line-through;
  cursor: not-allowed;
  pointer-events: none;
}
.sold-out-note {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 8px;
}

/* QUANTITY + ADD TO CART */
.qty-cart-row {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
}
.qty-input {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: white;
  height: 54px;
}
.qty-btn {
  width: 44px;
  height: 100%;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--charcoal);
}
.qty-num {
  width: 40px;
  text-align: center;
  border: none;
  outline: none;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
}
.add-to-cart {
  flex: 1;
  height: 54px;
  background: var(--coral);
  color: white;
  border: none;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.2s;
}
.add-to-cart:hover { background: #d4634a; }
.buy-now {
  width: 100%;
  height: 54px;
  background: var(--charcoal);
  color: white;
  border: none;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 22px;
}
.wishlist-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-light);
  text-decoration: none;
  margin-bottom: 28px;
  cursor: pointer;
}
.wishlist-link:hover { color: var(--coral); }

/* PRODUCT BENEFITS */
.product-benefits {
  background: var(--cream);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 28px;
}
.benefit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--text);
}
.benefit-row svg { flex-shrink: 0; color: var(--olive-dark); }

/* PRODUCT META */
.product-meta {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  font-size: 13px;
  color: var(--text-light);
}
.meta-row { padding: 5px 0; }
.meta-row strong {
  color: var(--charcoal);
  font-weight: 500;
  display: inline-block;
  width: 90px;
}
.meta-row a { color: var(--text-light); text-decoration: none; }
.meta-row a:hover { color: var(--coral); }

/* TABS */
.tabs-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 40px;
  border-top: 1px solid var(--border);
}
.tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
  overflow-x: auto;
}
.tab {
  background: none;
  border: none;
  padding: 14px 0;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-light);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.2s;
}
.tab.active { color: var(--charcoal); border-bottom-color: var(--coral); }
.tab:hover { color: var(--charcoal); }
.tab-panel {
  display: none;
  max-width: 900px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-light);
  font-weight: 300;
}
.tab-panel.active { display: block; }
.tab-panel h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 16px;
}
.tab-panel p { margin-bottom: 14px; }
.tab-panel ul { padding-left: 20px; margin: 14px 0; }
.tab-panel li { padding: 4px 0; }

/* INFO TABLE */
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.info-table th, .info-table td { padding: 14px 16px; text-align: left; }
.info-table th { background: var(--cream); font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--charcoal); width: 200px; }
.info-table tr { border-bottom: 1px solid var(--border); }

/* REVIEWS */
.review-summary {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  background: var(--cream);
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 30px;
}
.review-score-big {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1;
}
.review-bars { display: flex; flex-direction: column; gap: 8px; }
.review-bar { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.bar-track { flex: 1; height: 6px; background: white; border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--gold); }
.review-card {
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}
.review-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.review-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--blush); color: var(--charcoal); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 500; }
.review-name { font-weight: 500; color: var(--charcoal); }
.review-date { font-size: 12px; color: var(--text-light); margin-left: auto; }

/* RELATED PRODUCTS */
.related-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 40px 100px;
}
.related-header { text-align: center; margin-bottom: 40px; }
.related-tag { font-family: var(--font-ui); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--olive-dark); margin-bottom: 14px; }
.related-title { font-family: var(--font-display); font-size: clamp(28px,4vw,40px); font-weight: 300; color: var(--charcoal); }
.related-title em { font-style: italic; color: var(--coral); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.related-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s;
}
.related-card:hover { transform: translateY(-4px); }
.related-card .product-image { aspect-ratio: 4/5; }
.related-card.var-rose .product-image { background: linear-gradient(135deg, #FDEEE8 0%, #F4A384 100%); }
.related-card.var-indigo .product-image { background: linear-gradient(135deg, #E8EDF3 0%, #8AA3C5 100%); }
.related-card.var-cheetah .product-image { background: linear-gradient(135deg, #FFF4E8 0%, #E8B57E 100%); }
.related-card.var-sage .product-image { background: linear-gradient(135deg, #EDF1E3 0%, #A8B88C 100%); }
.related-info { padding: 16px 18px 22px; }
.related-name { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--charcoal); margin-bottom: 4px; }
.related-type { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.5px; color: var(--text-light); margin-bottom: 8px; text-transform: uppercase; }
.related-price { font-family: var(--font-ui); font-size: 15px; font-weight: 500; color: var(--coral); }

/* FOOTER */
.footer {
  background: var(--charcoal);
  color: rgba(255,255,255,0.7);
  padding: 60px 40px 30px;
}
.footer-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: white; margin-bottom: 14px; }
.footer-brand span { color: var(--coral); font-weight: 300; }
.footer-tagline { font-size: 13px; line-height: 1.7; max-width: 300px; }
.footer-col h4 { font-family: var(--font-ui); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: white; margin-bottom: 16px; }
.footer-col a { display: block; color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13px; padding: 5px 0; transition: color 0.2s; }
.footer-col a:hover { color: var(--coral); }
.footer-bottom {
  max-width: 1400px;
  margin: 40px auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .product-main { grid-template-columns: 1fr; gap: 40px; }
  .nav-links { display: none; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav-inner, .breadcrumb, .product-main, .tabs-section, .related-section { padding-left: 20px; padding-right: 20px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-thumbs { flex-direction: row; order: 2; overflow-x: auto; }
  .product-title { font-size: 32px; }
  .review-summary { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}


/* =================================================== */
/* ============ PAGE-SPECIFIC: CART ================== */
/* =================================================== */


:root {
  --peach: #F4A384;
  --coral: #E8765A;
  --olive: #8B9A5B;
  --sage: #A8B88C;
  --cream: #FFF8F0;
  --warm-white: #FFFDF9;
  --blush: #F7C5B8;
  --sky: #C2D4E0;
  --charcoal: #2C2C2C;
  --text: #3A3A3A;
  --text-light: #6B6B6B;
  --gold: #C9A96E;
  --pink-light: #FDEEE8;
  --olive-dark: #6B7A3F;
  --border: rgba(0,0,0,0.08);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-ui: 'Outfit', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
}

/* ANNOUNCEMENT BAR */
.announcement-bar {
  background: var(--olive);
  color: var(--charcoal);
  text-align: center;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
}
.announcement-bar .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--charcoal); margin: 0 14px 3px; vertical-align: middle; opacity: 0.45; }

/* NAV */
.nav { position: sticky; top: 0; z-index: 1000; background: var(--warm-white); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--charcoal); text-decoration: none; letter-spacing: 1px; }
.nav-logo span { font-weight: 300; color: var(--coral); }
.nav-links { display: flex; gap: 32px; align-items: center; list-style: none; }
.nav-links a { font-family: var(--font-ui); font-size: 13px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); text-decoration: none; transition: color 0.3s; }
.nav-links a:hover { color: var(--coral); }
.nav-icons { display: flex; gap: 20px; align-items: center; }
.nav-icon { width: 20px; height: 20px; cursor: pointer; opacity: 0.7; }
.nav-icon:hover { opacity: 1; }
.cart-link { position: relative; color: var(--charcoal); }
.cart-count { position: absolute; top: -6px; right: -8px; background: var(--coral); color: white; font-family: var(--font-ui); font-size: 10px; font-weight: 600; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* PAGE HEADER */
.page-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 40px 30px;
  text-align: center;
}
.page-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--olive-dark);
  margin-bottom: 14px;
}
.page-title {
  font-family: var(--font-display);
  font-size: clamp(40px,5vw,64px);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.05;
}
.page-title em { font-style: italic; color: var(--coral); }

/* CHECKOUT STEPS */
.steps {
  max-width: 700px;
  margin: 30px auto 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-light);
}
.step .num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
}
.step.active { color: var(--charcoal); }
.step.active .num { background: var(--coral); color: white; }
.step-bar {
  width: 60px;
  height: 1px;
  background: var(--border);
}

/* MAIN GRID */
.cart-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 80px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: start;
}

/* CART TABLE */
.cart-table {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.cart-row {
  display: grid;
  grid-template-columns: 100px 2fr 100px 130px 100px 30px;
  gap: 18px;
  align-items: center;
  padding: 22px 26px;
  border-bottom: 1px solid var(--border);
}
.cart-row:last-child { border-bottom: none; }
.cart-row.head {
  background: var(--cream);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 500;
  padding: 16px 26px;
}
.cart-row.head .col-product { grid-column: 1 / span 2; }

.product-thumb {
  width: 100px;
  height: 110px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.product-thumb .img-block {
  width: 100%;
  height: 100%;
  position: relative;
}
.product-thumb .img-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><g fill='none' stroke='rgba(0,0,0,0.35)' stroke-width='1.2' opacity='0.8'><circle cx='15' cy='15' r='4'/><circle cx='15' cy='15' r='1.5' fill='rgba(0,0,0,0.35)'/><circle cx='45' cy='45' r='4'/><circle cx='45' cy='45' r='1.5' fill='rgba(0,0,0,0.35)'/></g></svg>");
  background-size: 70px;
  opacity: 0.7;
}
.var-rose .img-block { background: linear-gradient(135deg, #FDEEE8 0%, #F4A384 100%); }
.var-indigo .img-block { background: linear-gradient(135deg, #E8EDF3 0%, #8AA3C5 100%); }
.var-cheetah .img-block { background: linear-gradient(135deg, #FFF4E8 0%, #E8B57E 100%); }

.product-detail h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 4px;
  line-height: 1.2;
}
.product-detail h4 a { color: inherit; text-decoration: none; }
.product-detail h4 a:hover { color: var(--coral); }
.product-detail .meta {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-light);
  margin-top: 6px;
}
.product-detail .meta span { display: inline-block; margin-right: 14px; }
.product-detail .meta strong { color: var(--charcoal); font-weight: 500; }
.product-detail .badge {
  display: inline-block;
  background: var(--pink-light);
  color: var(--coral);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 50px;
  margin-top: 8px;
}

.col-price, .col-subtotal {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--charcoal);
}
.col-subtotal { color: var(--coral); }

.qty-input {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: white;
  height: 42px;
}
.qty-btn {
  width: 36px;
  height: 100%;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  color: var(--charcoal);
}
.qty-num {
  width: 36px;
  text-align: center;
  border: none;
  outline: none;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  background: transparent;
}
.col-remove button {
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  transition: all 0.2s;
}
.col-remove button:hover { color: var(--coral); background: var(--pink-light); }

/* CART ACTIONS */
.cart-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.coupon-form {
  flex: 1;
  display: flex;
  gap: 0;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  max-width: 380px;
  height: 50px;
}
.coupon-form input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 14px;
  background: transparent;
}
.coupon-form button {
  background: var(--charcoal);
  color: white;
  border: none;
  padding: 0 22px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-update {
  background: white;
  border: 1.5px solid var(--border);
  color: var(--charcoal);
  padding: 0 22px;
  height: 50px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-update:hover { border-color: var(--coral); color: var(--coral); }

.continue-shop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}
.continue-shop:hover { color: var(--coral); }

/* TOTALS / SUMMARY SIDEBAR */
.totals-card {
  background: var(--cream);
  border-radius: 16px;
  padding: 30px;
  position: sticky;
  top: 90px;
}
.totals-card h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 10px 0;
  color: var(--text);
}
.totals-row.muted { color: var(--text-light); font-size: 13px; }
.totals-row.total {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
  margin: 14px 0 24px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--charcoal);
}
.totals-row.total .amt { color: var(--coral); }

.shipping-options { margin: 12px 0 18px; }
.shipping-options h4 {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 10px;
  font-weight: 500;
}
.ship-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: border-color 0.2s;
}
.ship-option.selected { border-color: var(--coral); background: var(--pink-light); }
.ship-option .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  position: relative;
}
.ship-option.selected .dot { border-color: var(--coral); }
.ship-option.selected .dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--coral); }
.ship-option .info { flex: 1; }
.ship-option .info strong { display: block; color: var(--charcoal); font-weight: 500; margin-bottom: 2px; }
.ship-option .info small { color: var(--text-light); }
.ship-option .price { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--charcoal); }

.checkout-btn {
  width: 100%;
  height: 56px;
  background: var(--coral);
  color: white;
  border: none;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.checkout-btn:hover { background: #d4634a; }
.payment-icons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 18px;
}
.payment-icon {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
}
.trust-row {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  color: var(--text-light);
}
.trust-row > div { display: flex; align-items: center; gap: 8px; }

/* EMPTY-CART CTA / RECENTLY VIEWED */
.recently {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 40px 100px;
  border-top: 1px solid var(--border);
}
.recently h2 {
  font-family: var(--font-display);
  font-size: clamp(28px,4vw,40px);
  font-weight: 300;
  color: var(--charcoal);
  margin-bottom: 30px;
  text-align: center;
}
.recently h2 em { font-style: italic; color: var(--coral); }
.recent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.recent-card { background: white; border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform 0.3s; text-decoration: none; color: inherit; }
.recent-card:hover { transform: translateY(-4px); }
.recent-card .img-block { aspect-ratio: 4/5; }
.recent-card.var-sage .img-block { background: linear-gradient(135deg, #EDF1E3 0%, #A8B88C 100%); }
.recent-card.var-coral .img-block { background: linear-gradient(135deg, #FFF8F0 0%, #F4A384 100%); }
.recent-card.var-blue .img-block { background: linear-gradient(135deg, #E8EDF3 0%, #8AA3C5 100%); }
.recent-card.var-rose .img-block { background: linear-gradient(135deg, #FDEEE8 0%, #F4A384 100%); }
.recent-info { padding: 14px 16px 18px; }
.recent-name { font-family: var(--font-display); font-size: 17px; font-weight: 400; color: var(--charcoal); margin-bottom: 2px; }
.recent-price { font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--coral); }

/* FOOTER */
.footer { background: var(--charcoal); color: rgba(255,255,255,0.7); padding: 60px 40px 30px; }
.footer-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: white; margin-bottom: 14px; }
.footer-brand span { color: var(--coral); font-weight: 300; }
.footer-tagline { font-size: 13px; line-height: 1.7; max-width: 300px; }
.footer-col h4 { font-family: var(--font-ui); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: white; margin-bottom: 16px; }
.footer-col a { display: block; color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13px; padding: 5px 0; }
.footer-col a:hover { color: var(--coral); }
.footer-bottom { max-width: 1400px; margin: 40px auto 0; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.5); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .cart-main { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .cart-row { grid-template-columns: 80px 1fr 100px 30px; gap: 14px; padding: 18px 18px; }
  .cart-row .col-price, .cart-row .col-qty { display: none; }
  .cart-row.head { display: none; }
  .totals-card { position: static; }
  .recent-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-detail .meta { margin-top: 10px; }
  .product-detail .meta-mobile-price { color: var(--coral); font-weight: 500; }
}
@media (max-width: 640px) {
  .nav-inner, .page-header, .cart-main, .recently { padding-left: 20px; padding-right: 20px; }
  .steps { flex-wrap: wrap; gap: 10px; }
  .step-bar { display: none; }
  .totals-card { padding: 24px; }
  .recent-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}


/* =================================================== */
/* ============ THEME OVERRIDES (v1.0.3) ============= */
/* =================================================== */

/* Filter pills + sidebar items use <a> in the WP templates (rather than the
   prototype's <button> + <div>) so the visited-link defaults need resetting. */
.filter-pill,
.sidebar-item,
.product-card,
.related-card,
.clear-filters {
  text-decoration: none !important;
}

.filter-pill:visited,
.sidebar-item:visited,
.product-card:visited,
.related-card:visited { color: inherit; }

/* WooCommerce wraps the shop archive in <ul class="products"> by default —
   undo that so our products-grid CSS (display: grid) applies cleanly. */
.products-grid {
  list-style: none;
  padding: 0;
  margin: 0;
}
.products-grid > li {
  list-style: none;
}

/* Suppress WC's default star-link colour on product titles */
.product-card,
.related-card {
  color: var(--charcoal);
}


/* =================================================== */
/* ============ HOTFIXES v1.0.4 ====================== */
/* =================================================== */

/* Filter pill ACTIVE state — force white text and a clearly visible count */
.filter-pill.active,
.filter-pill.active .count {
  color: #ffffff !important;
}
.filter-pill.active .count { opacity: 0.85; }

/* Pattern swatches on the single product page render as <button> in our
   template (prototype used <div>). Reset native button chrome so only the
   prototype's swatch-circle styling shows. */
.pattern-swatch {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.pattern-swatch:focus-visible .swatch-circle {
  border-color: var(--coral);
}

/* Give each swatch a bit more horizontal room so labels like "INDIGO BLOOM"
   stop colliding into the next swatch. */
.pattern-options {
  flex-wrap: wrap;
  gap: 28px 32px;
}

/* Allow the swatch label to be slightly wider than the circle without being
   clipped, and centre under the circle. */
.pattern-swatch .swatch-label {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.pattern-swatch {
  margin-bottom: 32px; /* room for the label below */
}

/* Gallery thumbs — same reset since they're also <button> */
.gallery-thumbs .thumb {
  background: none;
  border: 1.5px solid transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.gallery-thumbs .thumb.active,
.gallery-thumbs .thumb:hover {
  border-color: var(--coral);
}

/* Size pill <button> reset (we render these as buttons too) */
.size-pill {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

/* Tab buttons — match the prototype's underline-on-active style cleanly */
.tabs-section .tab {
  -webkit-appearance: none;
  appearance: none;
  background: none;
}


/* =================================================== */
/* ============ HOTFIXES v1.0.5 ====================== */
/* =================================================== */

/* ---- WooCommerce notice banner (add-to-cart, errors, info) ---------------- */
.woocommerce-notices-wrapper {
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 40px;
}
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
ul.woocommerce-error,
ul.woocommerce-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  margin: 0 0 24px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  list-style: none;
}
.woocommerce-message {
  background: var(--pink-light);
  border-left: 4px solid var(--coral);
  color: var(--charcoal);
}
.woocommerce-info {
  background: rgba(194, 212, 224, 0.25);
  border-left: 4px solid var(--sky);
  color: var(--charcoal);
}
.woocommerce-error {
  background: rgba(232, 118, 90, 0.12);
  border-left: 4px solid var(--coral);
  color: var(--charcoal);
}
.woocommerce-message .button,
.woocommerce-message a.button {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 50px;
  background: var(--charcoal);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.2s;
}
.woocommerce-message .button:hover { background: var(--coral); }

/* ---- Review tab — comment form ------------------------------------------- */
.woocommerce-Reviews-title,
.comments-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--charcoal);
  margin: 0 0 18px;
}
.woocommerce-noreviews,
.no-comments {
  font-family: var(--font-body);
  color: var(--text-light);
  margin: 0 0 28px;
  font-size: 15px;
}

#review_form_wrapper,
#review_form,
.comment-respond {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.comment-reply-title,
#reply-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--charcoal);
  display: block;
  margin-bottom: 20px;
}

.comment-form > p,
.comment-form .comment-form-rating,
.comment-form .comment-form-comment,
.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-cookies-consent {
  margin: 0 0 18px;
}
.comment-form label {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 8px;
}

/* Star rating widget — WC renders five <a class="star-N"> links by default
   that read "1 of 5 stars" etc. We hide the text and replace with star icons. */
.comment-form-rating .stars {
  display: inline-flex;
  gap: 6px;
  margin: 4px 0 0;
}
.comment-form-rating .stars span,
.comment-form-rating .stars {
  display: inline-flex;
  gap: 6px;
}
.comment-form-rating .stars a {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  text-indent: -9999px;
  overflow: hidden;
  font-size: 0;
  text-decoration: none !important;
  color: transparent;
}
.comment-form-rating .stars a::before {
  content: '\2606'; /* hollow star */
  position: absolute;
  inset: 0;
  text-indent: 0;
  font-size: 26px;
  line-height: 28px;
  text-align: center;
  color: var(--gold);
  opacity: 0.4;
  transition: opacity 0.15s, content 0.15s;
}
.comment-form-rating .stars a:hover::before,
.comment-form-rating .stars.selected a.active::before,
.comment-form-rating .stars.selected a.active ~ a::before { opacity: 1; }
.comment-form-rating .stars.selected a:not(.active)::before,
.comment-form-rating .stars a:hover ~ a::before {
  content: '\2606';
  opacity: 0.4;
}
.comment-form-rating .stars:hover a::before { content: '\2605'; opacity: 1; }
.comment-form-rating .stars:hover a:hover ~ a::before { content: '\2606'; opacity: 0.4; }
.comment-form-rating .stars.selected a.active::before,
.comment-form-rating .stars.selected a.active ~ a::before { content: '\2606'; }
.comment-form-rating .stars.selected a:not(.active)::before { content: '\2605'; }

/* Textarea + text inputs */
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--charcoal);
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form textarea:focus,
.comment-form input:focus { outline: none; border-color: var(--coral); }

/* Submit button — match the coral primary CTA */
.comment-form .form-submit input[type="submit"],
.comment-form input#submit,
.comment-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 50px;
  border: 0;
  background: var(--coral);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.comment-form .form-submit input[type="submit"]:hover,
.comment-form button[type="submit"]:hover { background: #d96649; transform: translateY(-1px); }


/* =================================================== */
/* ============ HOTFIXES v1.0.6 ====================== */
/* =================================================== */

/* The Shop page's .products-section grid layout (240px sidebar + 1fr grid)
   was bleeding onto the homepage's "Find Your Perfect Set" section, which
   uses the same class name. WordPress adds a `woocommerce-shop` body class
   on the shop archive — scope the shop layout to that body class so the
   homepage's category grid renders at full width again. */
body:not(.woocommerce-shop):not(.woocommerce-page) .products-section,
body.home .products-section {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 1400px;
  margin: 0 auto;
  padding: 90px 40px;
}

/* Make sure the homepage category grid keeps its full 3-column layout */
body.home .categories-grid,
body:not(.woocommerce-shop):not(.woocommerce-page) .categories-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px;
}

@media (max-width: 1024px) {
  body.home .categories-grid,
  body:not(.woocommerce-shop):not(.woocommerce-page) .categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  body.home .categories-grid,
  body:not(.woocommerce-shop):not(.woocommerce-page) .categories-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =================================================== */
/* ============ HOTFIXES v1.0.7 ====================== */
/* =================================================== */

/* ---- Mobile drawer menu (≤ 1024px) --------------------------------------- */
@media (max-width: 1024px) {
  /* Hamburger button shape + hit area */
  .mobile-menu-btn {
    display: block !important;
    position: relative;
    z-index: 1001;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 10px;
  }
  .mobile-menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--charcoal);
    margin: 4px auto;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .mobile-menu-btn[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .mobile-menu-btn[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .mobile-menu-btn[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Hide nav links by default — and when open, drop them as a full-width drawer */
  .nav-links {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    height: 100vh;
    padding: 88px 32px 32px;
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: var(--warm-white);
    border-left: 1px solid var(--border);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    z-index: 1000;
    list-style: none;
    overflow-y: auto;
  }
  .nav-links.is-open {
    transform: translateX(0);
  }
  .nav-links li {
    width: 100%;
    list-style: none;
  }
  .nav-links a {
    display: block;
    padding: 14px 0;
    width: 100%;
    font-family: var(--font-ui);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--charcoal);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
  }
  .nav-links a:hover { color: var(--coral); }

  /* Body scroll lock when drawer is open */
  body.menu-open {
    overflow: hidden;
  }

  /* Backdrop tint behind the drawer */
  .nav-links.is-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(44, 44, 44, 0.32);
    z-index: -1;
    animation: maeLukFade 0.25s ease both;
  }
  @keyframes maeLukFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}


/* =================================================== */
/* ============ HOTFIXES v1.0.8 ====================== */
/* =================================================== */

/* ---- Cart icon: anchor the count badge to the cart link --------------- */
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--charcoal);
  text-decoration: none;
}
.cart-link .cart-count {
  position: absolute;
  top: -6px;
  right: -10px;
  background: var(--coral);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
}

/* ---- Newsletter: split the input + submit into two separate pills ------ */
.newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
  align-items: stretch;
}
.newsletter-input {
  flex: 1 1 auto;
  border-radius: 50px !important;
  border-right: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  text-align: left;
  padding-left: 22px;
}
.newsletter-submit {
  flex: 0 0 auto;
  border-radius: 50px !important;
  padding: 16px 28px;
}
@media (max-width: 640px) {
  .newsletter-form {
    flex-direction: column;
    gap: 10px;
  }
  .newsletter-input,
  .newsletter-submit { width: 100%; }
}

/* ---- Footer: centre-align column content (title, tagline, links, pills) --- */
.footer-grid > div,
.footer-col {
  text-align: center;
}
.footer-tagline {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.footer-grid .payment-icons {
  justify-content: center;
}
.footer-col a {
  display: block;
}
.footer-col h4 {
  text-align: center;
}

/* On desktop, keep the brand column slightly wider but centre its content too */
@media (min-width: 1025px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

/* Mobile: stack the columns nicely with breathing room */
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}


/* =================================================== */
/* ============ HOTFIXES v1.0.9 ====================== */
/* =================================================== */

/* Footer alignment: LEFT on desktop/tablet, CENTRE on mobile only. */

/* Desktop (default, > 640px) — left-align everything in the footer columns.
   This overrides v1.0.8 which centered everything globally. */
.footer-grid > div,
.footer-col {
  text-align: left;
}
.footer-col h4 { text-align: left; }
.footer-tagline {
  margin-left: 0;
  margin-right: 0;
  max-width: 320px;
}
/* Override the cart-page CSS that bled into .payment-icons */
.footer .payment-icons,
.footer-grid .payment-icons {
  justify-content: flex-start;
}

/* Mobile only (≤ 640px) — centre everything */
@media (max-width: 640px) {
  .footer-grid > div,
  .footer-col,
  .footer-col h4 {
    text-align: center;
  }
  .footer-tagline {
    margin-left: auto;
    margin-right: auto;
  }
  .footer .payment-icons,
  .footer-grid .payment-icons {
    justify-content: center;
  }
}


/* =================================================== */
/* ============ HOTFIXES v1.0.10 ===================== */
/* =================================================== */

/* ---- Nav icon button reset (so <button>/<a> wrap doesn't add chrome) ---- */
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--charcoal);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.nav-icon-btn:hover { opacity: 1; color: var(--coral); }

/* ---- Mobile menu close (X): position fixed at top-right when open ------ */
@media (max-width: 1024px) {
  body.menu-open .mobile-menu-btn {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 1002;
  }
  /* Account for WordPress admin bar (32px on desktop, 46px on phone-width) */
  body.admin-bar.menu-open .mobile-menu-btn {
    top: 46px;
  }
}
@media (max-width: 782px) {
  body.admin-bar.menu-open .mobile-menu-btn {
    top: 60px;
  }
}

/* ---- Search overlay --------------------------------------------------- */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(44, 44, 44, 0.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
  z-index: 1100;
  animation: maeLukFade 0.18s ease both;
}
.search-overlay.is-open { display: flex; }
.search-overlay .search-form {
  background: var(--warm-white);
  padding: 32px;
  border-radius: 16px;
  width: min(620px, 92vw);
  display: flex;
  gap: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
}
.search-overlay input[type="search"] {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 16px;
  background: #fff;
  color: var(--charcoal);
  outline: none;
  transition: border-color 0.2s;
}
.search-overlay input[type="search"]:focus { border-color: var(--coral); }
.search-overlay input[type="search"]::placeholder { color: var(--text-light); }
.search-overlay .search-submit {
  background: var(--coral);
  color: #fff;
  border: 0;
  border-radius: 50px;
  padding: 14px 26px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.search-overlay .search-submit:hover { background: #d4634a; transform: translateY(-1px); }
.search-overlay .search-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--warm-white);
  border: 0;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  z-index: 1;
}
.search-overlay .search-close:hover { color: var(--coral); }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .search-overlay .search-form { flex-direction: column; padding: 24px; }
  .search-overlay .search-submit { width: 100%; }
  .search-overlay { padding-top: 22vh; }
}


/* =================================================== */
/* ============ PHASE 3 PAGE STYLES (v1.0.11) ======== */
/* =================================================== */

/* ---- Story page paragraph rhythm --------------------------------------- */
.story-body-text {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text);
  font-weight: 300;
  margin-bottom: 20px;
}

/* ---- Policy pages content (Shipping / Returns / Privacy) -------------- */
.policy-content h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--charcoal);
  margin: 32px 0 12px;
}
.policy-content h3:first-child { margin-top: 0; }
.policy-content p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  font-weight: 300;
  margin-bottom: 16px;
}

/* ---- Size Guide: unit toggle pills + sleeve tabs ----------------------- */
.unit-btn {
  padding: 8px 20px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 50px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.25s;
  -webkit-appearance: none;
  appearance: none;
}
.unit-btn.active,
.unit-btn:hover { border-color: var(--coral); }
.unit-btn.active { background: var(--coral); color: #fff; }

.size-tab {
  padding: 12px 28px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.size-tab.active { color: var(--coral); border-bottom-color: var(--coral); }

/* ---- Contact page form styling ---------------------------------------- */
.form-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--charcoal);
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.form-input:focus { outline: none; border-color: var(--coral); }
select.form-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.contact-form textarea.form-input { resize: vertical; min-height: 120px; }

/* ---- Stack the contact layout + strip on smaller screens -------------- */
@media (max-width: 900px) {
  .contact-page-layout { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 640px) {
  .contact-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .contact-form .form-row { grid-template-columns: 1fr !important; }
}

/* ---- Story page hero on mobile ---------------------------------------- */
@media (max-width: 640px) {
  .story-hero { height: 260px !important; }
  .contact-hero { height: 220px !important; }
}


/* =================================================== */
/* ============ HOTFIXES v1.0.12 ===================== */
/* =================================================== */

/* Page hero overlay — gradient instead of an aggressive brightness filter,
   so the actual lifestyle image stays visible behind the headline text. */
.page-hero { isolation: isolate; }
.page-hero-img {
  z-index: 0;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(44,44,44,0.18) 0%, rgba(44,44,44,0.42) 70%, rgba(44,44,44,0.52) 100%),
    linear-gradient(180deg, rgba(255,248,240,0.10) 0%, rgba(255,248,240,0.00) 30%);
  pointer-events: none;
}
.page-hero-content { z-index: 2; }

@media (max-width: 640px) {
  .page-hero { height: 280px !important; }
  .story-hero { height: 320px !important; }
  .contact-hero { height: 260px !important; }
}


/* =================================================== */
/* ============ HOTFIXES v1.0.13 ===================== */
/* =================================================== */

/* Drop the v1.0.12 overlay strength — it was visually killing the image.
   This is a much lighter vignette: bare-minimum dim at the top, only mild
   darken behind the headline (centred), and a subtle bottom shadow. */
.page-hero-overlay {
  background:
    radial-gradient(ellipse at center, rgba(44,44,44,0.32) 0%, rgba(44,44,44,0.18) 45%, rgba(44,44,44,0.05) 80%);
}

/* Stronger text shadow so the headline stays legible even over light areas */
.page-hero-content h1 {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.35);
}
.page-hero-content > div:first-child {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}


/* =================================================== */
/* ============ HOTFIXES v1.0.15 ===================== */
/* =================================================== */

/* The Contact hero is now a full-body portrait shot (4 women walking).
   Mobile needs more height than the previous 260px so we can see all four
   models, not just their knees. Story hero stays at the modest crop since
   the flat-lay reads fine even at shorter heights. */
@media (max-width: 640px) {
  .story-hero   { height: 320px !important; }
  .contact-hero { height: 380px !important; }
}
@media (max-width: 420px) {
  .contact-hero { height: 340px !important; }
}


/* =================================================== */
/* ============ HOTFIXES v1.0.16 ===================== */
/* =================================================== */

/* Main product image must use object-fit:cover to fill the 4:5 container
   without stretching. Previously the <img> had width/height 100% and no
   object-fit, so it got distorted. */
.gallery-main img,
.gallery-main .gallery-main-img,
.gallery-main #gallery-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Thumbnails: when rendered as <img> (real variation photo), apply cover so
   each pattern's thumb shows its actual photo cleanly. */
.gallery-thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.gallery-thumbs .thumb {
  width: 80px;
  height: 100px;
  flex: 0 0 80px;
}

/* On mobile the thumbnails should sit in a horizontal row above the main
   image, sized smaller so they don't dominate. */
@media (max-width: 1024px) {
  .gallery-thumbs {
    flex-direction: row !important;
    flex-wrap: wrap;
  }
  .gallery-thumbs .thumb {
    width: 64px;
    height: 80px;
    flex: 0 0 64px;
  }
}

/* ============================================================
 *  v1.1 — Client-requested changes (June 2026)
 *  Additive overrides only; the prototype CSS above is untouched.
 * ============================================================ */

/* --- Shop breadcrumb: the product-page ".breadcrumb" rule (max-width +
       margin:0 auto + padding:22px 40px 0) bleeds onto the shop page
       because the class is shared — adding a 2nd 40px left indent and
       wiping the bottom gap. Scope it back so Home/Shop aligns flush
       with "The Collection" eyebrow + title, and sits tighter. -------- */
.shop-header .breadcrumb {
  max-width: none;
  margin: 0 0 12px;
  padding: 0;
}

/* --- Review form: checkbox next to its label, not stacked above it. --- */
.comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment-form .comment-form-cookies-consent input {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}
.comment-form .comment-form-cookies-consent label {
  display: inline;
  margin: 0;
}

/* --- "We ship within South Africa only" notice (checkout/cart/contact) - */
.mae-luk-ship-note {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 20px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-light);
}
.mae-luk-ship-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--olive-dark);
}

/* --- Favourites: header heart count badge (mirrors .cart-count) ------- */
.fav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--charcoal);
  text-decoration: none;
}
.fav-count {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--coral);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fav-count[hidden] { display: none; }

/* --- Favourites: heart toggle on product cards ----------------------- */
.product-card-wrap { position: relative; }
.fav-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.fav-btn:hover { transform: scale(1.08); color: var(--coral); background: #fff; }
.fav-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fav-btn.is-active { color: var(--coral); }
.fav-btn.is-active svg { fill: var(--coral); stroke: var(--coral); }

/* --- Favourites: "Save to Favourites" link on the product page -------- */
.wishlist-link .heart-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.wishlist-link.is-active { color: var(--coral); }
.wishlist-link.is-active .heart-icon { fill: var(--coral); stroke: var(--coral); }

/* --- Favourites page ------------------------------------------------- */
.favourites-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 70px;
}
.favourites-state {
  text-align: center;
  padding: 30px 20px 80px;
  max-width: 520px;
  margin: 0 auto;
}
.favourites-state h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 300;
  color: var(--charcoal);
  margin-bottom: 12px;
}
.favourites-state em { font-style: italic; color: var(--coral); }
.favourites-state p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-light);
  font-weight: 300;
  margin-bottom: 26px;
}
@media (max-width: 640px) {
  .favourites-section { padding-left: 20px; padding-right: 20px; }
  .fav-btn { width: 34px; height: 34px; top: 10px; right: 10px; }
}

/* --- v1.2: mobile-only "Home" link — only inside the hamburger drawer --- */
.nav-links .nav-home-mobile { display: none; }
@media (max-width: 1024px) {
  .nav-links .nav-home-mobile { display: block; }
}

/* --- v1.4: shop infinite scroll — loader + no-JS pagination fallback ----- */
.shop-more { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.shop-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 34px 0;
}
.shop-loader[hidden] { display: none; }
.shop-loader span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
  animation: mae-luk-pulse 1s ease-in-out infinite;
}
.shop-loader span:nth-child(2) { animation-delay: 0.15s; }
.shop-loader span:nth-child(3) { animation-delay: 0.3s; }
@keyframes mae-luk-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1); }
}
/* Fallback pagination (only shown when JS is unavailable) — was unstyled. */
.woocommerce-pagination { text-align: center; padding: 30px 0; }
.woocommerce-pagination ul,
.woocommerce-pagination ul li { list-style: none; margin: 0; padding: 0; }
.woocommerce-pagination ul { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.woocommerce-pagination a,
.woocommerce-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 50px;
  border: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--charcoal);
  text-decoration: none;
}
.woocommerce-pagination span.current { background: var(--coral); color: #fff; border-color: var(--coral); }
.woocommerce-pagination a:hover { border-color: var(--coral); color: var(--coral); }
@media (max-width: 640px) {
  .shop-more { padding: 0 20px; }
}

/* ============================================================
 *  v1.5 — favourites button, mobile Mini Dreams, cart product name
 * ============================================================ */

/* "Save to Favourites" is a <button> — reset the default chrome and make it a
   clean full-width ghost button (it was showing the browser's default box). */
.wishlist-link {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  width: 100%;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 18px;
}
.wishlist-link:hover { border-color: var(--coral); }
.wishlist-link.is-active { border-color: var(--coral); background: rgba(232, 118, 90, 0.06); }

/* Mini Dreams (coming-soon) band — the notify form overflowed on mobile
   because the input was locked to min-width:200px and the inner padding stayed
   large. Let it shrink to fit. */
@media (max-width: 640px) {
  .coming-soon-inner { padding: 30px 22px; }
  .notify-form { width: 100%; }
  .notify-form input { min-width: 0; }
}

/* Cart (WooCommerce Cart block) — style the product name; it was the default
   underlined blue link. */
a.wc-block-components-product-name,
.wc-block-components-product-name {
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s;
}
a.wc-block-components-product-name:hover,
.wc-block-components-product-name:hover { color: var(--coral); }