/*
Theme Name: Afis Yfes
Theme URI: https://rightquestions.com/afisyfes
Author: Thanasis
Author URI: https://rightquestions.com
Description: Custom WordPress theme for Afis Yfes ceramic art studio. Warm minimal design, mobile-first, lightweight.
Version: 1.0.3
Text Domain: afisyfes
*/

/* 
 * DESIGN SYSTEM
 * Adapted from Wolf Ceramics analysis + Client's "Warm Minimal" vision
 */

:root {
  /* Color Palette — Mediterranean warm palette */
  --cream: #F7F3EE;
  --warm-white: #FDFBF8;
  --sand: #EDE8E0;
  --clay: #C4A882;
  --clay-light: #E8DDD0;
  --clay-dark: #8B7355;
  --terracotta: #B8694A;
  --terracotta-muted: #D4A68C;
  --olive: #5C5549;
  --dark-warm: #3C352E;
  --text-body: #5C5549;
  --white: #FFFFFF;

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --section-padding: clamp(60px, 10vw, 120px);

  /* Spacing — Wolf-inspired generous spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  --container-width: 1400px;
  --container-padding: 20px;
  /* Mobile padding, 40px on desktop */

  /* Misc — Wolf-inspired rounded, shadow-free */
  --radius-card: 16px;
  --radius-btn: 30px;
  --transition-fast: 0.28s ease;
  --transition-normal: 0.4s ease;
}

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

body {
  font-family: var(--font-body);
  color: var(--text-body);
  background-color: var(--warm-white);
  line-height: 1.7;
  font-size: 15px;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--dark-warm);
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 22px;
}

@media (min-width: 768px) {
  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 32px;
  }

  :root {
    --container-padding: 40px;
  }
}

a {
  color: var(--dark-warm);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  text-decoration: none;
  color: var(--terracotta);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Layout Objects */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

section {
  padding: 56px 0;
}

@media (min-width: 768px) {
  section {
    padding: var(--space-10) 0;
  }
}

/* Helper Classes */
.text-center {
  text-align: center;
}

.mb-2 {
  margin-bottom: var(--space-2);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-6 {
  margin-bottom: var(--space-6);
}

.mb-8 {
  margin-bottom: var(--space-8);
}

.mt-2 {
  margin-top: var(--space-2);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-6 {
  margin-top: var(--space-6);
}

/* Buttons */
.btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 14px 36px;
  border-radius: var(--radius-btn);
  transition: all var(--transition-normal);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  border: 1.5px solid transparent;
}

.btn-primary {
  background: var(--dark-warm);
  color: var(--warm-white);
  border-color: var(--dark-warm);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--warm-white);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--dark-warm);
  border-color: var(--dark-warm);
}

.btn-outline:hover {
  background: var(--dark-warm);
  color: var(--warm-white);
  transform: translateY(-1px);
}

.btn-outline-light {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}

.btn-outline-light:hover {
  background: var(--cream);
  color: var(--dark-warm);
}

/* Site Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px 0;
  background-color: rgba(253, 251, 248, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color var(--transition-fast),
              padding var(--transition-fast),
              backdrop-filter var(--transition-fast),
              box-shadow var(--transition-fast);
  display: flex;
  align-items: center;
}

/* Scrolled state — glass effect */
.site-header.scrolled {
  background-color: rgba(253, 251, 248, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 12px 0;
  box-shadow: 0 1px 0 rgba(92, 85, 73, 0.08);
}

/* Non-hero pages need top padding to compensate for fixed header */
body:not(.has-hero) .site-main {
  padding-top: 84px;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-logo-text {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-style: italic;
  color: var(--dark-warm);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* Mobile slide-in navigation panel */
.main-navigation-wrapper {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(380px, 85vw);
  height: 100vh;
  height: 100dvh;
  background: var(--cream);
  z-index: 1001;
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transition: right 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -10px 0 60px rgba(60, 53, 46, 0.15);
}

.main-navigation-wrapper.is-open {
  right: 0;
}

/* Mobile nav branding */
.mobile-nav-header {
  padding: var(--space-5) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--sand);
}

.mobile-nav-header .mobile-nav-logo {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 300;
  font-style: italic;
  color: var(--dark-warm);
  letter-spacing: 1px;
}

.mobile-nav-header .mobile-nav-tagline {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--olive);
  margin-top: 6px;
}

/* Force dark text in mobile nav panel */
.main-navigation-wrapper .main-navigation a {
  color: var(--dark-warm) !important;
}

.main-navigation-wrapper .main-navigation a:hover {
  color: var(--terracotta) !important;
}

.main-navigation {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.main-navigation-wrapper .main-navigation {
  padding: var(--space-4) var(--space-5);
}

.main-navigation li {
  border-bottom: 1px solid var(--sand);
}

.main-navigation-wrapper .main-navigation li {
  border-bottom: 1px solid var(--sand);
  opacity: 0;
  transform: translateX(20px);
}

.main-navigation-wrapper.is-open .main-navigation li {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.main-navigation-wrapper.is-open .main-navigation li:nth-child(1) { transition-delay: 0.08s; }
.main-navigation-wrapper.is-open .main-navigation li:nth-child(2) { transition-delay: 0.12s; }
.main-navigation-wrapper.is-open .main-navigation li:nth-child(3) { transition-delay: 0.16s; }
.main-navigation-wrapper.is-open .main-navigation li:nth-child(4) { transition-delay: 0.2s; }
.main-navigation-wrapper.is-open .main-navigation li:nth-child(5) { transition-delay: 0.24s; }
.main-navigation-wrapper.is-open .main-navigation li:nth-child(6) { transition-delay: 0.28s; }
.main-navigation-wrapper.is-open .main-navigation li:nth-child(7) { transition-delay: 0.32s; }

.main-navigation a {
  display: block;
  padding: var(--space-3) 0;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  color: var(--dark-warm);
  transition: color var(--transition-fast);
}

.main-navigation a:hover {
  color: var(--terracotta);
}

/* Mobile nav specific link styling */
.main-navigation-wrapper .main-navigation a {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0.5px;
  padding: 14px 0;
  color: var(--dark-warm) !important;
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.main-navigation-wrapper .main-navigation a:hover {
  color: var(--terracotta) !important;
  padding-left: 8px;
}

/* Mobile nav footer */
.mobile-nav-footer {
  padding: var(--space-4) var(--space-5);
  margin-top: auto;
  border-top: 1px solid var(--sand);
}

.mobile-nav-footer .mobile-nav-contact {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--olive);
  letter-spacing: 1px;
  line-height: 1.8;
}

.mobile-nav-footer .mobile-nav-contact a {
  color: var(--dark-warm) !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

.mobile-nav-footer .mobile-nav-contact a:hover {
  color: var(--terracotta) !important;
}

/* Desktop nav — inline inside header */
.main-navigation-desktop {
  display: none;
}

/* Quiet Tier removed — secondary items in burger only */
.nav-divider,
.secondary-navigation {
  display: none;
}

/* Desktop dropdown hidden on mobile */
.desktop-dropdown {
  display: none;
}

@media (min-width: 992px) {
  .desktop-dropdown {
    display: block;
  }
  .main-navigation-desktop {
    display: block;
    position: static;
    width: auto;
    height: auto;
    background: none;
    padding: 0;
    overflow: visible;
    transition: none;
  }

  /* Desktop dropdown — translucent glass panel (V3) */
  .desktop-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 160px;
    padding: 16px 22px;
    border-radius: 14px;
    background: rgba(253, 251, 248, 0.75);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(237, 232, 224, 0.6);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.32s ease, transform 0.32s ease;
    text-align: right;
  }

  .desktop-dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .desktop-dropdown a {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 300;
    font-style: italic;
    color: var(--terracotta);
    text-decoration: none;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    transition: color 0.2s;
  }

  .desktop-dropdown a:hover {
    color: var(--dark-warm);
  }

  /* Hero pages override .header-actions a to white globally — exempt the
     dropdown so it keeps its terracotta italic on glass regardless of header
     state. The selector below is intentionally one class deeper than the hero
     override at ~line 2200 so it wins source-order ties, and the override
     also lives outside the @media block. */

  .main-navigation {
    flex-direction: row;
    gap: var(--space-5);
  }

  .main-navigation li {
    border-bottom: none;
    white-space: nowrap;
  }

  .main-navigation a {
    display: inline;
    padding: 0;
    font-size: 13px;
    letter-spacing: 1.2px;
    color: var(--olive);
    position: relative;
  }

  .main-navigation a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--terracotta);
    transition: width var(--transition-fast);
  }

  .main-navigation a:hover::after {
    width: 100%;
  }

  .main-navigation a:hover {
    color: var(--terracotta);
  }
}

/* Hide mobile nav panel on desktop */
@media (min-width: 992px) {
  .main-navigation-wrapper {
    display: none !important;
  }
}

/* Navigation overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(60, 53, 46, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.nav-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* Body scroll lock when mobile nav is open */
body.nav-is-open {
  overflow: hidden !important;
}

/* Ensure search overlay doesn't block nav */
.search-overlay:not(.is-open) {
  pointer-events: none;
}

.header-actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  font-size: 13px;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.cart-link {
  display: none;
}

@media (min-width: 768px) {
  .cart-link {
    display: block;
  }
}

/* Amphora burger — two strokes at rest, morphs into amphora silhouette when open */
.mobile-menu-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--dark-warm);
  z-index: 160;
  transition: background 0.3s cubic-bezier(.65,.02,.3,1), transform 0.4s cubic-bezier(.65,.02,.3,1);
}

.mobile-menu-toggle:hover {
  background: rgba(184, 105, 74, 0.07); /* --terracotta at 7% */
  transform: translateY(-1px);
}

.mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.amphora-svg {
  width: 28px;
  height: 28px;
  overflow: visible;
}

.amphora-svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  transition:
    d 0.75s cubic-bezier(.65,.02,.3,1),
    opacity 0.5s cubic-bezier(.65,.02,.3,1),
    stroke 0.35s ease,
    stroke-width 0.45s ease;
  transform-box: fill-box;
  transform-origin: center;
}

/* Rest state: two horizontal strokes; amphora neck + base hidden */
.amphora-neck,
.amphora-base { opacity: 0; }

/* Hover: bottom stroke warms to terracotta */
.mobile-menu-toggle:hover .amphora-lineB {
  stroke: var(--terracotta);
}

/* Open state: strokes curl into the amphora silhouette */
.mobile-menu-toggle[aria-expanded="true"] .amphora-lineA {
  d: path("M 20 10 Q 18 18, 14 26 Q 12 36, 18 42");
  stroke-width: 1.3;
}
.mobile-menu-toggle[aria-expanded="true"] .amphora-lineB {
  d: path("M 36 10 Q 38 18, 42 26 Q 44 36, 38 42");
  stroke: currentColor;
  stroke-width: 1.3;
}
.mobile-menu-toggle[aria-expanded="true"] .amphora-neck,
.mobile-menu-toggle[aria-expanded="true"] .amphora-base {
  opacity: 1;
}

/* Fallback for browsers without `d` property animation support — snap swap, still looks fine */
@supports not (d: path("M 0 0")) {
  .amphora-svg path {
    transition: opacity 0.5s ease, stroke 0.35s ease;
  }
}

@media (min-width: 992px) {
  .mobile-menu-toggle {
    display: grid;
  }
}

/* Hide mega-menu inside mobile panel */
@media (max-width: 991px) {
  .mega-menu {
    display: none !important;
  }
}

/* Mega Menu — Shop dropdown (desktop only) */
.mega-menu {
  display: none;
}

@media (min-width: 992px) {
  .menu-item-has-children {
    position: static;
  }

  .mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 200;
    padding-top: 12px;
    max-width: calc(100vw - 40px);
  }

  .mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mega-menu-inner {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: rgba(253, 251, 248, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(237, 232, 224, 0.6);
    border-radius: var(--radius-card);
    box-shadow: 0 12px 40px rgba(60, 53, 46, 0.1);
  }

  .mega-menu-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    transition: transform var(--transition-fast);
  }

  .mega-menu-card:hover {
    transform: translateY(-4px);
  }

  .mega-menu-thumb {
    width: 140px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: calc(var(--radius-card) - 4px);
  }

  .mega-menu-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
  }

  .mega-menu-card:hover .mega-menu-thumb img {
    transform: scale(1.06);
  }

  .mega-menu-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--olive);
    transition: color var(--transition-fast);
  }

  .mega-menu-card:hover .mega-menu-label {
    color: var(--terracotta);
  }
}

/* ============================================
   CINEMATIC HERO — Full-screen video + slideshow
   ============================================ */
.hero-cinematic {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background layers */
.hero-bg {
  position: absolute;
  inset: -40px;
  z-index: 1;
  /* First frame of the hero video as a fallback — shown if everything
     above (video, slideshow) is still loading, so the -40px bleed never
     reveals a flat dark band. */
  background: var(--dark-warm) center/cover url("images/hero-poster.jpg");
}

/* Video — plays once then fades out.
   The wrapper carries the poster image (set inline in hero.php) so iOS
   Safari shows the first frame instead of a black box while <video> boots. */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 1.8s ease;
}

.hero-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The video is portrait (480x640); before its metadata loads the browser
     has no intrinsic ratio, so object-fit has nothing to cover and the bare
     element shows through at the sides. Paint the poster onto the element
     itself so that gap is never visible. */
  background: center/cover no-repeat url("images/hero-poster.jpg");
}

.hero-video-wrap.fade-out {
  opacity: 0;
}

/* Photo slideshow — hidden until video ends */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.hero-slides.visible {
  opacity: 1;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s ease;
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide:nth-child(1) img { animation: heroKen1 22s ease-in-out infinite alternate; }
.hero-slide:nth-child(2) img { animation: heroKen2 20s ease-in-out infinite alternate; }
.hero-slide:nth-child(3) img { animation: heroKen3 24s ease-in-out infinite alternate; }
.hero-slide:nth-child(4) img { animation: heroKen4 18s ease-in-out infinite alternate; }

@keyframes heroKen1 { 0% { transform: scale(1); } 100% { transform: scale(1.12) translate(-1.5%, -1%); } }
@keyframes heroKen2 { 0% { transform: scale(1.08) translate(1%, 0); } 100% { transform: scale(1) translate(-1%, 1.5%); } }
@keyframes heroKen3 { 0% { transform: scale(1); } 100% { transform: scale(1.1) translate(1.5%, -1.5%); } }
@keyframes heroKen4 { 0% { transform: scale(1.06) translate(-1%, -0.5%); } 100% { transform: scale(1) translate(0.5%, 1%); } }

/* Overlays */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(10,9,8,0.15) 0%, rgba(10,9,8,0.65) 70%),
    linear-gradient(to bottom, rgba(10,9,8,0.35) 0%, rgba(10,9,8,0.08) 40%, rgba(10,9,8,0.55) 100%);
}

.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0.03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: heroGrain 0.5s steps(1) infinite;
}

@keyframes heroGrain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 4%); }
  50% { transform: translate(4%, -2%); }
  75% { transform: translate(-4%, -4%); }
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  box-shadow: inset 0 0 200px rgba(0,0,0,0.45);
  pointer-events: none;
}

/* Content */
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 900px;
  padding: 40px 40px 100px;
}

/* Studio name */
.hero-studio {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: rgba(255,255,255,0);
  margin-bottom: 48px;
  display: inline-block;
  position: relative;
}

.hero-studio::before,
.hero-studio::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 1px;
  background: rgba(255,255,255,0.25);
}

.hero-studio::before { right: calc(100% + 16px); }
.hero-studio::after { left: calc(100% + 16px); }

.hero-studio.visible {
  color: rgba(255,255,255,0.5);
  transition: color 1.2s ease 0.3s;
}

.hero-studio.visible::before,
.hero-studio.visible::after {
  width: 40px;
  transition: width 1s ease 0.6s;
}

/* Title */
.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(52px, 9vw, 110px);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: 40px;
  letter-spacing: 0.02em;
  color: #fff;
}

.hero-title em {
  font-style: italic;
  color: var(--terracotta);
}

.hero-title-line {
  display: block;
  overflow: visible;
}

/* Clay-forming characters */
.hero-char {
  display: inline-block;
  opacity: 0;
  color: #fff;
}

.hero-char.space {
  width: 0.25em;
}

.hero-char.em-char {
  font-style: italic;
  color: var(--terracotta);
}

.hero-char.forming {
  opacity: 1;
  animation: heroCharForm 2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes heroCharForm {
  0% {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(14px);
  }
  40% {
    opacity: 0.4;
    transform: translateY(3px);
    filter: blur(8px);
  }
  70% {
    opacity: 0.75;
    transform: translateY(1px);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero-char.settled {
  opacity: 1;
}

/* Clay dust particles */
.clay-dust {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
}

.clay-dust.burst {
  animation: heroDustFly 0.7s ease-out forwards;
}

@keyframes heroDustFly {
  0% { opacity: 0.7; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}

/* Divider */
.hero-divider {
  width: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--terracotta), transparent);
  margin: 0 auto 40px;
}

.hero-divider.visible {
  width: 120px;
  transition: width 1.2s ease;
}

/* Subtitle */
.hero-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  color: rgba(255,255,255,0);
  max-width: 480px;
  margin: 0 auto 44px;
}

.hero-subtitle.visible {
  color: rgba(255,255,255,0.6);
  transition: color 1.5s ease;
}

/* Buttons */
.hero-buttons {
  display: flex;
  gap: 32px;
  justify-content: center;
  opacity: 0;
  transform: translateY(24px);
  margin-top: 8px;
}

.hero-buttons.visible {
  opacity: 1;
  transform: translateY(0);
  transition: all 1s ease;
}

.btn-hero-primary,
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 40px;
  padding: 16px 36px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: all 0.4s ease;
}

.btn-hero-primary:hover,
.btn-hero-secondary:hover {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}

/* Slide indicators */
.hero-indicators {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
}

.hero-indicators.visible {
  opacity: 1;
  transition: opacity 1s ease;
}

.hero-indicator {
  width: 3px;
  height: 24px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.4s ease;
  border: none;
  padding: 0;
}

.hero-indicator.active {
  height: 40px;
  background: var(--terracotta);
}

.hero-indicator:hover {
  background: rgba(255,255,255,0.35);
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
}

.hero-scroll.visible {
  opacity: 1;
  transition: opacity 1s ease;
}

.hero-scroll-text {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.3);
}

.hero-scroll-line {
  width: 1px;
  height: 48px;
  position: relative;
  overflow: hidden;
}

.hero-scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.45), transparent);
  animation: heroScrollDrop 2.2s ease-in-out infinite;
}

@keyframes heroScrollDrop {
  0% { top: -100%; }
  100% { top: 200%; }
}

/* Corner accents */
.hero-corner {
  position: absolute;
  z-index: 10;
  width: 28px;
  height: 28px;
  opacity: 0;
}

.hero-corner.visible {
  opacity: 1;
  transition: opacity 1.5s ease;
}

.hero-corner--tl { top: 28px; left: 28px; border-top: 1px solid rgba(255,255,255,0.12); border-left: 1px solid rgba(255,255,255,0.12); }
.hero-corner--tr { top: 28px; right: 28px; border-top: 1px solid rgba(255,255,255,0.12); border-right: 1px solid rgba(255,255,255,0.12); }
.hero-corner--bl { bottom: 28px; left: 28px; border-bottom: 1px solid rgba(255,255,255,0.12); border-left: 1px solid rgba(255,255,255,0.12); }
.hero-corner--br { bottom: 28px; right: 28px; border-bottom: 1px solid rgba(255,255,255,0.12); border-right: 1px solid rgba(255,255,255,0.12); }

