/* ================================================================
   ORIGINS BY HAWWA — DESIGN MATCH PATCH
   Full pixel-perfect reconciliation against:
     - indexing.html (homepage)
     - originsbyhawwa-pages-desktop.html (all inner pages)
     - mobile.html (responsive)
   This file is enqueued AFTER main.css and woocommerce.css
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@200;300;400;500&display=swap');

/* ─────────────────────────────────────────
   1. CSS VARIABLES (ensure always available)
   ───────────────────────────────────────── */
:root {
  --cream:      #F8F4EE;
  --warm-white: #FDFAF6;
  --sand:       #E8DDD0;
  --taupe:      #C4B5A5;
  --mink:       #9B8B7E;
  --deep:       #3D2E28;
  --espresso:   #2A1F1A;
  --gold:       #B8986A;
  --gold-light: #D4B896;
  --sage:       #8A9E8C;
}

/* ─────────────────────────────────────────
   2. RESET / BASE
   ───────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Jost', sans-serif; background: var(--warm-white); color: var(--espresso); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:visited { color: inherit; }

/* ─────────────────────────────────────────
   3. COLOUR UTILITY CLASSES
   ───────────────────────────────────────── */
.bg-blush     { background: linear-gradient(150deg,#F0D8D2,#D4B0A8) !important; }
.bg-sage      { background: linear-gradient(150deg,#9BB09D,#6A8C6E) !important; }
.bg-midnight  { background: linear-gradient(150deg,#3C4A6A,#1E2538) !important; }
.bg-champagne { background: linear-gradient(150deg,#E8DCC4,#C4B090) !important; }
.bg-stone     { background: linear-gradient(150deg,#B0A498,#8A7E72) !important; }
.bg-rose      { background: linear-gradient(150deg,#D4909A,#A86070) !important; }
.bg-slate     { background: linear-gradient(150deg,#7A8A9A,#4A5A6A) !important; }
.sil { opacity: 0.18 !important; }

/* ─────────────────────────────────────────
   4. TYPOGRAPHY HELPERS
   ───────────────────────────────────────── */
.overline {
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 400;
  letter-spacing: 4px; text-transform: uppercase; color: var(--gold);
  margin-bottom: 22px; display: block;
}
.section-title {
  font-family: 'Cormorant Garamond', serif; font-size: 50px; font-weight: 300;
  line-height: 1.15; color: var(--espresso); margin-bottom: 26px;
}
.section-title em { font-style: italic; color: var(--gold); }
.section-body { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 300; line-height: 2; color: var(--mink); }

/* ─────────────────────────────────────────
   5. BUTTONS
   ───────────────────────────────────────── */
.btn-primary {
  background: var(--gold); color: #fff;
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: 3px; text-transform: uppercase; padding: 16px 36px;
  border: none; cursor: pointer; text-decoration: none;
  display: inline-block; transition: background 0.3s;
}
.btn-primary:hover { background: var(--mink); color: #fff; }

.btn-esp {
  background: var(--espresso); color: #fff;
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: 3px; text-transform: uppercase; padding: 16px 36px;
  border: none; cursor: pointer; transition: background 0.3s; display: inline-block;
}
.btn-esp:hover { background: var(--deep); color: #fff; }

.btn-ghost {
  color: var(--taupe); font-family: 'Jost', sans-serif;
  font-size: 11px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color 0.3s;
}
.btn-ghost::after { content: '→'; font-size: 14px; }
.btn-ghost:hover { color: var(--gold); }

.btn-outline-gold {
  color: var(--gold); font-family: 'Jost', sans-serif;
  font-size: 11px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 3px;
  transition: color 0.3s, border-color 0.3s; display: inline-block;
}
.btn-outline-gold:hover { color: var(--espresso); border-color: var(--espresso); }

/* ─────────────────────────────────────────
   6. HEADER / NAV
   ───────────────────────────────────────── */
.site-header {
  background: var(--warm-white); position: sticky; top: 0; z-index: 1000;
  border-bottom: 1px solid var(--sand); transition: box-shadow 0.3s;
}
.site-header.scrolled { box-shadow: 0 4px 20px rgba(42,31,26,0.06); }
.main-navigation {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 60px; max-width: 1400px; margin: 0 auto;
}
.site-logo a { display: inline-block; }
.site-logo svg, .custom-logo { max-height: 60px; width: auto; }

/* Nav links */
.main-navigation nav ul,
ul.nav-links {
  display: flex; gap: 38px; list-style: none; margin: 0; padding: 0; align-items: center;
}
.main-navigation nav ul a,
ul.nav-links a {
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--espresso);
  text-decoration: none; transition: color 0.3s; position: relative; display: block;
}
.main-navigation nav ul a:hover,
ul.nav-links a:hover,
.main-navigation nav ul .current-menu-item > a,
ul.nav-links .active { color: var(--gold); }
.main-navigation nav ul a::after,
ul.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; background: var(--gold); transition: width 0.3s;
}
.main-navigation nav ul a:hover::after,
.main-navigation nav ul .current-menu-item > a::after { width: 100%; }

/* Nav right icons */
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-icon {
  width: 16px; height: 16px; stroke: var(--espresso); fill: none;
  stroke-width: 1.5; cursor: pointer; display: block; flex-shrink: 0;
  transition: stroke 0.3s;
}
.nav-icon:hover { stroke: var(--gold); }
.nav-icon-btn { position: relative; display: inline-flex; align-items: center; }

/* Cart count badge */
.cart-count, .cart-badge {
  position: absolute; top: -8px; right: -10px;
  width: 17px; height: 17px; background: var(--gold); border-radius: 50%;
  font-size: 9px; color: white; display: flex; align-items: center; justify-content: center;
  font-family: 'Jost', sans-serif; font-weight: 400; pointer-events: none; z-index: 2;
}
.cart-wrap { position: relative; display: inline-flex; align-items: center; }

/* Wishlist count */
.wishlist-count {
  position: absolute; top: -6px; right: -8px;
  background: var(--gold); color: white; font-family: 'Jost', sans-serif;
  font-size: 9px; font-weight: 400; line-height: 1; min-width: 16px; height: 16px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* Mobile toggle */
.mobile-menu-toggle {
  display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px;
}
.mobile-menu-toggle span { width: 20px; height: 1.5px; background: var(--espresso); display: block; transition: all 0.3s; }

/* Mobile menu overlay */
.mobile-menu-overlay {
  position: fixed; top: 0; left: -100%; width: 100%; height: 100%;
  background: var(--espresso); z-index: 2000; transition: left 0.4s ease; overflow-y: auto;
}
.mobile-menu-overlay.active { left: 0; }
.mobile-menu-container { padding: 60px 30px; position: relative; }
.mobile-menu-close { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 32px; color: var(--cream); cursor: pointer; line-height: 1; }
.mobile-nav-links { list-style: none; margin-top: 40px; padding: 0; display: flex; flex-direction: column; }
.mobile-nav-links li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-nav-links a { display: block; padding: 18px 0; font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 300; color: var(--cream); text-decoration: none; transition: color 0.3s; }
.mobile-nav-links a:hover { color: var(--gold); }
.mobile-cart-info { margin-top: 40px; display: flex; gap: 24px; }
.mobile-cart-link, .mobile-checkout-link { font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--taupe); text-decoration: none; transition: color 0.3s; }
.mobile-cart-link:hover, .mobile-checkout-link:hover { color: var(--gold); }

/* Search overlay */
.search-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(42,31,26,0.96); z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all 0.3s;
}
.search-overlay.active { opacity: 1; visibility: visible; }
.search-container { width: 90%; max-width: 600px; position: relative; }
.search-container input[type="search"],
.search-container .search-field {
  width: 100%; padding: 20px 0; font-size: 24px; font-family: 'Jost', sans-serif;
  border: none; border-bottom: 1px solid rgba(184,152,106,0.5);
  background: transparent; color: white; outline: none; transition: border-color 0.3s;
}
.search-container input[type="search"]:focus { border-color: var(--gold); }
.search-container input::placeholder { color: rgba(255,255,255,0.3); }
.search-container .search-submit { display: none; }
.search-close { position: absolute; top: -50px; right: 0; background: none; border: none; font-size: 28px; color: rgba(255,255,255,0.6); cursor: pointer; transition: color 0.3s; line-height: 1; }
.search-close:hover { color: white; }
body.menu-open { overflow: hidden; }

/* ─────────────────────────────────────────
   7. HERO
   ───────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 88vh; overflow: hidden; }
.hero-left {
  background: var(--espresso); display: flex; flex-direction: column;
  justify-content: center; padding: 90px 70px; position: relative; overflow: hidden;
}
.hero-left::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(184,152,106,0.1); pointer-events: none;
}
.hero-left::after {
  content: ''; position: absolute; bottom: -60px; left: -50px;
  width: 240px; height: 240px; border-radius: 50%; border: 1px solid rgba(184,152,106,0.07); pointer-events: none;
}
.hero-eyebrow {
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 300; letter-spacing: 5px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 28px;
  display: flex; align-items: center; gap: 14px;
}
.hero-eyebrow::before { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); }
.hero-title { font-family: 'Cormorant Garamond', serif; font-size: 68px; font-weight: 300; line-height: 1.08; color: var(--cream); margin-bottom: 30px; letter-spacing: -1px; }
.hero-title em { font-style: italic; color: var(--gold-light); }
.hero-desc { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; line-height: 1.95; color: var(--taupe); max-width: 360px; margin-bottom: 50px; }
.hero-cta { display: flex; gap: 22px; align-items: center; }
.hero-right { position: relative; overflow: hidden; }
.hero-visual {
  width: 100%; height: 100%; min-height: 88vh;
  background: linear-gradient(150deg,#EDE4D8 0%,#D4C4B0 40%,#B8A898 80%,#9B8B7E 100%);
  position: relative; display: flex; align-items: flex-end;
}
.hero-visual img.hero-image { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.hero-arabic {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 280px; font-family: serif; color: rgba(255,255,255,0.05);
  line-height: 1; pointer-events: none; z-index: 1; user-select: none;
}
.hero-tag {
  position: absolute; bottom: 36px; left: 36px; background: white;
  padding: 18px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.12);
  display: flex; align-items: center; gap: 16px; z-index: 2;
}
.tag-dot { width: 8px; height: 8px; background: var(--sage); border-radius: 50%; flex-shrink: 0; }
.tag-text strong { display: block; font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500; color: var(--espresso); margin-bottom: 3px; }
.tag-text span { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 300; color: var(--mink); }

/* ─────────────────────────────────────────
   8. MARQUEE
   ───────────────────────────────────────── */
.marquee-strip { background: var(--gold); padding: 13px 0; overflow: hidden; white-space: nowrap; }
.marquee-inner { display: inline-flex; gap: 56px; animation: marquee 30s linear infinite; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee-item { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-style: italic; font-weight: 300; color: white; letter-spacing: 1px; display: flex; align-items: center; gap: 18px; }
.marquee-item::after { content: '✦'; font-size: 9px; font-style: normal; opacity: 0.55; }

/* ─────────────────────────────────────────
   9. PHILOSOPHY
   ───────────────────────────────────────── */
.philosophy-section { background: var(--warm-white); }
.philosophy {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 1300px; margin: 0 auto; padding: 110px 60px; gap: 80px; align-items: center;
}
.philosophy-right { border-left: 1px solid var(--sand); padding-left: 70px; }
.arabic-quote { font-size: 44px; line-height: 1.5; color: var(--gold); font-family: serif; text-align: right; margin-bottom: 18px; direction: rtl; }
.arabic-translation { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; color: var(--mink); text-align: right; line-height: 1.7; }

/* ─────────────────────────────────────────
   10. HOMEPAGE FEATURED PRODUCTS
   ───────────────────────────────────────── */
.products-section { background: var(--cream); padding: 100px 60px; }
.products-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  max-width: 1300px; margin: 0 auto 56px; padding-bottom: 40px; border-bottom: 1px solid var(--sand);
}
.products-title { font-family: 'Cormorant Garamond', serif; font-size: 48px; font-weight: 300; color: var(--espresso); margin: 0; }
.products-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; max-width: 1300px; margin: 0 auto; }

/* Product card — side-by-side image+info layout */
.product-card {
  background: white; display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 4px 24px rgba(42,31,26,0.05); cursor: pointer; position: relative;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(42,31,26,0.1); }
.product-img { height: 420px; position: relative; overflow: hidden; }
.product-img-bg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  transition: transform 0.5s ease;
}
.product-img-bg img { width: 100%; height: 100%; object-fit: cover; }
.product-card:hover .product-img-bg { transform: scale(1.04); }
.product-badge {
  position: absolute; top: 18px; left: 18px; background: var(--espresso); color: white;
  font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 400;
  letter-spacing: 2px; text-transform: uppercase; padding: 5px 11px; z-index: 2;
}
.product-badge.gold { background: var(--gold); }
.product-info {
  padding: 40px 32px; display: flex; flex-direction: column;
  justify-content: center; border-left: 1px solid var(--sand);
}
.product-collection {
  font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 400;
  letter-spacing: 3.5px; text-transform: uppercase; color: var(--taupe); margin-bottom: 12px; display: block;
}
.product-name { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 300; color: var(--espresso); line-height: 1.15; margin-bottom: 6px; }
.product-name a { color: inherit !important; text-decoration: none; }
.product-shade { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-style: italic; color: var(--mink); margin-bottom: 22px; }
.product-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.08); margin-bottom: 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: block; }
.product-price { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; color: var(--deep); margin-bottom: 22px; }
.product-price .woocommerce-Price-amount, .product-price .amount { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }
.product-divider { height: 1px; background: var(--sand); margin-bottom: 22px; }
.product-spec { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 300; color: var(--mink); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.product-spec::before { content: '—'; color: var(--gold); flex-shrink: 0; }
.product-add {
  background: var(--espresso); color: white; border: none;
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 400;
  letter-spacing: 3px; text-transform: uppercase; padding: 13px 26px;
  cursor: pointer; transition: background 0.3s; align-self: flex-start;
  margin-top: 10px; text-decoration: none; display: inline-block;
}
.product-add:hover { background: var(--gold); color: white; }

/* ─────────────────────────────────────────
   11. SHOP / PRODUCT ARCHIVE  (cat-grid)
   ───────────────────────────────────────── */
.cat-hero { background: var(--espresso); padding: 70px 60px; display: flex; justify-content: space-between; align-items: flex-end; }
.cat-eyebrow { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; display: flex; align-items: center; gap: 14px; }
.cat-eyebrow::before { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); }
.cat-title { font-family: 'Cormorant Garamond', serif; font-size: 72px; font-weight: 300; color: var(--cream); line-height: 1.05; letter-spacing: -1px; }
.cat-title em { font-style: italic; color: var(--gold-light); }
.cat-hero-r { text-align: right; }
.cat-count { font-family: 'Cormorant Garamond', serif; font-size: 100px; font-weight: 300; line-height: 1; color: rgba(184,152,106,0.14); }
.cat-desc { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--taupe); line-height: 1.9; max-width: 280px; margin-left: auto; margin-top: 10px; }

/* Filter bar */
.filter-bar { background: var(--cream); padding: 22px 60px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--sand); flex-wrap: wrap; }
.filter-label { font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--mink); white-space: nowrap; }
.filter-divider { width: 1px; height: 18px; background: var(--sand); flex-shrink: 0; }
.filter-pill, a.filter-pill { font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 8px 18px; border: 1px solid var(--sand); background: transparent; color: var(--mink); cursor: pointer; transition: all 0.2s; white-space: nowrap; text-decoration: none; display: inline-block; }
.filter-pill.active, .filter-pill:hover, a.filter-pill.active, a.filter-pill:hover { background: var(--espresso); color: white; border-color: var(--espresso); }
.filter-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--mink); position: relative; }
.filter-sort form { display: flex; align-items: center; gap: 6px; }
.filter-sort select, .filter-sort select.orderby { border: none; background: transparent; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--mink); cursor: pointer; outline: none; padding: 0 18px 0 0; appearance: none; -webkit-appearance: none; }

/* Grid */
.cat-grid-wrap { background: var(--cream); padding: 50px 60px 100px; }
.cat-grid {
  display: grid !important; grid-template-columns: repeat(3,1fr) !important;
  gap: 24px !important; max-width: 1300px !important; margin: 0 auto !important;
  list-style: none !important; float: none !important; padding: 0 !important;
}
.woocommerce ul.products.cat-grid,
.woocommerce-page ul.products.cat-grid {
  display: grid !important; grid-template-columns: repeat(3,1fr) !important;
  gap: 24px !important; float: none !important; padding: 0 !important;
  margin: 0 auto !important; max-width: 1300px !important; list-style: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { float: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }

/* Cat card */
.cat-card {
  background: white; overflow: hidden; cursor: pointer;
  box-shadow: 0 4px 20px rgba(42,31,26,0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  position: relative; display: flex; flex-direction: column;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(42,31,26,0.1); }
.cat-card-link { position: absolute; inset: 0; z-index: 0; }
.cat-body-link { text-decoration: none; color: inherit; display: block; z-index: 1; position: relative; flex: 1; }
.cat-img { height: 320px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cat-img-inner { width: 100%; height: 100%; transition: transform 0.5s ease; }
.cat-img-inner img, .cat-product-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.cat-card:hover .cat-img-inner { transform: scale(1.04); }
.cat-badge { position: absolute; top: 16px; left: 16px; background: var(--espresso); color: white; font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; padding: 5px 11px; z-index: 2; }
.cat-badge.gold { background: var(--gold); }
.cat-body { padding: 24px 26px 28px; flex: 1; }
.cat-col { font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 3.5px; text-transform: uppercase; color: var(--taupe); margin-bottom: 8px; display: block; }
.cat-name { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: var(--espresso); line-height: 1.1; margin-bottom: 5px; }
.cat-shade { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-style: italic; color: var(--mink); margin-bottom: 16px; }
.cat-row { display: flex; justify-content: space-between; align-items: center; }
.cat-price { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; color: var(--deep); }
.cat-price .woocommerce-Price-amount, .cat-price .amount { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }
.cat-swatches { display: flex; gap: 6px; }
.swatch-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.08); display: inline-block; }

/* Wishlist heart button (card) */
.cat-wish, .cat-wish-wrap {
  position: absolute; top: 12px; right: 12px; z-index: 3;
}
.cat-wish {
  width: 32px; height: 32px; background: rgba(0,0,0,0.32); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
  transition: background 0.25s; padding: 0;
}
.cat-wish:hover { background: var(--gold); }
.cat-wish svg { width: 14px; height: 14px; display: block; }
.card-heart-btn {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(0,0,0,0.30); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; transition: background 0.25s; padding: 0;
}
.card-heart-btn:hover { background: rgba(0,0,0,0.55); }
.card-heart-btn.wishlisted { background: var(--gold); }
.card-heart-btn .heart-outline, .card-heart-btn .heart-filled { display: block; flex-shrink: 0; }
.card-heart-btn.wishlisted .heart-outline { display: none; }
.card-heart-btn.wishlisted .heart-filled { display: block !important; }

/* YITH wishlist on cards */
.cat-wish-wrap .yith-wcwl-add-to-wishlist { position: absolute; top: 12px; right: 12px; z-index: 10; margin: 0 !important; }
.cat-wish-wrap .yith-wcwl-add-to-wishlist a,
.cat-wish-wrap .yith-wcwl-add-to-wishlist .add_to_wishlist {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 32px !important; height: 32px !important; background: white !important;
  border-radius: 50% !important; font-size: 0 !important; color: transparent !important;
  text-indent: -9999px !important; border: none !important; padding: 0 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; overflow: hidden !important; cursor: pointer !important;
}
.cat-wish-wrap .yith-wcwl-add-to-wishlist a:hover { background: var(--gold) !important; }
.cat-wish-wrap .yith-wcwl-add-to-wishlist .add_to_wishlist::before,
.cat-wish-wrap .yith-wcwl-add-to-wishlist a::before {
  content: ''; display: block; width: 13px; height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1F1A' stroke-width='1.5'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cat-wish-wrap .yith-wcwl-wishlistadded::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B8986A' stroke='%23B8986A' stroke-width='1.5'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important; }
.cat-wish-wrap .yith-wcwl-add-to-wishlist .yith-wcwl-icon { display: none !important; }
.cat-wish-wrap .yith_wcwl_notice, .cat-card .yith-wcwl-popup { display: none !important; }

/* ─────────────────────────────────────────
   12. SINGLE PRODUCT
   ───────────────────────────────────────── */
.single-product-wrap { max-width: 1300px; margin: 0 auto; padding: 50px 60px 100px; }
.product-page { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; margin-bottom: 80px; }

/* Gallery */
.product-gallery { position: sticky; top: 100px; }
.gallery-layout { display: flex; gap: 16px; align-items: flex-start; }
.gallery-thumbs { display: flex; flex-direction: column; gap: 10px; width: 80px; flex-shrink: 0; }
.gallery-thumb { cursor: pointer; border: 2px solid transparent; overflow: hidden; opacity: 0.55; transition: opacity 0.2s, border-color 0.2s; }
.gallery-thumb:hover, .gallery-thumb.active { opacity: 1; border-color: var(--gold); }
.gallery-thumb img { width: 100% !important; height: 88px !important; object-fit: cover !important; display: block !important; }
.gallery-main-wrap { flex: 1; position: relative; overflow: hidden; }
.gallery-main-image { position: relative; }
.gallery-main-img { width: 100%; height: auto; display: block; }
.gallery-placeholder { height: 560px; display: flex; align-items: center; justify-content: center; }
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: white; border: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  opacity: 0; transition: opacity 0.2s; z-index: 2; color: var(--espresso);
}
.gallery-main-wrap:hover .gallery-arrow { opacity: 1; }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
.gallery-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; border: none; padding: 0; transition: background 0.2s; }
.gallery-dot.active { background: white; }

/* Summary */
.product-collection { font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 3.5px; text-transform: uppercase; color: var(--taupe); margin-bottom: 12px; display: block; }
.product-collection a { color: var(--taupe) !important; text-decoration: none; }
.product-title { font-family: 'Cormorant Garamond', serif; font-size: 46px; font-weight: 300; color: var(--espresso); line-height: 1.1; margin-bottom: 8px; }
.product-shade { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; color: var(--mink); margin-bottom: 20px; }
.product-rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.star-rating { color: var(--gold); font-size: 13px; }
.rating-count { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink) !important; text-decoration: none; }
.product-price-display { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 400; color: var(--deep); margin-bottom: 20px; display: block; }
.product-price-display .woocommerce-Price-amount, .product-price-display .price { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }
.product-shade-chip { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 14px 0; border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand); }
.shade-circle { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.08); flex-shrink: 0; display: inline-block; }
.shade-name { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink); }
.low-stock { color: #c0392b; }
.product-short-desc { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; line-height: 1.9; color: var(--mink); margin-bottom: 24px; }
.product-atc-wrap { display: block; width: 100%; margin-bottom: 0; }
.product-atc-wrap .cart { display: flex; align-items: center; gap: 12px; margin: 0; flex-wrap: wrap; }
.product-atc-wrap .quantity { flex-shrink: 0; }
.product-atc-wrap .single_add_to_cart_button { flex: 1; text-align: center; }
.btn-add-wishlist {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 12px; padding: 13px 24px; background: transparent;
  border: 1px solid var(--sand); font-family: 'Jost', sans-serif; font-size: 11px;
  font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--espresso);
  cursor: pointer; transition: all 0.3s; box-sizing: border-box;
}
.btn-add-wishlist:hover { background: var(--cream); border-color: var(--gold); color: var(--gold); }
.btn-add-wishlist svg { stroke: currentColor; fill: none; stroke-width: 1.5; width: 15px; height: 15px; flex-shrink: 0; display: block; }
.product-meta-list { list-style: none; padding: 0; margin: 24px 0; border-top: 1px solid var(--sand); }
.product-meta-list li { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink); padding: 9px 0; border-bottom: 1px solid var(--sand); display: flex; align-items: center; gap: 10px; }
.product-meta-list li::before { content: '✦'; color: var(--gold); font-size: 8px; flex-shrink: 0; }
.product-tabs-wrap { border-top: 1px solid var(--sand); padding-top: 60px; margin-top: 20px; }
.product-related-wrap { padding: 60px 0; border-top: 1px solid var(--sand); margin-top: 40px; }
.product-related-wrap h2, .related.products h2 { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; color: var(--espresso); margin-bottom: 32px; }
.product-related-wrap ul.products, .related.products ul.products, .woocommerce .related ul.products {
  display: grid !important; grid-template-columns: repeat(4,1fr) !important;
  gap: 20px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; float: none !important;
}
/* ── Single product: Add to Wishlist — plain text link under ATC button ── */
.single-wishlist-wrap {
  display: block !important;
  margin-top: 16px !important;
  width: 100% !important;
}

