/*
 * Bushcraft Preacher — theme.css
 * All visual styles for the theme.
 */

/* ═══════════════════════════════════════════════════════════
   1. GOOGLE FONTS + RESET
══════════════════════════════════════════════════════════════ */

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

:root {
  /* Colors — overridden by PHP via wp_add_inline_style */
  --color-background:           #F5F0E9;
  --color-foreground:           #221D17;
  --color-primary:              #405133;
  --color-primary-foreground:   #F8F1E4;
  --color-secondary:            #E5DDD1;
  --color-secondary-foreground: #332921;
  --color-muted:                #D6CEBD;
  --color-muted-foreground:     #685F54;
  --color-accent:               #BA6E28;
  --color-accent-foreground:    #F8F1E4;
  --color-card:                 #EBE4D9;
  --color-border:               #C8BBB0;
  --color-button-text:          #F8F1E4;
  --color-destructive:          #B91C1C;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Spacing */
  --container-max: 80rem;
  --container-px:  1.5rem;
  --header-height: 80px;

  /* Shadows */
  --shadow-soft:     0 4px 20px -4px rgba(34, 29, 23, 0.10);
  --shadow-elevated: 0 8px 40px -8px rgba(34, 29, 23, 0.18);

  /* Transitions */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Logo */
  --logo-height: 56px;

  /* Buttons */
  --btn-radius:          0.375rem;
  --btn-height:          44px;
  --btn-padding:         0.75rem 1.5rem;
  --btn-font-size:       0.875rem;
  --btn-font-weight:     500;
  --btn-letter-spacing:  0.025em;
  --btn-text-transform:  none;
  --btn-icon-padding:    0.625rem;

  /* Card */
  --card-radius:    1rem;
  --section-padding: 2rem;
}

/* ─── Custom arrow cursor ─────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M3 2 L3 19 L7.5 15 L10 21 L13 20 L10.5 14 L17 14 Z' fill='%23BA6E28' stroke='%23405133' stroke-width='1.2' stroke-linejoin='round'/></svg>") 3 2, auto;
  }
  a, button, [role='button'], summary, label, select, [onclick], .cursor-pointer {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M3 2 L3 19 L7.5 15 L10 21 L13 20 L10.5 14 L17 14 Z' fill='%23F5DEB3' stroke='%23405133' stroke-width='1.4' stroke-linejoin='round'/></svg>") 3 2, pointer;
  }
  input, textarea, [contenteditable='true'] { cursor: text; }
}

/* ═══════════════════════════════════════════════════════════
   2. BASE ELEMENTS
══════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-body); line-height: 1.15; }
.font-display { font-family: var(--font-display) !important; }

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }

/* ─── Utility classes ─────────────────────────────────────── */
.container-wide {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}
@media (min-width: 1024px) {
  .container-wide { padding-inline: 2rem; }
}

.text-center  { text-align: center; }
.text-muted   { color: var(--color-muted-foreground); }
.text-white   { color: #fff; }
.text-on-primary { color: var(--color-primary-foreground); }
.bg-primary   { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }

.scroll-mt { scroll-margin-top: calc(var(--header-height) + 1rem); }
/* Logged-in: WordPress admin bar + fixed header anchor offset */
body.admin-bar .scroll-mt { scroll-margin-top: calc(var(--header-height) + 1rem + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .scroll-mt { scroll-margin-top: calc(var(--header-height) + 1rem + 46px); }
}

.eyebrow {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-body);
  color: var(--color-muted-foreground);
  margin-bottom: 0.5rem;
}
.eyebrow-accent { color: var(--color-accent) !important; }
.eyebrow-light  { color: rgba(248,241,228,0.7) !important; }

.section-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.section-desc  { max-width: 42ch; margin-inline: auto; }
.section-header {
  margin-bottom: 3rem;
}
.section-header.text-center .eyebrow { display: block; }

/* ─── Animations ──────────────────────────────────────────── */
@keyframes fadeIn   { from { opacity: 0; }                       to { opacity: 1; } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes marquee  { 0% { transform: translateX(0); }           100% { transform: translateX(-50%); } }
@keyframes spinSlow { from { transform: rotate(0deg); }          to { transform: rotate(360deg); } }
@keyframes scaleIn  { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: scale(1); } }

.animate-fade-in  { animation: fadeIn  0.6s var(--ease-smooth) forwards; }
.animate-slide-up { animation: slideUp 0.6s var(--ease-smooth) forwards; }
.animate-marquee  { animation: marquee 25s linear infinite; }
.animate-spin-slow { animation: spinSlow 18s linear infinite; }

/* Scroll-triggered animations */
[data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth); }
[data-animate].is-visible { opacity: 1; transform: none; }
[data-animate="scale-in"] { transform: scale(0.93); }
[data-animate="scale-in"].is-visible { transform: scale(1); }

/* ─── Link underline effect ───────────────────────────────── */
.link-underline { position: relative; display: inline-block; }
.link-underline::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px;
  background-color: currentColor;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 300ms var(--ease-smooth);
}
.link-underline:hover::after { transform: scaleX(1); }

/* ─── Card hover ──────────────────────────────────────────── */
.card-hover {
  transition: box-shadow 500ms var(--ease-smooth), transform 500ms var(--ease-smooth);
}
.card-hover:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-4px);
}

/* ─── Icons ───────────────────────────────────────────────── */
.icon    { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.icon-xs { width: 1rem;    height: 1rem; }
.icon-sm { width: 1.25rem; height: 1.25rem; }
.icon-md { width: 1.75rem; height: 1.75rem; }
.icon-lg { width: 2.5rem;  height: 2.5rem; }

/* ═══════════════════════════════════════════════════════════
   3. BUTTONS
══════════════════════════════════════════════════════════════ */

.btn-primary, .btn-secondary, .btn-outline, .btn-accent, .btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  padding: var(--btn-padding);
  min-height: var(--btn-height);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  border-radius: var(--btn-radius);
}