/* Hero mobile */
@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(40px, 12vw, 64px);
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  .hero-indicators,
  .hero-corner {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-char {
    opacity: 1;
    animation: none !important;
  }
  .hero-char.forming {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Collections Grid (Homepage) */
.collections-header {
  margin-bottom: var(--space-6);
}

.collections-heading {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 300;
  color: var(--dark-warm);
}

.collections-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}

.collections-grid .collection-card {
  width: 100%;
  max-width: 400px;
}

@media (min-width: 768px) {
  .collections-grid .collection-card {
    width: calc(50% - var(--space-5));
    max-width: none;
  }
}

@media (min-width: 992px) {
  .collections-grid .collection-card {
    width: calc(33.333% - var(--space-5) * 2 / 3);
  }
}

.collection-card {
  text-decoration: none;
  display: block;
}

.collection-card-image {
  aspect-ratio: 3 / 4;
  /* Arch shape (tombstone) typical of luxury ceramic branding */
  border-radius: 160px 160px 8px 8px;
  overflow: hidden;
  margin-bottom: var(--space-4);
  background-color: var(--cream);
  position: relative;
}

.collection-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

/* Hover media — either a looped <video> or a second <img>. Both sit absolutely
   over the still photo and fade in on hover. */
.collection-hover-video,
.collection-hover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Default vertical anchor matches the underlying photo crop. Override per-card
     via --hover-video-y when the source framing differs from the still. */
  object-position: center var(--hover-video-y, 50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 2;
}

/* Hover-driven reveal only on devices that actually hover. iOS Safari makes the
   first tap activate :hover and keeps it sticky until another element is tapped,
   which left the second media covering the photo after a tap with no way back.
   Scoping this to (hover: hover) means touch devices never enter the hover state —
   the still photo stays put and a tap navigates to the portfolio page as expected. */
@media (hover: hover) and (pointer: fine) {
  .collection-card.has-hover-media:hover .collection-hover-video,
  .collection-card.has-hover-media:hover .collection-hover-image {
    opacity: 1;
  }
  .collection-card.has-hover-media:hover .collection-card-image img {
    transform: scale(1);
  }
}
.collection-hover-video.is-playing {
  opacity: 1;
}

.collection-card-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 300;
  color: var(--dark-warm);
  margin-bottom: var(--space-1);
  transition: color var(--transition-fast);
}

.collection-card:hover .collection-card-title {
  color: var(--terracotta);
}

.collection-card-desc {
  font-size: 14px;
  color: var(--olive);
  line-height: 1.6;
  font-weight: 400;
}

/* Process Teaser (Homepage) */
.process-teaser {
  padding: var(--section-padding) 0;
}

.process-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 992px) {
  .process-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

.process-intro h2 {
  font-family: var(--font-heading);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--dark-warm);
  margin-bottom: var(--space-4);
}

.process-intro p {
  color: var(--olive);
  line-height: 1.8;
  font-size: 16px;
  margin-bottom: var(--space-5);
  max-width: 420px;
}

.process-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--terracotta);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
}

.process-link:hover {
  color: var(--clay-dark);
}

@media (min-width: 992px) {
  .process-intro {
    position: sticky;
    top: 120px;
    align-self: start;
  }
}

/* Process Timeline */
.process-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  position: relative;
  padding-top: var(--space-2);
}

.process-timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--sand);
}

/* The animated timeline fill */
.process-timeline::after {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  width: 1px;
  background-color: var(--terracotta);
  /* Use the CSS variable driven by our JS scroll listener */
  height: var(--timeline-progress, 0%);
  transition: height 0.1s ease-out;
}

.timeline-step {
  display: flex;
  gap: var(--space-5);
  position: relative;
}

.timeline-number {
  position: relative;
  z-index: 2;
  flex: 0 0 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--cream);
  border: 1px solid var(--sand);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--terracotta);
  transition: all var(--transition-normal);
}

.timeline-step:hover .timeline-number {
  background-color: var(--terracotta);
  color: var(--cream);
  border-color: var(--terracotta);
  transform: scale(1.1);
}

.timeline-content {
  flex: 1;
  padding-top: 8px; /* Align text exactly with center of number circle */
}

.timeline-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 300;
  color: var(--dark-warm);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
  transition: color var(--transition-fast), transform var(--transition-fast);
  transform-origin: left;
}

.timeline-step:hover .timeline-title {
  color: var(--terracotta);
}

/* Dynamic Scroll Active States */
.timeline-step.is-active .timeline-number {
  background-color: var(--terracotta);
  color: var(--white);
  border-color: var(--terracotta);
  box-shadow: 0 4px 12px rgba(184, 105, 74, 0.25);
}

.timeline-step.is-active .timeline-title {
  color: var(--terracotta);
}

.timeline-text {
  font-size: 16px;
  color: var(--olive);
  line-height: 1.7;
  max-width: 440px;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.timeline-step.is-active .timeline-text {
  opacity: 1;
}

/* Feature Grid */
.product-grid,
.workshop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .workshop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }

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

/* Homepage preview: cap at 2 columns since only 2 cards */
.workshop-grid--preview {
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .workshop-grid--preview {
    grid-template-columns: repeat(2, 1fr);
  }
}

.product-card {
  text-align: left;
  transition: var(--transition-normal);
  display: block;
}

.product-image-wrapper {
  background: var(--warm-white);
  aspect-ratio: 1/1;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: var(--space-1);
  position: relative;
}

.product-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.4s ease;
}

.product-card:hover .product-image-wrapper img {
  filter: brightness(0.92);
}

.product-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
  color: var(--dark-warm);
}

.product-price {
  color: var(--olive);
  font-size: 13px;
}

/* Workshop Card */
.workshop-card {
  background-color: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: none;
  box-shadow: 0 4px 20px rgba(60, 53, 46, 0.04);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.workshop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(60, 53, 46, 0.08); /* Warm premium shadow on hover */
}

.workshop-image {
  background: var(--warm-white);
  height: 220px;
}

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

.workshop-content {
  padding: var(--space-4);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.workshop-date {
  color: var(--terracotta);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-1);
}

.workshop-title {
  font-size: 20px;
  margin-bottom: var(--space-2);
  color: var(--dark-warm);
}

.workshop-meta {
  font-size: 14px;
  color: var(--olive);
  margin-bottom: var(--space-3);
}

.workshop-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--sand);
  padding-top: var(--space-3);
}

/* Split Section (About) */
.split-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 992px) {
  .split-section {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

.split-image {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--warm-white);
}

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

/* Story Section (Homepage) */
.story-section {
  padding: var(--section-padding) 0;
}

.story-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 992px) {
  .story-layout {
    /* Image takes ~40% so it doesn't dominate the section. */
    grid-template-columns: 2fr 3fr;
    gap: var(--space-10);
  }
}

.story-image-wrap {
  position: relative;
}

/* A second arched outline peeking out behind the photo — soft editorial frame
   that ties the image to the brand's "Mediterranean arch" language. */
.story-image-wrap::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--clay-light);
  /* Same arched-window shape as the photo, scales with the landscape aspect. */
  border-radius: 50% 50% 12px 12px / 35% 35% 12px 12px;
  z-index: 0;
  pointer-events: none;
}

.story-image {
  position: relative;
  z-index: 1;
  /* Landscape Roman-arch window — top corners merge into a wide semi-ellipse so
     the section reads in the same brand language as the rest of the site even
     though the photo is wider than tall. */
  border-radius: 50% 50% 12px 12px / 35% 35% 12px 12px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  /* Subtle elevation + inset hairline (a faux passe-partout edge) */
  box-shadow: 0 24px 60px -28px rgba(60, 53, 46, 0.28),
              inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

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

.story-heading {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 300;
}

.story-content p {
  color: var(--olive);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}

.story-quote {
  border-left: 3px solid var(--terracotta);
  padding-left: var(--space-4);
  margin: var(--space-5) 0;
}

.story-quote p {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--dark-warm);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Pull-quote word-by-word reveal — fires when the parent .story-section.reveal
   becomes .active (re-uses the existing scroll observer; no extra JS). Each
   <span class="qword"> is one word; nth-child indexes 1..N stagger the delay. */
.story-quote .qword { display: inline-block; }
.story-quote em { color: var(--terracotta); font-style: italic; }

.js .story-section.reveal .story-quote .qword {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .story-section.reveal.active .story-quote .qword { opacity: 1; transform: none; }
.js .story-section.reveal.active .story-quote .qword:nth-child(1)  { transition-delay: 0.10s; }
.js .story-section.reveal.active .story-quote .qword:nth-child(2)  { transition-delay: 0.18s; }
.js .story-section.reveal.active .story-quote .qword:nth-child(3)  { transition-delay: 0.26s; }
.js .story-section.reveal.active .story-quote .qword:nth-child(4)  { transition-delay: 0.34s; }
.js .story-section.reveal.active .story-quote .qword:nth-child(5)  { transition-delay: 0.42s; }
.js .story-section.reveal.active .story-quote .qword:nth-child(6)  { transition-delay: 0.50s; }
.js .story-section.reveal.active .story-quote .qword:nth-child(7)  { transition-delay: 0.58s; }
.js .story-section.reveal.active .story-quote .qword:nth-child(8)  { transition-delay: 0.66s; }
.js .story-section.reveal.active .story-quote .qword:nth-child(9)  { transition-delay: 0.74s; }
.js .story-section.reveal.active .story-quote .qword:nth-child(10) { transition-delay: 0.82s; }
.js .story-section.reveal.active .story-quote .qword:nth-child(11) { transition-delay: 0.90s; }
.js .story-section.reveal.active .story-quote .qword:nth-child(12) { transition-delay: 0.98s; }
.js .story-section.reveal.active .story-quote .qword:nth-child(13) { transition-delay: 1.06s; }
.js .story-section.reveal.active .story-quote .qword:nth-child(14) { transition-delay: 1.14s; }

@media (prefers-reduced-motion: reduce) {
  .js .story-section.reveal .story-quote .qword { opacity: 1; transform: none; transition: none; }
}

/* Workshops Banner (Homepage Dark Section) */
.workshops-banner {
  position: relative;
  background-color: var(--dark-warm);
  padding: var(--section-padding) 0;
  text-align: center;
  overflow: hidden;
}

.workshops-banner-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}

.workshops-banner .container {
  position: relative;
  z-index: 1;
}

.workshops-banner-content {
  max-width: 640px;
  margin: 0 auto;
}

.workshops-banner-heading {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.15;
}

.workshops-banner-heading em {
  font-style: italic;
}

.workshops-banner-desc {
  font-size: 16px;
  color: var(--clay-light);
  line-height: 1.7;
  margin-bottom: var(--space-5);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.workshops-banner-cta {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.workshops-btn-primary {
  background-color: var(--cream);
  color: var(--dark-warm);
  border-color: var(--cream);
}

.workshops-btn-primary:hover {
  background-color: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--cream);
}

/* Instagram Grid (Homepage) */
.instagram-section {
  padding: var(--section-padding) 0;
}

.instagram-header {
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.instagram-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--terracotta);
  padding: 6px;            /* keeps the tap target comfortable */
  transition: color 0.25s ease, transform 0.25s ease;
}

.instagram-handle:hover {
  color: var(--clay-dark);
  transform: translateY(-1px);
}

/* Instagram glyph drawn as a 26x26 squircle with an inner ring + dot,
   built purely from borders so no SVG/PNG asset is needed. */
.instagram-glyph {
  width: 26px;
  height: 26px;
  display: inline-block;
  border: 1.6px solid currentColor;
  border-radius: 7px;
  position: relative;
}
.instagram-glyph::before {
  content: "";
  position: absolute;
  inset: 4.5px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
}
.instagram-glyph::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 50%;
}

.instagram-heading {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 300;
}
.instagram-heading em {
  font-style: italic;
  color: var(--terracotta);
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

@media (min-width: 768px) {
  .instagram-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
  }
}

.instagram-item {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(60, 53, 46, 0.04);
}

.instagram-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.4s ease;
  filter: saturate(0.94);
}

.instagram-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(60, 53, 46, 0) 60%, rgba(60, 53, 46, 0.28) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Corner badge that fades in on hover — terracotta circle with an ↗ glyph. */
.instagram-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1;
  opacity: 0;
  transform: translate(4px, -4px);
  transition: opacity 0.4s ease,
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 6px 16px -6px rgba(184, 105, 74, 0.6);
  pointer-events: none;
}

.instagram-item:hover img {
  transform: scale(1.05);
  filter: saturate(1.04) brightness(1.02);
}
.instagram-item:hover::after {
  opacity: 1;
}
.instagram-item:hover .instagram-badge {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .instagram-item img,
  .instagram-item::after,
  .instagram-badge {
    transition: none;
  }
}

/* Newsletter Section */
.newsletter-section {
  padding: var(--section-padding) 0;
  text-align: center;
}

.newsletter-content {
  max-width: 560px;
  margin: 0 auto;
}

.newsletter-heading {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 300;
  color: var(--dark-warm);
}

.newsletter-subtitle {
  color: var(--olive);
  font-size: 16px;
  margin-bottom: var(--space-5);
}

/* Pill-shaped form */
.newsletter-pill {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--sand);
  border-radius: var(--radius-btn);
  overflow: hidden;
  transition: border-color var(--transition-fast);
  background: var(--white);
}

.newsletter-pill:focus-within {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(184, 105, 74, 0.1);
}

.newsletter-pill-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--dark-warm);
  outline: none;
}

.newsletter-pill-input::placeholder {
  color: var(--clay);
}

.newsletter-pill-btn {
  background: var(--dark-warm);
  color: var(--cream);
  border: none;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
  border-radius: 0 28px 28px 0;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.newsletter-pill-btn:hover {
  background-color: var(--terracotta);
  color: var(--white);
}

.newsletter-privacy {
  font-size: 12px;
  color: var(--clay-dark);
  margin-top: var(--space-3);
}

/* Newsletter mobile: stack input and button */
@media (max-width: 480px) {
  .newsletter-pill {
    flex-direction: column;
    border-radius: 16px;
  }

  .newsletter-pill-input {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--sand);
  }

  .newsletter-pill-btn {
    width: 100%;
    border-radius: 0 0 14px 14px;
  }
}

/* Footer */
/* =============================================
   FOOTER
   ============================================= */
.site-footer {
  background-color: var(--dark-warm);
  color: rgba(255, 255, 255, 0.6);
  padding: 0 0 var(--space-4);
  font-size: 14px;
}

/* Footer Newsletter band — refined editorial signup, sits above .footer-main */
.footer-newsletter {
  position: relative;
  padding: clamp(56px, 9vw, 104px) var(--space-3) clamp(48px, 8vw, 88px);
  margin-bottom: clamp(32px, 5vw, 56px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  overflow: hidden;
}

/* Atmospheric depth — soft warm light pooled at the center */
.footer-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 90% 70% at 50% 38%,
      rgba(212, 166, 140, 0.08) 0%,
      rgba(212, 166, 140, 0) 60%
    ),
    linear-gradient(
      to bottom,
      rgba(184, 105, 74, 0.04) 0%,
      transparent 30%
    );
  pointer-events: none;
}

.footer-newsletter-inner {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
}

/* Eyebrow with editorial flanking hairlines */
.footer-newsletter-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 var(--space-4);
  color: var(--terracotta-muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.footer-newsletter-eyebrow::before,
.footer-newsletter-eyebrow::after {
  content: "";
  flex: 0 0 36px;
  height: 1px;
  background-color: currentColor;
  opacity: 0.5;
}

.footer-newsletter-eyebrow span {
  display: inline-block;
  padding-top: 1px;
}

.footer-newsletter-heading {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4.8vw, 52px);
  font-weight: 300;
  color: var(--cream);
  margin: 0 0 var(--space-3);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.footer-newsletter-heading .text-italic-accent {
  color: var(--terracotta-muted);
  font-style: italic;
  font-weight: 300;
}

.footer-newsletter-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 auto var(--space-5);
  max-width: 380px;
}

.footer-newsletter-subtitle em {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 16px;
  color: var(--terracotta-muted);
  letter-spacing: 0.2px;
}

/* Pill form — refined for the dark band */
.footer-newsletter-form.newsletter-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 460px;
  margin: 0 auto;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.footer-newsletter-form .newsletter-pill-input {
  color: var(--cream);
  padding: 18px 22px;
  letter-spacing: 0.2px;
}

.footer-newsletter-form .newsletter-pill-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
  font-style: italic;
}

.footer-newsletter-form.newsletter-pill:focus-within {
  border-color: var(--terracotta-muted);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(212, 166, 140, 0.12);
}

.footer-newsletter-form .newsletter-pill-btn {
  background: var(--terracotta);
  color: var(--cream);
  padding: 16px 30px;
  letter-spacing: 1.4px;
}

.footer-newsletter-form .newsletter-pill-btn:hover {
  background: var(--terracotta-muted);
  color: var(--dark-warm);
}

.footer-newsletter-form .newsletter-pill-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.footer-newsletter-feedback {
  display: none;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  margin: var(--space-3) 0 0;
}

.footer-newsletter-feedback--success {
  color: var(--terracotta-muted);
}

.footer-newsletter-feedback--error {
  color: #E8A29A;
}

.footer-newsletter-privacy {
  margin: var(--space-4) auto 0;
  max-width: 460px;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.42);
}

.footer-newsletter-privacy a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
}

.footer-newsletter-privacy a:hover {
  color: var(--terracotta-muted);
}

.footer-newsletter-privacy-sep {
  display: inline-block;
  margin: 0 7px;
  color: var(--terracotta);
  opacity: 0.55;
}

@media (max-width: 480px) {
  .footer-newsletter-eyebrow::before,
  .footer-newsletter-eyebrow::after {
    flex-basis: 24px;
  }
  .footer-newsletter-eyebrow {
    gap: 10px;
    letter-spacing: 3px;
  }
}

/* Footer Main — horizontal layout on desktop */
.footer-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--space-4);
}

/* Footer Brand */
.footer-brand {
  text-align: center;
}

.footer-brand-link {
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.footer-logo-img {
  width: 36px;
  height: auto;
  opacity: 0.8;
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
  display: block;
  margin-bottom: 6px;
}

.footer-brand-desc {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 10px;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.3s ease;
}

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

/* Footer Nav Grid */
.footer-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0 clamp(48px, 6vw, 80px);
  justify-content: center;
}

/* Footer Headings */
.footer-heading {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--terracotta-muted);
  margin-bottom: 10px;
}

/* Footer Links */
.footer-links {
  list-style: none;
}

.footer-links li {
  padding: 4px 0;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 13px;
  display: inline;
  padding: 0;
  transition: color 0.3s ease;
}

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