/* Reset YITH container */
.single-wishlist-wrap .yith-wcwl-add-to-wishlist,
.single-wishlist-wrap .yith-wcwl-add-button,
.single-wishlist-wrap .yith-wcwl-wishlistexists,
.single-wishlist-wrap .yith-wcwl-wishlistadded {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-align: left !important;
}

/* The actual link — matches screenshot: plain text, no border/box */
.single-wishlist-wrap .yith-wcwl-add-to-wishlist a,
.single-wishlist-wrap .yith-wcwl-add-button a,
.single-wishlist-wrap .add_to_wishlist,
.single-wishlist-wrap a.add_to_wishlist {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--espresso) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color 0.2s !important;
  line-height: 1.4 !important;
}
.single-wishlist-wrap .yith-wcwl-add-to-wishlist a:hover,
.single-wishlist-wrap .yith-wcwl-add-button a:hover,
.single-wishlist-wrap .add_to_wishlist:hover {
  color: var(--gold) !important;
  background: none !important;
  border: none !important;
}

/* Fallback non-YITH link */
.origins-wishlist-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--espresso);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
  margin-top: 16px;
}
.origins-wishlist-link:hover { color: var(--gold); }
.origins-wishlist-link svg { stroke: currentColor; flex-shrink: 0; }

/* Hide YITH icon image / spinner — we use the link text only */
.single-wishlist-wrap .yith-wcwl-icon,
.single-wishlist-wrap img.yith-wcwl-icon,
.single-wishlist-wrap .ajax-loading,
.single-wishlist-wrap .feedback { display: none !important; }