.btn-primary  { background-color: var(--color-primary); color: var(--color-primary-foreground); }
.btn-secondary { background-color: var(--color-secondary); color: var(--color-secondary-foreground); }
.btn-outline  { background-color: transparent; color: var(--color-foreground); border: 1px solid var(--color-border); }
.btn-accent   { background-color: var(--color-accent); color: var(--color-accent-foreground); }
.btn-white    { background-color: #fff; color: var(--color-foreground); }

.btn-primary:hover, .btn-accent:hover { opacity: 0.88; }
.btn-outline:hover { border-color: var(--color-foreground); }
.btn-white:hover   { background-color: rgba(255,255,255,0.9); }

.btn-pill  { border-radius: 9999px !important; }
.btn-lg    { padding: 1rem 2rem; font-size: 1rem; min-height: 52px; }
.btn-full  { width: 100%; }

.btn-primary:active, .btn-accent:active, .btn-white:active { transform: scale(0.97); }

/* ═══════════════════════════════════════════════════════════
   4. HEADER
══════════════════════════════════════════════════════════════ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background-color 300ms var(--ease-smooth), border-color 300ms var(--ease-smooth), height 300ms var(--ease-smooth);
  border-bottom: 1px solid transparent;
}
body.admin-bar .site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}
.site-header.is-solid {
  background-color: rgba(245, 240, 233, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--color-border);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6rem;
  position: relative;
  transition: height 300ms var(--ease-smooth);
}
@media (min-width: 1024px) {
  .site-nav { height: 7rem; }
}
.site-header.is-solid .site-nav {
  height: 4rem;
}
@media (min-width: 1024px) {
  .site-header.is-solid .site-nav { height: 5rem; }
}

.nav-links-left, .nav-links-right {
  display: none;
  align-items: center;
  gap: 1.75rem;
}
@media (min-width: 768px) {
  .nav-links-left, .nav-links-right { display: flex; }
}

.theme-nav-link {
  font-size: 0.875rem;
  font-family: var(--font-body);
  letter-spacing: 0.025em;
  color: var(--color-foreground);
  cursor: pointer;
  transition: color 300ms;
  background: none;
  border: none;
  padding: 0;
}
.site-header:not(.is-solid) .theme-nav-link { color: rgba(248,241,228,0.9); }
.site-header:not(.is-solid) .theme-nav-link:hover { color: #fff; }

/* Logo — matches Lovable: h-14/sm:h-16/lg:h-20 transparent; h-10/sm:h-12/lg:h-14 scrolled; border #edd7ab; img object-cover */
.site-logo-link {
  margin: 0 2rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.site-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-background);
  border: 2px solid rgb(237, 215, 171);
  box-sizing: border-box;
  flex-shrink: 0;
  transition: width 300ms var(--ease-smooth), height 300ms var(--ease-smooth), box-shadow 300ms var(--ease-smooth);
  width: 3.5rem;
  height: 3.5rem;
  box-shadow: var(--shadow-elevated);
}
@media (min-width: 640px) {
  .site-header:not(.is-solid) .site-logo-wrap {
    width: 4rem;
    height: 4rem;
  }
}
@media (min-width: 1024px) {
  .site-header:not(.is-solid) .site-logo-wrap {
    width: 5rem;
    height: 5rem;
  }
}
.site-header.is-solid .site-logo-wrap {
  width: 2.5rem;
  height: 2.5rem;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 640px) {
  .site-header.is-solid .site-logo-wrap {
    width: 3rem;
    height: 3rem;
  }
}
@media (min-width: 1024px) {
  .site-header.is-solid .site-logo-wrap {
    width: 3.5rem;
    height: 3.5rem;
  }
}
.site-logo-wrap .site-logo-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  display: block;
}
.site-logo-text {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 2.5vw, 1.125rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  padding: 0 0.25rem;
}

/* Nav right / cart */
.nav-right, .nav-left-mobile {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nav-left-mobile { left: 0; right: auto; }

.cart-btn {
  position: relative;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--color-foreground);
  transition: opacity 0.2s;
}
.cart-btn:hover { opacity: 0.6; }
.site-header:not(.is-solid) .cart-btn { color: #fff; }

.theme-cart-count {
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 500;
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  border-radius: 50%;
}
.theme-cart-count:empty { display: none; }

/* Mobile menu toggle */
.mobile-menu-toggle {
  background: none;
  border: none;
  padding: 0.5rem;
  color: var(--color-foreground);
  cursor: pointer;
  transition: opacity 0.2s;
}
.mobile-menu-toggle:hover { opacity: 0.6; }
.site-header:not(.is-solid) .mobile-menu-toggle { color: #fff; }
@media (min-width: 768px) { .mobile-menu-toggle { display: none !important; } }

/* Mobile menu dropdown */
.mobile-menu {
  display: none;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.mobile-menu.is-open { display: block; animation: fadeIn 0.2s var(--ease-smooth); }
.mobile-menu-inner { display: flex; flex-direction: column; padding: 1rem; gap: 0.25rem; }
.mobile-nav-link {
  font-size: 0.875rem;
  font-family: var(--font-body);
  letter-spacing: 0.025em;
  color: var(--color-foreground);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
  transition: color 0.2s;
}
.mobile-nav-link:last-child { border-bottom: none; }
.mobile-nav-link:hover { color: var(--color-muted-foreground); }

/* ═══════════════════════════════════════════════════════════
   5. HERO SECTION
══════════════════════════════════════════════════════════════ */

.hero-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-bg-img,
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-overlay { position: absolute; inset: 0; pointer-events: none; }
.hero-overlay-1 { background-color: rgba(34,29,23, 0.55); }
.hero-overlay-2 { background: linear-gradient(to bottom, rgba(34,29,23,0.40) 0%, rgba(34,29,23,0.30) 50%, rgba(34,29,23,0.80) 100%); }
.hero-overlay-3 { background: linear-gradient(to right, rgba(34,29,23,0.60) 0%, rgba(34,29,23,0.20) 60%, transparent 100%); }

/* Top-right eyebrow */
.hero-eyebrow-topright {
  display: none;
  position: absolute;
  top: 8rem; right: 2.5rem;
  z-index: 20;
  align-items: center;
  gap: 0.75rem;
  color: rgba(248,241,228,0.8);
}
@media (min-width: 1024px) { .hero-eyebrow-topright { display: flex; } }
.hero-eyebrow-topright span:first-child { font-size: 0.625rem; letter-spacing: 0.4em; text-transform: uppercase; font-family: var(--font-body); }
.hero-eyebrow-line { display: block; width: 2.5rem; height: 1px; background-color: rgba(248,241,228,0.5); }

/* Hero content grid */
.hero-content-wrap { position: relative; z-index: 10; width: 100%; padding-bottom: 5rem; padding-top: 8rem; }
@media (min-width: 1024px) { .hero-content-wrap { padding-bottom: 7rem; } }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: flex-end;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
  }
}

/* Headline column */
.hero-headline-col {
  position: relative;
  grid-column: 1;
}
.hero-accent-rule {
  display: none;
  position: absolute;
  left: -0.5rem;
  top: 0.5rem;
  bottom: 0.75rem;
  width: 1px;
  background-color: var(--color-accent);
  transform-origin: top;
}
@media (min-width: 768px) { .hero-accent-rule { display: block; left: -1rem; } }

.hero-taglines {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-left: 1rem;
}
@media (min-width: 768px) { .hero-taglines { padding-left: 2rem; } }
.hero-tagline {
  font-size: 0.625rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-family: var(--font-body);
  color: rgba(248,241,228,0.7);
}
.hero-tagline.accent { color: var(--color-accent); }
.hero-tagline-sep { display: block; width: 1rem; height: 1px; background-color: rgba(248,241,228,0.4); flex-shrink: 0; }

.hero-title {
  font-size: clamp(3rem, 8vw, 9rem);
  line-height: 0.95;
  color: rgba(248,241,228,1);
  letter-spacing: -0.02em;
  padding-left: 1rem;
}
@media (min-width: 768px) { .hero-title { padding-left: 2rem; } }
.hero-title-italic { font-style: italic; font-weight: 300; color: rgba(248,241,228,0.95); }
.hero-title-accent { color: var(--color-accent); }

/* Copy column */
.hero-copy-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-left: 1rem;
}
@media (min-width: 1024px) {
  .hero-copy-col {
    padding-left: 1.5rem;
    border-left: 1px solid rgba(248,241,228,0.2);
  }
}

.hero-description {
  font-size: 0.9375rem;
  font-family: var(--font-body);
  color: rgba(248,241,228,0.85);
  line-height: 1.7;
  max-width: 32ch;
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
@media (min-width: 640px) { .hero-ctas { flex-direction: row; flex-wrap: wrap; align-items: center; } }
@media (min-width: 1024px) { .hero-ctas { flex-direction: column; align-items: flex-start; } }
@media (min-width: 1280px) { .hero-ctas { flex-direction: row; align-items: center; } }

.hero-btn1 { box-shadow: var(--shadow-elevated); font-size: 0.875rem; letter-spacing: 0.05em; }
.hero-btn2.hero-link-btn {
  background: none; border: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: #fff; cursor: pointer;
  transition: color 0.2s;
  font-family: var(--font-body);
  padding: 0.5rem 0;
}
.hero-btn2.hero-link-btn:hover { color: var(--color-accent); }
.hero-btn2-inner { border-bottom: 1px solid rgba(248,241,228,0.5); padding-bottom: 2px; transition: border-color 0.2s; }
.hero-btn2.hero-link-btn:hover .hero-btn2-inner { border-bottom-color: var(--color-accent); }
.hero-btn2-icon { transition: transform 0.2s; }
.hero-btn2:hover .hero-btn2-icon { transform: translate(2px, -2px); }

/* ═══════════════════════════════════════════════════════════
   6. SERVICES SECTION
══════════════════════════════════════════════════════════════ */

.services-section {
  padding: 4rem 0 6rem;
}
@media (min-width: 768px) { .services-section { padding: 6rem 0; } }

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding-top: 3rem;
}
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }

.service-card {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem;
  padding-top: 4rem;
  background-color: var(--color-card);
  border-radius: var(--card-radius);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.service-icon-badge {
  position: absolute;
  top: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-accent-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-elevated);
  outline: 8px solid var(--color-background);
}
.service-title { font-size: 1.25rem; margin-bottom: 0.5rem; margin-top: 0.5rem; }
.service-desc  { font-size: 0.875rem; color: var(--color-muted-foreground); line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════
   7. ABOUT SECTION
══════════════════════════════════════════════════════════════ */

.about-section { padding: 5rem 0 7rem; }
@media (min-width: 768px) { .about-section { padding: 7rem 0; } }

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: 5fr 7fr; gap: 4rem; }
}

/* Visual column */
.about-visual { position: relative; }
.about-visual-inner { position: relative; max-width: 28rem; margin-inline: auto; }
@media (min-width: 1024px) { .about-visual-inner { max-width: none; margin-right: 2rem; } }

.about-dots-pattern {
  display: none;
  position: absolute;
  top: -1.5rem; right: -1.5rem;
  width: 7rem; height: 7rem;
  opacity: 0.4;
  background-image: radial-gradient(var(--color-foreground) 1.2px, transparent 1.2px);
  background-size: 12px 12px;
}
@media (min-width: 768px) { .about-dots-pattern { display: block; } }

.about-main-img-wrap {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--card-radius);
  overflow: hidden;
  background-color: var(--color-foreground);
  box-shadow: var(--shadow-elevated);
}
.about-main-img { width: 100%; height: 100%; object-fit: cover; }

.about-badge {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-elevated);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.about-badge-icon { color: var(--color-accent); flex-shrink: 0; }
.about-badge-num { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.about-badge-label { font-size: 0.625rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.85; }

.about-circle-img-wrap {
  position: absolute;
  bottom: -2.5rem; left: 0.5rem;
  width: 8rem; height: 8rem;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--color-secondary);
  box-shadow: var(--shadow-elevated);
}
@media (min-width: 768px) {
  .about-circle-img-wrap { bottom: -3rem; left: -1rem; width: 10rem; height: 10rem; }
}
.about-circle-img { width: 100%; height: 100%; object-fit: cover; }

/* Copy column */
.about-eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.about-leaf-icon    { color: var(--color-accent); }
.about-leaf-flip    { transform: scaleX(-1); }

.about-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  margin-bottom: 1.25rem;
}
.about-title-italic { font-style: italic; color: var(--color-primary); }
.about-description  { line-height: 1.7; margin-bottom: 2rem; max-width: 50ch; }

.about-content-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 640px) {
  .about-content-row { grid-template-columns: 1fr auto; }
}

.about-checklist { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.about-check-item {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-body); font-size: 0.9375rem;
}
.check-disc {
  flex-shrink: 0; width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-accent-foreground);
  display: flex; align-items: center; justify-content: center;
}
.check-disc-sm { width: 1.25rem; height: 1.25rem; }

.about-stat-card {
  position: relative;
  background-color: var(--color-card);
  border-radius: var(--card-radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  min-width: 10rem;
  text-align: center;
  overflow: hidden;
}
.about-stat-top-bar {
  position: absolute; top: 0; right: 0;
  width: 4px; height: 100%;
  background-color: var(--color-primary);
}
.about-stat-label { font-size: 0.75rem; letter-spacing: 0.05em; color: var(--color-muted-foreground); margin-bottom: 0.25rem; }
.about-stat-number { font-family: var(--font-display); font-size: 3rem; color: var(--color-primary); line-height: 1; margin-bottom: 0.5rem; }
.about-stat-unit { font-size: 0.625rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-muted-foreground); }
.about-stat-leaf {
  position: absolute; bottom: -0.5rem; right: -0.5rem;
  width: 3rem; height: 3rem;
  color: var(--color-primary);
  opacity: 0.15;
}

.about-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.about-author { display: flex; align-items: center; gap: 0.75rem; }
.about-author-avatar {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%; overflow: hidden;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}
.about-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.about-author-name { font-family: var(--font-display); font-size: 1rem; }
.about-author-role { font-size: 0.75rem; color: var(--color-muted-foreground); }

/* ═══════════════════════════════════════════════════════════
   8. MARQUEE BAND
══════════════════════════════════════════════════════════════ */

.marquee-band { overflow: hidden; background-color: var(--color-primary); padding: 0.75rem 0; }
@media (min-width: 768px) { .marquee-band { padding: 1rem 0; } }
.marquee-track { display: flex; white-space: nowrap; }
.marquee-inner { display: flex; align-items: center; gap: 2rem; margin-inline: 1rem; }
.marquee-item  { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-primary-foreground); }
.marquee-sep   { color: var(--color-primary-foreground); opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════
   9. SHOP SECTION
══════════════════════════════════════════════════════════════ */

.shop-section { padding: 4rem 0 5rem; }
@media (min-width: 768px) { .shop-section { padding: 5rem 0; } }
.shop-header { margin-bottom: 3rem; }

.shop-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.filter-btn {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-family: var(--font-body);
  background-color: var(--color-secondary);
  color: var(--color-secondary-foreground);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 200ms, color 200ms;
  display: inline-flex; align-items: center; gap: 0.375rem;
}
.filter-btn:hover { background-color: var(--color-muted); }
.filter-btn.active { background-color: var(--color-primary); color: var(--color-primary-foreground); }

/* Price filter (Lovable: max-w-sm mx-auto overflow-hidden + py-2 inner) */
.shop-price-panel {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
  overflow: hidden;
  opacity: 0;
  transition: grid-template-rows 300ms var(--ease-smooth), opacity 300ms var(--ease-smooth);
  pointer-events: none;
}
.shop-price-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
}
.shop-price-panel > .price-filter-inner {
  min-height: 0;
  overflow: hidden;
}
.price-filter-inner {
  padding: 0.5rem 0;
  font-family: var(--font-body);
}

.price-dual-slider {
  position: relative;
  height: 2.5rem;
  margin-bottom: 0.75rem;
  touch-action: none;
}
.price-dual-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--color-secondary);
  pointer-events: none;
  overflow: hidden;
}
.price-dual-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--color-primary);
  border-radius: 9999px;
  pointer-events: none;
}

.price-dual-input {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2.5rem;
  top: 50%;
  margin-top: -1.25rem;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  cursor: pointer;
  z-index: 2;
}
.price-dual-input--max { z-index: 3; }
.price-dual-input:focus { outline: none; }
.price-dual-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary);
}
.price-dual-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary);
}
.price-dual-input::-webkit-slider-runnable-track {
  height: 0.5rem;
  background: transparent;
  border: none;
}
.price-dual-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.375rem;
  border-radius: 50%;
  background-color: var(--color-background);
  border: 2px solid var(--color-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  cursor: grab;
}
.price-dual-input::-moz-range-track {
  height: 0.5rem;
  background: transparent;
  border: none;
}
.price-dual-input::-moz-range-thumb {
  pointer-events: auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--color-background);
  border: 2px solid var(--color-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  cursor: grab;
}