/* Footer Bottom Bar */
.footer-bottom {
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.footer-bottom a {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 0.5px;
  transition: color 0.3s ease;
}

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

@media (min-width: 768px) {
  .footer-main {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
  }

  .footer-brand {
    text-align: left;
    flex-shrink: 0;
  }

  .footer-brand-link {
    align-items: flex-start;
  }

  .footer-nav-grid {
    gap: 0 clamp(48px, 5vw, 72px);
    justify-content: flex-end;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Header on pages with Hero — white text for contrast (only when NOT scrolled) */
body.has-hero .site-header:not(.scrolled) {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.has-hero .site-header:not(.scrolled) .site-logo-text,
body.has-hero .site-header:not(.scrolled) .main-navigation a,
body.has-hero .site-header:not(.scrolled) .header-actions,
body.has-hero .site-header:not(.scrolled) .header-actions a,
body.has-hero .site-header:not(.scrolled) .mobile-menu-toggle {
  color: var(--white);
}

body.has-hero .site-header:not(.scrolled) .main-navigation a::after {
  background: var(--white);
}

/* The desktop dropdown is inside .header-actions, so the rule above turns it
   white. Restore its terracotta italic on hero pages — needs to come after the
   white override so it wins on equal specificity. */
body.has-hero .site-header:not(.scrolled) .desktop-dropdown a {
  color: var(--terracotta);
}
body.has-hero .site-header:not(.scrolled) .desktop-dropdown a:hover {
  color: var(--dark-warm);
}

body.has-hero .site-header:not(.scrolled) .amphora-svg path {
  stroke: var(--white);
}


/* Animations (Scroll reveal) — smooth ease-out with stagger support.
   Hidden state is gated on .js so no-JS visitors see content immediately. */
.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Immediately reveal elements above the fold / in viewport on load */
.hero-cinematic .reveal,
.page-hero .reveal {
  opacity: 1;
  transform: none;
}

/* Stagger children within grid containers */
.collections-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.collections-grid .reveal:nth-child(3) { transition-delay: 0.2s; }

/* Stagger portfolio cards for graceful cascade */
.portfolio-card.reveal:nth-child(2) { transition-delay: 0.08s; }
.portfolio-card.reveal:nth-child(3) { transition-delay: 0.16s; }
.portfolio-card.reveal:nth-child(4) { transition-delay: 0.24s; }
.portfolio-card.reveal:nth-child(5) { transition-delay: 0.32s; }

/* Stagger footer columns */
.footer-nav-grid > *:nth-child(1) { transition-delay: 0.1s; }
.footer-nav-grid > *:nth-child(2) { transition-delay: 0.2s; }
.footer-nav-grid > *:nth-child(3) { transition-delay: 0.3s; }

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .main-navigation li {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

}

/* ========================================
   INNER PAGES
   ======================================== */

/* Page Hero (Inner Pages) */
.page-hero {
  position: relative;
  height: 50vh;
  min-height: 360px;
  max-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--clay);
  background-size: cover;
  background-position: center;
  padding-top: 84px;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(60, 53, 46, 0.3) 0%, rgba(60, 53, 46, 0.5) 100%);
  z-index: 1;
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  position: relative;
  color: var(--white);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 300;
  margin-bottom: var(--space-2);
  letter-spacing: 0.04em;
}

.page-hero p,
.page-hero .subtitle {
  position: relative;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  margin-top: 12px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-heading);
  font-style: italic;
  letter-spacing: 0.02em;
}

@media (min-width: 768px) {
  .page-hero .subtitle {
    font-size: 18px;
  }
}


/* Portfolio Intro */
.portfolio-intro {
  padding: var(--space-8) 0 var(--space-5);
  text-align: center;
}

.portfolio-intro-text {
  font-family: var(--font-heading);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.8;
  color: var(--olive);
  max-width: 720px;
  margin: 0 auto;
}

.portfolio-intro-text em {
  color: var(--terracotta);
}

/* Category descriptions under header */
.category-description {
  font-size: 15px;
  font-weight: 300;
  color: var(--olive);
  max-width: 560px;
  line-height: 1.7;
  margin-top: var(--space-2);
}

/* Empty category placeholder */
.portfolio-placeholder {
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--clay);
  font-style: italic;
  font-size: 15px;
}

/* Portfolio Navigation */
.portfolio-nav {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--sand);
  position: sticky;
  top: 72px; /* Below fixed header */
  background: var(--white);
  z-index: 50;
}

.portfolio-nav .container {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--container-padding);
}

.portfolio-nav .container::-webkit-scrollbar {
  display: none;
}

@media (min-width: 992px) {
  .portfolio-nav .container {
    justify-content: center;
    overflow-x: visible;
  }
}

.portfolio-filter {
  padding: 8px 4px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--olive);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.portfolio-filter:hover {
  color: var(--terracotta);
}

.portfolio-filter.active {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
  background: transparent;
}

/* Portfolio Categories */
.portfolio-category {
  padding: var(--space-10) 0;
}

.category-header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "number title"
    ".      subtitle"
    ".      description";
  align-items: baseline;
  column-gap: var(--space-2);
  row-gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.category-number {
  grid-area: number;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--terracotta);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.category-header h2 {
  grid-area: title;
  font-size: 1.6rem;
  margin: 0;
  font-weight: 400;
}

.category-header .category-subtitle {
  grid-area: subtitle;
}

.category-header .category-description {
  grid-area: description;
}

.category-divider {
  display: none;
}

@media (min-width: 768px) {
  .category-header {
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "number title divider"
      ".      subtitle subtitle"
      ".      description description";
    align-items: center;
    column-gap: var(--space-2);
  }

  .category-divider {
    display: block;
    grid-area: divider;
    height: 1px;
    background: var(--sand);
    margin-left: var(--space-3);
  }
}

/* Portfolio Grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

/* Portfolio Cards */
.portfolio-card {
  cursor: pointer;
  transition: transform var(--transition-normal);
}

.portfolio-card:hover {
  transform: translateY(-4px);
}

.portfolio-card-image {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.portfolio-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(60, 53, 46, 0);
  transition: background var(--transition-normal);
  z-index: 1;
  pointer-events: none;
}

.portfolio-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.card-img-secondary {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

/* Hover-driven swap (real pointers only — iOS sticky-:hover would otherwise
   trap a tapped card on the detail crop with no way back). */
@media (hover: hover) and (pointer: fine) {
  .portfolio-card:hover .card-img-secondary { opacity: 1; }
  .portfolio-card:has(.card-img-secondary):hover .card-img-primary { opacity: 0; }
  .portfolio-card:hover .portfolio-card-image::after { background: rgba(60, 53, 46, 0.08); }
  .portfolio-card:hover .portfolio-card-image img { transform: scale(1.02); }
}

/* Touch toggle (set/cleared by JS in js/main.js): first tap reveals the
   detail crop, tap again to go back to the primary photo. */
.portfolio-card.is-flipped .card-img-secondary { opacity: 1; }
.portfolio-card.is-flipped:has(.card-img-secondary) .card-img-primary { opacity: 0; }
.portfolio-card.is-flipped .portfolio-card-image::after { background: rgba(60, 53, 46, 0.08); }

.portfolio-card-info {
  padding: var(--space-2) 0 0;
}

.portfolio-card-info h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
  font-weight: 500;
}

.portfolio-card-info p {
  color: var(--olive);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Portfolio CTA */
.portfolio-cta {
  padding: var(--section-padding) 0;
  background: var(--cream);
  text-align: center;
}

.portfolio-cta h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 300;
  margin-bottom: var(--space-2);
}

.portfolio-cta p {
  max-width: 500px;
  margin: 0 auto var(--space-5);
  color: var(--olive);
  font-size: 15px;
  line-height: 1.7;
}

/* Craft Grid (About page) */
.craft-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .craft-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.craft-card {
  padding: var(--space-4);
  background-color: var(--white);
  border-radius: var(--radius-card);
  border: 1px solid var(--sand);
  transition: var(--transition-normal);
}

.craft-card:hover {
  border-color: var(--clay);
}

.craft-icon {
  width: 48px;
  height: 48px;
  background: var(--warm-white);
  border-radius: 50%;
  margin-bottom: var(--space-3);
}

.craft-card h3 {
  font-size: 18px;
  margin-bottom: var(--space-2);
}

/* Values Grid (Sustainability) */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  text-align: center;
}

@media (min-width: 576px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.value-item h3 {
  font-size: 20px;
  margin-bottom: var(--space-2);
}

.value-item p {
  font-size: 14px;
  color: var(--olive);
}

.value-accent {
  width: 40px;
  height: 2px;
  background-color: var(--terracotta);
  margin: 0 auto var(--space-3);
}

/* Contact Section */
.contact-section {
  background-color: var(--dark-warm);
  color: var(--white);
  text-align: center;
}

.contact-section h2 {
  color: var(--white);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.contact-details a {
  color: rgba(255, 255, 255, 0.7);
}

.contact-details a:hover {
  color: var(--terracotta);
}

@media (min-width: 768px) {
  .contact-details {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-6);
  }
}

/* ========================================
   ABOUT PAGE
   ======================================== */

/* Section Label */
.section-label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 16px;
}

.text-italic-accent {
  font-style: italic;
  color: var(--terracotta);
}

/* Section Intro */
.section-intro {
  max-width: 700px;
  font-size: 1.1rem;
  color: var(--olive);
  margin-bottom: var(--space-6);
}

/* About Section */
.about-section {
  padding: var(--space-10) 0;
}

.about-section:nth-child(even) {
  background: var(--warm-white);
}

/* Split Reverse (image left, content right) */
@media (min-width: 992px) {
  .split-reverse .split-content {
    order: 2;
  }

  .split-reverse .split-image {
    order: 1;
  }
}

/* Brand Quote */
.brand-quote {
  font-family: var(--font-heading);
  font-size: 20px;
  font-style: italic;
  color: var(--dark-warm);
  border-left: 2px solid var(--terracotta);
  padding-left: 24px;
  margin: var(--space-6) 0;
  max-width: 650px;
  line-height: 1.65;
}

/* Craft Item */
.craft-item {
  padding: var(--space-4);
  background: var(--cream);
  border-radius: var(--radius-card);
  border: 1px solid var(--sand);
  transition: var(--transition-normal);
}

.craft-item:hover {
  border-color: var(--clay);
}

.craft-item h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  margin-bottom: var(--space-2);
  color: var(--dark-warm);
}

.craft-item p {
  font-size: 14px;
  color: var(--olive);
  line-height: 1.7;
}

/* Value Item (supplement existing) */
.value-item {
  text-align: center;
  padding: var(--space-4);
  background: var(--cream);
  border: 1px solid var(--sand);
  border-radius: var(--radius-card);
  transition: var(--transition-normal);
}

.value-item:hover {
  border-color: var(--clay);
}

/* Contact Grid */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-item h4 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin-bottom: var(--space-1);
}

.contact-item a {
  color: var(--terracotta);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-item a:hover {
  color: var(--clay-dark);
}

/* ========================================
   WORKSHOPS PAGE
   ======================================== */

/* Workshops intro */
.workshops-intro {
  padding: var(--space-8) 0 var(--space-5);
  text-align: center;
}

.workshops-intro-text {
  font-family: var(--font-heading);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--olive);
  max-width: 620px;
  margin: 0 auto;
}

.workshops-intro-text em {
  color: var(--terracotta);
}

/* Workshop section titles & subsections */
.workshop-section-title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(22px, 3vw, 28px);
  text-align: center;
  margin-bottom: var(--space-4);
  color: var(--dark-warm);
}

.workshop-subsection {
  text-align: center;
  margin-bottom: var(--space-4);
}

.workshop-subsection-label {
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--terracotta);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--clay-light);
}

/* Workshops schedule section */
.workshops-schedule {
  padding: var(--section-padding) 0;
}

/* Workshop description text */
.workshop-description {
  font-size: 0.95rem;
  color: var(--olive);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}

/* Workshop price — Cormorant Garamond, terracotta */
.workshop-footer .price {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--terracotta);
}

/* Small button variant */
.btn-sm {
  padding: 10px 22px;
  font-size: 12px;
}

/* Workshops page: 2x2 grid on desktop */
@media (min-width: 1024px) {
  .workshops-schedule .workshop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Workshops page info grid */
.workshops-info {
  padding: var(--section-padding) 0;
  background: var(--cream);
}

.workshops-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .workshops-info-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.info-item {
  text-align: center;
  padding: var(--space-4);
}

.info-item h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: var(--space-2);
  color: var(--dark-warm);
}

.info-item p {
  font-size: 14px;
  color: var(--olive);
  line-height: 1.7;
}

/* FAQ accordion */
.workshops-faq {
  padding: var(--section-padding) 0;
}

.faq-list {
  max-width: 700px;
  margin: 0 auto;
}

.faq-list details {
  border-bottom: 1px solid var(--sand);
}

.faq-list summary {
  padding: var(--space-3) 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--olive);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--transition-fast);
}

.faq-list summary:hover {
  color: var(--dark-warm);
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: '+';
  font-size: 1.5rem;
  font-family: var(--font-heading);
  color: var(--clay);
  transition: color var(--transition-fast);
}

.faq-list details[open] summary::after {
  content: '\2212';
  color: var(--terracotta);
}

.faq-list details[open] summary {
  color: var(--dark-warm);
}

.faq-list details p {
  padding: 0 0 var(--space-3);
  color: var(--olive);
  line-height: 1.7;
  font-size: 15px;
}

/* Workshop CTA */
.workshops-cta {
  padding: var(--section-padding) 0;
  text-align: center;
  background: var(--dark-warm);
  color: var(--white);
}

.workshops-cta a {
  color: var(--terracotta-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.workshops-cta a:hover {
  color: var(--white);
}

/* ========================================
   CUSTOM ORDERS PAGE
   ======================================== */

/* Custom Orders Intro */
.custom-intro {
  padding: var(--section-padding) 0 0;
  text-align: center;
}

.custom-intro-text {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
  color: var(--olive);
}

/* Custom Orders Process */
.custom-process {
  padding: var(--space-8) 0 var(--space-10);
  background: transparent;
}

.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
  position: relative;
}

@media (min-width: 768px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .process-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.process-step {
  background-color: transparent;
  padding: var(--space-5) var(--space-4) 0 0;
  border-radius: 0;
  border-top: 1px solid var(--sand);
  box-shadow: none;
  position: relative;
  transition: border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
}

.process-step:hover {
  transform: none;
  box-shadow: none;
  border-top-color: var(--terracotta);
}

.process-number {
  font-family: var(--font-heading);
  font-size: clamp(56px, 6vw, 80px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--sand);
  line-height: 1;
  background: none;
  border: none;
  display: block;
  margin-bottom: var(--space-4);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.process-step:hover .process-number {
  color: var(--terracotta);
  background: none;
  border-color: transparent;
  transform: translateX(4px);
}

.process-step h3 {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 26px);
  font-weight: 300;
  margin-bottom: var(--space-3);
  color: var(--dark-warm);
  letter-spacing: 0.01em;
}

.process-step p {
  color: var(--olive);
  font-size: 15px;
  line-height: 1.7;
  flex-grow: 1;
}

/* Examples gallery */
.custom-examples {
  padding: var(--space-8) 0 var(--space-10) 0;
  background: var(--cream);
}

.examples-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

@media (min-width: 768px) {
  .examples-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.examples-grid img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 180px 180px 12px 12px; /* Arch shape */
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 12px 32px rgba(60, 53, 46, 0.05);
}

.examples-grid img:hover {
  transform: scale(1.04);
}

/* Inquiry CTA */
.custom-inquiry {
  padding: var(--space-10) 0;
  text-align: center;
  background: var(--dark-warm);
  color: var(--white);
}

.custom-inquiry .section-label {
  color: var(--terracotta-muted);
}

.custom-inquiry h2 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 300;
  color: var(--cream);
  margin-bottom: var(--space-4);
}

.custom-inquiry p {
  max-width: 600px;
  margin: 0 auto var(--space-5);
  color: var(--clay-light);
  line-height: 1.8;
  font-size: 16px;
}

.custom-inquiry a {
  color: var(--terracotta-muted);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: color var(--transition-fast);
}

.custom-inquiry a:hover {
  color: var(--white);
}

.price-note {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--terracotta);
  font-weight: 400;
  margin-top: var(--space-6);
  border-top: 1px solid rgba(253, 251, 248, 0.1);
  padding-top: var(--space-4);
  max-width: 300px;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--terracotta);
    color: var(--white);
    z-index: 200;
    border-radius: var(--radius-btn);
    text-decoration: none;
    font-size: 0.9rem;
}

.skip-link:focus {
    top: var(--space-2);
}

*:focus-visible {
    outline: 2px solid var(--terracotta);
    outline-offset: 2px;
}

/* ========================================
   AMELIA BOOKING OVERRIDES
   ======================================== */

html {
    scroll-behavior: smooth;
}

.workshops-booking {
    padding: var(--space-8) 0;
    background-color: var(--warm-white);
}

/* WooCommerce workshop checkout selector */
.workshop-commerce-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 980px;
    margin: 0 auto var(--space-4);
}

.workshop-commerce-nav a {
    padding: 10px 18px;
    border: 1px solid var(--sand);
    border-radius: var(--radius-btn);
    color: var(--olive);
    background: var(--cream);
    font-size: 12px;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.workshop-commerce-nav a:hover,
.workshop-commerce-nav a.is-active {
    color: var(--warm-white);
    border-color: var(--terracotta);
    background: var(--terracotta);
}

.workshop-commerce {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 48px);
    overflow: hidden;
    border: 1px solid var(--sand);
    border-radius: var(--radius-card);
    background:
        radial-gradient(440px 300px at 12% -10%, rgba(196, 168, 130, 0.16), transparent 60%),
        var(--warm-white);
}

.workshop-commerce::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 0;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(var(--terracotta), var(--clay));
}

.workshop-commerce .booking-subheading {
    margin-top: 0;
    font-size: clamp(28px, 4vw, 38px);
}

.workshop-commerce__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 18px;
    margin-top: var(--space-4);
}

.workshop-commerce__field {
    display: grid;
    gap: 8px;
}

.workshop-commerce__field > span {
    color: var(--clay-dark);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.workshop-commerce__field select,
.workshop-commerce__field input {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--clay-light);
    border-radius: 10px;
    color: var(--dark-warm);
    background: var(--cream);
    font: inherit;
}

.workshop-commerce__field select:focus,
.workshop-commerce__field input:focus {
    border-color: var(--terracotta);
    outline: 2px solid rgba(184, 105, 74, 0.12);
}

.workshop-commerce__submit {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: var(--space-3);
    border-top: 1px solid var(--sand);
}

.workshop-commerce__price {
    color: var(--terracotta);
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 1;
}

.workshop-commerce__price small {
    display: block;
    margin-top: 6px;
    color: var(--olive);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.workshop-commerce__note,
.workshop-commerce__empty {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--olive);
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}

.workshop-commerce__empty {
    font-size: 15px;
}

.workshop-commerce__empty em {
    color: var(--terracotta);
    font-family: var(--font-heading);
    font-size: 24px;
}

@media (max-width: 620px) {
    .workshop-commerce-nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin-right: calc(-1 * var(--space-3));
        overflow-x: auto;
        padding: 0 var(--space-3) 8px 0;
        scrollbar-width: none;
    }

    .workshop-commerce-nav a {
        flex: 0 0 auto;
    }

    .workshop-commerce__form {
        grid-template-columns: 1fr;
    }

    .workshop-commerce__submit {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }

    .workshop-commerce__submit .btn {
        width: 100%;
    }
}

.amelia-booking-container,
.amelia-events-container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--warm-white);
    padding: 0;
    border-radius: var(--radius-card);
    border: 1px solid var(--sand);
    overflow: hidden;
}

.amelia-events-container {
    margin-top: var(--space-6);
}

.booking-subheading {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 22px;
    text-align: center;
    margin: var(--space-5) var(--space-4) var(--space-1);
    color: var(--dark-warm);
}

.booking-subheading-note {
    text-align: center;
    margin: 0 var(--space-4) var(--space-4);
    font-size: 14px;
    color: var(--olive);
    font-style: italic;
}

/* ----------------------------------------------------------------------- */
/* Short Course — refined "pick a start date" card                          */
/* Replaces the default Amelia events list. .sc-amelia-raw stays in the DOM */
/* as the JS-disabled / parse-failure fallback (JS reads the dates + price  */
/* out of it, populates .sc-dates, then sets [hidden] on it).               */
/* ----------------------------------------------------------------------- */
.sc-block { max-width: 600px; margin: 0 auto; }
.sc-amelia-raw[hidden] { display: none !important; }