/* Notification popup — hide it on single product */
.single-wishlist-wrap .yith_wcwl_notice { display: none !important; }

/* ─────────────────────────────────────────
   13. CART / BASKET
   ───────────────────────────────────────── */
.basket-empty { min-height: 60vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px; }
.basket-empty-msg { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 300; color: var(--espresso); }
.basket-empty-btn { max-width: 220px; text-align: center; }

/* Two-column page layout — left main / right cream summary */
.basket-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    min-height: 80vh;
    align-items: start;
}

/* ── LEFT panel ── */
.basket-main {
    padding: 70px 70px 90px 70px;
    /* No border-right — cream bg on right creates natural separation */
}

.basket-page-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 58px;
    font-weight: 300;
    color: var(--espresso);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
    line-height: 1;
}

.basket-count {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--mink);
    margin-bottom: 52px;
    display: block;
    font-weight: 300;
}

/* ── Item row: [thumb] [info] [price] ── */
.basket-item {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    gap: 36px;
    align-items: start;
    padding: 40px 0;
    border-bottom: 1px solid var(--sand);
}
.basket-item:first-of-type { border-top: 1px solid var(--sand); }

/* Thumbnail — square, fills exactly */
.basket-img {
    width: 150px;
    height: 150px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--sand);
}
.basket-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.basket-img a { display: block; width: 100%; height: 100%; }

/* Item text column */
.basket-item-info { display: flex; flex-direction: column; padding-top: 2px; }

.basket-item-col {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--taupe);
    margin-bottom: 5px;
    display: block;
    font-weight: 400;
}

.basket-item-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 300;
    color: var(--espresso);
    line-height: 1.1;
    margin-bottom: 6px;
}
.basket-item-name a { color: inherit !important; text-decoration: none; }

/* Colour dot + shade name in italic */
.basket-item-shade {
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px;
    font-style: italic;
    color: var(--mink);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.basket-shade-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.10);
    flex-shrink: 0;
}

.basket-item-size {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: var(--mink);
    margin-bottom: 22px;
}

/* ±  qty stepper — three separate bordered squares */
.basket-qty-wrap { margin-bottom: 12px; }
.basket-qty {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.basket-qty-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--sand);
    background: white;
    color: var(--espresso);
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
    line-height: 1;
    flex-shrink: 0;
    padding: 0;
    font-family: 'Jost', sans-serif;
}
.basket-qty-btn:hover { border-color: var(--espresso); }

.basket-qty-input {
    width: 44px;
    height: 38px;
    border: 1px solid var(--sand);
    border-left: none;
    border-right: none;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: var(--espresso);
    background: white;
    -moz-appearance: textfield;
    outline: none;
    padding: 0;
}
.basket-qty-input::-webkit-inner-spin-button,
.basket-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* REMOVE link */
.remove-link {
    display: inline-block;
    margin-top: 6px;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--taupe);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.2s;
}
.remove-link:hover { color: var(--espresso); }

/* Price — top-aligned, no padding offset */
.basket-item-price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--espresso);
    white-space: nowrap;
    padding-top: 4px;
    text-align: right;
}
.basket-item-price .woocommerce-Price-amount { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }

/* Bottom actions — hidden per screenshot (update happens via JS) */
.basket-actions { display: none; }

/* ── RIGHT: Order Summary panel ── */
.basket-summary {
    background: var(--cream);
    padding: 70px 52px 70px 52px;
    position: sticky;
    top: 0;
    height: fit-content;
    min-height: 80vh;
}

.summary-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    font-weight: 300;
    color: var(--espresso);
    margin-bottom: 44px;
    letter-spacing: -0.01em;
}

/* Subtotal / Shipping / Discount lines */
.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--mink);
    margin-bottom: 20px;
}

/* Total line — large serif, extra gap above */
.summary-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    color: var(--espresso) !important;
    margin-top: 28px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}
.summary-total span,
.summary-total .woocommerce-Price-amount { font-family: inherit !important; font-size: inherit !important; color: inherit !important; font-weight: inherit !important; }

/* Promo row */
.promo-form { margin: 32px 0 0; }
.promo-row {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--sand);
}
.promo-input {
    flex: 1;
    border: none;
    background: white;
    padding: 15px 18px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: var(--espresso);
    outline: none;
}
.promo-input::placeholder { color: var(--taupe); }
.promo-btn {
    background: var(--espresso);
    color: white;
    border: none;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 15px 24px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    font-weight: 400;
}
.promo-btn:hover { background: var(--deep); }

/* PROCEED TO CHECKOUT — dark espresso full-width button */
.checkout-btn {
    display: block;
    width: 100%;
    background: var(--espresso) !important;
    color: white !important;
    border: none;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    padding: 19px;
    cursor: pointer;
    margin-top: 14px;
    margin-bottom: 0;
    transition: background 0.3s;
    text-align: center;
    text-decoration: none;
}
.checkout-btn:hover { background: var(--deep) !important; }

/* PayPal button — yellow, full width, below checkout */
.basket-paypal-wrap { margin-top: 10px; }
.basket-paypal-wrap .wc-proceed-to-checkout { padding: 0 !important; margin: 0 !important; }

/* Style any button/link WC injects (PayPal smart button fallback) */
.basket-paypal-wrap > a,
.basket-paypal-wrap > button,
.basket-paypal-wrap .paypal-button-container,
.basket-paypal-wrap .wc-proceed-to-checkout a,
.basket-paypal-wrap .wc-proceed-to-checkout button {
    display: block !important;
    width: 100% !important;
    background: #F5C518 !important;
    color: #111 !important;
    border: none !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    padding: 17px !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}
.basket-paypal-wrap > a:hover,
.basket-paypal-wrap > button:hover { background: #e0b516 !important; }

/* Suppress WC's own checkout button rendered inside proceed_to_checkout hook */
.basket-paypal-wrap .checkout-button { display: none !important; }

/* Secure note */
/* Fallback PayPal button (shown when WC PayPal gateway is not active) */
.basket-paypal-btn {
    display: block;
    width: 100%;
    background: #F5C518;
    color: #111 !important;
    border: none;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 17px;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    transition: background 0.2s;
    border-radius: 4px;
    box-sizing: border-box;
}
.basket-paypal-btn:hover { background: #e0b516; }

.secure-note {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: var(--mink);
    text-align: center;
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    opacity: 0.7;
}
/* Cart new products section */
.cart-new-products { padding: 70px 60px 80px; background: var(--warm-white); border-top: 1px solid var(--sand); }
.cart-new-products .cnp-eyebrow { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 10px; text-align: center; }
.cart-new-products .cnp-heading { font-family: 'Cormorant Garamond', serif; font-size: 38px; font-weight: 300; color: var(--espresso); text-align: center; margin-bottom: 40px; line-height: 1.15; }
.cart-new-products .cnp-heading em { font-style: italic; color: var(--gold); }
.cart-new-products-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; max-width: 1300px; margin: 0 auto; }

/* ─────────────────────────────────────────
   14. CONTACT
   ───────────────────────────────────────── */
.contact-hero { background: var(--espresso); padding: 90px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.contact-eyebrow { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.contact-eyebrow::before { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); }
.contact-title { font-family: 'Cormorant Garamond', serif; font-size: 62px; font-weight: 300; color: var(--cream); line-height: 1.08; margin-bottom: 20px; letter-spacing: -1px; }
.contact-title em { font-style: italic; color: var(--gold-light); }
.contact-subtitle { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--taupe); line-height: 1.95; max-width: 380px; }
.contact-channels { display: flex; flex-direction: column; gap: 16px; }
.channel-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(184,152,106,0.14); padding: 26px 30px; display: flex; gap: 20px; align-items: flex-start; }
.channel-icon { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.5; flex-shrink: 0; margin-top: 3px; }
.channel-label { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; display: block; }
.channel-value { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 300; color: var(--cream); margin-bottom: 4px; display: block; }
.channel-note { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--taupe); display: block; }
.contact-body { padding: 80px 60px; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.contact-form-col {}
.contact-side-col {}
.cf-title { font-family: 'Cormorant Garamond', serif; font-size: 38px; font-weight: 300; color: var(--espresso); margin-bottom: 8px; }
.cf-sub { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); line-height: 1.9; margin-bottom: 36px; }
.cf-group { margin-bottom: 22px; }
.cf-label { display: block; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--espresso); margin-bottom: 9px; }
.cf-input, .cf-select, .cf-textarea { width: 100%; border: 1px solid var(--sand); background: white; padding: 14px 18px; font-family: 'Jost', sans-serif; font-size: 13px; color: var(--espresso); outline: none; transition: border-color 0.2s; border-radius: 0; }
.cf-input:focus, .cf-textarea:focus { border-color: var(--gold); }
.cf-select { appearance: none; cursor: pointer; }
.cf-textarea { resize: none; height: 150px; line-height: 1.8; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cf-side-title { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 300; color: var(--espresso); margin-bottom: 22px; }
.cf-faq-item { padding: 18px 0; border-bottom: 1px solid var(--sand); cursor: pointer; }
.cf-faq-q { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 400; color: var(--espresso); display: flex; justify-content: space-between; align-items: center; gap: 12px; user-select: none; }
.cf-faq-q::after { content: '+'; color: var(--gold); font-size: 22px; font-weight: 200; flex-shrink: 0; transition: transform 0.3s; display: inline-block; }
.cf-faq-item.open .cf-faq-q { color: var(--gold); }
.cf-faq-item.open .cf-faq-q::after { transform: rotate(45deg); }
.cf-faq-a { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); line-height: 1.9; max-height: 0; overflow: hidden; transition: max-height 0.35s ease; padding: 0; }
.cf-faq-item.open .cf-faq-a { max-height: 300px; padding-top: 14px; }
.cf-hours { background: var(--cream); padding: 28px 30px; margin-top: 30px; }
.cf-hours-label { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: block; }
.cf-hours-row { display: flex; justify-content: space-between; font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); margin-bottom: 10px; }
.cf-hours-row span { font-weight: 400; color: var(--espresso); }