.price-chevron {
  transition: transform 300ms var(--ease-smooth);
}
.price-toggle-btn[aria-expanded="true"] .price-chevron {
  transform: rotate(180deg);
}
.price-active-range {
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.7;
  font-weight: 400;
}

.price-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  font-family: var(--font-body);
}

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
@media (min-width: 640px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

.theme-product-card-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.theme-product-card-wrap.shop-hidden { display: none; }

.shop-show-more { text-align: center; margin-top: 2.5rem; }
.no-products-msg { text-align: center; padding: 5rem 0; color: var(--color-muted-foreground); }

/* Product card — see also WooCommerce content-product.php */
.theme-product-card {
  background-color: var(--color-card);
  border-radius: var(--card-radius);
  border: 1px solid var(--color-border);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}
@media (min-width: 768px) { .theme-product-card { padding: 1.25rem; } }

.theme-product-card__image-wrapper {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: var(--color-secondary);
  margin-bottom: 1rem;
}
.theme-product-card:hover .theme-product-card__image-wrapper img {
  transform: scale(1.06);
}
.theme-product-card__image-wrapper img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-smooth);
  display: block;
}
.theme-product-card__image-link {
  display: block;
  overflow: hidden;
  border-radius: 0.75rem;
}
.theme-product-card__badge {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0.25rem;
  z-index: 2;
}
.badge-sold-out   { background-color: var(--color-foreground); color: var(--color-background); }
.badge-coming-soon { background-color: var(--color-primary);   color: var(--color-primary-foreground); }

.theme-product-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}
.theme-product-card__title {
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-foreground);
  transition: color 300ms;
  line-height: 1.3;
}
.theme-product-card:hover .theme-product-card__title { color: var(--color-primary); }
.theme-product-card__title.is-disabled { color: var(--color-muted-foreground); }

.theme-product-card__stars {
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
.star-filled { color: #f59e0b; fill: #f59e0b; }
.star-muted  { color: var(--color-muted); fill: var(--color-muted); }

.theme-product-card__price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  font-family: var(--font-body);
}

/* Hit-area overlay for product card link — all positioning in CSS, never inline */
.theme-product-card { position: relative; }
.theme-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
}
/* Block clicks on decorative layers; * also targets .theme-card-link, so re-enable below. */
.theme-product-card * { pointer-events: none; }
.theme-product-card .theme-card-link {
  pointer-events: auto;
}
.theme-product-card .add_to_cart_button,
.theme-product-card .ajax_add_to_cart {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════
   10. MEET THE MAKER / OWNER SECTION
══════════════════════════════════════════════════════════════ */

.owner-section { padding: 5rem 0 7rem; }
@media (min-width: 768px) { .owner-section { padding: 7rem 0; } }

.owner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .owner-grid { grid-template-columns: 5fr 7fr; gap: 4rem; }
}

/* Visual */
.owner-visual { position: relative; }
.owner-visual-inner { position: relative; max-width: 28rem; margin-inline: auto; }
@media (min-width: 1024px) { .owner-visual-inner { max-width: none; } }

.owner-accent-block {
  position: absolute;
  bottom: -1.25rem; left: -1.25rem;
  width: 78%; height: 78%;
  background-color: var(--color-primary);
  border-radius: var(--card-radius);
  z-index: 0;
}
@media (min-width: 768px) {
  .owner-accent-block { bottom: -1.75rem; left: -1.75rem; }
}

.owner-photo-wrap {
  position: relative;
  z-index: 1;
  margin-left: 1.5rem;
  aspect-ratio: 4/5;
  border-radius: var(--card-radius);
  overflow: hidden;
  background-color: var(--color-secondary);
  box-shadow: var(--shadow-elevated);
}
@media (min-width: 768px) { .owner-photo-wrap { margin-left: 2.5rem; } }
.owner-photo { width: 100%; height: 100%; object-fit: cover; }

/* Rotating badge */
.owner-badge-wrap {
  position: absolute;
  top: -1.5rem; left: -0.5rem;
  z-index: 20;
  width: 6rem; height: 6rem;
}
@media (min-width: 768px) {
  .owner-badge-wrap { top: -2rem; left: -1rem; width: 7rem; height: 7rem; }
}
.owner-badge-inner { position: relative; width: 100%; height: 100%; }
.owner-badge-ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.owner-badge-text {
  font-size: 10px;
  letter-spacing: 3px;
  fill: var(--color-foreground);
  font-family: var(--font-body);
}
.owner-badge-center {
  position: absolute;
  inset: 0.75rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft);
}
.owner-badge-play {
  width: 1.5rem; height: 1.5rem;
  color: var(--color-accent-foreground);
  transform: translateX(1px);
}

/* Copy */
.owner-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* gap-2 */
  margin-bottom: 1rem; /* mb-4 */
}
/* Override global .eyebrow (block + margin) so row matches Lovable flex + text-xs */
.owner-eyebrow-row .eyebrow {
  display: inline;
  margin-bottom: 0;
  font-size: 0.75rem; /* text-xs */
  line-height: 1.25;
}
.owner-eyebrow-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--color-accent); display: block; flex-shrink: 0; }
.owner-title {
  font-size: 2.25rem; /* text-4xl — Lovable owner heading */
  line-height: 1.05;
  margin-bottom: 1.5rem; /* mb-6 */
  max-width: 36rem; /* max-w-xl */
  font-weight: 700;
}
@media (min-width: 768px) {
  .owner-title { font-size: 3rem; } /* md:text-5xl */
}
@media (min-width: 1024px) {
  .owner-title { font-size: 3.75rem; } /* lg:text-6xl */
}
.owner-title-italic { font-style: italic; color: var(--color-primary); }
.owner-bio { display: flex; flex-direction: column; gap: 1rem; line-height: 1.7; max-width: 52ch; }
.owner-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ═══════════════════════════════════════════════════════════
   11. VIDEOS SECTION
══════════════════════════════════════════════════════════════ */

.videos-section { padding: 4rem 0 6rem; }
@media (min-width: 768px) { .videos-section { padding: 6rem 0; } }

.videos-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .videos-header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

.videos-channel-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--color-accent);
  transition: color 0.2s;
}
.videos-channel-link:hover { color: var(--color-primary-foreground); }

.videos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .videos-grid { grid-template-columns: repeat(3, 1fr); } }

.video-card {
  background-color: var(--color-card);
  color: var(--color-foreground);
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid rgba(248,241,228,0.1);
  box-shadow: var(--shadow-elevated);
}

.video-thumb-wrap {
  position: relative;
  aspect-ratio: 16/9;
  background-color: var(--color-foreground);
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.video-thumb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-smooth);
  display: block;
}
.video-thumb-wrap:hover .video-thumb-img { transform: scale(1.05); }
.video-thumb-overlay {
  position: absolute; inset: 0;
  background-color: rgba(34,29,23,0.3);
  transition: background-color 200ms;
}
.video-thumb-wrap:hover .video-thumb-overlay { background-color: rgba(34,29,23,0.2); }
.video-play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.video-play-btn .icon {
  width: 4rem; height: 4rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-accent-foreground);
  padding: 0.875rem;
  box-shadow: var(--shadow-elevated);
  transition: transform 200ms;
  transform: translateX(2px);
}
.video-thumb-wrap:hover .video-play-btn .icon { transform: translateX(2px) scale(1.1); }

.video-info { padding: 1.25rem; }
.video-title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.video-desc  { font-size: 0.875rem; line-height: 1.6; }