.sc-card {
    position: relative;
    /* warm-white base with two faint corner glows for depth (no shadow — cards
       use borders for elevation per the design system) */
    background:
        radial-gradient(440px 300px at 12% -10%, rgba(196, 168, 130, 0.16), transparent 60%),
        radial-gradient(380px 280px at 100% 0%, rgba(184, 105, 74, 0.10), transparent 55%),
        var(--warm-white);
    border: 1px solid var(--sand);
    border-radius: var(--radius-card);
    padding: clamp(28px, 5vw, 48px) clamp(24px, 5vw, 52px) clamp(32px, 5vw, 44px);
    overflow: hidden;
    text-align: center;
}
.sc-card::before {           /* hairline accent down the left edge */
    content: "";
    position: absolute;
    left: 0; top: 24px; bottom: 24px;
    width: 3px;
    background: linear-gradient(var(--terracotta), var(--clay));
    border-radius: 3px;
}
.sc-card::after {            /* faint paper grain over the warm glow */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
.sc-card__title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(26px, 4.2vw, 36px);
    line-height: 1.12;
    margin: 0;
}
.sc-card__title em { font-style: italic; color: var(--terracotta); }
.sc-card__sub {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 18px;
    color: var(--olive);
    margin: 6px 0 0;
}
.sc-card__specs {
    display: flex; flex-wrap: wrap; justify-content: center;
    margin-top: 16px;
}
.sc-card__specs span {
    font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--clay-dark);
    padding: 4px 14px; position: relative;
}
.sc-card__specs span + span::before {
    content: ""; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 11px; background: var(--clay-light);
}
.sc-card__divider {
    display: flex; align-items: center; gap: 14px;
    margin: 28px 0 20px;
}
.sc-card__divider::before, .sc-card__divider::after {
    content: ""; flex: 1; height: 1px; background: var(--sand);
}
.sc-card__divider span {
    font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--olive);
}
.sc-dates {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.sc-date-opt {
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
    border: 1.5px solid var(--sand);
    background: var(--cream);
    border-radius: var(--radius-card);
    padding: 14px 20px 13px;
    min-width: 88px; line-height: 1;
    font-family: var(--font-body);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.sc-date-opt:hover { border-color: var(--clay); transform: translateY(-2px); }
.sc-date-opt .sc-d {
    display: block;
    font-family: var(--font-heading); font-size: 28px; font-weight: 400;
    color: var(--dark-warm);
}
.sc-date-opt .sc-m {
    display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--olive); margin-top: 6px;
}
.sc-date-opt .sc-t {
    display: block; font-size: 11px; color: var(--clay-dark); margin-top: 5px;
    font-variant-numeric: tabular-nums;
}
.sc-date-opt[aria-pressed="true"] {
    border-color: var(--terracotta); background: var(--warm-white);
    box-shadow: 0 0 0 3px rgba(184, 105, 74, 0.08), 0 8px 20px -12px rgba(184, 105, 74, 0.45);
}
.sc-date-opt[aria-pressed="true"] .sc-d { color: var(--terracotta); }
.sc-card__note {
    margin: 24px 0 0;
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--dark-warm);
}
.sc-card__note [data-sc-start] { display: block; }
.sc-card__note-sub {
    display: block;
    font-family: var(--font-body);
    font-size: 12px; letter-spacing: 0.4px;
    color: var(--clay-dark);
    margin-top: 6px;
    font-style: normal;
}
.sc-card__note-sub strong { color: var(--terracotta); font-weight: 500; }
.sc-card__checkout {
    display: flex; align-items: center; justify-content: center;
    gap: 24px; flex-wrap: wrap;
    margin-top: 28px;
}
.sc-price {
    font-family: var(--font-heading); font-weight: 400;
    font-size: 30px; color: var(--terracotta); line-height: 1;
}
.sc-price small {
    display: block;
    font-family: var(--font-body);
    font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--olive); margin-top: 6px; font-weight: 400;
}
.sc-card__checkout .btn { white-space: nowrap; }
.sc-card__checkout .btn span { display: inline-block; transition: transform 0.25s ease; }
.sc-card__checkout .btn:hover span { transform: translateX(3px); }
.sc-card__fineprint {
    text-align: center; font-size: 12px; color: var(--olive);
    margin: 18px 0 0;
}
.sc-card__fineprint a {
    color: var(--terracotta); text-decoration: none;
    border-bottom: 1px solid var(--clay-light);
}
@media (max-width: 520px) {
    .sc-card__checkout { flex-direction: column; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .sc-date-opt, .sc-card__checkout .btn span { transition: none; }
}

/* ----------------------------------------------------------------------- */
/* Amelia Events widget — strip chrome, repaint to Mediterranean Earth     */
/* Default plugin UI ships with Bootstrap blue/green and ticket-platform   */
/* affordances (search, filter, slot counter, status badges) that don't    */
/* belong on an atelier site. Hide them and reskin what remains.           */
/*                                                                          */
/* IMPORTANT: Amelia teleports its modal/dialog out of .amelia-events-      */
/* container into body root (Element Plus `el-overlay-dialog`). So scoped   */
/* selectors below also cover .el-overlay-dialog AND the v2 booking root.   */
/* ----------------------------------------------------------------------- */

/* Scope alias — use this list anywhere we want both inline events list   */
/* and the popped-up dialog to inherit the same overrides.                */
/* (Plain comment; CSS doesn't support variables for selector lists yet.) */

.amelia-events-container .am-els {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* HIDE — top chrome (count header, search, filter button) */
.amelia-events-container .am-els__filters-top,
.amelia-events-container .am-els__available,
.amelia-events-container .am-els__filters,
.amelia-events-container .am-els__filters-search,
.amelia-events-container .am-els__filters-menu,
.amelia-events-container .am-els__filters-menu__btn,
.amelia-events-container [class*="__filters"] {
    display: none !important;
}

/* HIDE — status pill + slot count on inline event cards.
   Verified Amelia 7+ classes from a live DOM dump:
     .am-ec__info-availability  → "Open" pill
     .am-ec__info-capacity      → "6 slots left"
     .am-ec__info-other         → wrapper around both */
.amelia-events-container .am-ec__info-availability,
.amelia-events-container .am-ec__info-capacity,
.amelia-events-container .am-ec__info-other,
/* Generic fallbacks (kept lightweight — older Amelia / bem variants) */
.amelia-events-container [class*="badge"],
.amelia-events-container [class*="-tag"],
.amelia-events-container [class*="__tag"] {
    display: none !important;
}

/* Belt-and-suspenders: any element with hard-coded green/red text inside
   the events list is an Amelia status pill we don't want. */
.amelia-events-container span[style*="color: rgb(15"],
.amelia-events-container span[style*="color: rgb(40"],
.amelia-events-container span[style*="color: green"],
.amelia-events-container span[style*="color:#1"],
.amelia-events-container span[style*="color: #1"] {
    display: none !important;
}

/* Each event card — frame matches the .workshop-card pattern */
.amelia-events-container .am-els__events__event,
.amelia-events-container [class*="__event-list-item"],
.amelia-events-container [class*="event-list-item"] {
    background: var(--warm-white) !important;
    border: 1px solid var(--sand) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: none !important;
    padding: var(--space-4) var(--space-5) !important;
    margin-bottom: var(--space-3) !important;
}

/* Left terracotta accent stripe — keep, it ties to our palette */
.amelia-events-container [class*="__event-list-item"]::before,
.amelia-events-container [class*="event-list-item"]::before {
    background-color: var(--terracotta) !important;
}

/* Date block on the left of each event */
.amelia-events-container [class*="__date"],
.amelia-events-container [class*="-date"] {
    color: var(--dark-warm) !important;
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
}

/* Event title (e.g. "Introduction to Handbuilding — May/2026") */
.amelia-events-container [class*="__title"],
.amelia-events-container [class*="-title"],
.amelia-events-container .am-els-event-title {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    color: var(--dark-warm) !important;
    font-size: 18px !important;
}

/* Price — terracotta accent in heading font */
.amelia-events-container [class*="price"] {
    color: var(--terracotta) !important;
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    font-size: 22px !important;
}

/* CTA — "Read more" → terracotta outline pill, matching .btn-outline.
   Amelia uses Element-Plus-style buttons: <button class="am-button">
   wrapping <span class="am-button__inner">. We need the border ONLY on
   the outer button, never on the inner span (otherwise we get two pills
   stacked). Reset child styles first, then theme the wrapper. */
.amelia-events-container button,
.amelia-events-container .am-button,
.amelia-events-container [class*="__btn"]:not(:has(button)),
.amelia-events-container [class*="-btn"]:not(:has(button)),
.amelia-events-container [class*="read-more"]:not(:has(button)),
.amelia-events-container [class*="readmore"]:not(:has(button)),
.amelia-events-container a[role="button"] {
    background: transparent !important;
    color: var(--terracotta) !important;
    border: 1.5px solid var(--terracotta) !important;
    border-radius: var(--radius-btn) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 10px 22px !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    outline: none !important;
}

/* Inner spans inside the button: STRIP all framing — the wrapper owns it. */
.amelia-events-container button > *,
.amelia-events-container .am-button > *,
.amelia-events-container a[role="button"] > * {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
}

.amelia-events-container button:hover,
.amelia-events-container .am-button:hover,
.amelia-events-container a[role="button"]:hover {
    background: var(--terracotta) !important;
    color: var(--warm-white) !important;
}

/* Override CTA label text. Amelia uses different selectors per version
   (sometimes a styled button, sometimes a plain anchor). Hide the actual
   text via font-size:0 and inject our own via ::after on the button. */
.amelia-events-container .am-els__events__event button,
.amelia-events-container .am-els__events__event a[role="button"],
.amelia-events-container [class*="event-list-item"] button,
.amelia-events-container [class*="event-list-item"] a[role="button"],
.amelia-events-container [class*="read-more"],
.amelia-events-container [class*="readmore"] {
    font-size: 0 !important;
    line-height: 1 !important;
}
.amelia-events-container .am-els__events__event button::after,
.amelia-events-container .am-els__events__event a[role="button"]::after,
.amelia-events-container [class*="event-list-item"] button::after,
.amelia-events-container [class*="event-list-item"] a[role="button"]::after,
.amelia-events-container [class*="read-more"]::after,
.amelia-events-container [class*="readmore"]::after {
    content: "Book Now";
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    line-height: 1.4 !important;
}

/* ----------------------------------------------------------------------- */
/* Amelia event-detail modal (Element Plus dialog teleported to body root) */
/* ----------------------------------------------------------------------- */

.el-overlay-dialog .el-dialog,
.el-overlay-dialog [class*="dialog__body"],
.el-overlay-dialog [class*="dialog__header"],
.el-overlay-dialog [class*="dialog__footer"] {
    background: var(--warm-white) !important;
    color: var(--dark-warm) !important;
    font-family: var(--font-body) !important;
    border-radius: var(--radius-card) !important;
}

/* HIDE — verified Amelia 7+ class names from a live DOM dump:
   .am-ec__info-availability  → "Open" status pill (green) — hide
   .am-eli__organizer         → AYS avatar + studio name row — hide
   We KEEP .am-ec__info-capacity (slots-left) but tone it down so it
   reads as a soft secondary line, not a Bootstrap badge. */
.am-ec__info-availability,
.am-eli__organizer,
.am-eli__organizer-img,
.am-eli__organizer-inner,
.am-eli__organizer-name {
    display: none !important;
}

/* Slots-left counter — quiet olive italic, not a status pill.
   Selector covers both the wrapper and the two inner spans (number + text). */
.am-ec__info-capacity {
    color: var(--olive) !important;
    font-style: italic !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;
    margin-top: 2px !important;
}
.am-ec__info-capacity__number,
.am-ec__info-capacity__text {
    color: inherit !important;
    font-weight: 400 !important;
}
.am-ec__info-capacity__number {
    font-style: normal !important;
}

/* Show more / Show less — proper class is .am-eli__description-btn.
   Make it terracotta and underline-free; clickable affordance preserved. */
.am-eli__description-btn {
    color: var(--terracotta) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
}

/* Description body — match the rest of the modal typography. */
.am-eli__description-text,
.am-eli__description-text p,
.ql-description,
.ql-description p {
    font-family: var(--font-body) !important;
    color: var(--dark-warm) !important;
    line-height: 1.7 !important;
}

/* Description / Timetable section labels in the modal */
.am-eli__description-title,
.am-eli__timetable-title {
    font-family: var(--font-heading) !important;
    color: var(--dark-warm) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
}

.am-eli__timetable-main,
.am-eli__timetable-main__date,
.am-eli__timetable-main__time,
.am-eli__main-text {
    font-family: var(--font-body) !important;
    color: var(--dark-warm) !important;
}

/* Modal title (event name) — already styled via [class*="__title"]
   wildcards earlier, but the actual selector is .am-ec__info-name. */
.am-ec__info-name {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    color: var(--dark-warm) !important;
}

/* Modal price — actual selector is .am-ec__info-price */
.am-ec__info-price {
    color: var(--terracotta) !important;
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
}

/* Modal date column — .am-ec__period-date / -time / -text */
.am-ec__period,
.am-ec__period-text,
.am-ec__period-date,
.am-ec__period-date__day,
.am-ec__period-date__month,
.am-ec__period-time {
    font-family: var(--font-heading) !important;
    color: var(--dark-warm) !important;
}

/* Override Amelia's CSS custom properties at the modal root so the inline
   `style="--am-c-eli-primary:#1246D6"` no longer wins the tab underline,
   buttons, etc. This is the cleanest way to neutralize the plugin's
   inline-style brand color. */
.am-eli,
.am-ec,
.am-eli__main-container,
.am-dialog-el__main-container {
    --am-c-eli-primary: var(--terracotta) !important;
    --am-c-ec-primary: var(--terracotta) !important;
    --am-c-ec-success: var(--olive) !important;
    --am-c-btn-first: var(--terracotta) !important;
}

/* Element Plus tab underline — the active-bar reads from a hardcoded
   blue in some plugin variants. Force terracotta. */
.el-tabs__active-bar {
    background-color: var(--terracotta) !important;
}
.el-tabs__item.is-active {
    color: var(--terracotta) !important;
}

/* Belt-and-suspenders: any element with hard-coded green/red color */
.el-overlay-dialog span[style*="color: rgb(15"],
.el-overlay-dialog span[style*="color: rgb(40"],
.el-overlay-dialog span[style*="color: green"],
.el-overlay-dialog span[style*="color:#1"],
.el-overlay-dialog span[style*="color: #1"] {
    display: none !important;
}

/* Auto-expand the description so "Show more" becomes redundant
   (we then hide it). Description blocks are usually clamped to a fixed
   max-height with overflow:hidden; release that. */
.el-overlay-dialog [class*="description"],
.el-overlay-dialog [class*="__description"],
.el-overlay-dialog [class*="-description"] {
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
}

.el-overlay-dialog [class*="show-more"],
.el-overlay-dialog [class*="showmore"] {
    display: none !important;
}

/* "Event Info" tab — kill the blue accent, use terracotta */
.el-overlay-dialog [class*="tabs"] [class*="active"],
.el-overlay-dialog [class*="tab-active"],
.el-overlay-dialog [role="tab"][aria-selected="true"] {
    color: var(--terracotta) !important;
    border-bottom-color: var(--terracotta) !important;
}

/* Modal title */
.el-overlay-dialog h1,
.el-overlay-dialog h2,
.el-overlay-dialog [class*="__title"],
.el-overlay-dialog [class*="-title"] {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    color: var(--dark-warm) !important;
}

/* Price in modal — terracotta */
.el-overlay-dialog [class*="price"] {
    color: var(--terracotta) !important;
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
}

/* Date / timetable rows */
.el-overlay-dialog [class*="__date"],
.el-overlay-dialog [class*="-date"],
.el-overlay-dialog [class*="timetable"] {
    color: var(--dark-warm) !important;
}

/* "Show more" link in description — terracotta, no underline */
.el-overlay-dialog a,
.el-overlay-dialog [class*="show-more"],
.el-overlay-dialog [class*="showmore"],
.el-overlay-dialog [class*="read-more"] {
    color: var(--terracotta) !important;
    text-decoration: none !important;
}

/* Footer buttons — Close (outline) + Book event (solid terracotta).
   Same Element Plus button-with-inner-span pattern; border only on outer. */
.el-overlay-dialog .el-dialog__footer button,
.el-overlay-dialog [class*="dialog__footer"] button,
.el-overlay-dialog .el-button {
    border-radius: var(--radius-btn) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 10px 24px !important;
    box-shadow: none !important;
    border-width: 1.5px !important;
    transition: all 0.3s ease !important;
    outline: none !important;
}

/* Strip framing from inner spans inside modal buttons. */
.el-overlay-dialog .el-button > *,
.el-overlay-dialog button > * {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
}

/* Close button (outline) */
.el-overlay-dialog .el-button:not(.el-button--primary) {
    background: transparent !important;
    color: var(--dark-warm) !important;
    border-color: var(--clay) !important;
}
.el-overlay-dialog .el-button:not(.el-button--primary):hover {
    background: var(--sand) !important;
    color: var(--dark-warm) !important;
}

/* Book event (primary CTA) — solid terracotta */
.el-overlay-dialog .el-button--primary,
.el-overlay-dialog button[class*="primary"] {
    background: var(--terracotta) !important;
    color: var(--warm-white) !important;
    border-color: var(--terracotta) !important;
}
.el-overlay-dialog .el-button--primary:hover,
.el-overlay-dialog button[class*="primary"]:hover {
    background: var(--clay-dark) !important;
    border-color: var(--clay-dark) !important;
}

/* Modal close (X) button — keep clean */
.el-overlay-dialog .el-dialog__headerbtn,
.el-overlay-dialog [class*="dialog__close"] {
    color: var(--olive) !important;
}

/* Fallback when Amelia plugin is disabled */
.amelia-booking-placeholder {
    padding: clamp(48px, 8vw, 80px) clamp(24px, 5vw, 48px);
    text-align: center;
}

.amelia-placeholder-title {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 300;
    color: var(--terracotta);
    margin-bottom: var(--space-3);
}

.amelia-placeholder-text {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--olive);
    max-width: 480px;
    margin: 0 auto;
}

.amelia-placeholder-text a {
    color: var(--dark-warm);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.amelia-placeholder-text a:hover {
    color: var(--terracotta);
}

/* Base resets for Amelia so it inherits our fonts */
#amelia-app-booking *,
[id^="amelia-app-booking"] * {
    font-family: var(--font-body) !important;
}

#amelia-app-booking h1,
#amelia-app-booking h2,
#amelia-app-booking h3,
#amelia-app-booking h4,
[id^="amelia-app-booking"] h1,
[id^="amelia-app-booking"] h2,
[id^="amelia-app-booking"] h3,
[id^="amelia-app-booking"] h4 {
    font-family: var(--font-heading) !important;
    color: var(--dark-warm) !important;
    font-weight: 300 !important;
}

/* Amelia colors — customize Amelia custom properties to match brand */
:root {
    --am-c-inp-bnd: var(--clay) !important;
    --am-c-primary: #B8694A !important;
    --am-c-primary-op10: rgba(184, 105, 74, 0.1) !important;
    --am-c-primary-op20: rgba(184, 105, 74, 0.2) !important;
    --am-c-primary-op30: rgba(184, 105, 74, 0.3) !important;
    --am-c-primary-dark: var(--dark-warm) !important;
    --am-c-success: var(--olive) !important;
    --am-c-btn-prim: #B8694A !important;
    --am-c-btn-prim-text: #fff !important;
}

/* Step indicator / progress bar — terracotta instead of blue */
[id^="amelia-app-booking"] .am-asi,
[id^="amelia-app-booking"] [class*="am-asi"] {
    background-color: var(--terracotta) !important;
}

[id^="amelia-app-booking"] .am-asi__header__step--active,
[id^="amelia-app-booking"] [class*="step--active"] {
    color: var(--terracotta) !important;
}

/* Service selection heading */
[id^="amelia-app-booking"] .am-fs__main-heading,
[id^="amelia-app-booking"] [class*="main-heading"] {
    font-family: var(--font-heading) !important;
    font-weight: 300 !important;
    font-size: 1.5rem !important;
    color: var(--dark-warm) !important;
    letter-spacing: -0.01em !important;
}

/* Dropdown selects */
[id^="amelia-app-booking"] select,
[id^="amelia-app-booking"] .am-select,
[id^="amelia-app-booking"] [class*="am-select"] {
    border-color: var(--clay-light) !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
    color: var(--dark-warm) !important;
    background-color: var(--warm-white) !important;
    transition: border-color 0.2s ease !important;
}

[id^="amelia-app-booking"] select:focus,
[id^="amelia-app-booking"] .am-select:focus,
[id^="amelia-app-booking"] [class*="am-select"]:focus-within {
    border-color: var(--terracotta) !important;
    box-shadow: 0 0 0 3px rgba(184, 105, 74, 0.1) !important;
}

/* Input fields */
[id^="amelia-app-booking"] input[type="text"],
[id^="amelia-app-booking"] input[type="email"],
[id^="amelia-app-booking"] input[type="tel"],
[id^="amelia-app-booking"] input[type="number"],
[id^="amelia-app-booking"] textarea {
    border: 1.5px solid var(--clay-light) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    color: var(--dark-warm) !important;
    background: var(--warm-white) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

[id^="amelia-app-booking"] input:focus,
[id^="amelia-app-booking"] textarea:focus {
    border-color: var(--terracotta) !important;
    box-shadow: 0 0 0 3px rgba(184, 105, 74, 0.1) !important;
    outline: none !important;
}

/* Labels */
[id^="amelia-app-booking"] label,
[id^="amelia-app-booking"] .am-fs__label,
[id^="amelia-app-booking"] [class*="label"] {
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--olive) !important;
    font-weight: 500 !important;
}

/* Primary buttons (Continue, Confirm, etc.) */
[id^="amelia-app-booking"] .am-button--filled,
[id^="amelia-app-booking"] [class*="am-button--filled"],
[id^="amelia-app-booking"] button[class*="filled"] {
    background-color: var(--terracotta) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 14px 36px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}

[id^="amelia-app-booking"] .am-button--filled:hover,
[id^="amelia-app-booking"] [class*="am-button--filled"]:hover {
    background-color: var(--dark-warm) !important;
    transform: translateY(-1px) !important;
}

/* Secondary / outline buttons */
[id^="amelia-app-booking"] .am-button--plain,
[id^="amelia-app-booking"] [class*="am-button--plain"] {
    color: var(--terracotta) !important;
    border-color: var(--terracotta) !important;
    border-radius: 30px !important;
}

/* Calendar day cells */
[id^="amelia-app-booking"] .am-dc__days__item--selected,
[id^="amelia-app-booking"] [class*="days__item--selected"] {
    background-color: var(--terracotta) !important;
    color: #fff !important;
    border-radius: 50% !important;
}

[id^="amelia-app-booking"] .am-dc__days__item--today,
[id^="amelia-app-booking"] [class*="days__item--today"] {
    border-color: var(--terracotta) !important;
    color: var(--terracotta) !important;
}

/* Hide Employee dropdown — only one provider (Afis Yfes Studio) */
[id^="amelia-app-booking"] [class*="employee"],
[id^="amelia-app-booking"] [class*="Employee"] {
    display: none !important;
}

/* Service cards — grid layout instead of dropdown */
[id^="amelia-app-booking"] [class*="service-card"],
[id^="amelia-app-booking"] [class*="am-fs__services"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

@media (max-width: 500px) {
    [id^="amelia-app-booking"] [class*="service-card"],
    [id^="amelia-app-booking"] [class*="am-fs__services"] {
        grid-template-columns: 1fr !important;
    }
}

/* Amelia mobile — tighter, less whitespace */
@media (max-width: 767px) {
    /* Remove sidebar on mobile */
    [id^="amelia-app-booking"] [class*="am-asi"] {
        display: none !important;
    }

    /* Make the form full width without sidebar */
    [id^="amelia-app-booking"] [class*="am-fs__main"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Reduce the large empty header area */
    [id^="amelia-app-booking"] [class*="am-fs__main-heading"] {
        padding-top: 16px !important;
        padding-bottom: 8px !important;
        font-size: 1.3rem !important;
    }

    /* Tighter content padding */
    [id^="amelia-app-booking"] [class*="am-fs__main-content"],
    [id^="amelia-app-booking"] [class*="am-fs__main-inner"] {
        padding: 16px !important;
    }

    /* Step progress bar — compact horizontal */
    [id^="amelia-app-booking"] [class*="am-fs__header"] {
        padding: 12px 16px !important;
    }

    /* Container tighter */
    .amelia-booking-container {
        border-radius: 12px;
        border: none;
        box-shadow: 0 2px 16px rgba(60, 53, 46, 0.08);
    }

    /* Service label tighter */
    [id^="amelia-app-booking"] [class*="am-fs__label"],
    [id^="amelia-app-booking"] label {
        margin-bottom: 4px !important;
        font-size: 0.75rem !important;
    }

    /* Continue button full width on mobile */
    [id^="amelia-app-booking"] [class*="am-fs__main-footer"] {
        padding: 12px 16px !important;
    }

    [id^="amelia-app-booking"] .am-button--filled,
    [id^="amelia-app-booking"] [class*="am-button--filled"] {
        width: 100% !important;
        text-align: center !important;
        padding: 16px !important;
    }
}

/* Hide employee selector — single studio, not needed */
[id^="amelia-app-booking"] [class*="employee"],
[id^="amelia-app-booking"] [class*="Employee"] {
    display: none !important;
}

/* Service cards grid layout */
[id^="amelia-app-booking"] [class*="service-list"],
[id^="amelia-app-booking"] [class*="services-list"],
[id^="amelia-app-booking"] [class*="am-fs__services"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}

@media (max-width: 600px) {
    [id^="amelia-app-booking"] [class*="service-list"],
    [id^="amelia-app-booking"] [class*="services-list"],
    [id^="amelia-app-booking"] [class*="am-fs__services"] {
        grid-template-columns: 1fr !important;
    }
}

[id^="amelia-app-booking"] .am-dc__days__item:hover,
[id^="amelia-app-booking"] [class*="days__item"]:hover {
    background-color: rgba(184, 105, 74, 0.1) !important;
    border-radius: 50% !important;
}

/* Time slots */
[id^="amelia-app-booking"] .am-fs__ts__slot,
[id^="amelia-app-booking"] [class*="ts__slot"] {
    border: 1.5px solid var(--clay-light) !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

[id^="amelia-app-booking"] .am-fs__ts__slot--selected,
[id^="amelia-app-booking"] [class*="ts__slot--selected"] {
    background-color: var(--terracotta) !important;
    border-color: var(--terracotta) !important;
    color: #fff !important;
}

/* Bringing anyone counter */
[id^="amelia-app-booking"] .am-fs__bringing,
[id^="amelia-app-booking"] [class*="bringing"] {
    border-color: var(--clay-light) !important;
    border-radius: var(--radius-card) !important;
}

/* Confirmation/summary card */
[id^="amelia-app-booking"] .am-fs__confirmation,
[id^="amelia-app-booking"] [class*="confirmation"] {
    background: var(--cream) !important;
    border-radius: var(--radius-card) !important;
    border: 1px solid var(--sand) !important;
}

/* Remove default Amelia shadows — use our subtle ones */
[id^="amelia-app-booking"] [class*="am-fs"] {
    box-shadow: none !important;
}

/* Overall form container padding */
[id^="amelia-app-booking"] .am-fs,
[id^="amelia-app-booking"] > div > div {
    padding: 0 !important;
}

/* Reduce empty space in main content area */
[id^="amelia-app-booking"] .am-fs__main-content,
[id^="amelia-app-booking"] [class*="main-content"] {
    min-height: unset !important;
    padding: var(--space-4) var(--space-5) !important;
}

/* Sidebar — refine the terracotta panel */
[id^="amelia-app-booking"] .am-fs__sidebar,
[id^="amelia-app-booking"] [class*="sidebar"] {
    background: linear-gradient(170deg, var(--terracotta) 0%, #9B5A3E 100%) !important;
    border-radius: var(--radius-card) 0 0 var(--radius-card) !important;
}

/* Sidebar step text */
[id^="amelia-app-booking"] .am-fs__sidebar [class*="step"] {
    font-family: var(--font-body) !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.03em !important;
}

/* Override green checkmark to white */
[id^="amelia-app-booking"] .am-fs__sidebar [class*="check"],
[id^="amelia-app-booking"] .am-fs__sidebar svg[class*="check"],
[id^="amelia-app-booking"] .am-fs__sidebar .am-icon-check {
    color: #fff !important;
    fill: #fff !important;
}

/* Green badge → subtle cream badge */
[id^="amelia-app-booking"] .am-fs__sidebar [class*="badge--completed"],
[id^="amelia-app-booking"] .am-fs__sidebar [class*="step"] .am-icon--completed {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

/* Tighten the outer wrapper */
.amelia-booking-container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--warm-white);
    padding: 0;
    border-radius: var(--radius-card);
    border: 1px solid var(--sand);
    overflow: hidden;
}

/* Modal version — tighter */
.booking-modal-body [id^="amelia-app-booking"] {
    border-radius: var(--radius-card) !important;
    overflow: hidden !important;
}

/* "Get in Touch" section in sidebar */
[id^="amelia-app-booking"] .am-fs__sidebar [class*="get-in-touch"],
[id^="amelia-app-booking"] .am-fs__sidebar [class*="contact"] {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    opacity: 0.85 !important;
    font-size: 0.8rem !important;
}

/* Continue button — fine-tune for both mobile and desktop */
[id^="amelia-app-booking"] .am-fs__main-btn,
[id^="amelia-app-booking"] [class*="main-btn"] {
    padding: var(--space-3) 0 !important;
    border-top: 1px solid var(--sand) !important;
    background: transparent !important;
}

/* Booking Modal */
.booking-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.booking-modal.is-active {
    display: flex;
}

.booking-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(60, 53, 46, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.booking-modal-content {
    position: relative;
    background: var(--warm-white);
    border-radius: var(--radius-card);
    width: 90vw;
    max-width: 680px;
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--space-6);
    box-shadow: 0 24px 48px rgba(60, 53, 46, 0.15);
    animation: modalFadeIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.booking-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--sand);
    border-radius: 50%;
    font-size: 22px;
    color: var(--dark-warm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 1;
}

.booking-modal-close:hover {
    background: var(--clay-light);
}

.booking-modal-body {
    min-height: 200px;
}

.booking-modal-loading {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--olive);
}

@media (max-width: 767px) {
    .booking-modal-content {
        width: 95vw;
        max-height: 90vh;
        padding: var(--space-4);
    }
}

/* =============================================
   WOOCOMMERCE OVERRIDES
   ============================================= */

/* Shop Category Filter — underline tabs matching portfolio filter */
.shop-filters {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--sand);
    position: sticky;
    top: 72px;
    background: var(--warm-white);
    z-index: 10;
}

.filter-tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    overflow-x: auto;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 10px 4px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--olive);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-fast);
}