/* ─────────────────────────────────────────
   15. WISHLIST PAGE
   ───────────────────────────────────────── */
.wish-hero { background: var(--cream); padding: 60px 60px 50px; border-bottom: 1px solid var(--sand); display: flex; justify-content: space-between; align-items: flex-end; }
.wish-title { font-family: 'Cormorant Garamond', serif; font-size: 56px; font-weight: 300; color: var(--espresso); }
.wish-title em { font-style: italic; color: var(--gold); }
.wish-count { font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--mink); }
.wish-subtitle { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); line-height: 1.9; max-width: 300px; text-align: right; }
.wish-grid-wrap { background: var(--warm-white); padding: 50px 60px 100px; }
.wish-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; max-width: 1300px; margin: 0 auto; }
.wish-card { background: white; overflow: hidden; box-shadow: 0 4px 20px rgba(42,31,26,0.04); transition: transform 0.35s, box-shadow 0.35s; cursor: pointer; position: relative; }
.wish-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(42,31,26,0.09); }
.wish-img { height: 260px; position: relative; overflow: hidden; }
.wish-remove { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); cursor: pointer; border: none; color: var(--mink); font-size: 16px; z-index: 2; }
.wish-body { padding: 20px 22px 26px; }
.wish-col { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--taupe); margin-bottom: 6px; display: block; }
.wish-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300; color: var(--espresso); margin-bottom: 4px; }
.wish-shade { font-family: 'Cormorant Garamond', serif; font-size: 14px; font-style: italic; color: var(--mink); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; }
.wish-price { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: var(--deep); margin-bottom: 16px; }
.wish-add { width: 100%; background: var(--espresso); color: white; border: none; font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; padding: 12px; cursor: pointer; transition: background 0.3s; }
.wish-add:hover { background: var(--gold); }

/* ─────────────────────────────────────────
   16. FAQ
   ───────────────────────────────────────── */
.faq-hero { background: var(--espresso); padding: 90px 60px; text-align: center; position: relative; overflow: hidden; }
.faq-hero::before { content: '؟'; position: absolute; font-size: 360px; font-family: serif; color: rgba(184,152,106,0.04); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.faq-hero-eyebrow { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; display: flex; align-items: center; justify-content: center; gap: 14px; position: relative; z-index: 2; }
.faq-hero-eyebrow::before, .faq-hero-eyebrow::after { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); }
.faq-hero-title { font-family: 'Cormorant Garamond', serif; font-size: 66px; font-weight: 300; color: var(--cream); line-height: 1.08; position: relative; z-index: 2; }
.faq-hero-title em { font-style: italic; color: var(--gold-light); }
.faq-hero-sub { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--taupe); max-width: 420px; margin: 16px auto 0; line-height: 1.95; position: relative; z-index: 2; }
.faq-body { padding: 80px 60px; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: start; }
.faq-cats { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 100px; }
.faq-cat-item { font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--mink); padding: 10px 16px; cursor: pointer; transition: all 0.2s; border-left: 2px solid transparent; }
.faq-cat-item.active, .faq-cat-item:hover { color: var(--espresso); border-left-color: var(--gold); }
.faq-category { display: none; }
.faq-category.active { display: block; }
.faq-cat-title, .faq-section-title { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; color: var(--espresso); margin-bottom: 28px; }
.faq-q { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 400; color: var(--espresso); padding: 22px 0; border-bottom: 1px solid var(--sand); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; user-select: none; }
.faq-q-icon { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 2; transition: transform 0.3s; flex-shrink: 0; }
.faq-q.open .faq-q-icon { transform: rotate(45deg); }
.faq-a { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); line-height: 1.9; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; }
.faq-a.open { max-height: 400px; padding: 16px 0 24px; }

/* ─────────────────────────────────────────
   17. ABOUT / OUR STORY
   ───────────────────────────────────────── */
.story-hero { background: var(--espresso); padding: 110px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.story-hero-left {}
.story-hero-right {}
.story-eyebrow { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 26px; display: flex; align-items: center; gap: 14px; }
.story-eyebrow::before { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); }
.story-title { font-family: 'Cormorant Garamond', serif; font-size: 64px; font-weight: 300; color: var(--cream); line-height: 1.08; letter-spacing: -1px; margin-bottom: 26px; }
.story-title em { font-style: italic; color: var(--gold-light); }
.story-intro { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 300; line-height: 1.95; color: var(--taupe); max-width: 380px; }
.story-quote-block { border-left: 2px solid var(--gold); padding-left: 32px; }
.story-quote { font-family: serif; font-size: 44px; line-height: 1.5; color: var(--gold); text-align: right; direction: rtl; margin-bottom: 16px; }
.story-quote-trans { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; color: var(--taupe); text-align: right; line-height: 1.7; }
.story-body-section { background: var(--warm-white); }
.story-body { padding: 100px 60px; max-width: 860px; margin: 0 auto; }
.story-body p { font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 300; line-height: 2; color: var(--mink); margin-bottom: 26px; }
.story-body h2 { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 400; color: var(--espresso); margin: 40px 0 16px; }
.story-values { background: var(--cream); padding: 100px 60px; }
.story-values-header { text-align: center; margin-bottom: 0; }
.story-values-header .overline { margin-bottom: 14px; }
.story-values-header .section-title { margin-bottom: 0; }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; margin-top: 52px; max-width: 1300px; margin-left: auto; margin-right: auto; }
.value-item { padding: 36px 28px; background: white; border: 1px solid var(--sand); text-align: center; }
.value-icon { width: 48px; height: 48px; background: var(--cream); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--gold); }
.value-icon svg { stroke: currentColor; fill: none; stroke-width: 1.5; width: 20px; height: 20px; }
.value-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: var(--espresso); margin: 0 0 12px; }
.value-body { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); line-height: 1.9; margin: 0; }
.story-founders-section { background: var(--espresso); padding: 80px 60px; }
.story-founders-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.story-founders-note { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-style: italic; font-weight: 300; color: var(--cream); line-height: 1.7; margin-bottom: 28px; }
.story-founders-signature { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }

/* ─────────────────────────────────────────
   18. STYLING PAGE
   ───────────────────────────────────────── */
.styling-section { background: var(--espresso); padding: 100px 60px; }
.styling-hero-title { font-family: 'Cormorant Garamond', serif; font-size: 60px; font-weight: 300; color: var(--cream); line-height: 1.08; margin-bottom: 16px; }
.styling-hero-title em { font-style: italic; color: var(--gold-light); }
.styling-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 1300px; margin: 56px auto 0; }
.styling-card { background: white; overflow: hidden; transition: transform 0.3s; }
.styling-card:hover { transform: translateY(-4px); }
.styling-img { height: 380px; overflow: hidden; }
.styling-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.styling-card:hover .styling-img img { transform: scale(1.04); }
.styling-body { padding: 28px 28px 32px; }
.styling-cat { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block; }
.styling-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: var(--espresso); line-height: 1.2; margin-bottom: 12px; }
.styling-excerpt { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink); line-height: 1.8; margin-bottom: 20px; }

/* ─────────────────────────────────────────
   19. BLOG
   ───────────────────────────────────────── */
.blog-hero { background: var(--cream); padding: 80px 60px 0; }
.blog-hero-inner { max-width: 1300px; margin: 0 auto; }
.blog-hero-top { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 50px; border-bottom: 1px solid var(--sand); }
.blog-hero-left h1 { font-family: 'Cormorant Garamond', serif; font-size: 60px; font-weight: 300; color: var(--espresso); line-height: 1.1; }
.blog-hero-left h1 em { font-style: italic; color: var(--gold); }
.blog-hero-right { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); line-height: 1.9; max-width: 360px; }
.blog-featured { max-width: 1300px; margin: 50px auto 0; display: grid; grid-template-columns: 1.4fr 1fr; background: white; overflow: hidden; box-shadow: 0 8px 40px rgba(42,31,26,0.06); }
.blog-feat-img { height: 520px; position: relative; overflow: hidden; }
.blog-feat-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-feat-tag { position: absolute; top: 24px; left: 24px; background: var(--gold); color: white; font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; padding: 6px 14px; }
.blog-feat-content { padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; }
.blog-feat-cat { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; display: block; }
.blog-feat-title { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; color: var(--espresso); line-height: 1.2; margin-bottom: 18px; }
.blog-feat-excerpt { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); line-height: 1.9; margin-bottom: 30px; }
.blog-feat-meta { display: flex; gap: 16px; margin-bottom: 32px; }
.blog-feat-author, .blog-feat-date { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink); }
.blog-feat-read { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; color: var(--espresso) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--espresso); padding-bottom: 2px; align-self: flex-start; }
.blog-feat-read::after { content: '→'; }
.blog-grid-section { background: var(--cream); padding: 60px 60px 100px; }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; max-width: 1300px; margin: 0 auto; }
.blog-card { background: white; overflow: hidden; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(42,31,26,0.1); }
.blog-card-img { height: 220px; overflow: hidden; position: relative; }
.blog-card-img-inner { width: 100%; height: 100%; transition: transform 0.5s; }
.blog-card-img-inner img { width: 100%; height: 100%; object-fit: cover; }
.blog-card:hover .blog-card-img-inner { transform: scale(1.05); }
.blog-card-cat { position: absolute; bottom: 16px; left: 16px; background: white; font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--espresso); padding: 5px 12px; }
.blog-card-body { padding: 28px 28px 32px; }
.blog-card-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: var(--espresso); line-height: 1.3; margin-bottom: 12px; }
.blog-card-excerpt { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink); line-height: 1.8; margin-bottom: 20px; }
.blog-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--sand); padding-top: 16px; }
.blog-card-date { font-family: 'Jost', sans-serif; font-size: 11px; color: var(--taupe); }
.blog-card-link { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold) !important; }
.blog-preview-section { background: var(--warm-white); padding: 100px 60px; }
.blog-preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; max-width: 1300px; margin: 0 auto; }
.section-header { max-width: 1300px; margin: 0 auto 56px; }
.blog-preview-card { background: white; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.blog-preview-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(42,31,26,0.1); }
.blog-preview-link { text-decoration: none; color: inherit; display: block; }
.blog-preview-image { height: 220px; overflow: hidden; background: var(--sand); }
.blog-preview-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.blog-preview-card:hover .blog-preview-image img { transform: scale(1.05); }
.blog-preview-content { padding: 28px; }
.blog-preview-category { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: block; }
.blog-preview-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: var(--espresso); line-height: 1.3; margin-bottom: 12px; }
.blog-preview-excerpt { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink); line-height: 1.8; margin-bottom: 20px; }
.blog-preview-meta { display: flex; justify-content: space-between; border-top: 1px solid var(--sand); padding-top: 16px; }
.blog-preview-date { font-family: 'Jost', sans-serif; font-size: 11px; color: var(--taupe); }
.blog-preview-read-more { font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.blog-preview-footer { text-align: center; margin-top: 48px; }

/* ─────────────────────────────────────────
   20. 404 PAGE
   ───────────────────────────────────────── */
.notfound { background: var(--espresso); min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 100px 60px; position: relative; overflow: hidden; }
.notfound::before { content: '404'; position: absolute; font-family: 'Cormorant Garamond', serif; font-size: 420px; font-weight: 300; color: rgba(184,152,106,0.04); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; line-height: 1; white-space: nowrap; }
.nf-eyebrow { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; position: relative; z-index: 2; }
.nf-eyebrow::before, .nf-eyebrow::after { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); }
.nf-title { font-family: 'Cormorant Garamond', serif; font-size: 76px; font-weight: 300; color: var(--cream); line-height: 1.05; margin-bottom: 20px; letter-spacing: -1px; position: relative; z-index: 2; }
.nf-title em { font-style: italic; color: var(--gold-light); }
.nf-sub { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 300; color: var(--taupe); line-height: 1.95; max-width: 460px; margin-bottom: 46px; position: relative; z-index: 2; }
.nf-btns { display: flex; gap: 16px; position: relative; z-index: 2; }