.video-thumb-wrap:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* Video iframe */
.video-iframe-wrap { aspect-ratio: 16/9; background-color: var(--color-foreground); }
.video-iframe-wrap iframe { width: 100%; height: 100%; display: block; }

.videos-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.social-circle {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(248,241,228,0.3);
  background-color: rgba(248,241,228,0.05);
  color: var(--color-primary-foreground);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 200ms, border-color 200ms, color 200ms;
}
.social-circle:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-foreground);
}

/* ═══════════════════════════════════════════════════════════
   12. BLOG / JOURNAL SECTION
══════════════════════════════════════════════════════════════ */

.blog-section { position: relative; overflow: hidden; }
.blog-bg { position: absolute; inset: 0; }
.blog-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  filter: blur(4px);
}
.blog-bg-overlay {
  position: absolute; inset: 0;
  background-color: rgba(34,29,23,0.70);
}

.blog-content {
  position: relative;
  z-index: 1;
  padding: 4rem 0 6rem;
}
@media (min-width: 768px) { .blog-content { padding: 6rem 0; } }

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  background-color: rgba(235,228,217,0.97);
  backdrop-filter: blur(4px);
  border-radius: var(--card-radius);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 768px) { .blog-card { padding: 2rem; } }
.blog-cat { font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; font-family: var(--font-body); margin-bottom: 0.75rem; display: block; }
.blog-post-title  { font-size: 1.5rem; line-height: 1.2; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .blog-post-title { font-size: 1.75rem; } }
.blog-post-excerpt { font-size: 0.875rem; line-height: 1.65; margin-bottom: 1.5rem; flex: 1; }
.blog-post-footer  { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.blog-post-footer--soon { justify-content: flex-start; }
.blog-post-date    { font-size: 0.75rem; }
.blog-read-more    { font-size: 0.875rem; color: var(--color-primary); font-family: var(--font-body); }
button.blog-read-more {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-align: inherit;
}
a.blog-read-more-link { text-decoration: none; color: var(--color-primary); }
a.blog-read-more-link:hover { text-decoration: underline; }

/* Single journal post */
.journal-single-main {
  padding-top: calc(var(--header-height) + 1.5rem);
  padding-bottom: 4rem;
  background-color: var(--color-background);
}
@media (min-width: 768px) { .journal-single-main { padding-bottom: 5rem; } }

.journal-single-header { margin-bottom: 2.5rem; }
.journal-single-hero-media {
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: 1.75rem;
  max-height: 22rem;
  background-color: var(--color-secondary);
}
.journal-single-hero-img {
  width: 100%;
  height: 22rem;
  object-fit: cover;
  display: block;
}
.journal-single-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(34, 29, 23, 0.45), transparent 55%);
  pointer-events: none;
}
.journal-single-header-inner { max-width: 42rem; }
.journal-single-kicker { margin-bottom: 0.75rem; }
.journal-single-back {
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--color-primary);
  text-decoration: none;
}
.journal-single-back:hover { text-decoration: underline; }
.journal-single-cat {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  font-family: var(--font-body);
  margin-bottom: 0.75rem;
}
.journal-single-title {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.1;
  margin-bottom: 0.5rem;
  color: var(--color-foreground);
}
.journal-single-meta { font-size: 0.875rem; margin-bottom: 0; }

.journal-single-body {
  max-width: 42rem;
  font-family: var(--font-body);
  line-height: 1.75;
  color: var(--color-foreground);
}
.journal-single-body > * + * { margin-top: 1.25rem; }
.journal-single-body h2,
.journal-single-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}
.journal-single-body h2 { font-size: 1.75rem; }
.journal-single-body h3 { font-size: 1.375rem; }
.journal-single-body ul,
.journal-single-body ol { padding-left: 1.25rem; }
.journal-single-body img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.journal-single-body a { color: var(--color-primary); }

/* ═══════════════════════════════════════════════════════════
   13. FAQ SECTION (mirrors Lovable: section = bg only, inner = py-16 md:py-24, split = max-w-6xl)
══════════════════════════════════════════════════════════════ */

.faq-section {
  background-color: var(--color-secondary);
  padding: 0;
}

.faq-section-inner {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .faq-section-inner {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.faq-section .faq-section-header {
  margin-bottom: 3rem;
  text-align: center;
}

.faq-section .faq-eyebrow-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  width: 100%;
}

.faq-eyebrow-line {
  display: block;
  width: 1.5rem;
  height: 1px;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

.faq-eyebrow-label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-body);
  color: var(--color-accent);
  margin: 0;
  line-height: 1;
}

.faq-section .faq-title {
  display: block;
  font-size: 2.25rem;
  line-height: 1.1;
  font-weight: 600;
  margin: 0;
  color: var(--color-foreground);
}
@media (min-width: 768px) {
  .faq-section .faq-title { font-size: 3rem; }
}
@media (min-width: 1024px) {
  .faq-section .faq-title { font-size: 3.75rem; }
}

.faq-title-italic {
  font-style: italic;
  color: var(--color-primary);
}

.faq-split-outer {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
}

.faq-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .faq-split {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.faq-questions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-q-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-card);
  color: var(--color-foreground);
  cursor: pointer;
  transition: border-color 300ms var(--ease-smooth), box-shadow 300ms var(--ease-smooth), background-color 300ms var(--ease-smooth), color 300ms var(--ease-smooth);
}
@media (min-width: 768px) {
  .faq-q-btn {
    padding: 1.25rem 1.5rem;
  }
}

.faq-q-btn:hover:not(.active) {
  border-color: rgba(34, 29, 23, 0.4);
  box-shadow: var(--shadow-soft);
}

.faq-q-btn.active {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-elevated);
}

.faq-q-text {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.375;
}
@media (min-width: 768px) {
  .faq-q-text { font-size: 1.125rem; }
}

.faq-q-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 200ms, background-color 200ms;
}

.faq-q-icon svg {
  display: block;
}

.faq-q-btn.active .faq-q-icon {
  border-color: rgba(248, 241, 228, 0.3);
  background-color: rgba(248, 241, 228, 0.1);
}

.faq-icon-minus,
.faq-icon-plus {
  transition: opacity 0.15s ease;
}

.faq-q-btn.active .faq-icon-minus { display: block; }
.faq-q-btn.active .faq-icon-plus { display: none; }
.faq-q-btn:not(.active) .faq-icon-minus { display: none; }
.faq-q-btn:not(.active) .faq-icon-plus { display: block; }

.faq-answer-panel {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-elevated);
  display: flex;
  flex-direction: column;
  min-height: 20rem;
}

@media (min-width: 768px) {
  .faq-answer-panel { padding: 2rem; }
}

@media (min-width: 1024px) {
  .faq-answer-panel {
    padding: 2.5rem;
    position: sticky;
    top: 7rem;
  }
}