.filter-tab:hover {
    color: var(--terracotta);
}

.filter-tab.active {
    color: var(--terracotta);
    border-bottom-color: var(--terracotta);
}

/* Shop Products Grid — gallery-style, borderless */
.shop-products {
    padding: var(--space-2) 0 var(--space-8);
}

ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

ul.products::before,
ul.products::after {
    display: none !important;
}

ul.products li {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    margin: 0 !important;
}

@media (min-width: 768px) {
    ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 36px 20px !important;
    }
}

@media (min-width: 1200px) {
    ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 36px 20px !important;
    }
}

/* Product Cards — borderless gallery style */
.product-card {
    border: none !important;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    transition: none;
    padding: 0 !important;
    margin: 0 !important;
}

.product-card::before,
.product-card::after {
    display: none !important;
}

.product-card:hover {
    transform: none;
    box-shadow: none;
}

.product-card-link {
    text-decoration: none !important;
    display: block;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.product-image-wrapper {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius-card);
    margin-bottom: 12px;
    background-color: var(--cream);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter 0.4s ease;
}

.product-card-link:hover .product-image-wrapper {
    filter: brightness(0.92);
}

/* Hover overlay with "View" label */
.product-image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(60, 53, 46, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-card);
    transition: background 0.4s ease;
}

.product-view-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    background: rgba(60, 53, 46, 0.7);
    padding: 10px 24px;
    border-radius: var(--radius-btn);
    backdrop-filter: blur(4px);
}

.product-card-link:hover .product-image-overlay {
    background: rgba(60, 53, 46, 0.12);
}

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

/* Product info — minimal, clean */
.product-card-info {
    padding: 0;
}

.product-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 400;
    color: var(--dark-warm);
    margin-bottom: 2px;
    line-height: 1.3;
}

.product-price {
    display: block;
    font-family: var(--font-heading);
    font-size: 15px;
    color: var(--terracotta);
}

.product-price .woocommerce-Price-amount {
    color: var(--terracotta);
    font-family: var(--font-heading);
    font-size: 15px;
}

/* Shop Pagination */
.shop-pagination,
.woocommerce-pagination {
    margin-top: var(--space-8);
    text-align: center;
}

.woocommerce-pagination ul,
.shop-pagination .woocommerce-pagination ul {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.woocommerce-pagination ul li {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--dark-warm) !important;
    text-decoration: none !important;
    transition: var(--transition-fast) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}

.woocommerce-pagination a:hover {
    border-color: var(--sand) !important;
    background: var(--warm-white) !important;
}

.woocommerce-pagination span.current {
    background: var(--dark-warm) !important;
    color: var(--white) !important;
    border-color: var(--dark-warm) !important;
}

/* ============================================
   SINGLE PRODUCT — Immersive Gallery Layout
   ============================================ */
.single-product-container {
    padding-top: 100px;
    padding-bottom: var(--space-10);
}

/* ─── Single Product Layout ─── */
.single-product-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 768px) {
    .single-product-layout {
        grid-template-columns: 3fr 2fr;
        gap: 56px;
        align-items: start;
    }
}

@media (min-width: 1200px) {
    .single-product-layout {
        gap: 80px;
    }
}

/* Gallery — sticky, large presence */
.product-gallery {
    position: sticky;
    top: 100px;
}

/* Reset WooCommerce default floats */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.single-product-layout .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Gallery grid: thumbs left, main image right */
.single-product-layout .woocommerce-product-gallery {
    display: grid !important;
    grid-template-columns: 64px 1fr !important;
    gap: 10px !important;
}

/* Move thumbs to first column */
.product-gallery .flex-control-thumbs {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    list-style: none;
    padding: 0;
}

/* Main image in second column */
.single-product-layout .woocommerce-product-gallery .flex-viewport,
.single-product-layout .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.product-gallery .woocommerce-product-gallery__image img {
    border-radius: var(--radius-card, 16px);
    width: 100%;
    height: auto;
}

/* Hide WooCommerce zoom trigger icon */
.product-gallery .woocommerce-product-gallery__trigger {
    display: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    float: none !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce div.product div.images .flex-control-thumbs img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity var(--transition-fast);
    border: 2px solid transparent;
}

.woocommerce div.product div.images .flex-control-thumbs img:hover {
    opacity: 0.7;
}

.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
    opacity: 1;
    border-color: var(--terracotta);
}

/* Mobile: thumbs below, horizontal */
@media (max-width: 767px) {
    .single-product-layout .woocommerce-product-gallery {
        grid-template-columns: 1fr !important;
    }

    .product-gallery .flex-control-thumbs {
        grid-column: 1 !important;
        grid-row: 2 !important;
        flex-direction: row !important;
    }
}

/* ─── Product Summary ─── */
.product-summary {
    padding-top: var(--space-2);
}

/* Category label */
a.product-category-label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--terracotta);
    text-decoration: none;
    margin-bottom: var(--space-3);
    transition: color var(--transition-fast);
}

a.product-category-label:hover {
    color: var(--dark-warm);
}

/* Product Title */
.product-single-title {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 300;
    color: var(--dark-warm);
    margin-bottom: var(--space-2);
    line-height: 1.15;
    letter-spacing: 0.5px;
}

/* Product Price */
.product-single-price {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--dark-warm);
    margin-bottom: 0;
}

.product-single-price .woocommerce-Price-amount {
    color: var(--dark-warm);
}

/* Divider */
.product-divider {
    width: 48px;
    height: 1px;
    background: var(--sand);
    margin: var(--space-4) 0;
}

/* Product Description */
.product-single-description {
    color: var(--text-body);
    line-height: 1.8;
    margin-bottom: var(--space-4);
    font-size: 0.92rem;
}

.product-single-description p:last-child {
    margin-bottom: 0;
}

/* Edition — inline, elegant */
.product-edition-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-5);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--terracotta);
}

.edition-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--terracotta);
    flex-shrink: 0;
}

/* Hide WooCommerce stock display (we show it in edition line) */
.product-summary .stock {
    display: none !important;
}

/* Add to Cart area */
.product-summary .cart {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: var(--space-3);
}

.product-summary .quantity {
    flex-shrink: 0;
}

.product-summary .quantity input.qty {
    border: 1.5px solid var(--sand);
    border-radius: 10px;
    padding: 14px 10px;
    font-family: var(--font-body);
    font-size: 15px;
    width: 56px;
    height: 100%;
    text-align: center;
    transition: border-color var(--transition-fast);
    background: transparent;
    color: var(--dark-warm);
    appearance: textfield;
    -moz-appearance: textfield;
}

.product-summary .quantity input.qty::-webkit-outer-spin-button,
.product-summary .quantity input.qty::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.product-summary .quantity input.qty:focus {
    border-color: var(--terracotta);
    outline: none;
}

.product-summary .single_add_to_cart_button {
    flex: 1;
    background: var(--dark-warm) !important;
    color: var(--warm-white) !important;
    border: none !important;
    border-radius: var(--radius-btn, 30px) !important;
    padding: 16px 32px !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    cursor: pointer;
    transition: all var(--transition-fast) !important;
}

.product-summary .single_add_to_cart_button:hover {
    background: var(--terracotta) !important;
}

/* Certificate note — subtle, below add to cart */
.product-certificate {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--clay-dark, #8B7355);
    letter-spacing: 0.3px;
    margin: 0;
}


/* Related Products */
.related.products {
    grid-column: 1 / -1;
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--sand);
}

.related.products > h2 {
    font-family: var(--font-heading) !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    text-align: center !important;
    margin-bottom: var(--space-5) !important;
    color: var(--dark-warm) !important;
}

.related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .related.products ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

.related.products .product-card,
.related.products li.product {
    text-align: left;
}

.related.products .product-image-wrapper,
.related.products li.product a img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-card);
    width: 100% !important;
    margin: 0 0 var(--space-1) !important;
}

.related.products li.product a {
    text-decoration: none;
}

.related.products .woocommerce-loop-product__title,
.related.products .product-title {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--dark-warm) !important;
    margin-bottom: 2px !important;
}

.related.products .price,
.related.products .product-price {
    font-size: 13px !important;
    color: var(--olive) !important;
}

/* Hide add-to-cart button in related products */
.related.products .button.add_to_cart_button {
    display: none !important;
}

/* Mobile single product */
@media (max-width: 767px) {
    .single-product-container {
        padding-top: 90px;
    }

    .product-gallery {
        position: static;
    }

    .product-meta-row {
        gap: 16px;
    }
}

/* WooCommerce Tabs Setup */
.woocommerce-tabs {
    grid-column: 1 / -1;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--sand);
}

.woocommerce-tabs ul.tabs {
    display: flex;
    justify-content: flex-start;
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4) 0;
    border-bottom: 1px solid var(--sand);
}

.woocommerce-tabs ul.tabs li {
    padding: 0;
    margin: 0;
}

.woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: var(--space-2) 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--olive);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: var(--transition-fast);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
    color: var(--terracotta);
    border-bottom-color: var(--terracotta);
}

.woocommerce-tabs h2 {
    display: none;
}

.woocommerce-tabs .panel {
    color: var(--olive);
    line-height: 1.8;
}

/* Cart & Checkout */
.woo-container {
    padding-top: 120px;
    padding-bottom: var(--space-10);
}

/* --- Custom Cart Layout --- */
.woocommerce-cart .woocommerce {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 120px var(--container-padding) var(--space-10);
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-8);
    align-items: start;
}

.cart-section-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 300;
    color: var(--dark-warm);
    margin-bottom: var(--space-5);
    letter-spacing: 0.02em;
}

/* Cart Items */
.cart-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--sand);
}

.cart-item:first-of-type {
    border-top: 1px solid var(--sand);
}

.cart-item-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--warm-white);
}

.cart-item-image a {
    display: block;
    width: 100%;
    height: 100%;
}

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

.cart-item-details {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.cart-item-info {
    flex: 1;
}

.cart-item-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 4px;
}