/* ─────────────────────────────────────────
   21. NEWSLETTER
   ───────────────────────────────────────── */
.newsletter { background: var(--sand); padding: 80px 60px; text-align: center; }
.newsletter h2 { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 300; color: var(--espresso); margin-bottom: 12px; }
.newsletter h2 em { font-style: italic; color: var(--gold); }
.newsletter p { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); margin-bottom: 36px; }
.newsletter-form { display: flex; max-width: 480px; margin: 0 auto; border: 1px solid var(--taupe); overflow: hidden; }
.newsletter-input { flex: 1; background: white; border: none; padding: 16px 22px; font-family: 'Jost', sans-serif; font-size: 13px; color: var(--espresso); outline: none; }
.newsletter-btn { background: var(--espresso); color: white; border: none; padding: 16px 26px; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background 0.3s; }
.newsletter-btn:hover { background: var(--deep); }

/* ─────────────────────────────────────────
   22. FOOTER
   ───────────────────────────────────────── */
.site-footer { background: var(--espresso); padding: 80px 60px 40px; }
.footer-inner { max-width: 1300px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; align-items: start; }
.footer-brand { display: flex; flex-direction: column; }
.footer-logo { display: block; margin-bottom: 0; line-height: 1; }
.footer-logo svg, .footer-brand svg, .footer-brand .custom-logo-link img { display: block; max-width: 170px; height: auto; }
.footer-tagline { font-family: 'Cormorant Garamond', serif; font-size: 14px; font-style: italic; color: var(--taupe); line-height: 1.75; margin: 18px 0 24px; max-width: 280px; }
.footer-social { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.social-link { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; display: flex !important; align-items: center; justify-content: center; color: rgba(255,255,255,0.5) !important; text-decoration: none; background: rgba(255,255,255,0.04); transition: border-color 0.25s, color 0.25s, background 0.25s; flex-shrink: 0; }
.social-link svg { width: 15px; height: 15px; display: block; flex-shrink: 0; }
.social-link:hover { border-color: var(--gold); color: var(--gold) !important; background: rgba(184,152,106,0.12); }
.footer-col {}
.footer-col-title { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--cream); margin-bottom: 22px; display: block; }
.footer-links, .footer-col ul, .footer-col .menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-links li, .footer-col ul li, .footer-col .menu li { margin: 0; padding: 0; }
.footer-links a, .footer-col ul a, .footer-col .menu a { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--taupe) !important; text-decoration: none; transition: color 0.2s; display: block; }
.footer-links a:hover, .footer-col ul a:hover, .footer-col .menu a:hover { color: var(--gold) !important; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-copy { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 300; color: rgba(155,139,126,0.5); letter-spacing: 1px; margin: 0; }
.footer-policy { display: flex; align-items: center; }
.footer-policy-links { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.footer-policy-links li { margin: 0; }
.footer-policy-links a, .footer-policy a { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 300; color: rgba(155,139,126,0.5) !important; text-decoration: none; letter-spacing: 0.5px; transition: color 0.2s; }
.footer-policy-links a:hover, .footer-policy a:hover { color: var(--gold) !important; }

/* ─────────────────────────────────────────
   23. MY ACCOUNT — Design Match v4
   ───────────────────────────────────────── */

/* Static page template classes (page-account.php) */
.account-layout { display: grid; grid-template-columns: 300px 1fr; min-height: 75vh; }
.account-sidebar {
  background: var(--cream); border-right: 1px solid var(--sand);
  padding: 52px 40px 80px;
}
.account-avatar {
  width: 76px; height: 76px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--espresso) 100%);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; box-shadow: 0 4px 20px rgba(184,152,106,0.22);
}
.account-avatar-initials { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: white; }
.account-name { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: var(--espresso); margin-bottom: 5px; }
.account-email { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink); margin-bottom: 0; }
.sidebar-divider { height: 1px; background: var(--sand); margin: 28px 0; }
.account-nav { list-style: none; display: flex; flex-direction: column; gap: 3px; padding: 0; margin: 0; }
.account-nav li a {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 300;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--mink); text-decoration: none;
  border: 1px solid transparent; border-left: 2px solid transparent;
  transition: all 0.2s;
}
.account-nav li a:hover { color: var(--espresso); background: white; border-color: var(--sand); border-left-color: var(--sand); }
.account-nav li a.active,
.account-nav li.is-active a {
  background: white; color: var(--espresso); font-weight: 400;
  border: 1px solid var(--sand); border-left: 2px solid var(--gold);
  padding-left: 14px; box-shadow: 0 2px 12px rgba(42,31,26,0.05);
}
.account-nav-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; flex-shrink: 0; }
.account-signout { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--sand); }
.account-signout a {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 300;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(155,139,126,0.5); text-decoration: none; transition: color 0.2s;
}
.account-signout a:hover { color: var(--mink); }
.account-main { padding: 56px 64px 100px; }
.account-section-h { font-family: 'Cormorant Garamond', serif; font-size: 46px; font-weight: 300; color: var(--espresso); line-height: 1; }
.account-section-h em { font-style: italic; color: var(--gold); }
.account-section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 36px; padding-bottom: 20px; border-bottom: 1px solid var(--sand);
}
.order-count-badge {
  font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--mink);
  background: var(--cream); padding: 8px 18px; border: 1px solid var(--sand);
}

/* Order cards (static page template) */
.order-card {
  border: 1px solid var(--sand); background: white; margin-bottom: 14px;
  display: grid; grid-template-columns: 1fr 200px; gap: 28px; align-items: start;
  padding: 30px 36px;
  transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}