.faq-answer-q {
  font-size: 1.25rem;
  line-height: 1.35;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .faq-answer-q {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

.faq-answer-divider {
  height: 1px;
  background-color: rgba(248, 241, 228, 0.2);
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .faq-answer-divider { margin-bottom: 1.5rem; }
}

.faq-answer-text {
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(248, 241, 228, 0.85);
  flex: 1;
  font-family: var(--font-body);
}

@media (min-width: 768px) {
  .faq-answer-text { font-size: 1rem; }
}

.faq-contact-btn {
  margin-top: 2rem;
  align-self: flex-start;
  box-shadow: var(--shadow-soft);
}

.faq-contact-btn:hover {
  box-shadow: var(--shadow-elevated);
}

/* ═══════════════════════════════════════════════════════════
   14. CTA SECTION
══════════════════════════════════════════════════════════════ */

.cta-section {
  position: relative;
  width: 100%;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (min-width: 768px) { .cta-section { min-height: 70vh; } }

.cta-bg { position: absolute; inset: 0; }
.cta-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-overlay { position: absolute; inset: 0; background-color: rgba(34,29,23,0.70); }
.cta-content {
  position: relative; z-index: 1;
  text-align: center;
  padding: 5rem 1.5rem;
  max-width: 42rem;
}
.cta-title { font-size: clamp(1.75rem, 4vw, 3rem); margin-bottom: 1rem; color: #fff; }
.cta-description { font-size: 1rem; color: rgba(255,255,255,0.85); margin-bottom: 2rem; font-family: var(--font-body); line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════
   15. CONTACT SECTION
══════════════════════════════════════════════════════════════ */

.contact-section { color: var(--color-primary-foreground); }

/* Upper block: matches Lovable py-20 + mb-12 header rhythm */
.contact-section > .container-wide:first-of-type {
  padding-top: 5rem;
}
.contact-header { margin-bottom: 3rem; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-bottom: 5rem;
}
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }

/* Form */
.contact-form { display: flex; flex-direction: column; flex: 1; gap: 1rem; }
.contact-form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .contact-form-row { grid-template-columns: 1fr 1fr; } }

.contact-input,
.contact-textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  background-color: rgba(248,241,228,0.10);
  border: 1px solid rgba(248,241,228,0.15);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--color-primary-foreground);
  transition: border-color 200ms;
  outline: none;
}
.contact-input::placeholder,
.contact-textarea::placeholder { color: rgba(248,241,228,0.40); }
.contact-input:focus, .contact-textarea:focus { border-color: rgba(186,110,40,0.6); }
.contact-textarea { min-height: 7.5rem; resize: none; }
.btn-white.contact-submit { width: 100%; padding: 1rem 1.5rem; font-size: 1rem; }

/* Success state */
.contact-success {
  text-align: center;
  padding: 4rem 0;
  display: flex; flex-direction: column; align-items: center; gap: 1rem; flex: 1;
}
.contact-success-icon {
  width: 4rem; height: 4rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent-foreground);
}
.contact-success-title { font-family: var(--font-display); font-size: 1.5rem; }
.contact-success-msg   { color: rgba(248,241,228,0.6); font-size: 0.9375rem; }

/* Copy column */
.contact-description { color: rgba(248,241,228,0.70); line-height: 1.7; margin-bottom: 2.5rem; max-width: 38ch; font-size: 1rem; }
@media (min-width: 768px) {
  .contact-description { font-size: 1.125rem; }
}
.contact-checklist { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.contact-check-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: rgba(248,241,228,0.80); }
.contact-section .contact-check-item .check-disc-sm {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Info strip */
.contact-info-strip { border-top: 1px solid rgba(248,241,228,0.1); }
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .contact-info-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-info-card {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(248,241,228,0.1);
}
@media (min-width: 768px) {
  .contact-info-card { padding: 2rem; border-bottom: none; }
  .contact-info-card:not(:last-child) { border-right: 1px solid rgba(248,241,228,0.1); }
}
.contact-info-icon-wrap {
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(248,241,228,0.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(248,241,228,0.70);
}
.contact-info-label { font-family: var(--font-display); font-size: 1.125rem; color: var(--color-primary-foreground); }
.contact-info-value { font-size: 0.875rem; color: rgba(248,241,228,0.60); font-family: var(--font-body); transition: color 200ms; word-break: break-all; }
a.contact-info-value:hover { color: var(--color-primary-foreground); }

/* ═══════════════════════════════════════════════════════════
   16. FOOTER
══════════════════════════════════════════════════════════════ */

.site-footer {
  background-color: var(--color-background);
  border-top: 1px solid var(--color-border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 3rem 0 2rem;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; padding: 4rem 0 2rem; }
}

.footer-logo-row {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1rem;
}
.footer-logo-wrap {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%; overflow: hidden;
  border: 2px solid #edd7ab;
  flex-shrink: 0;
}
.footer-logo-wrap .site-logo-img  { height: 2.5rem !important; width: 2.5rem !important; }
.footer-logo-wrap .site-logo-text { font-size: 0.75rem; line-height: 2.5rem; }
.footer-site-name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }

.footer-description { font-size: 0.875rem; color: var(--color-muted-foreground); line-height: 1.65; max-width: 28ch; margin-bottom: 1.5rem; }

.footer-social { display: flex; align-items: center; gap: 0.75rem; }
.footer-social-link {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-muted-foreground);
  transition: background-color 200ms, color 200ms;
}
.footer-social-link:hover { background-color: var(--color-secondary); color: var(--color-foreground); }

.footer-col-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-body);
  margin-bottom: 1rem;
  color: var(--color-foreground);
}

.footer-nav-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-nav-list li a, .footer-nav-list a {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  font-family: var(--font-body);
  transition: color 200ms;
}
.footer-nav-list li a:hover, .footer-nav-list a:hover { color: var(--color-foreground); }

.footer-contact-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-contact-list li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: var(--color-muted-foreground); font-family: var(--font-body);
}
.footer-contact-link { color: var(--color-muted-foreground); transition: color 200ms; }
.footer-contact-link:hover { color: var(--color-foreground); }

.footer-bottom {
  padding: 1rem 0;
  border-top: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 0.75rem; align-items: center;
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-copyright { font-size: 0.75rem; color: var(--color-muted-foreground); font-family: var(--font-body); }
.footer-credit { font-size: 0.75rem; color: var(--color-muted-foreground); transition: color 200ms; }
.footer-credit:hover { color: var(--color-foreground); }

/* ═══════════════════════════════════════════════════════════
   17. CART DRAWER
══════════════════════════════════════════════════════════════ */

#theme-cart-overlay {
  display: none;
  position: fixed; inset: 0;
  background-color: rgba(34,29,23,0.20);
  z-index: 200;
}
body.cart-open #theme-cart-overlay { display: block; animation: fadeIn 0.3s var(--ease-smooth); }

#theme-cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 100%; max-width: 28rem; /* max-w-md — Lovable drawer */
  height: 100vh;
  max-height: 100vh;
  background-color: var(--color-background);
  z-index: 201;
  box-shadow: var(--shadow-elevated);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 300ms var(--ease-smooth);
}
body.cart-open #theme-cart-drawer { transform: translateX(0); }
#theme-cart-drawer.is-updating { opacity: 0.6; pointer-events: none; }

.cart-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  padding: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.cart-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.cart-close-btn {
  padding: 0.25rem; background: none; border: none;
  cursor: pointer; color: var(--color-foreground);
  transition: opacity 0.2s;
}
.cart-close-btn:hover { opacity: 0.6; }

.cart-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  padding: 1.5rem; /* p-6 */
  text-align: center;
  gap: 1.5rem;
}
.cart-empty-icon {
  width: 3rem;
  height: 3rem;
  max-width: 100%;
  flex-shrink: 0;
  color: var(--color-muted-foreground);
}
.cart-empty-msg { color: var(--color-muted-foreground); font-family: var(--font-body); font-size: 0.9375rem; }