.cart-item-title a {
    color: var(--dark-warm);
    text-decoration: none;
}

.cart-item-title a:hover {
    color: var(--terracotta);
}

.cart-item-category {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clay-dark);
    margin-bottom: var(--space-1);
}

.cart-item-meta {
    margin: 10px 0;
    color: var(--olive);
    font-size: 12px;
    line-height: 1.6;
}

.cart-item-meta dl.variation {
    margin: 0;
}

.cart-item-meta dl.variation dt,
.cart-item-meta dl.variation dd {
    display: inline;
    float: none;
    margin: 0;
    padding: 0;
}

.cart-item-meta dl.variation dt {
    color: var(--clay-dark);
    font-weight: 500;
}

.cart-item-meta dl.variation dd::after {
    content: "";
    display: block;
}

.cart-item-meta p {
    display: inline;
    margin: 0;
}

.cart-item-price {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--dark-warm);
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.cart-item-subtotal {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    color: var(--dark-warm);
    min-width: 80px;
    text-align: right;
}

/* Quantity Input */
.cart-item-quantity .quantity {
    display: flex;
    align-items: center;
    border: 1px solid var(--sand);
    border-radius: 8px;
    overflow: hidden;
}

.cart-item-quantity .quantity input[type="number"] {
    width: 48px;
    text-align: center;
    border: none;
    padding: 8px 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--dark-warm);
    background: transparent;
    -moz-appearance: textfield;
}

.cart-item-quantity .quantity input::-webkit-outer-spin-button,
.cart-item-quantity .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove Button */
.cart-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--clay-dark);
    font-size: 20px;
    text-decoration: none;
    transition: var(--transition-fast);
}

.cart-item-remove:hover {
    background: var(--sand);
    color: var(--terracotta);
}

/* Cart Actions (Continue + Update) */
.cart-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-5);
    flex-wrap: wrap;
}

.cart-actions .btn-outline {
    display: inline-block;
    background: transparent;
    color: var(--dark-warm);
    border: 1px solid var(--sand);
    border-radius: var(--radius-btn);
    padding: 10px 24px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.cart-actions .btn-outline:hover {
    border-color: var(--dark-warm);
    background: var(--dark-warm);
    color: var(--white);
}

/* Cart Summary (right column) */
.cart-summary {
    position: sticky;
    top: 104px;
}

.cart-summary-inner {
    background: var(--warm-white);
    border: 1px solid var(--sand);
    border-radius: var(--radius-card);
    padding: var(--space-5);
}

.cart-summary .cart-section-title {
    font-size: 22px;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--sand);
}

.cart-totals-rows {
    margin-bottom: var(--space-3);
}

.cart-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: 14px;
    color: var(--text-body);
}

.cart-totals-row span:last-child {
    font-weight: 500;
    color: var(--dark-warm);
    text-align: right;
}

/* Shipping row — WC injects complex HTML */
.cart-totals-row .woocommerce-shipping-methods {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.cart-totals-row .woocommerce-shipping-methods li {
    margin: 0;
}

.cart-totals-row .woocommerce-shipping-methods label {
    font-weight: 500;
    color: var(--dark-warm);
}

/* Hide shipping calculator, destination, and change address in cart */
.cart-totals-row .woocommerce-shipping-destination,
.cart-totals-row .woocommerce-shipping-calculator,
.cart-totals-row .shipping-calculator-button {
    display: none !important;
}

.cart-free-shipping {
    color: var(--terracotta) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
}

.cart-totals-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--sand);
    margin-bottom: var(--space-4);
}

.cart-totals-total span:first-child {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--dark-warm);
}

.cart-totals-total span:last-child {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 500;
    color: var(--dark-warm);
}

.cart-checkout-btn .checkout-button {
    display: block;
    width: 100%;
    background: var(--dark-warm) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: var(--radius-btn) !important;
    padding: 16px 32px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast) !important;
}

.cart-checkout-btn .checkout-button:hover {
    background: var(--terracotta) !important;
}

/* Hide default WC cart elements — we use our custom template */
.woocommerce-cart .cart_totals h2,
.woocommerce-cart .shop_table.cart,
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cross-sells,
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-cart .wc-block-cart,
.woocommerce-cart .is-large.wc-block-cart {
    display: none !important;
}

/* Empty Cart */
.cart-empty-wrapper {
    text-align: center;
    padding: var(--space-16) 0;
    max-width: 400px;
    margin: 0 auto;
}

.cart-empty-title {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 300;
    color: var(--dark-warm);
    margin-bottom: var(--space-2);
}

.cart-empty-text {
    font-size: 15px;
    color: var(--olive);
    margin-bottom: var(--space-5);
}

/* Hide default WC empty cart message if it appears */
.woocommerce-cart .cart-empty,
.woocommerce-cart .return-to-shop {
    display: none;
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--dark-warm) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: var(--radius-btn) !important;
    padding: 12px 32px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    transition: var(--transition-fast) !important;
    cursor: pointer;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: var(--terracotta) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background-color: var(--terracotta) !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background-color: var(--dark-warm) !important;
}

/* ============================================
   CHECKOUT PAGE
   ============================================ */
.woocommerce-checkout .woocommerce {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: clamp(24px, 3vw, 40px) var(--container-padding) var(--space-10);
}

/* Two-column checkout layout */
.woocommerce-checkout .col2-set {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 768px) {
    .woocommerce-checkout .col2-set {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
}

body.afisyfes-workshop-checkout .woocommerce-checkout .col2-set,
body.afisyfes-workshop-checkout .col2-set {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
}

body.afisyfes-workshop-checkout .woocommerce-form-coupon-toggle,
body.afisyfes-workshop-checkout form.checkout_coupon,
body.afisyfes-workshop-checkout #order_review_heading,
body.afisyfes-workshop-checkout #order_review {
    width: 100%;
    max-width: 900px;
    margin-right: auto !important;
    margin-left: auto !important;
}

.workshop-checkout-intro {
    position: relative;
    max-width: 900px;
    margin: 0 auto clamp(32px, 5vw, 54px);
    padding: clamp(26px, 4vw, 44px);
    overflow: hidden;
    border: 1px solid var(--sand);
    border-radius: var(--radius-card);
    background: linear-gradient(135deg, var(--warm-white) 0%, var(--cream) 100%);
}

.workshop-checkout-intro::after {
    content: "";
    position: absolute;
    top: -54px;
    right: -38px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(184, 105, 74, 0.22);
    border-radius: 48% 52% 58% 42%;
    transform: rotate(18deg);
    pointer-events: none;
}

.workshop-checkout-intro .section-label {
    position: relative;
    z-index: 1;
}

.workshop-checkout-intro h1 {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 10px 0 12px;
    color: var(--dark-warm);
    font-family: var(--font-heading);
    font-size: clamp(40px, 6vw, 62px);
    font-weight: 300;
    line-height: 0.98;
}

.workshop-checkout-intro > p {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0;
    color: var(--olive);
    font-size: 15px;
    line-height: 1.65;
}

.workshop-checkout-steps {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 620px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.workshop-checkout-steps li {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--dark-warm);
    font-size: 12px;
    font-weight: 500;
}

.workshop-checkout-steps li:not(:last-child)::after {
    content: "";
    flex: 1;
    min-width: 10px;
    height: 1px;
    margin-left: 3px;
    background: var(--clay-light);
}

.workshop-checkout-steps span {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--clay);
    border-radius: 50%;
    color: var(--terracotta);
    font-size: 11px;
}

body.afisyfes-workshop-checkout #customer_details .col-1,
body.afisyfes-workshop-checkout #customer_details .col-2 {
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid var(--sand);
    border-radius: var(--radius-card);
    background: var(--warm-white);
}

/* Section headings */
.woocommerce-checkout h3 {
    font-family: var(--font-heading) !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    color: var(--dark-warm) !important;
    margin-bottom: var(--space-4) !important;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--sand);
}

/* Form fields */
.woocommerce-checkout .form-row {
    margin-bottom: var(--space-2) !important;
}

.woocommerce-checkout .form-row label {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--dark-warm) !important;
    margin-bottom: 6px !important;
}

.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper textarea,
.woocommerce-checkout select:not(.select2-hidden-accessible),
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"] {
    border: 1.5px solid var(--sand) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--dark-warm) !important;
    background: var(--white) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease !important;
}

.woocommerce-checkout .woocommerce-input-wrapper input:focus,
.woocommerce-checkout select:not(.select2-hidden-accessible):focus {
    border-color: var(--terracotta) !important;
    outline: none !important;
    box-shadow: none !important;
}

.woocommerce-checkout .select2-container {
    width: 100% !important;
    max-width: 100%;
}

/* Order review table */
.woocommerce-checkout #order_review_heading {
    font-family: var(--font-heading) !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    color: var(--dark-warm) !important;
    margin-top: var(--space-6) !important;
    margin-bottom: var(--space-4) !important;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--sand);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
    border: none !important;
    border-collapse: collapse !important;
    margin-bottom: var(--space-4) !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--sand) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--dark-warm) !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th {
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
    font-family: var(--font-heading) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    padding-top: var(--space-3) !important;
    border-bottom: none !important;
}

/* Payment methods */
.woocommerce-checkout #payment {
    background: var(--cream) !important;
    border-radius: var(--radius-card) !important;
    padding: clamp(20px, 3vw, 32px) !important;
    border: 1px solid var(--sand) !important;
}

.woocommerce-checkout #payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 var(--space-4) !important;
    border: none !important;
    display: grid;
    gap: 12px;
}

.woocommerce-checkout #payment ul.payment_methods li {
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid var(--sand) !important;
    border-radius: 12px !important;
    background: var(--warm-white) !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.woocommerce-checkout #payment ul.payment_methods li.is-selected,
.woocommerce-checkout #payment ul.payment_methods li:focus-within {
    border-color: var(--clay-dark) !important;
    background: var(--white) !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--dark-warm) !important;
    cursor: pointer;
}

.woocommerce-checkout #payment .payment_method_vivacom_smart img {
    display: block;
    width: auto;
    max-width: min(286px, 100%);
    max-height: 70px;
    margin: 12px 0 0 28px;
}

.woocommerce-checkout #payment input[name="payment_method"] {
    width: 20px;
    height: 20px;
    margin: 3px 10px 0 0 !important;
    accent-color: var(--terracotta);
    vertical-align: top;
}

.woocommerce-checkout #payment div.payment_box {
    margin: 14px 0 0 !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    background: var(--clay-light) !important;
    color: var(--olive) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--clay-light) !important;
}

.woocommerce-checkout #payment div.payment_box p {
    margin: 0 !important;
}

.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
    max-width: 920px;
    color: var(--olive);
    font-size: 13px;
    line-height: 1.6;
}

.workshop-payment-intro {
    margin-bottom: 22px;
}

.workshop-payment-intro .section-label {
    display: block;
    margin-bottom: 8px;
}

.woocommerce-checkout .workshop-payment-intro h3 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: clamp(25px, 3vw, 32px) !important;
}

.workshop-payment-intro p {
    max-width: 650px;
    margin: 0;
    color: var(--olive);
    font-size: 14px;
    line-height: 1.6;
}

/* Place order button */
.woocommerce-checkout #place_order {
    width: 100% !important;
    background: var(--dark-warm) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: var(--radius-btn) !important;
    padding: 18px 32px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    margin-top: var(--space-2) !important;
}

.woocommerce-checkout #place_order:hover {
    background: var(--terracotta) !important;
}

/* Mobile checkout */
@media (max-width: 767px) {
    .woocommerce-checkout .woocommerce {
        padding: 18px 14px var(--space-8);
    }

    .workshop-checkout-intro {
        margin-bottom: 26px;
        padding: 26px 20px 22px;
    }

    .workshop-checkout-intro::after {
        top: -72px;
        right: -70px;
    }

    .workshop-checkout-intro h1 {
        max-width: 300px;
        margin-top: 9px;
        font-size: clamp(38px, 12vw, 48px);
        line-height: 0.96;
    }

    .workshop-checkout-intro > p {
        max-width: 310px;
        font-size: 14px;
        line-height: 1.55;
    }

    .workshop-checkout-steps {
        gap: 5px;
        margin-top: 22px;
    }

    .workshop-checkout-steps::before {
        content: "";
        position: absolute;
        top: 14px;
        right: calc(33.333% - 14px);
        left: 14px;
        height: 1px;
        background: var(--clay-light);
    }

    .workshop-checkout-steps li {
        position: relative;
        display: grid;
        justify-items: start;
        gap: 6px;
        font-size: 10px;
        line-height: 1.25;
    }

    .workshop-checkout-steps li:not(:last-child)::after {
        display: none;
    }

    .workshop-checkout-steps span {
        position: relative;
        z-index: 1;
        background: var(--cream);
    }

    body.afisyfes-workshop-checkout #customer_details .col-1,
    body.afisyfes-workshop-checkout #customer_details .col-2 {
        padding: 22px 16px;
    }

    .woocommerce-checkout h3,
    .woocommerce-checkout #order_review_heading {
        font-size: 27px !important;
    }

    .woocommerce-checkout #order_review_heading {
        margin-top: 34px !important;
    }

    .woocommerce-checkout .woocommerce-checkout-review-order-table {
        table-layout: fixed;
    }

    .woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
        width: 68%;
        padding-right: 16px !important;
        overflow-wrap: anywhere;
    }

    .woocommerce-checkout .woocommerce-checkout-review-order-table .product-total {
        width: 32%;
        text-align: right;
    }

    .woocommerce-checkout #payment {
        padding: 20px 14px 16px !important;
    }

    .woocommerce-checkout #payment ul.payment_methods li {
        padding: 16px 14px !important;
    }

    .woocommerce-checkout #payment ul.payment_methods li label {
        width: calc(100% - 34px);
        font-size: 14px !important;
    }

    .woocommerce-checkout #payment .payment_method_vivacom_smart img {
        max-width: 100%;
        max-height: 58px;
        margin: 12px 0 0 30px;
    }

    .woocommerce-checkout #payment div.payment_box {
        margin-top: 12px !important;
        padding: 13px 14px !important;
        font-size: 13px !important;
    }

    .woocommerce-checkout #payment .woocommerce-privacy-policy-text {
        font-size: 12px;
        line-height: 1.55;
    }

    .woocommerce-checkout #place_order {
        min-height: 52px;
        padding: 16px 20px !important;
    }

    .woocommerce-checkout .woocommerce-input-wrapper input,
    .woocommerce-checkout .woocommerce-input-wrapper textarea,
    .woocommerce-checkout select:not(.select2-hidden-accessible),
    .woocommerce-checkout input[type="text"],
    .woocommerce-checkout input[type="email"],
    .woocommerce-checkout input[type="tel"] {
        min-height: 48px;
        font-size: 16px !important;
    }
}

/* Workshop order confirmation */
body.woocommerce-order-received .woocommerce {
    max-width: 1100px;
}

.woocommerce-order-received .woocommerce-thankyou-order-received {
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.woocommerce-order-received .woocommerce-thankyou-order-received::before {
    display: none !important;
}

.workshop-confirmation {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--sand);
    border-radius: var(--radius-card);
    background: linear-gradient(135deg, var(--warm-white), var(--cream));
}

.workshop-confirmation__mark {
    display: grid;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    background: var(--dark-warm);
    color: var(--warm-white);
    font-family: var(--font-body);
    font-size: 24px;
}

.workshop-confirmation--reserved .workshop-confirmation__mark {
    background: var(--terracotta);
}

.workshop-confirmation--refunded .workshop-confirmation__mark {
    background: var(--clay-dark);
}

.workshop-confirmation--pending .workshop-confirmation__mark {
    background: var(--olive);
}

.workshop-confirmation__content,
.workshop-confirmation__eyebrow,
.workshop-confirmation__title,
.workshop-confirmation__copy {
    display: block;
}

.workshop-confirmation__eyebrow {
    margin-bottom: 6px;
    color: var(--terracotta);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.workshop-confirmation__title {
    color: var(--dark-warm);
    font-family: var(--font-heading);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 300;
    line-height: 1.05;
}

.workshop-confirmation__copy {
    margin-top: 10px;
    color: var(--olive);
    font-size: 15px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.woocommerce-order-received .woocommerce-order-overview {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 0.85fr) minmax(0, 1.4fr);
    gap: 0;
    margin: 0 0 28px !important;
    padding: 0 !important;
    border: 1px solid var(--sand);
    border-radius: var(--radius-card);
    background: var(--warm-white);
    overflow: hidden;
}

.woocommerce-order-received .woocommerce-order-overview::before,
.woocommerce-order-received .woocommerce-order-overview::after {
    display: none !important;
}

.woocommerce-order-received .woocommerce-order-overview li {
    float: none !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 18px 20px !important;
    border-right: 1px solid var(--sand) !important;
    color: var(--olive);
    font-size: 10px !important;
    letter-spacing: 0.1em;
}

.woocommerce-order-received .woocommerce-order-overview li:last-child {
    border-right: 0 !important;
}

.woocommerce-order-received .woocommerce-order-overview li strong {
    display: block;
    margin-top: 7px;
    color: var(--dark-warm);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-transform: none;
}

.workshop-confirmation-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0 0 50px;
}

.workshop-confirmation-actions .btn {
    padding: 14px 24px;
}

.workshop-confirmation-actions__link {
    color: var(--dark-warm);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.workshop-confirmation-actions__link:hover {
    color: var(--terracotta);
}

.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
    margin-bottom: 42px;
}

.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
    margin-bottom: 20px;
    color: var(--dark-warm);
    font-family: var(--font-heading);
    font-size: clamp(32px, 5vw, 44px);
    font-weight: 300;
}

.woocommerce-order-received .woocommerce-order-details table.shop_table {
    border: 1px solid var(--sand) !important;
    border-radius: var(--radius-card) !important;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
}

.woocommerce-order-received .woocommerce-order-details table.shop_table th,
.woocommerce-order-received .woocommerce-order-details table.shop_table td {
    padding: 16px 18px !important;
    border-color: var(--sand) !important;
}

.woocommerce-order-received .woocommerce-order-details table.shop_table th {
    color: var(--dark-warm);
    font-size: 12px;
    letter-spacing: 0.05em;
}

.woocommerce-order-received .woocommerce-order-details table.shop_table td {
    color: var(--olive);
    font-size: 15px;
    line-height: 1.55;
}

.woocommerce-order-received .woocommerce-order-details table.shop_table .wc-item-meta {
    margin: 10px 0 0;
    padding: 0;
}

.woocommerce-order-received .woocommerce-order-details table.shop_table .wc-item-meta li {
    margin: 4px 0;
}

@media (max-width: 960px) {
    .woocommerce-order-received .woocommerce-order-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .woocommerce-order-received .woocommerce-order-overview li {
        border-right: 1px solid var(--sand) !important;
        border-bottom: 1px solid var(--sand) !important;
    }

    .woocommerce-order-received .woocommerce-order-overview li:nth-child(even) {
        border-right: 0 !important;
    }

    .woocommerce-order-received .woocommerce-order-overview li:last-child {
        grid-column: 1 / -1;
        border-right: 0 !important;
        border-bottom: 0 !important;
    }
}