.order-card:hover {
  box-shadow: 0 8px 32px rgba(42,31,26,0.07);
  transform: translateY(-2px); border-color: var(--taupe);
}
.order-card-right { text-align: right; }
.order-num { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.order-date { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); margin-bottom: 16px; }
.order-items { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 300; color: var(--espresso); line-height: 1.6; }
.order-status { display: inline-block; font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; padding: 5px 14px; margin-bottom: 12px; }
.order-status.delivered { background: rgba(138,158,140,0.14); color: var(--sage); }
.order-status.processing { background: rgba(184,152,106,0.12); color: var(--gold); }
.order-status.shipped { background: rgba(90,120,160,0.1); color: #5A78A0; }
.order-total { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 400; color: var(--espresso); margin-bottom: 10px; }
.order-link {
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.2s;
}
.order-link:hover { border-bottom-color: var(--gold); }

/* ─────────────────────────────────────────
   24. WOOCOMMERCE PAGINATION
   ───────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination { margin-top: 48px; }
.woocommerce nav.woocommerce-pagination ul { border: none; margin: 0 auto; display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; flex-wrap: wrap; }
.woocommerce nav.woocommerce-pagination ul li { border: none; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink) !important; padding: 10px 16px; border: 1px solid var(--sand); display: flex; align-items: center; justify-content: center; min-width: 42px; transition: all 0.2s; text-decoration: none; }
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--cream); color: var(--espresso) !important; border-color: var(--taupe); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--espresso); color: white !important; border-color: var(--espresso); font-weight: 400; }

/* ─────────────────────────────────────────
   25. RESPONSIVE — 1200px
   ───────────────────────────────────────── */
@media (max-width: 1200px) {
  .hero-title { font-size: 54px; }
  .section-title { font-size: 42px; }
  .cat-grid, .woocommerce ul.products.cat-grid { grid-template-columns: repeat(3,1fr) !important; }
  .product-related-wrap ul.products, .related.products ul.products { grid-template-columns: repeat(3,1fr) !important; }
  .blog-grid, .blog-preview-grid { grid-template-columns: repeat(2,1fr); }
  .wish-grid { grid-template-columns: repeat(3,1fr); }
  .cart-new-products-grid { grid-template-columns: repeat(2,1fr); }
}

/* ─────────────────────────────────────────
   26. RESPONSIVE — 1024px
   ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: 40px; }
  .footer-tagline { margin: 0; }
  .story-hero { padding: 80px 40px; gap: 50px; }
  .values-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ─────────────────────────────────────────
   27. RESPONSIVE — 992px (tablet)
   ───────────────────────────────────────── */
@media (max-width: 992px) {
  .main-navigation { padding: 15px 30px; }
  .main-navigation nav { display: none; }
  .mobile-menu-toggle { display: flex; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-right { display: none; }
  .hero-left { padding: 60px 40px; min-height: 70vh; }
  .hero-title { font-size: 44px; }
  .philosophy { grid-template-columns: 1fr; padding: 60px 40px; gap: 40px; }
  .philosophy-right { border-left: none; padding-left: 0; border-top: 1px solid var(--sand); padding-top: 40px; }
  .products-section { padding: 60px 40px; }
  .products-grid { grid-template-columns: repeat(2,1fr); }
  .product-card { grid-template-columns: 1fr; }
  .product-img { height: 260px; }
  .product-info { border-left: none; border-top: 1px solid var(--sand); padding: 24px 20px; justify-content: flex-start; }
  .cat-hero { flex-direction: column; align-items: flex-start; gap: 24px; padding: 50px 40px; }
  .cat-grid, .woocommerce ul.products.cat-grid { grid-template-columns: repeat(2,1fr) !important; }
  .basket-layout { grid-template-columns: 1fr; }
  .basket-summary { position: static; }
  .contact-hero, .contact-body { grid-template-columns: 1fr; }
  .story-hero { grid-template-columns: 1fr; padding: 70px 40px; gap: 40px; }
  .faq-body { grid-template-columns: 1fr; gap: 32px; }
  .faq-cats { flex-direction: row; flex-wrap: wrap; position: static; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-feat-img { height: 300px; }
  .product-page { grid-template-columns: 1fr; gap: 40px; }
  .product-gallery { position: static; }
  .product-related-wrap ul.products, .related.products ul.products { grid-template-columns: repeat(2,1fr) !important; }
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { border-right: none; border-bottom: 1px solid var(--sand); padding: 36px 30px 28px; }
  .account-section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .account-section-h { font-size: 36px; }
  .account-main { padding: 40px 30px 60px; }
  .order-card { grid-template-columns: 1fr auto; gap: 16px; }
  .order-card-right { text-align: right; min-width: 140px; }
  .wish-grid { grid-template-columns: repeat(2,1fr); }
  .cart-new-products-grid { grid-template-columns: repeat(2,1fr); }
  .newsletter { padding: 60px 40px; }
  .site-footer { padding: 60px 40px 40px; }
  .blog-grid, .blog-preview-grid { grid-template-columns: repeat(2,1fr); }
  .values-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   28. RESPONSIVE — 768px (mobile)
   ───────────────────────────────────────── */
@media (max-width: 768px) {
  .main-navigation { padding: 14px 20px; }
  .hero-left { padding: 40px 24px; }
  .hero-title { font-size: 36px; }
  .hero-desc { font-size: 12px; }
  .section-title { font-size: 34px; }

  /* Products */
  .products-section { padding: 50px 16px; }
  .products-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .product-card { grid-template-columns: 1fr; display: flex; flex-direction: column; }
  .product-img { height: 180px; }
  .product-info { border-left: none; border-top: 1px solid var(--sand); padding: 14px 14px 18px; justify-content: flex-start; }
  .product-name { font-size: 18px; }
  .product-price { font-size: 18px; margin-bottom: 10px; }
  .product-divider { display: none; }
  .product-spec { display: none; }
  .product-add { font-size: 9px; padding: 10px 14px; margin-top: 6px; }
  .product-swatch { width: 20px; height: 20px; margin-bottom: 12px; }
  .product-collection { font-size: 8px; margin-bottom: 8px; }

  /* Archive */
  .filter-bar { padding: 14px 16px; gap: 8px; }
  .cat-grid-wrap { padding: 20px 14px 60px; }
  .cat-grid, .woocommerce ul.products.cat-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  .cat-img { height: 175px; }
  .cat-body { padding: 12px 12px 16px; }
  .cat-name { font-size: 17px; }
  .cat-shade { font-size: 13px; }
  .cat-price { font-size: 17px; }
  .swatch-dot { width: 14px; height: 14px; }
  .cat-hero { padding: 40px 24px; }
  .cat-title { font-size: 44px; }

  /* Single product — base overrides (detailed rules in mobile patch below) */
  .single-product-wrap { padding: 0 0 60px; }
  .gallery-layout { flex-direction: column; gap: 0; }
  .gallery-thumbs { flex-direction: row; width: 100%; overflow-x: auto; gap: 8px; order: 2; padding: 12px 20px; box-sizing: border-box; }
  .gallery-thumb { width: 62px; flex-shrink: 0; }
  .gallery-thumb img { height: 74px !important; object-fit: cover !important; }
  .gallery-main-wrap { order: 1; width: 100%; }
  .product-title { font-size: 32px; }
  .product-summary { padding: 28px 20px 20px; box-sizing: border-box; }
  .product-related-wrap ul.products, .related.products ul.products { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }

  /* Cart */
  .basket-main { padding: 32px 20px 40px; }
  .basket-summary { padding: 28px 20px; }
  .basket-item { grid-template-columns: 90px 1fr; gap: 18px; }
  .basket-item-price { grid-column: 1/-1; padding-top: 0; text-align: left; font-size: 22px; }
  .basket-img { width: 90px; height: 90px; }
  .basket-page-title { font-size: 36px; }
  .basket-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cart-new-products { padding: 40px 16px 50px; }
  .cart-new-products-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .cart-new-products .cnp-heading { font-size: 26px; }

  /* Contact */
  .contact-hero { padding: 50px 24px; gap: 40px; grid-template-columns: 1fr; }
  .contact-body { padding: 50px 24px; gap: 40px; grid-template-columns: 1fr; }
  .contact-title { font-size: 40px; }

  /* Wishlist */
  .wish-hero { padding: 40px 24px 30px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .wish-subtitle { text-align: left; }
  .wish-grid-wrap { padding: 32px 16px 60px; }
  .wish-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .wish-title { font-size: 40px; }

  /* FAQ */
  .faq-hero { padding: 60px 24px; }
  .faq-hero-title { font-size: 44px; }
  .faq-body { padding: 40px 24px; }

  /* Story */
  .story-hero { grid-template-columns: 1fr; padding: 60px 24px; gap: 40px; }
  .story-title { font-size: 40px !important; }
  .story-quote { font-size: 32px; }
  .story-body { padding: 56px 24px; }
  .story-values { padding: 56px 24px; }
  .values-grid { grid-template-columns: 1fr; }
  .story-quote-block { border-left: none; border-top: 1px solid var(--gold); padding-left: 0; padding-top: 28px; }
  .story-founders-section { padding: 60px 24px; }

  /* Styling */
  .styling-section { padding: 60px 24px; }
  .styling-grid { grid-template-columns: 1fr; }

  /* Blog */
  .blog-hero { padding: 50px 24px 0; }
  .blog-hero-top { flex-direction: column; gap: 20px; }
  .blog-grid-section { padding: 40px 24px 60px; }
  .blog-grid, .blog-preview-grid { grid-template-columns: 1fr; }
  .blog-preview-section { padding: 50px 16px; }

  /* Newsletter */
  .newsletter { padding: 50px 24px; }

  /* Footer */
  .site-footer { padding: 50px 24px 30px; }
  .footer-top { grid-template-columns: 1fr; text-align: left; gap: 32px; }
  .footer-brand { flex-direction: column !important; gap: 0; grid-column: auto; }
  .footer-tagline { margin: 18px 0 20px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .footer-policy-links { justify-content: center; flex-wrap: wrap; }

  /* Account */
  .account-sidebar { padding: 28px 20px 22px; }
  .account-main { padding: 28px 20px 50px; }
  .account-section-h { font-size: 28px; }
  .order-card { grid-template-columns: 1fr; gap: 12px; padding: 20px 18px; }
  .order-card-right { text-align: left; }
  .order-total { font-size: 24px; }

  /* 404 */
  .notfound { padding: 80px 24px; }
  .nf-title { font-size: 48px; }
  .nf-btns { flex-direction: column; align-items: center; }

  /* Philosophy */
  .philosophy { grid-template-columns: 1fr; padding: 50px 24px; gap: 40px; }
  .philosophy-right { border-left: none; padding-left: 0; border-top: 1px solid var(--sand); padding-top: 40px; }

  /* Woo pagination */
  .woocommerce nav.woocommerce-pagination ul li a,
  .woocommerce nav.woocommerce-pagination ul li span { padding: 8px 12px; min-width: 36px; }
}

/* ─────────────────────────────────────────
   29. RESPONSIVE — 480px
   ───────────────────────────────────────── */
@media (max-width: 480px) {
  .cat-grid, .woocommerce ul.products.cat-grid { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
  .cat-img { height: 155px; }
  .cat-body { padding: 10px 10px 12px; }
  .cat-name { font-size: 15px; }
  .cat-price { font-size: 15px; }
  .products-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .product-img { height: 155px; }
  .wish-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .cart-new-products-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .product-related-wrap ul.products, .related.products ul.products { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
  .section-title { font-size: 30px; }
  .hero-title { font-size: 30px; }
}


/* ══════════════════════════════════════════════════════════════════
   JOURNAL + STYLING GUIDE — Featured post wrapper & card grid
   ══════════════════════════════════════════════════════════════════ */

/* Blog hero section */
.blog-hero {
    background: var(--cream, #F8F4EE) !important;
    padding: 80px 60px 0 !important;
}
.blog-hero-inner { max-width: 1300px; margin: 0 auto; }
.blog-hero-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    padding-bottom: 50px !important;
    border-bottom: 1px solid var(--sand, #E8DDD0) !important;
}
.blog-hero-left h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 60px !important;
    font-weight: 300 !important;
    color: var(--espresso, #2A1F1A) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}
.blog-hero-left h1 em { font-style: italic !important; color: var(--gold, #B8986A) !important; }
.blog-hero-left .overline { margin-bottom: 14px !important; }
.blog-hero-right {
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    color: var(--mink, #9B8B7E) !important;
    line-height: 1.9 !important;
    max-width: 360px !important;
    text-align: right !important;
}

/* Journal category filter buttons */
.blog-cats {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 28px 0 !important;
    border-bottom: 1px solid var(--sand, #E8DDD0) !important;
    margin-bottom: 0 !important;
}
.blog-cat-btn {
    font-family: 'Jost', sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: var(--mink, #9B8B7E) !important;
    background: transparent !important;
    border: 1px solid var(--sand, #E8DDD0) !important;
    padding: 9px 20px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s !important;
    line-height: 1 !important;
}
.blog-cat-btn:hover {
    background: var(--espresso, #2A1F1A) !important;
    color: white !important;
    border-color: var(--espresso, #2A1F1A) !important;
}
.blog-cat-btn.active {
    background: var(--espresso, #2A1F1A) !important;
    color: white !important;
    border-color: var(--espresso, #2A1F1A) !important;
}

/* Blog featured wrapper — provides cream background + padding */
.blog-featured-wrap {
    background: var(--cream, #F8F4EE) !important;
    padding: 50px 60px 0 !important;
}
.blog-featured-wrap .blog-featured {
    max-width: 1300px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    background: white !important;
    overflow: hidden !important;
    box-shadow: 0 8px 40px rgba(42,31,26,0.06) !important;
}

/* Featured image */
.blog-feat-img {
    height: 520px !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
}
.blog-feat-img img,
.blog-feat-img-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}
.blog-feat-img-inner {
    width: 100% !important;
    height: 100% !important;
}
.blog-feat-tag {
    position: absolute !important;
    top: 24px !important;
    left: 24px !important;
    background: var(--gold, #B8986A) !important;
    color: white !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 9px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    z-index: 2 !important;
}
.blog-feat-content {
    padding: 60px 50px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.blog-feat-cat {
    font-family: 'Jost', sans-serif !important;
    font-size: 9px !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    color: var(--gold, #B8986A) !important;
    margin-bottom: 18px !important;
    display: block !important;
}
.blog-feat-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    color: var(--espresso, #2A1F1A) !important;
    line-height: 1.2 !important;
    margin-bottom: 18px !important;
}
.blog-feat-excerpt {
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    color: var(--mink, #9B8B7E) !important;
    line-height: 1.9 !important;
    margin-bottom: 30px !important;
}
.blog-feat-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 32px !important;
}
.blog-feat-meta-dot {
    display: inline-block !important;
    width: 3px !important;
    height: 3px !important;
    background: var(--taupe, #C4B5A5) !important;
    border-radius: 50% !important;
}
.blog-feat-author, .blog-feat-date {
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: var(--mink, #9B8B7E) !important;
}
.blog-feat-read {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: var(--espresso, #2A1F1A) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-bottom: 1px solid var(--espresso, #2A1F1A) !important;
    padding-bottom: 2px !important;
    align-self: flex-start !important;
    transition: color 0.2s, border-color 0.2s !important;
}
.blog-feat-read::after { content: '→' !important; }
.blog-feat-read:hover {
    color: var(--gold, #B8986A) !important;
    border-color: var(--gold, #B8986A) !important;
}

/* Blog grid section */
.blog-grid-section {
    background: var(--cream, #F8F4EE) !important;
    padding: 60px 60px 100px !important;
}
.blog-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
}

/* Blog cards in grid */
.blog-card {
    background: white !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.blog-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(42,31,26,0.1) !important;
}
.blog-card > a { display: block !important; text-decoration: none !important; color: inherit !important; }
.blog-card-img {
    height: 220px !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    background: var(--sand, #E8DDD0) !important;
}
.blog-card-img-inner {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    transition: transform 0.5s ease !important;
}
.blog-card-img-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.blog-card:hover .blog-card-img-inner { transform: scale(1.05) !important; }
.blog-card-cat {
    position: absolute !important;
    bottom: 16px !important;
    left: 16px !important;
    background: white !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 9px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: var(--espresso, #2A1F1A) !important;
    padding: 5px 12px !important;
    z-index: 2 !important;
}
.blog-card-body { padding: 28px 28px 32px !important; }
.blog-card-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: var(--espresso, #2A1F1A) !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
}
.blog-card-excerpt {
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: var(--mink, #9B8B7E) !important;
    line-height: 1.8 !important;
    margin-bottom: 20px !important;
}
.blog-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1px solid var(--sand, #E8DDD0) !important;
    padding-top: 16px !important;
}
.blog-card-date {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    color: var(--taupe, #C4B5A5) !important;
}
.blog-card-link {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--gold, #B8986A) !important;
    text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   JOURNAL PAGE — "Hello World" and any posts with no thumbnail
   ══════════════════════════════════════════════════════════════════ */
.blog-card-img-inner > div[style*="background"] {
    width: 100% !important;
    height: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════
   STYLING GUIDE PAGE — sg-* dark espresso layout
   (old blog-hero override removed; page now uses sg-page / sg-cards)
   ══════════════════════════════════════════════════════════════════ */

/* Ensure the dark bg fills the full content area on the styling page */
.page-template-page-styling #content,
.page-template-page-styling .site-content,
.post-type-archive-styling_guide #content,
.post-type-archive-styling_guide .site-content {
    background: #2A1F1A !important;
}

/* ══════════════════════════════════════════════════════════════════
   MY ACCOUNT — Beautiful two-column login layout via page wrapper
   ══════════════════════════════════════════════════════════════════ */

/* Account login page — cream panel background before the form */
.woocommerce-account:not(.logged-in) .site-content,
.woocommerce-account:not(.logged-in) #primary,
.woocommerce-account:not(.logged-in) .site-main {
    background: var(--warm-white, #FDFAF6) !important;
}

/* Login page: hide "My account" page title with max specificity */
.woocommerce-account h1,
.woocommerce-account h2.woocommerce-loop-product__title,
body.woocommerce-account .entry-header,
body.woocommerce-account .entry-header h1,
body.woocommerce-account .site-main h1:first-child,
body.woocommerce-account .obh-account-wrap h1 { display: none !important; }

/* Ensure logged-in account layout has correct grid */
.woocommerce-account.logged-in .woocommerce {
    display: flex !important;
    align-items: stretch !important;
    min-height: 75vh !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
}

/* WooCommerce login — side-by-side form panels */
.woocommerce-account:not(.logged-in) .woocommerce .col2-set {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    float: none !important;
    clear: both !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}
.woocommerce-account:not(.logged-in) .woocommerce .col2-set::after { display: none !important; }
.woocommerce-account:not(.logged-in) .woocommerce .col2-set .col-1,
.woocommerce-account:not(.logged-in) .woocommerce .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
    padding: 80px 70px !important;
    background: var(--warm-white, #FDFAF6) !important;
    box-sizing: border-box !important;
}
.woocommerce-account:not(.logged-in) .woocommerce .col2-set .col-1 {
    background: var(--espresso, #2A1F1A) !important;
    position: relative !important;
    overflow: hidden !important;
}
.woocommerce-account:not(.logged-in) .woocommerce .col2-set .col-1 h2 {
    color: var(--cream, #F8F4EE) !important;
}
.woocommerce-account:not(.logged-in) .woocommerce .col2-set .col-1 label {
    color: var(--taupe, #C4B5A5) !important;
}
.woocommerce-account:not(.logged-in) .woocommerce .col2-set .col-1 input[type="text"],
.woocommerce-account:not(.logged-in) .woocommerce .col2-set .col-1 input[type="email"],
.woocommerce-account:not(.logged-in) .woocommerce .col2-set .col-1 input[type="password"] {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: white !important;
}
.woocommerce-account:not(.logged-in) .woocommerce .col2-set .col-1 input::placeholder {
    color: rgba(255,255,255,0.3) !important;
}

/* Single login form (no register) — right half layout */
.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login {
    max-width: 50% !important;
    margin-left: 50% !important;
    padding: 80px 70px !important;
    background: var(--warm-white, #FDFAF6) !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* Left decorative panel for single-form login pages */
.woocommerce-account:not(.logged-in) .site-main::after {
    content: '' !important;
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 50% !important;
    bottom: 0 !important;
    background: var(--espresso, #2A1F1A) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES — Journal, Styling, Account
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .blog-featured-wrap .blog-featured { grid-template-columns: 1fr !important; }
    .blog-feat-img { height: 320px !important; }
    .woocommerce-account:not(.logged-in) .woocommerce .col2-set { grid-template-columns: 1fr !important; }
    .woocommerce-account:not(.logged-in) .woocommerce .col2-set .col-1 { display: none !important; }
    .woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login { max-width: 100% !important; margin-left: 0 !important; }
    .woocommerce-account:not(.logged-in) .site-main::after { display: none !important; }
}
@media (max-width: 768px) {
    .blog-hero { padding: 50px 24px 0 !important; }
    .blog-hero-top { flex-direction: column !important; gap: 24px !important; }
    .blog-hero-right { text-align: left !important; max-width: 100% !important; }
    .blog-hero-left h1 { font-size: 40px !important; }
    .blog-featured-wrap { padding: 30px 24px 0 !important; }
    .blog-grid-section { padding: 40px 24px 60px !important; }
    .blog-grid { grid-template-columns: 1fr !important; }
    .blog-cats { padding: 20px 0 !important; }
    .cat-img { height: 220px !important; }
    .cat-grid,
    .woocommerce ul.products,
    .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; }
    .woocommerce-account:not(.logged-in) .woocommerce .col2-set .col-1,
    .woocommerce-account:not(.logged-in) .woocommerce .col2-set .col-2 { padding: 50px 30px !important; }
}


/* ══════════════════════════════════════════════════════════════════
   MY ACCOUNT LOGIN — obh-login-wrap branded split layout
   ══════════════════════════════════════════════════════════════════ */

.obh-login-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 68px);
}

/* ── LEFT DARK PANEL ── */
.obh-login-left {
    background: var(--espresso, #2A1F1A);
    padding: 70px 70px 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

/* Decorative rings */
.obh-login-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(184,152,106,0.12);
    pointer-events: none;
}
.obh-login-ring-1 {
    width: 420px; height: 420px;
    top: -160px; right: -140px;
}
.obh-login-ring-2 {
    width: 260px; height: 260px;
    bottom: -80px; left: -80px;
    border-color: rgba(184,152,106,0.07);
}

.obh-login-logo { display: block; margin-bottom: 0; position: relative; z-index: 2; }

.obh-login-brand-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0 40px;
    position: relative;
    z-index: 2;
}
.obh-login-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gold, #B8986A);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.obh-login-eyebrow::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--gold, #B8986A);
    flex-shrink: 0;
}
.obh-login-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size: 58px;
    font-weight: 300;
    color: var(--cream, #F8F4EE);
    line-height: 1.08;
    letter-spacing: -1px;
    margin: 0 0 22px;
}
.obh-login-headline em {
    font-style: italic;
    color: var(--gold-light, #D4B896);
}
.obh-login-sub {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--taupe, #C4B5A5);
    line-height: 1.9;
    max-width: 340px;
    margin-bottom: 50px;
}

/* Arabic quote block */
.obh-login-arabic-block {
    border-left: 2px solid rgba(184,152,106,0.3);
    padding-left: 24px;
    margin-top: 10px;
}
.obh-login-arabic {
    font-size: 26px;
    font-family: serif;
    color: rgba(184,152,106,0.55);
    text-align: right;
    direction: rtl;
    margin-bottom: 10px;
    line-height: 1.6;
}
.obh-login-arabic-trans {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    font-style: italic;
    color: rgba(196,181,165,0.6);
    line-height: 1.7;
}

.obh-login-back-link {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(155,139,126,0.55);
    text-decoration: none;
    transition: color 0.2s;
    position: relative;
    z-index: 2;
}
.obh-login-back-link:hover { color: var(--gold, #B8986A); }

/* ── RIGHT FORM PANEL ── */
.obh-login-right {
    background: var(--warm-white, #FDFAF6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 70px;
}
.obh-login-form-wrap {
    width: 100%;
    max-width: 420px;
}

/* Style WC form inside the right panel */
.obh-login-form-wrap .woocommerce { display: block !important; float: none !important; }
.obh-login-form-wrap .col2-set { display: block !important; }
.obh-login-form-wrap .col2-set .col-1,
.obh-login-form-wrap .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
    padding: 0 0 40px !important;
    background: transparent !important;
}
.obh-login-form-wrap h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 38px !important;
    font-weight: 300 !important;
    color: var(--espresso, #2A1F1A) !important;
    margin-bottom: 32px !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}
.obh-login-form-wrap label {
    font-family: 'Jost', sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: var(--espresso, #2A1F1A) !important;
    display: block !important;
    margin-bottom: 8px !important;
}
.obh-login-form-wrap input[type="text"],
.obh-login-form-wrap input[type="email"],
.obh-login-form-wrap input[type="password"] {
    width: 100% !important;
    border: 1px solid var(--sand, #E8DDD0) !important;
    background: white !important;
    padding: 15px 18px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    color: var(--espresso, #2A1F1A) !important;
    outline: none !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    transition: border-color 0.2s !important;
    box-shadow: none !important;
    display: block !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
}
.obh-login-form-wrap input[type="text"]:focus,
.obh-login-form-wrap input[type="email"]:focus,
.obh-login-form-wrap input[type="password"]:focus {
    border-color: var(--gold, #B8986A) !important;
    box-shadow: none !important;
    outline: none !important;
}
.obh-login-form-wrap input[type="submit"],
.obh-login-form-wrap button[type="submit"],
.obh-login-form-wrap .woocommerce-Button {
    width: 100% !important;
    background: var(--espresso, #2A1F1A) !important;
    color: white !important;
    border: none !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 3.5px !important;
    text-transform: uppercase !important;
    padding: 18px !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 6px !important;
    -webkit-appearance: none !important;
    display: block !important;
}
.obh-login-form-wrap input[type="submit"]:hover,
.obh-login-form-wrap button[type="submit"]:hover,
.obh-login-form-wrap .woocommerce-Button:hover {
    background: var(--gold, #B8986A) !important;
}
.obh-login-form-wrap .lost_password,
.obh-login-form-wrap .woocommerce-LostPassword {
    margin-top: 16px !important;
    text-align: right !important;
}
.obh-login-form-wrap .lost_password a,
.obh-login-form-wrap .woocommerce-LostPassword a {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    color: var(--gold, #B8986A) !important;
    text-decoration: none !important;
    letter-spacing: 1px !important;
    transition: opacity 0.2s !important;
}
.obh-login-form-wrap .lost_password a:hover { opacity: 0.7 !important; }
.obh-login-form-wrap .woocommerce-form__label-for-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--mink, #9B8B7E) !important;
    cursor: pointer !important;
}
.obh-login-form-wrap .woocommerce-privacy-policy-text {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: var(--mink, #9B8B7E) !important;
    line-height: 1.8 !important;
    margin-top: 14px !important;
}
.obh-login-form-wrap .woocommerce-privacy-policy-text a { color: var(--gold, #B8986A) !important; }

/* Hide WC "My Account" page title — all possible selectors */
.obh-account-main h1.entry-title,
.obh-account-main .entry-header,
.obh-login-form-wrap .woocommerce-notices-wrapper:empty,
body.woocommerce-account .entry-title,
body.woocommerce-account h1.page-title { display: none !important; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .obh-login-wrap { grid-template-columns: 1fr !important; }
    .obh-login-left { display: none !important; }
    .obh-login-right { padding: 60px 32px !important; min-height: calc(100vh - 68px) !important; }
}
@media (max-width: 480px) {
    .obh-login-right { padding: 40px 20px !important; }
    .obh-login-form-wrap { max-width: 100% !important; }
}


/* ─────────────────────────────────────────
   ACCOUNT PAGE — Supplementary (added)
   ───────────────────────────────────────── */
.obh-breadcrumb {
  background: var(--cream);
  padding: 14px 60px;
  border-bottom: 1px solid var(--sand);
  display: flex; align-items: center; gap: 8px;
}
.obh-breadcrumb a,
.obh-breadcrumb span {
  font-family: 'Jost', sans-serif;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--mink); text-decoration: none; transition: color 0.2s;
}
.obh-breadcrumb a:hover { color: var(--gold); }
.obh-bc-sep { color: var(--taupe); }
.obh-breadcrumb span:last-child { color: var(--espresso); }

.obh-account-wrap {
  display: grid; grid-template-columns: 300px 1fr;
  min-height: 75vh; max-width: 1400px; margin: 0 auto;
}
.obh-panel { display: none; }
.obh-panel--active { display: block; }

.obh-empty-state {
  text-align: center; padding: 80px 40px;
  border: 1px solid var(--sand); background: white;
}
.obh-empty-icon { width: 48px; height: 48px; stroke: var(--taupe); fill: none; stroke-width: 1; margin: 0 auto 20px; display: block; }
.obh-empty-title { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 300; color: var(--espresso); margin-bottom: 10px; }
.obh-empty-sub { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); margin-bottom: 30px; }

/* WC order status pills */
.order-status.completed,
.order-status.delivered  { background: rgba(138,158,140,0.14); color: var(--sage); }
.order-status.processing,
.order-status.on-hold    { background: rgba(184,152,106,0.12); color: var(--gold); }
.order-status.shipped    { background: rgba(90,120,160,0.10);  color: #5A78A0; }
.order-status.cancelled,
.order-status.failed     { background: rgba(192,104,90,0.10);  color: #C0685A; }
.order-status.pending,
.order-status.refunded   { background: rgba(155,139,126,0.12); color: var(--mink); }

@media (max-width: 992px) {
  .obh-account-wrap { grid-template-columns: 1fr; }
  .obh-breadcrumb { padding: 12px 24px; }
}
@media (max-width: 768px) {
  .obh-breadcrumb { padding: 10px 20px; }
}


/* ================================================================
   MOBILE RESPONSIVE OVERHAUL — SINGLE PRODUCT + GLOBAL
   Full fix: no edge-touching, proper padding, image sizing,
   section alignment — all breakpoints (1024 → 768 → 480 → 375px)
   ================================================================ */

/* ─────────────────────────────────────────
   SINGLE PRODUCT — BASE FIXES (all screen sizes)
   ───────────────────────────────────────── */

/* Prevent gallery image touching sides on all devices */
.single-product-wrap {
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Gallery main image — always contained */
.gallery-main-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-width: 100%;
}

/* Gallery wrap never overflows */
.gallery-main-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* Arrows always visible on touch */
@media (hover: none) {
  .gallery-arrow { opacity: 1 !important; pointer-events: auto !important; }
}

/* ─────────────────────────────────────────
   SINGLE PRODUCT — 1024px (large tablet)
   ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .single-product-wrap { padding: 40px 40px 80px; }
  .product-page { gap: 50px; }
  .product-gallery { position: static; top: auto; }
  .product-title { font-size: 40px; }
  .product-price-display { font-size: 30px; }
}

/* ─────────────────────────────────────────
   SINGLE PRODUCT — 768px (tablet/mobile)
   ───────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Wrapper ── */
  .single-product-wrap {
    padding: 0 0 60px !important;
    max-width: 100%;
  }

  /* ── Breadcrumb inside wrapper gets its own padding ── */
  .single-product-wrap .woocommerce-breadcrumb {
    padding: 16px 20px;
    margin: 0 !important;
    font-size: 11px;
  }

  /* ── Product page: stack columns ── */
  .product-page {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
    align-items: stretch !important;
  }

  /* ── GALLERY — full bleed on mobile ── */
  .product-gallery {
    width: 100% !important;
    position: static !important;
    top: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .gallery-layout {
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* Main image — full bleed, no side gap */
  .gallery-main-wrap {
    order: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  .gallery-main-image {
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .gallery-main-img {
    width: 100% !important;
    height: auto !important;
    min-height: 320px !important;
    object-fit: cover !important;
    display: block !important;
    aspect-ratio: 3 / 4 !important;
  }

  /* Thumbnails — horizontal strip below image, with side padding */
  .gallery-thumbs {
    order: 2 !important;
    flex-direction: row !important;
    width: 100% !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .gallery-thumbs::-webkit-scrollbar { display: none; }

  .gallery-thumb {
    width: 62px !important;
    height: 74px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }
  .gallery-thumb img {
    width: 62px !important;
    height: 74px !important;
    object-fit: cover !important;
  }

  /* Arrows — always visible on mobile */
  .gallery-arrow {
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 36px !important;
    height: 36px !important;
  }
  .gallery-prev { left: 10px !important; }
  .gallery-next { right: 10px !important; }

  .gallery-dots { display: flex !important; }
  .gallery-dot { width: 5px !important; height: 5px !important; }

  /* Gallery placeholder height on mobile */
  .gallery-placeholder { height: 360px !important; min-height: 280px !important; }

  /* ── PRODUCT SUMMARY — padded, not edge-touching ── */
  .product-summary {
    width: 100% !important;
    padding: 28px 20px 20px !important;
    box-sizing: border-box !important;
  }

  .product-collection { font-size: 9px !important; margin-bottom: 10px !important; }

  .product-title {
    font-size: 32px !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
  }

  .product-shade { font-size: 15px !important; margin-bottom: 16px !important; }

  .product-rating-row { margin-bottom: 16px !important; gap: 8px !important; }

  .product-price-display {
    font-size: 28px !important;
    margin-bottom: 16px !important;
  }

  .product-shade-chip {
    padding: 12px 0 !important;
    margin-bottom: 20px !important;
    gap: 10px !important;
  }

  .product-short-desc {
    font-size: 13px !important;
    line-height: 1.8 !important;
    margin-bottom: 20px !important;
  }

  /* ── ATC button — full width, not touching edges ── */
  .product-atc-wrap {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .product-atc-wrap .cart {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .product-atc-wrap .quantity {
    flex-shrink: 0 !important;
    min-width: 80px !important;
  }

  .product-atc-wrap .quantity input {
    width: 80px !important;
    height: 48px !important;
    font-size: 15px !important;
    text-align: center !important;
  }

  .product-atc-wrap .single_add_to_cart_button {
    flex: 1 !important;
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
    white-space: nowrap !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  /* Wishlist button */
  .btn-add-wishlist,
  .single-wishlist-wrap .yith-wcwl-add-to-wishlist a,
  .single-wishlist-wrap .yith-wcwl-add-button a,
  .single-wishlist-wrap .add_to_wishlist {
    margin-top: 10px !important;
    padding: 13px 16px !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 46px !important;
  }

  /* Meta list */
  .product-meta-list {
    margin: 20px 0 !important;
  }
  .product-meta-list li {
    font-size: 12px !important;
    padding: 8px 0 !important;
    gap: 8px !important;
  }

  /* ── PRODUCT TABS — padded ── */
  .product-tabs-wrap {
    padding: 40px 20px 0 !important;
    margin-top: 0 !important;
    border-top: 1px solid var(--sand) !important;
    box-sizing: border-box !important;
  }

  /* WooCommerce tabs */
  .woocommerce-tabs .wc-tabs { padding: 0 !important; display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--sand) !important; }
  .woocommerce-tabs .wc-tabs li a {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    padding: 12px 14px !important;
    white-space: nowrap !important;
  }
  .woocommerce-tabs .panel { padding: 24px 0 !important; }
  .woocommerce-tabs #reviews { padding: 20px 0 !important; }

  /* ── RELATED PRODUCTS ── */
  .product-related-wrap {
    padding: 40px 20px !important;
    border-top: 1px solid var(--sand) !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
  }
  .product-related-wrap h2,
  .related.products h2 {
    font-size: 28px !important;
    margin-bottom: 20px !important;
  }
  .product-related-wrap ul.products,
  .related.products ul.products,
  .woocommerce .related ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ── WooCommerce product meta (SKU, category) ── */
  .product_meta {
    font-size: 11px !important;
    margin-top: 16px !important;
  }

  /* ── Reviews ── */
  .woocommerce-Reviews .comment-form { padding: 0 !important; }
  #review_form_wrapper { max-width: 100% !important; }
  .comment-form-rating { margin-bottom: 16px; }
  .comment-form input[type="text"],
  .comment-form input[type="email"],
  .comment-form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
  }
}

/* ─────────────────────────────────────────
   SINGLE PRODUCT — 480px (small mobile)
   ───────────────────────────────────────── */
@media (max-width: 480px) {

  .single-product-wrap { padding: 0 0 50px !important; }

  .gallery-main-img {
    min-height: 280px !important;
    aspect-ratio: 4 / 5 !important;
  }

  .gallery-thumbs { padding: 10px 16px !important; }
  .gallery-thumb { width: 54px !important; height: 64px !important; }
  .gallery-thumb img { width: 54px !important; height: 64px !important; }

  .product-summary { padding: 24px 16px 16px !important; }

  .product-title { font-size: 28px !important; }
  .product-price-display { font-size: 26px !important; }

  .product-atc-wrap .quantity { min-width: 72px !important; }
  .product-atc-wrap .quantity input { width: 72px !important; height: 44px !important; }
  .product-atc-wrap .single_add_to_cart_button {
    padding: 12px 12px !important;
    font-size: 9px !important;
    letter-spacing: 2px !important;
    min-height: 44px !important;
  }

  .product-tabs-wrap { padding: 32px 16px 0 !important; }
  .product-related-wrap { padding: 32px 16px !important; }
  .product-related-wrap h2, .related.products h2 { font-size: 24px !important; }
  .product-related-wrap ul.products,
  .related.products ul.products { gap: 8px !important; }
}

/* ─────────────────────────────────────────
   SINGLE PRODUCT — 375px (iPhone SE)
   ───────────────────────────────────────── */
@media (max-width: 375px) {
  .product-title { font-size: 26px !important; }
  .product-price-display { font-size: 24px !important; }
  .product-summary { padding: 20px 14px 14px !important; }
  .product-tabs-wrap { padding: 28px 14px 0 !important; }
  .product-related-wrap { padding: 28px 14px !important; }
  .gallery-thumbs { padding: 8px 14px !important; }
  .gallery-thumb { width: 48px !important; height: 58px !important; }
  .gallery-thumb img { width: 48px !important; height: 58px !important; }
}

/* ─────────────────────────────────────────
   GLOBAL MOBILE FIXES — all sections
   ───────────────────────────────────────── */

/* Prevent any section from bleeding to edges */
@media (max-width: 768px) {

  /* Global overflow prevention */
  body, html { overflow-x: hidden !important; }
  * { max-width: 100%; box-sizing: border-box; }
  img { max-width: 100% !important; height: auto; }

  /* Archive product cards — cards touch bottom of image neatly */
  .cat-card { overflow: hidden !important; }
  .cat-img img,
  .woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
  .woocommerce ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Ensure woocommerce thumbnails have correct aspect ratio on mobile */
  .cat-img { aspect-ratio: 4/5 !important; overflow: hidden !important; }
  .cat-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

  /* Hero section — image not cut off */
  .hero { min-height: auto !important; }
  .hero-left {
    padding: 50px 20px 50px !important;
    min-height: 60vh !important;
    box-sizing: border-box !important;
  }

  /* Newsletter — content not edge-touching */
  .newsletter { padding: 50px 20px !important; box-sizing: border-box !important; }
  .newsletter-form { flex-direction: column !important; gap: 10px !important; }
  .newsletter-form input,
  .newsletter-form button {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Philosophy section */
  .philosophy { padding: 50px 20px !important; box-sizing: border-box !important; }

  /* Marquee — not clipping text */
  .marquee-track { white-space: nowrap; }

  /* Footer — column layout, centred */
  .footer-nav-links { flex-direction: column !important; gap: 8px !important; }

  /* Cart / Basket items not touching edges */
  .basket-img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
  }

  /* WooCommerce form fields */
  .woocommerce-checkout .form-row,
  .woocommerce-account .form-row { width: 100% !important; float: none !important; clear: both !important; }
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
  }

  /* Quantity inputs global */
  input[type="number"].qty {
    width: 60px !important;
    text-align: center !important;
  }

  /* WC notices */
  .woocommerce-notices-wrapper,
  .woocommerce-message,
  .woocommerce-error,
  .woocommerce-info {
    margin: 0 20px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
  }

  /* Product archive filter bar */
  .filter-bar { overflow-x: auto !important; flex-wrap: nowrap !important; }
  .filter-btn { flex-shrink: 0 !important; white-space: nowrap !important; }

  /* Back to top / breadcrumb inside pages */
  .woocommerce-breadcrumb {
    padding: 14px 20px !important;
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Small mobile — extra global tightening */
@media (max-width: 480px) {
  .hero-left { padding: 40px 16px 40px !important; }
  .newsletter { padding: 40px 16px !important; }
  .philosophy { padding: 40px 16px !important; }

  /* Related + archive images — consistent aspect ratio */
  .woocommerce ul.products li.product img,
  .cat-img img {
    aspect-ratio: 4/5 !important;
    object-fit: cover !important;
  }

  /* Reduce heading sizes further */
  .product-title { font-size: 26px !important; }
  .section-title { font-size: 26px !important; }

  /* WC tabs — scrollable on smallest screens */
  .woocommerce-tabs .wc-tabs {
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  .woocommerce-tabs .wc-tabs::-webkit-scrollbar { display: none; }
  .woocommerce-tabs .wc-tabs li { flex-shrink: 0 !important; }
}

/* ─────────────────────────────────────────
   TOUCH DEVICE — HOVER STATES → TAP STATES
   ───────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Gallery arrows always visible on touch */
  .gallery-arrow { opacity: 1 !important; pointer-events: auto !important; }
  /* Product card quick-add hover → visible by default */
  .cat-quick-add,
  .product-quick-add { opacity: 1 !important; }
}