.cart-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.cart-item { display: flex; gap: 1rem; }
.cart-item-thumb {
  width: 5rem; height: 6rem;
  background-color: var(--color-secondary);
  overflow: hidden; flex-shrink: 0;
}
.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-name {
  font-size: 0.875rem; font-weight: 500;
  font-family: var(--font-body);
  display: block;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  transition: opacity 0.2s;
}
.cart-item-name:hover { opacity: 0.7; }
.cart-item-price { font-size: 0.875rem; color: var(--color-muted-foreground); margin-top: 0.25rem; }
.cart-item-variation { font-size: 0.75rem; color: var(--color-muted-foreground); margin-top: 0.25rem; }
.cart-item-controls {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 0.75rem;
}
.cart-qty-btn {
  padding: 0.25rem; background: none; border: none;
  cursor: pointer; color: var(--color-foreground);
  transition: background-color 0.2s;
  border-radius: 0.25rem;
}
.cart-qty-btn:hover { background-color: var(--color-secondary); }
.cart-qty-display { font-size: 0.875rem; min-width: 1.5rem; text-align: center; font-family: var(--font-body); }
.cart-remove-btn {
  margin-left: auto; font-size: 0.75rem;
  color: var(--color-muted-foreground); cursor: pointer;
  background: none; border: none;
  transition: color 0.2s; font-family: var(--font-body);
}
.cart-remove-btn:hover { color: var(--color-foreground); }

.cart-footer {
  flex-shrink: 0;
  padding: 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 1rem;
}
.cart-subtotal-row {
  display: flex; justify-content: space-between;
  font-size: 0.875rem; font-family: var(--font-body);
}
.cart-subtotal-label { color: var(--color-muted-foreground); }
.cart-subtotal-value { font-weight: 500; }
.cart-free-shipping { font-size: 0.75rem; color: var(--color-muted-foreground); font-family: var(--font-body); }

/* Hide "View cart" injected by WooCommerce after AJAX add-to-cart */
.woocommerce-page a.added_to_cart.wc-forward,
.single-product a.added_to_cart.wc-forward,
body a.added_to_cart.wc-forward { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   18. SINGLE PRODUCT PAGE
══════════════════════════════════════════════════════════════ */

.single-product .site-main { padding-top: var(--header-height); }

.product-back-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: var(--color-muted-foreground);
  transition: color 0.2s; font-family: var(--font-body);
  padding: 1.5rem 0 0;
}
.product-back-link:hover { color: var(--color-foreground); }

.single-product .theme-product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 5rem;
  min-width: 0;
}
@media (min-width: 1024px) { .single-product .theme-product-layout { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.single-product .theme-product-gallery { min-width: 0; max-width: 100%; }

/* Main image */
#product-main-img-wrap {
  aspect-ratio: 3/4;
  overflow: hidden;
  margin-bottom: 1rem;
  background-color: var(--color-secondary);
}
#product-main-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Thumbnails */
.theme-product-thumbnails {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  max-width: 100%;
}
.thumb-btn {
  flex-shrink: 0;
  aspect-ratio: 1/1;
  width: 20%;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: none;
  padding: 0;
  transition: border-color 0.2s, opacity 0.2s;
  opacity: 0.6;
}
.thumb-btn:hover { opacity: 1; }
.thumb-btn.is-active { border-color: var(--color-primary); opacity: 1; }
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Product info column */
.single-product .theme-product-info { min-width: 0; max-width: 100%; }
.product-info-inner { padding-top: 2.5rem; }

.product-category {
  font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-muted-foreground); font-family: var(--font-body);
}
.product-title { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0.5rem 0 1rem; font-family: var(--font-display); }
.product-price { font-size: 1.5rem; font-weight: 600; color: var(--color-primary); margin-bottom: 1.5rem; font-family: var(--font-body); }
.product-description { color: var(--color-muted-foreground); line-height: 1.7; margin-bottom: 2rem; font-family: var(--font-body); white-space: pre-line; overflow-wrap: break-word; word-break: break-word; }

/* Custom order box */
.custom-order-note {
  padding: 1rem;
  background-color: rgba(186,110,40,0.10);
  border: 1px solid rgba(186,110,40,0.30);
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem; font-family: var(--font-body); color: var(--color-foreground);
}

/* Size / color selectors (Lovable-style: label + pill row; colour = circle only) */
.bcp-variation-picker { margin-bottom: 1.5rem; }
.product-attribute-label { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem; font-family: var(--font-body); }
.product-attr-options { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.bcp-variation-picker .product-attr-options { margin-bottom: 0; }
.bcp-attr-options--color { gap: 0.75rem; }
.attr-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem; font-family: var(--font-body);
  border: 1px solid var(--color-border);
  background-color: transparent; cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
  line-height: 1.25;
}
.attr-btn:hover:not(:disabled):not(.is-unavailable) { border-color: rgba(64,81,51,0.5); }
.attr-btn.is-active { background-color: var(--color-primary); color: var(--color-primary-foreground); border-color: var(--color-primary); }
.attr-btn.is-unavailable,
.attr-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.color-attr-btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.color-swatch { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--color-border); }

/* Colour swatches: circle only (selected = ring) */
.bcp-color-swatch-btn {
  padding: 0.35rem;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: transparent;
  min-width: 2.25rem;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bcp-color-swatch-btn:hover:not(:disabled):not(.is-unavailable) { border-color: rgba(64,81,51,0.5); }
.bcp-color-swatch-btn.is-active {
  background: transparent;
  color: inherit;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}
.bcp-color-swatch-circle {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  box-sizing: border-box;
}
.bcp-color-swatch-btn.is-active .bcp-color-swatch-circle { border-color: rgba(0,0,0,0.2); }

/* Theme-hidden select for WooCommerce variation matching */
.theme-attr-select-hidden { display: none !important; }

/* Add to cart area */
.theme-add-to-cart-area {
  display: flex; gap: 1rem; margin-bottom: 2rem;
  flex-wrap: wrap;
}
.single-product .theme-add-to-cart-area { flex-wrap: wrap; gap: 0.75rem; }
.single-product .single_add_to_cart_button { flex: 1 1 auto; min-width: 160px; }

/* Quantity wrapper */
.theme-quantity-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  overflow: hidden;
  flex-shrink: 0;
}
.theme-qty-minus, .theme-qty-plus {
  padding: 0.75rem 1rem;
  background: none; border: none;
  cursor: pointer; font-size: 1rem;
  color: var(--color-foreground);
  transition: background-color 0.2s;
  font-family: var(--font-body);
}
.theme-qty-minus:hover, .theme-qty-plus:hover { background-color: var(--color-secondary); }
.theme-qty-input {
  width: 3rem;
  text-align: center;
  padding: 0.75rem 0;
  font-family: var(--font-body);
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-foreground);
  font-size: 0.9375rem;
  outline: none;
}
.theme-qty-input::-webkit-outer-spin-button,
.theme-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.theme-qty-input[type=number] { -moz-appearance: textfield; }

/* Details section */
.product-details-section { border-top: 1px solid var(--color-border); padding-top: 2rem; }
.product-details-heading { font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; font-family: var(--font-body); }
.product-details-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.product-details-list li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: 0.875rem; color: var(--color-muted-foreground); font-family: var(--font-body);
}
.product-details-list li::before {
  content: '';
  display: block;
  width: 0.375rem; height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 0.45rem;
}

/* Responsive single product */
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-variation-description,
.single-product .posted_in { overflow-wrap: break-word; word-break: break-word; }

/* Related products */
.related-products-section { padding: 5rem 0; border-top: 1px solid var(--color-border); }
.related-products-title { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 2.5rem; }
.related-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 1024px) { .related-products-grid { grid-template-columns: repeat(4, 1fr); } }

/* ═══════════════════════════════════════════════════════════
   19. WOOCOMMERCE: ADD TO CART BUTTON OVERRIDES
══════════════════════════════════════════════════════════════ */