@media (max-width: 600px) {
    body.woocommerce-order-received .woocommerce {
        padding-right: 14px;
        padding-left: 14px;
    }

    .workshop-confirmation {
        display: block;
        padding: 24px 20px;
    }

    .workshop-confirmation__mark {
        width: 44px;
        height: 44px;
        margin-bottom: 20px;
        font-size: 19px;
    }

    .workshop-confirmation__title {
        font-size: clamp(32px, 10vw, 40px);
        line-height: 1;
    }

    .workshop-confirmation__copy {
        font-size: 14px;
    }

    .workshop-confirmation-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 38px;
        text-align: center;
    }

    .workshop-confirmation-actions .btn {
        width: 100%;
    }

    .woocommerce-order-received .woocommerce-order-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .woocommerce-order-received .woocommerce-order-overview li {
        padding: 15px 14px !important;
    }

    .woocommerce-order-received .woocommerce-order-overview li.woocommerce-order-overview__email,
    .woocommerce-order-received .woocommerce-order-overview li.woocommerce-order-overview__total,
    .woocommerce-order-received .woocommerce-order-overview li.woocommerce-order-overview__payment-method {
        grid-column: 1 / -1;
        border-right: 0 !important;
    }

    .woocommerce-order-received .woocommerce-order-overview li.woocommerce-order-overview__email strong,
    .woocommerce-order-received .woocommerce-order-overview li.woocommerce-order-overview__total strong,
    .woocommerce-order-received .woocommerce-order-overview li.woocommerce-order-overview__payment-method strong {
        overflow-wrap: anywhere;
    }

    .woocommerce-order-received .woocommerce-order-details table.shop_table thead {
        display: none;
    }

    .woocommerce-order-received .woocommerce-order-details table.shop_table tbody tr {
        display: block;
        padding: 4px 0;
        border-bottom: 1px solid var(--sand);
    }

    .woocommerce-order-received .woocommerce-order-details table.shop_table tbody td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: 0 !important;
        text-align: left !important;
    }

    .woocommerce-order-received .woocommerce-order-details table.shop_table tbody td.product-total {
        padding-top: 0 !important;
        color: var(--dark-warm);
        font-weight: 600;
    }

    .woocommerce-order-received .woocommerce-order-details table.shop_table tfoot tr {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
    }

    .woocommerce-order-received .woocommerce-order-details table.shop_table tfoot th,
    .woocommerce-order-received .woocommerce-order-details table.shop_table tfoot td {
        display: block;
        width: auto;
        border-color: var(--sand) !important;
        text-align: right !important;
    }

    .woocommerce-order-received .woocommerce-order-details table.shop_table tfoot th {
        text-align: left !important;
    }
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
    border-top-color: var(--terracotta);
    background-color: var(--warm-white);
    border-radius: var(--radius-card);
}

/* Hide "added to cart" notice on cart page — redundant */
.woocommerce-cart .woocommerce-message {
    display: none;
}

/* Hide default page title on cart/checkout — our template shows its own */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
    display: none;
}

.woocommerce .woocommerce-error {
    border-top-color: #c00;
    background-color: var(--warm-white);
    border-radius: var(--radius-card);
}

.woocommerce-breadcrumb,
.woocommerce-result-count,
.woocommerce-ordering {
    display: none !important;
}

@media (max-width: 768px) {
    .woo-container {
        padding-top: 100px;
    }
}

/* =============================================
   OUR PROCESS PAGE
   ============================================= */

/* Process Intro */
.process-page-intro {
  padding: var(--space-10) 0;
  text-align: center;
}

.process-intro-text {
  max-width: 640px;
  margin: 0 auto;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.8;
  color: var(--olive);
}

/* Process Steps */
.process-step {
  padding: var(--space-8) 0;
}

.process-step:nth-child(even) {
  background: var(--warm-white);
}

.process-step {
  padding: var(--space-5) 0;
}

.process-zigzag {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 992px) {
  .process-zigzag {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-8);
  }

  /* Even steps: image right, text left */
  .process-step:nth-of-type(even) .process-step-image {
    order: 2;
  }

  .process-step:nth-of-type(even) .process-step-content {
    order: 1;
  }
}

/* Process Step Image */
.process-step-image {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--warm-white);
}

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

/* Process Step Content */
.process-step-content {
  padding: var(--space-3) 0;
}

.process-step-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 300;
  color: var(--sand);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.process-step-label {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--terracotta);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
}

.process-step-content h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 300;
  color: var(--dark-warm);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.process-step-content p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--olive);
  max-width: 520px;
}

/* Process CTA */
.process-cta {
  padding: var(--space-12) 0;
  background: var(--cream);
  text-align: center;
}

.process-closing-quote {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.5vw, 36px);
  font-style: italic;
  font-weight: 300;
  color: var(--dark-warm);
  margin: 0 auto var(--space-5);
  max-width: 600px;
  line-height: 1.4;
  border: none;
  padding: 0;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .process-step {
    padding: var(--space-6) 0;
  }

  .process-step-number {
    font-size: 48px;
  }
}

/* ─── Limited Edition / Product Cards ─── */
.product-edition {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--terracotta);
    margin-top: var(--space-1, 4px);
}

/* =============================================
   STUDIO DIARY PAGE
   ============================================= */

/* Diary Hero — text-only, elegant */
.diary-hero {
    padding: 140px 0 var(--space-8);
    text-align: center;
    background: var(--cream);
}

.diary-hero .section-label {
    display: block;
    margin-bottom: var(--space-3);
}

.diary-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 300;
    color: var(--dark-warm);
    margin-bottom: var(--space-3);
    line-height: 1.1;
}

.diary-hero-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 300;
    font-style: italic;
    color: var(--olive);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

.diary-hero-line {
    width: 40px;
    height: 1px;
    background: var(--terracotta);
    margin: var(--space-5) auto 0;
}

/* Diary Category Tabs */
.diary-nav {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--sand);
  position: sticky;
  top: 72px;
  background: var(--white);
  z-index: 50;
}

.diary-nav .container {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* `safe center` centers the tabs when they fit, but falls back to
     flex-start when they overflow — prevents the first tab from getting
     clipped off the left edge on narrow mobile widths. */
  justify-content: safe center;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.diary-nav .container::-webkit-scrollbar {
  display: none;
}

.diary-nav a {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--olive);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all 0.2s;
}

.diary-nav a:hover {
  color: var(--terracotta);
}

.diary-nav a.active {
  border-color: var(--dark-warm);
  color: var(--dark-warm);
}

/* Diary Posts Section */
.diary-posts {
    padding: var(--section-padding) 0;
    background: var(--warm-white);
}

.diary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

/* Diary Card */
.diary-card {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--sand);
    border-radius: var(--radius-card, 16px);
    overflow: hidden;
    background: var(--cream);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.diary-card:hover {
    transform: translateY(-2px);
}

/* Featured card */
.diary-card--featured {
    border: none;
    background: transparent;
    border-radius: 0;
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--sand);
}

.diary-card-image {
    display: block;
    overflow: hidden;
}

.diary-card-image img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.diary-card--featured .diary-card-image img {
    height: 400px;
    border-radius: var(--radius-card, 16px);
}

/* Placeholder when no featured image */
.diary-card-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sand) 0%, var(--clay-light) 100%);
    text-decoration: none;
    height: 280px;
}

.diary-card--featured .diary-card-image--placeholder {
    height: 400px;
    border-radius: var(--radius-card, 16px);
}

.diary-placeholder-inner {
    text-align: center;
}

.diary-placeholder-icon {
    font-family: var(--font-heading);
    font-size: 56px;
    font-weight: 300;
    color: var(--terracotta-muted);
    opacity: 0.6;
}

/* Card Content */
.diary-card-content {
    padding: var(--space-4) var(--space-4) var(--space-5);
}

.diary-card--featured .diary-card-content {
    padding: var(--space-5) 0 0;
}

/* Date */
.diary-date {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: var(--space-2);
}

.diary-date-day {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 300;
    color: var(--terracotta);
    line-height: 1;
}

.diary-date-month {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--olive);
}

.diary-card--featured .diary-date-day {
    font-size: 36px;
}

/* Title */
.diary-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 1.4rem;
    margin-bottom: var(--space-2);
    line-height: 1.3;
}

.diary-card--featured .diary-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.diary-title a {
    color: var(--dark-warm);
    text-decoration: none;
    transition: color 0.3s ease;
}

.diary-title a:hover {
    color: var(--terracotta);
}

/* Excerpt */
.diary-excerpt {
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: var(--space-3);
}

/* Read More Link */
.diary-read-more {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--terracotta);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.diary-read-more:hover {
    border-bottom-color: var(--terracotta);
    color: var(--dark-warm);
}

/* Pagination */
.diary-pagination {
    text-align: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--sand);
}

.diary-pagination .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    border: 1px solid var(--sand);
    border-radius: 30px;
    text-decoration: none;
    color: var(--dark-warm);
    font-size: 0.85rem;
    transition: all 0.28s ease;
}

.diary-pagination .page-numbers.current,
.diary-pagination .page-numbers:hover {
    background: var(--dark-warm);
    color: var(--white);
    border-color: var(--dark-warm);
}

/* Empty State */
.diary-empty {
    text-align: center;
    padding: 80px 0;
    color: var(--text-body);
}

.diary-empty p {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--olive);
    line-height: 1.8;
}

/* Responsive — horizontal cards on tablet+ */
@media (min-width: 768px) {
    .diary-card:not(.diary-card--featured) {
        grid-template-columns: 320px 1fr;
    }

    .diary-card:not(.diary-card--featured) .diary-card-image img,
    .diary-card:not(.diary-card--featured) .diary-card-image--placeholder {
        height: 100%;
        min-height: 240px;
        border-radius: 0;
    }

    .diary-card:not(.diary-card--featured) .diary-card-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--space-5);
    }
}

@media (max-width: 767px) {
    .diary-hero {
        padding: 120px 0 var(--space-5);
    }

    .diary-card-image img,
    .diary-card-image--placeholder {
        height: 220px !important;
    }

    .diary-card--featured .diary-card-image img,
    .diary-card--featured .diary-card-image--placeholder {
        height: 260px !important;
        border-radius: var(--radius-card, 16px) var(--radius-card, 16px) 0 0;
    }
}

/* ─── Studio Diary — Single Article ─── */
.diary-article {
    padding-top: 120px;
}

.diary-article-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.diary-back-link {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--terracotta);
    text-decoration: none;
    margin-bottom: var(--space-4);
    transition: color 0.28s ease;
}

.diary-back-link:hover {
    color: var(--dark-warm);
}

.diary-article-date {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--clay-dark);
    margin-bottom: var(--space-3);
}

.diary-article-title {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 300;
    color: var(--dark-warm);
    line-height: 1.15;
    margin-bottom: var(--space-3);
}

.diary-article-excerpt {
    font-size: 1.1rem;
    color: var(--text-body);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

.diary-article-hero {
    max-width: 960px;
    margin: 0 auto var(--space-8);
}

.diary-hero-img {
    width: 100%;
    height: auto;
    max-height: 640px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-card);
    display: block;
}

.diary-article-body {
    margin-bottom: var(--space-10);
}

.container-narrow {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding, 20px);
    padding-right: var(--container-padding, 20px);
}

.diary-article-body p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text-body);
    margin-bottom: 1.5em;
}

.diary-article-body h2,
.diary-article-body h3 {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-weight: 400;
    color: var(--dark-warm);
    margin-top: 2em;
    margin-bottom: 0.75em;
}

.diary-article-body h2 {
    font-size: 1.75rem;
}

.diary-article-body h3 {
    font-size: 1.35rem;
}

.diary-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-card, 16px);
    margin: 2em 0;
}

.diary-article-body blockquote {
    border-left: 3px solid var(--terracotta);
    padding-left: var(--space-4);
    margin: 2em 0;
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--dark-warm);
    line-height: 1.6;
}

.diary-article-body blockquote p {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* Related links — keep readers exploring */
.diary-related {
    border-top: 1px solid var(--sand);
    padding: var(--space-6) 0 var(--space-4);
    text-align: center;
}

.diary-related-eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--terracotta);
    margin: 0 0 var(--space-3);
}

.diary-related-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    justify-content: center;
}

.diary-related-links a {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 18px;
    color: var(--dark-warm);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.diary-related-links a:hover {
    color: var(--terracotta);
    border-bottom-color: var(--terracotta);
}

/* Post Navigation */
.diary-post-nav {
    border-top: 1px solid var(--sand);
    padding: var(--space-6) 0 var(--space-10);
}

.diary-nav-links {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

.diary-nav-prev,
.diary-nav-next {
    text-decoration: none;
    max-width: 45%;
}

.diary-nav-next {
    text-align: right;
    margin-left: auto;
}

.diary-nav-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--terracotta);
    margin-bottom: var(--space-1, 4px);
}

.diary-nav-title {
    display: block;
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--dark-warm);
    transition: color 0.28s ease;
}

.diary-nav-prev:hover .diary-nav-title,
.diary-nav-next:hover .diary-nav-title {
    color: var(--terracotta);
}

@media (max-width: 768px) {
    .diary-article {
        padding-top: 100px;
    }

    .diary-article-hero {
        margin-left: -20px;
        margin-right: -20px;
    }

    .diary-hero-img {
        border-radius: 0;
    }

    .diary-nav-links {
        flex-direction: column;
    }

    .diary-nav-prev,
    .diary-nav-next {
        max-width: 100%;
    }

    .diary-nav-next {
        text-align: left;
    }
}

/* ─── Atelier Experiences ─── */
.atelier-intro {
    padding: var(--section-padding) 0;
}

.atelier-experiences {
    padding: var(--section-padding) 0;
}

.experience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.experience-card {
    border: 1px solid var(--sand);
    border-radius: var(--radius-card, 16px);
    padding: var(--space-8) var(--space-6);
    background: var(--white);
    text-align: center;
    transition: transform var(--transition-fast);
}

.experience-card:hover {
    transform: translateY(-3px);
}

.experience-icon {
    margin-bottom: var(--space-4);
}

.experience-card h3 {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-weight: 400;
    font-size: 1.35rem;
    margin-bottom: var(--space-2);
}

.experience-card p {
    font-size: 0.92rem;
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

.experience-meta {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--clay-dark);
}

.atelier-process {
    padding: var(--section-padding) 0;
}

.atelier-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-8);
    text-align: center;
}

.atelier-step {
    padding: var(--space-4);
}

.step-number {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--terracotta);
    display: block;
    margin-bottom: var(--space-4);
}

.atelier-step h3 {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-weight: 400;
    font-size: 1.15rem;
    margin-bottom: var(--space-2);
}

.atelier-step p {
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.7;
}

.atelier-cta {
    background: var(--dark-warm);
    padding: var(--section-padding) 0;
    text-align: center;
}

.atelier-cta h2 {
    color: var(--warm-white);
}

.atelier-cta p {
    color: var(--clay-light);
    font-size: 1.05rem;
}

@media (max-width: 768px) {
    .experience-grid {
        grid-template-columns: 1fr;
    }
    .atelier-steps {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* =============================================
   MOBILE RESPONSIVE AUDIT — Full Fix Pass
   ============================================= */

/* --- Touch Targets: minimum 44x44px tap area --- */

/* Hamburger: expand from 32px to 44px */
.mobile-menu-toggle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

/* Accordion triggers: ensure 44px minimum height */
.accordion-trigger {
  min-height: 44px;
}

/* Portfolio filter buttons: ensure 44px tap area */
.portfolio-filter {
  min-height: 44px;
  padding: 12px 8px;
}

/* FAQ summary: ensure 44px tap target */
.faq-list summary {
  min-height: 44px;
}

/* Footer links: ensure tap area on mobile */
@media (max-width: 767px) {
  .footer-links a {
    padding: 6px 0;
  }

  /* Mobile nav links: already block, ensure height */
  .main-navigation a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Buttons: base .btn already 14px padding + 13px font ~41px; reinforce */
.btn {
  min-height: 44px;
}

.btn-sm {
  min-height: 44px;
  padding: 12px 22px;
}

/* --- Font Sizes: nothing smaller than 12px on mobile --- */
@media (max-width: 767px) {
  .section-label {
    font-size: 12px;
  }

  .category-number {
    font-size: 12px;
  }

  .portfolio-filter {
    font-size: 12px;
  }

  .faq-list summary {
    font-size: 12px;
  }

  .mega-menu-label {
    font-size: 12px;
  }
}

/* --- Shop Products: keep 2 columns on small mobile --- */
@media (max-width: 480px) {
  .shop-products ul.products {
    gap: 24px 12px;
  }

  .related.products ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
  }
}

/* --- Cart link visible on mobile (in slide-in nav area) --- */
@media (max-width: 767px) {
  .cart-link {
    display: block;
  }
}


/* --- Process teaser: no sticky on mobile (already handled but reinforce) --- */
@media (max-width: 991px) {
  .process-intro {
    position: static;
  }
}

/* --- Workshops banner: smaller heading on small mobile --- */
@media (max-width: 480px) {
  .workshops-banner-heading {
    font-size: 32px;
  }

  .workshops-banner-cta {
    flex-direction: column;
    align-items: center;
  }

  .workshops-banner-cta .btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
}

/* --- Workshop cards: ensure single column on small mobile --- */
@media (max-width: 575px) {
  .workshop-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Portfolio grid: ensure 1 column on small phones --- */
@media (max-width: 479px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Single product: gallery un-sticky on mobile (already done but reinforce) --- */
@media (max-width: 768px) {
  .product-gallery {
    position: static;
  }
}

/* --- Prevent horizontal overflow everywhere --- */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

/* Container safety: full width capping */
.container {
  width: 100%;
}

/* Instagram grid: prevent overflow on very small screens */
@media (max-width: 374px) {
  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Page hero: tighter on small mobile --- */
@media (max-width: 480px) {
  .page-hero {
    min-height: 280px;
    padding-top: 72px;
  }

  .page-hero h1 {
    font-size: 32px;
  }
}

/* --- Footer: mobile — hide nav, keep minimal --- */
@media (max-width: 767px) {
  .site-footer {
    padding: var(--space-5) 0 var(--space-4);
  }

  .footer-nav-grid {
    display: none;
  }

  .footer-main {
    gap: 0;
    padding-bottom: var(--space-4);
  }

  .footer-bottom {
    gap: 3px;
    font-size: 12px;
  }
}

/* --- Process page zigzag: image first, text second on mobile (natural flow) --- */
@media (max-width: 991px) {
  .process-zigzag {
    gap: var(--space-4);
  }

  .process-step-content {
    padding: 0;
  }
}

/* --- Craft grid: single column on small mobile --- */
@media (max-width: 575px) {
  .craft-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Contact grid: single column on small mobile --- */
@media (max-width: 575px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Values grid: single column on very small --- */
@media (max-width: 479px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Process grid (custom orders): safe stacking --- */
@media (max-width: 575px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Mega menu hidden on mobile (already done, reinforce) --- */
@media (max-width: 991px) {
  .mega-menu {
    display: none !important;
  }

  /* Ensure mobile nav panel doesn't cause horizontal overflow */
  .main-navigation-wrapper {
    max-width: 100vw;
  }
}

/* --- Split section: ensure image appears on top on mobile (natural order) --- */
@media (max-width: 991px) {
  .split-section {
    gap: var(--space-5);
  }
}

/* --- Examples grid (custom orders): single column on small mobile --- */
@media (max-width: 575px) {
  .examples-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Workshop info grid: single column on small mobile --- */
@media (max-width: 575px) {
  .workshops-info-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Breadcrumb on small mobile --- */
@media (max-width: 480px) {
  .breadcrumb-nav {
    font-size: 12px;
  }
}

/* --- WooCommerce cart/checkout on mobile --- */
@media (max-width: 768px) {
  .cart-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .woocommerce-cart .woocommerce {
    padding-top: 100px;
  }

  .cart-summary {
    position: static;
  }

  .cart-item-details {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-item-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .woo-container {
    padding-top: 90px;
  }

  .woocommerce-cart .woocommerce {
    padding-top: 90px;
  }

  .single-product-container {
    padding-top: 90px;
  }

  .cart-item {
    gap: var(--space-2);
  }

  .cart-item-image {
    width: 80px;
    height: 80px;
  }

  .cart-item-title {
    font-size: 17px;
  }

  .cart-section-title {
    font-size: 24px;
  }
}

/* --- Contact Page --- */

/* Contact intro — no hero, editorial open */
.contact-intro-section {
  padding: 140px 0 var(--space-6);
  text-align: center;
  background: var(--warm-white);
}

.contact-page-title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(42px, 6vw, 72px);
  color: var(--dark-warm);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

.contact-page-title em {
  font-style: italic;
  color: var(--terracotta);
}

.contact-invitation-text {
  font-family: var(--font-heading);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.8;
  color: var(--olive);
  max-width: 560px;
  margin: 0 auto;
}

/* Contact strip — horizontal details */
.contact-strip {
  padding: var(--space-5) 0 var(--space-8);
}

.contact-strip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  text-align: center;
}

@media (min-width: 768px) {
  .contact-strip-grid {
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--sand);
    border-bottom: 1px solid var(--sand);
    padding: var(--space-5) 0;
  }
}

.contact-strip-item .section-label {
  margin-bottom: 8px;
}

.contact-strip-item p {
  font-size: 14px;
  color: var(--dark-warm);
  line-height: 1.6;
}

.contact-strip-item a {
  color: var(--dark-warm);
  text-decoration: none;
  transition: color 0.2s;
}

.contact-strip-item a:hover {
  color: var(--terracotta);
}

/* Form section — dark background */
.contact-form-section {
  background: var(--dark-warm);
  padding: var(--section-padding) 0;
}

.contact-form-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .contact-form-layout {
    grid-template-columns: 1fr 1.3fr;
    gap: var(--space-8);
    max-width: none;
    align-items: start;
  }
}

.contact-form-header h2 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 44px);
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.contact-form-header h2 em {
  font-style: italic;
  color: var(--terracotta-muted);
}

.contact-form-header p {
  font-size: 15px;
  font-weight: 300;
  color: rgba(247, 243, 238, 0.5);
  line-height: 1.8;
  max-width: 320px;
}

/* Form on dark bg */
.contact-form-section .contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-form-section .form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 576px) {
  .contact-form-section .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form-section .form-group label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--terracotta-muted);
  margin-bottom: 8px;
}

.contact-form-section .form-group input,
.contact-form-section .form-group select,
.contact-form-section .form-group textarea {
  width: 100%;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--cream);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(196, 168, 130, 0.4);
  border-radius: 0;
  transition: border-color 0.3s;
  -webkit-appearance: none;
}

.contact-form-section .form-group input::placeholder,
.contact-form-section .form-group textarea::placeholder {
  color: rgba(247, 243, 238, 0.55);
}

.contact-form-section .form-group input:focus,
.contact-form-section .form-group select:focus,
.contact-form-section .form-group textarea:focus {
  outline: none;
  border-bottom-color: var(--terracotta-muted);
}

.contact-form-section .form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-form-section .form-group select {
  cursor: pointer;
  color: rgba(247, 243, 238, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C4A882' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 24px;
}

.contact-form-section .form-group select option {
  background: var(--dark-warm);
  color: var(--cream);
}

/* Submit button — outlined on dark */
.contact-submit-btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: var(--space-3);
  padding: 14px 36px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream);
  background: transparent;
  border: 1.5px solid rgba(196, 168, 130, 0.3);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.contact-submit-btn:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: white;
}

.contact-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Feedback messages */
.form-feedback {
  margin-top: var(--space-2);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
}

.form-feedback--success {
  background: rgba(196, 168, 130, 0.1);
  color: var(--clay);
  border: 1px solid rgba(196, 168, 130, 0.2);
}

.form-feedback--error {
  background: rgba(184, 105, 74, 0.1);
  color: var(--terracotta-muted);
  border: 1px solid rgba(184, 105, 74, 0.2);
}

/* 404 Page */
.error-404-page {
    min-height: 100vh;
    background: #2A2420;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 100px 40px 60px;
}

.e404-bg-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(196,168,130,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(196,168,130,0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.e404-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184,105,74,0.12) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.e404-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    opacity: 0.2;
}
.e404-corner--tl { top: 24px; left: 24px; border-top: 1px solid var(--clay); border-left: 1px solid var(--clay); }
.e404-corner--tr { top: 24px; right: 24px; border-top: 1px solid var(--clay); border-right: 1px solid var(--clay); }
.e404-corner--bl { bottom: 24px; left: 24px; border-bottom: 1px solid var(--clay); border-left: 1px solid var(--clay); }
.e404-corner--br { bottom: 24px; right: 24px; border-bottom: 1px solid var(--clay); border-right: 1px solid var(--clay); }

.e404-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.e404-logo-ring {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 1px solid rgba(196,168,130,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 40px;
    position: relative;
}

.e404-logo-ring::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px solid rgba(196,168,130,0.1);
}

.e404-logo-ring img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.e404-label {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(196,168,130,0.5);
    margin-bottom: 24px;
}

.e404-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(36px, 5vw, 52px);
    color: var(--cream);
    line-height: 1.2;
    margin-bottom: 20px;
}

.e404-title em {
    font-style: italic;
    color: var(--terracotta-muted);
}

.e404-text {
    font-size: 15px;
    font-weight: 300;
    color: rgba(247,243,238,0.5);
    line-height: 1.8;
    max-width: 380px;
    margin: 0 auto 48px;
}

.e404-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.e404-btn-primary {
    display: inline-block;
    padding: 14px 32px;
    background: var(--terracotta);
    border: 1.5px solid var(--terracotta);
    border-radius: var(--radius-btn);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    transition: background 0.3s, color 0.3s;
}

.e404-btn-primary:hover {
    background: transparent;
    color: var(--terracotta-muted);
}

.e404-btn-secondary {
    display: inline-block;
    padding: 14px 32px;
    border: 1.5px solid rgba(196,168,130,0.3);
    border-radius: var(--radius-btn);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(247,243,238,0.6);
    transition: border-color 0.3s, color 0.3s;
}

.e404-btn-secondary:hover {
    border-color: var(--clay);
    color: var(--cream);
}

@media (max-width: 480px) {
    .e404-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* --- Legal / Info Pages (.legal-content) --- */
.legal-content {
  padding: var(--space-10) 0;
}

.legal-container {
  max-width: 780px;
}

.legal-section {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--sand);
}

.legal-section:last-of-type {
  border-bottom: none;
}

.legal-section .section-label {
  margin-bottom: var(--space-3);
}

.legal-section h2 {
  font-size: clamp(26px, 3.5vw, 36px);
  margin-bottom: var(--space-4);
}

.legal-section h3 {
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--dark-warm);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}

.legal-section h3:first-of-type {
  margin-top: var(--space-3);
}

.legal-section p {
  margin-bottom: var(--space-3);
  line-height: 1.85;
  font-size: 15px;
  color: var(--text-body);
}

.legal-section ul {
  margin: 0 0 var(--space-3) var(--space-3);
  padding-left: var(--space-3);
  list-style: disc;
}

.legal-section ul li {
  margin-bottom: var(--space-1);
  line-height: 1.8;
  font-size: 15px;
  color: var(--text-body);
}

.legal-section a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.legal-section a:hover {
  color: var(--clay-dark);
}

.legal-table-wrap {
  overflow-x: auto;
  margin: var(--space-3) 0;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--sand);
}

.legal-table th {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--olive);
}

.legal-table td {
  color: var(--text-body);
}

.legal-table a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-contact {
  text-align: center;
  padding: var(--space-8) 0 var(--space-4);
}

.legal-contact h3 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 300;
  color: var(--dark-warm);
  margin-bottom: var(--space-2);
}

.legal-contact p {
  color: var(--text-body);
  margin-bottom: var(--space-2);
  font-size: 15px;
}

.legal-contact a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.legal-contact a:hover {
  color: var(--clay-dark);
}

.legal-update-date {
  font-size: 13px;
  color: var(--olive);
  margin-top: var(--space-3);
}

/* --- General safety: prevent wide images / embeds from breaking layout --- */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
}

/* =============================================
   CART TOAST — φ morphs to ✓
   ============================================= */
.cart-toast {
    position: fixed !important;
    top: 24px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 280px;
    transform: translateX(-50%) translateY(-20px) !important;
    background: var(--warm-white) !important;
    border: 1px solid var(--sand) !important;
    color: var(--dark-warm) !important;
    padding: 18px 30px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 99999 !important;
    pointer-events: none;
    box-shadow: 0 8px 32px rgba(60, 53, 46, 0.1);
}

.cart-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0) !important;
}

.cart-toast-icon {
    width: 38px;
    height: 38px;
    position: relative;
    flex-shrink: 0;
}

.cart-toast-icon .circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--terracotta);
    transform: scale(0);
}

.cart-toast.show .circle {
    animation: ctCirclePop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cart-toast-icon .ripple {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid var(--terracotta-muted);
    transform: scale(0);
    opacity: 0;
}

.cart-toast.show .ripple {
    animation: ctRippleOut 0.7s 0.12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cart-toast-icon .phi-svg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.cart-toast-icon .phi-svg svg {
    width: 22px;
    height: 22px;
}

.cart-toast-icon .phi-svg .phi-stroke {
    stroke: white;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
}

.cart-toast.show .phi-svg {
    animation: ctFadeIn 0.01s 0.25s forwards, ctFadeOut 0.3s 1.5s ease forwards;
}

.cart-toast.show .phi-stroke {
    animation: ctDrawStroke 0.9s 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cart-toast-icon .check-svg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.cart-toast-icon .check-svg svg {
    width: 18px;
    height: 18px;
    stroke: white;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
}

.cart-toast.show .check-svg {
    animation: ctFadeIn 0.01s 1.6s forwards;
}

.cart-toast.show .check-svg svg {
    animation: ctDrawStroke 0.45s 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cart-toast-text {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.3;
}

.cart-toast-text em {
    font-style: italic;
    color: var(--terracotta);
}

.cart-toast-bar {
    position: absolute;
    bottom: 0;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--terracotta-muted);
    border-radius: 0 0 14px 14px;
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0.35;
}

.cart-toast.show .cart-toast-bar {
    animation: ctBarProgress 2.8s 0.3s linear forwards;
}

@keyframes ctCirclePop {
    0% { transform: scale(0); }
    65% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes ctRippleOut {
    0% { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(2); opacity: 0; }
}

@keyframes ctDrawStroke {
    to { stroke-dashoffset: 0; }
}

@keyframes ctFadeIn {
    to { opacity: 1; }
}

@keyframes ctFadeOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.7); }
}

@keyframes ctBarProgress {
    0% { transform: scaleX(0); }
    85% { transform: scaleX(1); opacity: 0.35; }
    100% { transform: scaleX(1); opacity: 0; }
}

/* Error toast variant */
.cart-toast--error {
    border-color: #c9756a;
}

.cart-toast-icon--error {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c9756a;
    border-radius: 50%;
    color: white;
}

.cart-toast--error .cart-toast-text {
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--dark-warm) !important;
}

.cart-toast .cart-toast-text {
    color: var(--dark-warm);
}

@media (prefers-reduced-motion: reduce) {
    .cart-toast { transition: none; }
    .cart-toast.show .circle,
    .cart-toast.show .ripple,
    .cart-toast.show .phi-svg,
    .cart-toast.show .phi-stroke,
    .cart-toast.show .check-svg,
    .cart-toast.show .check-svg svg,
    .cart-toast.show .cart-toast-bar {
        animation: none !important;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
    }
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dark-warm);
    color: var(--white);
    border: none;
    font-size: 18px;
    cursor: pointer;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--terracotta);
}

/* Cart Toast Notification */
.cart-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--dark-warm);
    color: var(--white);
    padding: 14px 28px;
    border-radius: var(--radius-btn);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    z-index: 9000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.cart-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Search Toggle */
.search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.search-toggle:hover {
    color: var(--terracotta);
}

/* Search Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: rgba(253, 251, 248, 0.98);
    backdrop-filter: blur(20px);
    padding: 0 var(--container-padding);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.search-overlay-inner {
    max-width: 600px;
    margin: 0 auto;
    padding: 80px 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 2px solid var(--dark-warm);
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 300;
    color: var(--dark-warm);
    outline: none;
}

.search-input::placeholder {
    color: var(--clay);
}

.search-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--olive);
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.3s;
}

.search-close:hover {
    color: var(--terracotta);
}

/* Search Results */
.search-results {
    max-width: 600px;
    margin: 0 auto;
    padding: 8px 0 24px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--sand);
    text-decoration: none;
    transition: background 0.2s;
}

.search-result-item:hover {
    background: var(--cream);
    margin: 0 -8px;
    padding: 12px 8px;
    border-radius: 8px;
}

.search-result-img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.search-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-result-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-warm);
}

.search-result-price {
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--olive);
}

.search-no-results {
    padding: 24px 0;
    text-align: center;
    color: var(--olive);
    font-size: 14px;
}

/* ============================================
   POLISH & MICRO-INTERACTIONS
   ============================================ */

/* 1. Custom text selection — terracotta highlight */
::selection {
  background: var(--terracotta-muted);
  color: var(--warm-white);
}

::-moz-selection {
  background: var(--terracotta-muted);
  color: var(--warm-white);
}

/* 2. Image zoom on hover — collection & product cards */
.collection-card-image img,
.product-image-wrapper {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.collection-card:hover .collection-card-image img,
.product-card-link:hover .product-image-wrapper {
  transform: scale(1.04);
}

.collection-card-image,
.portfolio-card-image {
  overflow: hidden;
}

/* 3. Custom scrollbar — thin, terracotta */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--cream);
}

::-webkit-scrollbar-thumb {
  background: var(--clay);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--terracotta);
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--clay) var(--cream);
}

/* 4. FAQ accordion smooth animation */
details summary {
  cursor: pointer;
  transition: color 0.3s ease;
}

details summary:hover {
  color: var(--terracotta);
}

details summary::marker {
  color: var(--terracotta);
}

details[open] summary {
  color: var(--terracotta);
  margin-bottom: var(--space-2);
}

details p {
  animation: faq-open 0.3s ease-out;
}

@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 5. Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--terracotta);
  z-index: 9999;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* 6. Link underline slide-in animation */
.story-content a,
.process-link,
.footer-links a,
.about-section a {
  text-decoration: none;
  background-image: linear-gradient(var(--terracotta), var(--terracotta));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-content a:hover,
.process-link:hover,
.footer-links a:hover,
.about-section a:hover {
  background-size: 100% 1px;
}

/* 7. Footer easter egg */
.footer-clay-note {
  font-size: 11px;
  color: var(--clay-light);
  letter-spacing: 0.05em;
  opacity: 0.85;
}

/* ─── Cookie Consent Banner ─── */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: var(--dark-warm);
    padding: 16px 0;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reserve space underneath while banner is visible so it doesn't overlap
   page content. Adjusted for mobile where the banner stacks taller. */
body.has-cookie-banner {
    padding-bottom: 88px;
}
@media (max-width: 600px) {
    body.has-cookie-banner {
        padding-bottom: 160px;
    }
}

.cookie-banner.is-visible {
    transform: translateY(0);
}

.cookie-banner-inner {
    max-width: var(--container-width, 1400px);
    margin: 0 auto;
    padding: 0 var(--container-padding, 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cookie-text {
    font-size: 0.85rem;
    color: var(--clay-light, #E8DDD0);
    line-height: 1.5;
    margin: 0;
}

.cookie-text a {
    color: var(--warm-white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-text a:hover {
    color: var(--terracotta);
}

.cookie-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 8px 20px;
    border-radius: var(--radius-btn, 30px);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all var(--transition-fast, 0.28s);
    border: 1px solid;
}

.cookie-decline {
    background: transparent;
    color: var(--clay-light, #E8DDD0);
    border-color: var(--clay-dark, #8B7355);
}

.cookie-decline:hover {
    border-color: var(--warm-white);
    color: var(--warm-white);
}

.cookie-accept {
    /* White text needs ≥4.5 contrast — clay-dark is 4.48 (off-by-rounding), so
       we use --olive (#5C5549) which clears AA cleanly at 7.7:1. */
    background: var(--olive);
    color: var(--white);
    border-color: var(--olive);
    font-weight: 500;
}

.cookie-accept:hover {
    background: var(--warm-white);
    color: var(--dark-warm);
    border-color: var(--warm-white);
}

@media (max-width: 768px) {
    .cookie-banner-inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .cookie-text {
        font-size: 0.8rem;
    }
}

/* ============================================
   PRINT STYLESHEET
   ============================================ */
@media print {
    .site-header,
    .site-footer,
    .back-to-top,
    .cookie-banner,
    .search-overlay,
    .nav-overlay,
    .hero-scroll,
    .hero-indicators,
    .hero-corner,
    .hero-grain,
    .hero-vignette,
    .cart-actions,
    .cart-checkout-btn,
    .woocommerce-pagination,
    .btn,
    .btn-primary,
    .btn-hero-primary,
    .btn-hero-secondary {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #333 !important;
        font-size: 12pt !important;
    }

    .site-main {
        padding-top: 0 !important;
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    a {
        color: #333 !important;
        text-decoration: none !important;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    h1, h2, h3 {
        page-break-after: avoid;
        color: #000 !important;
    }

    .cart-layout {
        display: block !important;
    }

    .cart-summary-inner {
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
    }
}

/* ============================================================
   Portfolio — editorial alternating flow (feature + support)
   Each category: big head + a hero piece (sides alternate) + a
   3-up supporting row, framed by a ghost numeral and a vertical
   category label. Cards keep .portfolio-card/.card-img-* so the
   hover-swap + touch-flip JS still work.
   ============================================================ */
.portfolio-category.pf-cat {
  position: relative;
  padding: clamp(64px, 9vw, 120px) 0;
  overflow: hidden;
}
.pf-cat + .pf-cat {
  border-top: 1px solid var(--sand);
}
.pf-ghost {
  position: absolute;
  top: clamp(16px, 3vw, 42px);
  right: -0.05em;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(140px, 24vw, 340px);
  line-height: 0.8;
  color: var(--clay);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.pf-vlabel {
  position: absolute;
  left: 6px;
  top: clamp(130px, 18vw, 210px);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--clay-dark);
  opacity: 0.75;
  z-index: 1;
}
.pf-cat > .container {
  position: relative;
  z-index: 1;
}
.pf-cat-head {
  max-width: 640px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.pf-cat-num {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.pf-cat-head h2 {
  font-family: var(--font-heading);
  font-weight: 300;
  color: var(--dark-warm);
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 1.04;
  margin: 0 0 10px;
}
.pf-cat-sub {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--terracotta);
  font-size: clamp(18px, 2vw, 24px);
  margin-bottom: var(--space-3);
}
.pf-cat-desc {
  color: var(--olive);
  font-size: 16px;
  line-height: 1.8;
  max-width: 60ch;
}

.pf-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.pf-eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
}
.pf-feature-text h3 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 42px);
  color: var(--dark-warm);
  margin: 10px 0 12px;
  line-height: 1.08;
}
.pf-feature-text p {
  color: var(--olive);
  font-size: 16px;
  line-height: 1.75;
  max-width: 44ch;
}
@media (min-width: 900px) {
  .pf-feature {
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(40px, 5vw, 72px);
  }
  .pf-cat--reverse .pf-feature-card { order: 2; }
  .pf-cat--reverse .pf-feature-text { order: 1; text-align: right; }
  .pf-cat--reverse .pf-feature-text p { margin-left: auto; }
}
.pf-feature-card .portfolio-card-image { aspect-ratio: 5 / 4; }

.pf-support {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 600px) {
  .pf-support { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
.pf-support .portfolio-card-image { aspect-ratio: 4 / 5; }

@media (max-width: 760px) {
  .pf-vlabel { display: none; }
  .pf-ghost { font-size: clamp(110px, 30vw, 170px); opacity: 0.1; }
}

/* Piece specifications (Material / Finish / Technique / Detail) */
.pf-specs {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--sand);
  display: grid;
  gap: 7px;
}
.pf-spec {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 14px;
  align-items: baseline;
}
.pf-spec dt {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--clay-dark);
}
.pf-spec dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--olive);
}
@media (min-width: 900px) {
  .pf-cat--reverse .pf-feature-text .pf-specs { margin-left: auto; max-width: 44ch; }
  .pf-cat--reverse .pf-feature-text .pf-spec { grid-template-columns: 1fr 74px; text-align: left; }
  .pf-cat--reverse .pf-feature-text .pf-spec dt { order: 2; text-align: right; }
  .pf-cat--reverse .pf-feature-text .pf-spec dd { order: 1; text-align: right; }
}