.single_add_to_cart_button.button,
.add_to_cart_button.button,
a.single_add_to_cart_button,
a.add_to_cart_button {
  background-color: var(--color-primary) !important;
  color: var(--color-button-text) !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  min-height: var(--btn-height) !important;
  padding: var(--btn-padding) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-body) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight) !important;
  letter-spacing: var(--btn-letter-spacing) !important;
  text-transform: var(--btn-text-transform) !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
  text-decoration: none !important;
}
.single_add_to_cart_button.button:hover,
.add_to_cart_button.button:hover {
  opacity: 0.85 !important;
  background-color: var(--color-primary) !important;
  color: var(--color-button-text) !important;
}
/* Disabled state */
.single_add_to_cart_button.button:disabled,
.single_add_to_cart_button.button.disabled,
.add_to_cart_button.button:disabled,
.add_to_cart_button.button.disabled {
  cursor: not-allowed !important;
  opacity: 0.4 !important;
  pointer-events: none !important;
}
.single_add_to_cart_button.button:disabled:hover,
.single_add_to_cart_button.button.disabled:hover,
.add_to_cart_button.button:disabled:hover,
.add_to_cart_button.button.disabled:hover {
  opacity: 0.4 !important;
  background-color: var(--color-primary) !important;
}

/* Button loading state */
.ajax_add_to_cart.theme-btn-loading {
  opacity: 0.6 !important;
  pointer-events: none !important;
  cursor: wait !important;
}

/* ═══════════════════════════════════════════════════════════
   20. WOOCOMMERCE: VARIATIONS TABLE
══════════════════════════════════════════════════════════════ */

.single-product .variations.shop_attributes tbody,
.single-product .variations tbody tr,
.single-product .variations tbody td { display: block; width: 100%; }
.single-product .variations tbody td.label { padding-bottom: 0.25rem; }
.single-product .variations tbody td.value { padding-top: 0; }
.single-product .variations tbody td.bcp-variation-picker-cell { padding-left: 0; padding-right: 0; }
.single-product .bcp-variation-row + .bcp-variation-row .bcp-variation-picker { margin-top: -0.25rem; }

/* ═══════════════════════════════════════════════════════════
   21. WOOCOMMERCE NOTICES
══════════════════════════════════════════════════════════════ */

/* Scoped hiding — only where theme provides equivalent feedback */
.single-product .woocommerce-message,
.single-product .woocommerce-info { display: none; }
#theme-cart-drawer .woocommerce-message { display: none; }

/* WooCommerce notices on other pages — styled to match theme */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 0.875rem 1.25rem;
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}
.woocommerce-message { background-color: rgba(64,81,51,0.1); border: 1px solid rgba(64,81,51,0.3); color: var(--color-foreground); }
.woocommerce-info    { background-color: rgba(186,110,40,0.1); border: 1px solid rgba(186,110,40,0.3); color: var(--color-foreground); }
.woocommerce-error   { background-color: rgba(185,28,28,0.1); border: 1px solid rgba(185,28,28,0.3); color: var(--color-foreground); }

/* ═══════════════════════════════════════════════════════════
   22. CHECKOUT (WOOCOMMERCE BLOCKS)
══════════════════════════════════════════════════════════════ */

body.woocommerce-checkout .site-main {
  padding-top: var(--header-height);
  padding-bottom: 4rem;
}
body.woocommerce-checkout .entry-content { max-width: 100%; }
body.woocommerce-checkout .page-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  padding: 2rem 0 1.5rem;
  color: var(--color-foreground);
}

/* Two-column layout */
@media (min-width: 768px) {
  body.woocommerce-checkout .wc-block-checkout {
    display: block;
  }
  body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout.is-large {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--checkout-gap, 2rem);
    align-items: start;
  }
}

body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-checkout__sidebar {
  min-width: 0; width: 100%; max-width: none;
}

body.woocommerce-checkout .wc-block-checkout__sidebar {
  background-color: var(--color-secondary);
  border-radius: var(--card-radius);
  padding: var(--section-padding, 2rem);
}

/* Inputs */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-select select,
body.woocommerce-checkout .wc-block-components-textarea textarea {
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  color: var(--color-foreground) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0.375rem !important;
  background-color: var(--color-background) !important;
  width: 100% !important; max-width: none !important;
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-select select:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(64,81,51,0.15) !important;
}

/* Place Order button */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-foreground) !important;
  border-radius: 9999px !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  padding: 1rem 2rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
  width: 100% !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover { opacity: 0.88 !important; }

/* Headings inside checkout */
body.woocommerce-checkout .wc-block-checkout h2,
body.woocommerce-checkout .wp-block-woocommerce-checkout-fields-block h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-foreground);
  margin-bottom: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════
   23. THANK YOU PAGE
══════════════════════════════════════════════════════════════ */

body.theme-thankyou-page { overflow-x: hidden; }
body.theme-thankyou-page .woocommerce-order { max-width: 48rem; margin-inline: auto; }
body.theme-thankyou-page .woocommerce-order h2,
body.theme-thankyou-page .woocommerce-order-details__title {
  font-family: var(--font-display); font-size: 1.5rem; padding: 0 0 1rem; color: var(--color-foreground);
}
body.theme-thankyou-page .woocommerce-order-overview {
  list-style: none; display: flex; flex-wrap: wrap; gap: 1rem;
  background-color: var(--color-secondary); border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 2rem;
}
body.theme-thankyou-page .woocommerce-order-overview li {
  font-size: 0.875rem; font-family: var(--font-body); color: var(--color-muted-foreground);
}
body.theme-thankyou-page .woocommerce-order-overview li strong { color: var(--color-foreground); }
body.theme-thankyou-page .woocommerce-order-details table {
  width: 100%; table-layout: fixed; border-collapse: collapse;
}
body.theme-thankyou-page .woocommerce-order-details tfoot th { text-align: left; }
body.theme-thankyou-page .woocommerce-order-details tfoot td { text-align: right; }
body.theme-thankyou-page .woocommerce-customer-details {
  display: flex; flex-direction: column; gap: 1.5rem;
}
body.theme-thankyou-page .woocommerce-customer-details address {
  max-width: 480px; overflow-wrap: break-word;
}
@media (min-width: 768px) {
  body.theme-thankyou-page .woocommerce-customer-details {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;
  }
  body.theme-thankyou-page .woocommerce-customer-details address { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════
   24. SHOP / ARCHIVE PAGE
══════════════════════════════════════════════════════════════ */

.woocommerce-archive .site-main { padding-top: var(--header-height); }
.woocommerce-archive .archive-header {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
}

/* ═══════════════════════════════════════════════════════════
   25. PAGE / 404 TEMPLATES
══════════════════════════════════════════════════════════════ */

.site-main { min-height: 60vh; }
.page-content-wrap { padding-top: calc(var(--header-height) + 2rem); padding-bottom: 4rem; }
.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
  color: var(--color-foreground);
}
.entry-content { font-family: var(--font-body); line-height: 1.7; color: var(--color-foreground); }

.error-404-wrap { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--header-height) - 8rem); }
.error-404-content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.error-404-heading { font-family: var(--font-display); font-size: 8rem; line-height: 1; color: var(--color-muted-foreground); opacity: 0.4; }
.error-404-message { font-size: 1.25rem; color: var(--color-muted-foreground); }

/* ═══════════════════════════════════════════════════════════
   26. RESPONSIVE FIXES
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .about-visual-inner { padding-bottom: 2.5rem; }
  .owner-visual-inner { padding-bottom: 1.25rem; }
  .faq-split         { grid-template-columns: 1fr; }
  .faq-answer-panel  { min-height: 14rem; }
  .hero-copy-col     { border-left: none; padding-left: 1rem; }
}

/* Scrollbar hide utility */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ═══════════════════════════════════════════════════════════
   27. WP ADMIN BAR FIX
══════════════════════════════════════════════════════════════ */

.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }