/*
Theme Name: Sarena Atelier
Theme URI: https://sarenaatelier.com
Author: Sarena Atelier
Author URI: https://sarenaatelier.com
Description: A custom WooCommerce theme for Sarena Atelier — quiet coastal luxury, linen dresses, and natural gemstone adornments. Editorial, handcrafted, and minimal — designed to whisper, not shout.
Version: 1.22.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sarena-atelier
Tags: custom-colors, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments, woocommerce, e-commerce, one-column, two-columns, custom-header, custom-background
*/

/* =============================================================================
   SARENA ATELIER — Quiet Coastal Luxury
   Classic PHP theme · WooCommerce-ready · Ivory linen, not white
   ============================================================================= */

:root {
  /* Core palette */
  --ivory-linen:  #F6F1EA;
  --soft-sand:    #D8CFC3;
  --warm-stone:   #B7ADA2;
  --olive-grove:  #7E8B6A;
  --olive-dark:   #6A765A;
  --sea-fog:      #9FA7A6;
  --muted-sea:    #AEBFC1;
  --salted-sky:   #C9D4D2;
  --charcoal:     #2E2E2C;
  --border:       rgba(183, 173, 162, 0.28);
  --overlay:      rgba(46, 46, 44, 0.35);

  /* Text roles — readable against ivory, still on-brand */
  --text-body:    #2E2E2C;   /* charcoal — primary text */
  --text-muted:   #5D544A;   /* deepened warm stone — body/paragraph */
  --text-light:   #857B70;   /* tertiary — meta, dates, captions only */

  /* Typography */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* Rhythm */
  --max-w: 1440px;
  --content-w: 1200px;
  --gutter: clamp(20px, 4vw, 60px);
  --section-y: clamp(60px, 9vw, 120px);
  --radius: 0;

  /* Motion */
  --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition: 0.35s var(--ease);
}

/* =========================
   Reset & base
   ========================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  color: var(--charcoal);
  background: var(--ivory-linen);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition), opacity var(--transition); }
a:hover { color: var(--olive-grove); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
p { margin: 0 0 1em; }

::selection { background: var(--olive-grove); color: var(--ivory-linen); }

.screen-reader-text {
  clip: rect(1px,1px,1px,1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--charcoal); color: var(--ivory-linen); padding: 10px 16px; font-size: 12px;
}
.skip-link:focus { left: 10px; top: 10px; }

/* =========================
   Utility
   ========================= */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: var(--content-w); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm-stone);
}

.btn {
  display: inline-block;
  padding: 16px 38px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--olive-grove);
  color: var(--ivory-linen);
  border: 1px solid var(--olive-grove);
  transition: all var(--transition);
  cursor: pointer;
}
.btn:hover { background: transparent; color: var(--olive-grove); }
.btn--outline { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn--outline:hover { background: var(--charcoal); color: var(--ivory-linen); }
.btn--dark { background: var(--charcoal); border-color: var(--charcoal); }
.btn--dark:hover { background: transparent; color: var(--charcoal); }

/* =========================
   Announcement bar
   ========================= */
.announce {
  background: var(--olive-grove);
  color: var(--ivory-linen);
  text-align: center;
  padding: 9px 20px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
}
.announce a { text-decoration: underline; text-underline-offset: 3px; }

/* =========================
   Site header
   ========================= */
.site-header {
  background: var(--ivory-linen);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 80;
  transition: box-shadow 0.3s ease, padding 0.35s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 2px 10px rgba(46, 46, 44, 0.06); }

/* Single-row header: logo on LEFT, nav + icons on RIGHT (matches the
 * original site layout). Logo is larger at rest, shrinks on scroll — the
 * realeactives.com pattern. */
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  transition: padding 0.35s var(--ease);
}

.header-logo {
  grid-column: 1;
  justify-self: flex-start;
  display: flex;
  align-items: center;
}

.header-right {
  grid-column: 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
}

.nav-menu-right {
  display: flex;
  gap: 34px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu-right > li { position: relative; }

.nav-menu { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav-menu li { position: relative; }
.nav-menu a {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: inline-block;
  padding: 6px 0;
}
.nav-menu a:hover { color: var(--olive-grove); }
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-parent > a,
.nav-menu .current-menu-ancestor > a { color: var(--olive-grove); }

.nav-menu .sub-menu {
  list-style: none; margin: 0; padding: 16px 0;
  position: absolute; left: 50%; transform: translateX(-50%) translateY(10px);
  top: 100%;
  background: var(--ivory-linen);
  border: 1px solid var(--border);
  min-width: 220px;
  opacity: 0; visibility: hidden;
  transition: all var(--transition);
  box-shadow: 0 8px 28px rgba(46, 46, 44, 0.08);
  z-index: 90;
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-menu .sub-menu a { padding: 10px 24px; letter-spacing: 0.12em; font-size: 11px; display: block; white-space: nowrap; }
.nav-menu .sub-menu a:hover { background: var(--soft-sand); color: var(--charcoal); }

.header-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-logo a {
  display: inline-block;
  line-height: 0;
}
/* Logo sizes are controlled by a CSS custom property that JS interpolates
 * smoothly as the user scrolls — the realeactives.com pattern.
 *   --sarena-logo-h: 130px at top of page → 50px after 300px of scroll
 */
.header-logo img {
  height: var(--sarena-logo-h, 62px);
  width: auto;
  max-width: 100%;
  transition: height 0.3s ease, transform 0.3s ease;
}
.site-header {
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled .header-inner {
  padding-top: 14px;
  padding-bottom: 14px;
}

.icon-group {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-left: 24px;
}
.icon-btn {
  color: var(--charcoal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: color var(--transition), transform var(--transition);
}
.icon-btn:hover { color: var(--olive-grove); transform: translateY(-1px); }
.icon-btn svg { width: 20px; height: 20px; stroke-width: 1.3; }

.cart-count {
  position: absolute;
  top: -7px;
  right: -9px;
  background: var(--olive-grove);
  color: var(--ivory-linen);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-family: var(--font-sans);
}

/* Hamburger button — visible on mobile only */
.mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 6px;
  margin: 0;
  cursor: pointer;
  color: var(--charcoal);
  align-items: center;
  justify-content: center;
}
.mobile-toggle svg { width: 22px; height: 22px; }
.sarena-search-toggle, .sarena-search-overlay { display: none !important; }

/* Mobile drawer — slides in from right. Hidden by default. */
.sarena-mobile-menu {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 88vw);
  height: 100vh;
  height: 100dvh;
  background: var(--ivory-linen);
  z-index: 10000;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(46, 46, 44, 0.12);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sarena-mobile-menu.is-open { transform: translateX(0); }

/* Dim overlay behind drawer */
.sarena-mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(46, 46, 44, 0.45);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.sarena-mobile-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Drawer header — logo + close button */
.sarena-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.sarena-mobile-menu__header img {
  height: 48px;
  width: auto;
}
.sarena-mobile-menu__close {
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--charcoal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sarena-mobile-menu__close svg { width: 22px; height: 22px; }

/* Drawer nav list */
.sarena-mobile-menu__nav {
  padding: 12px 0 40px;
  flex: 1;
}
.sarena-mobile-menu__list,
.sarena-mobile-menu__nav ul.sarena-mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sarena-mobile-menu__list li {
  border-bottom: 1px solid var(--border);
  position: relative;
}
.sarena-mobile-menu__list li a {
  display: block;
  padding: 18px 24px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.sarena-mobile-menu__list li a:hover,
.sarena-mobile-menu__list li a:focus {
  color: var(--olive-grove);
  background: var(--soft-sand);
}

/* Expand toggle button for items with children */
.sarena-mobile-menu__list .menu-item-has-children > a {
  padding-right: 58px; /* room for the chevron button */
}
.sarena-mobile-menu__expand {
  position: absolute;
  top: 0;
  right: 0;
  width: 58px;
  height: 55px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--charcoal);
  transition: background 0.2s ease, transform 0.3s ease;
}
.sarena-mobile-menu__expand::before {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 0.3s ease;
}
.sarena-mobile-menu__list li.is-expanded > .sarena-mobile-menu__expand::before {
  transform: rotate(-135deg);
  margin-top: 4px;
}

/* Sub-menu — hidden by default, shown when parent is expanded */
.sarena-mobile-menu__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--soft-sand);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.sarena-mobile-menu__list li.is-expanded > .sub-menu {
  max-height: 500px;
}
.sarena-mobile-menu__list .sub-menu li {
  border-bottom: 1px solid rgba(183, 173, 162, 0.25);
}
.sarena-mobile-menu__list .sub-menu li:last-child { border-bottom: none; }
.sarena-mobile-menu__list .sub-menu a {
  padding: 14px 24px 14px 40px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

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

/* =========================
   Hero
   ========================= */
.hero {
  position: relative;
  min-height: min(820px, calc(100vh - 140px));
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Palette-based fallback so the hero is on-brand even if the image
   * hasn't loaded yet (or fails to load entirely) — never shows a broken image icon. */
  background: linear-gradient(135deg, #2E2E2C 0%, #4A514F 40%, #7E8B6A 100%);
}
/* Hero photo via CSS background — if URL 404s, parent gradient shows */
.hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
.hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(46, 46, 44, 0.45) 0%,
    rgba(46, 46, 44, 0.25) 42%,
    rgba(46, 46, 44, 0.08) 72%,
    rgba(46, 46, 44, 0.18) 100%
  );
}

/* Pure-CSS bubbles/specks — desktop only. Can't fail mid-animation
 * because there's no JavaScript; once CSS is applied they loop forever. */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
@media (min-width: 900px) { .hero-particles { display: block; } }
@media (prefers-reduced-motion: reduce) { .hero-particles { display: none !important; } }

.hero-particles .bubble,
.hero-particles .speck {
  position: absolute;
  bottom: -30px;
  border-radius: 50%;
  will-change: transform, opacity;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  pointer-events: none;
}
.hero-particles .bubble {
  border: 1px solid rgba(246, 241, 234, 0.6);
  background: transparent;
  animation-name: sarena-bubble-rise;
}
.hero-particles .bubble::after {
  content: '';
  position: absolute;
  top: 12%; left: 14%;
  width: 28%; height: 28%;
  border-radius: 50%;
  background: rgba(246, 241, 234, 0.5);
}
.hero-particles .speck {
  background: rgba(246, 241, 234, 0.9);
  box-shadow: 0 0 6px rgba(246, 241, 234, 0.45);
  animation-name: sarena-speck-rise;
}

@keyframes sarena-bubble-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0; }
  8%   { opacity: var(--bubble-opacity, 0.42); }
  50%  { transform: translate3d(calc(var(--sway, 24px) * 1), -50vh, 0) scale(1); }
  92%  { opacity: var(--bubble-opacity, 0.42); }
  100% { transform: translate3d(calc(var(--sway, 24px) * -0.6), -115vh, 0) scale(0.9); opacity: 0; }
}
@keyframes sarena-speck-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: 0.8; }
  50%  { transform: translate3d(calc(var(--sway, 20px) * 1), -50vh, 0); }
  100% { transform: translate3d(calc(var(--sway, 20px) * -0.6), -115vh, 0); opacity: 0; }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  color: var(--ivory-linen);
}
.hero-inner {
  max-width: 560px;
  padding: 140px 0 120px;
}
.hero .eyebrow { color: rgba(246, 241, 234, 0.85); margin-bottom: 22px; display: inline-block; }
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(44px, 6vw, 82px);
  font-weight: 400;
  line-height: 1.02;
  margin-bottom: 28px;
  letter-spacing: -0.015em;
}
.hero p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  max-width: 440px;
  margin-bottom: 40px;
  opacity: 0.95;
}

/* =========================
   Intro / tagline
   ========================= */
.intro {
  padding: var(--section-y) var(--gutter);
  text-align: center;
  background: var(--ivory-linen);
}
.intro-inner { max-width: 740px; margin: 0 auto; }
.intro p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--charcoal);
  line-height: 1.55;
  margin: 0;
}
.intro-divider { display: flex; justify-content: center; margin-top: 38px; }
.intro-divider svg { width: 36px; height: auto; opacity: 0.55; }

/* =========================
   Category split
   ========================= */
/* Homepage category split — two cards side by side, each card text+image */
.split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--section-y);
  gap: 0;
}
.split-card {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center;
  gap: 40px;
  padding: 30px;
  text-decoration: none;
}
.split-card--reverse .split-card__text { order: 2; }
.split-card__image {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--soft-sand);
  max-height: 520px;
  width: 100%;
  display: block;
}
.split-card__image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.split-card:hover .split-card__image img { transform: scale(1.04); }

.split-card__text .eyebrow { margin-bottom: 18px; display: inline-block; }
.split-card__text h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 18px; }
.split-card__text p { color: var(--text-muted); font-size: 14px; margin-bottom: 28px; max-width: 300px; line-height: 1.75; }

.split-card__link {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  color: var(--charcoal); display: inline-flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--charcoal); padding-bottom: 4px;
  transition: gap var(--transition), color var(--transition), border-color var(--transition);
}
.split-card__link:hover { gap: 18px; color: var(--olive-grove); border-color: var(--olive-grove); }

/* =========================
   Brand pillars
   ========================= */
.pillars {
  background: var(--soft-sand);
  padding: var(--section-y) var(--gutter);
}
.pillars-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 44px;
}
.pillar { text-align: center; }
.pillar-icon { display: flex; justify-content: center; margin-bottom: 22px; }
.pillar-icon svg { width: 42px; height: 42px; stroke: var(--charcoal); stroke-width: 1.2; fill: none; }
.pillar h3 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 12px;
}
.pillar p { font-size: 13px; color: var(--text-muted); line-height: 1.75; max-width: 200px; margin: 0 auto; }

/* =========================
   Editorial / our story
   ========================= */
/* Editorial / Our Story section — v1.12 behavior: 50/50 columns, image beside text */
.editorial {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  background: var(--ivory-linen);
}
.editorial-text {
  display: flex; align-items: center; justify-content: center;
  padding: var(--section-y) var(--gutter);
}
.editorial-text-inner { max-width: 440px; }
.editorial-text h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; margin-bottom: 26px; }
.editorial-text p { color: var(--text-muted); margin-bottom: 18px; font-size: 15px; line-height: 1.85; }
.editorial-text .italic { font-style: italic; color: var(--charcoal); opacity: 0.9; margin-bottom: 28px; }
.editorial-image {
  background: var(--soft-sand);
  aspect-ratio: 4/5;
  overflow: hidden;
}
.editorial-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
}

/* =========================
   Newsletter block (homepage)
   ========================= */
.newsletter-block {
  background: var(--ivory-linen);
  padding: var(--section-y) var(--gutter);
  text-align: center;
  border-top: 1px solid var(--border);
}
.newsletter-inner { max-width: 540px; margin: 0 auto; }
.newsletter-inner .eyebrow { display: inline-block; margin-bottom: 14px; }
.newsletter-inner h2 { font-size: clamp(26px, 2.8vw, 34px); margin-bottom: 14px; }
.newsletter-inner p { color: var(--text-muted); margin-bottom: 30px; font-size: 14px; }
.newsletter-form {
  display: flex;
  max-width: 460px;
  margin: 0 auto;
  border: 1px solid var(--warm-stone);
  background: var(--ivory-linen);
}
.newsletter-form input {
  flex: 1; border: none; background: transparent;
  padding: 14px 18px; font-size: 13px; outline: none;
}
.newsletter-form input::placeholder { color: var(--warm-stone); }
.newsletter-form button {
  background: var(--olive-grove); color: var(--ivory-linen);
  padding: 14px 26px; font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 500;
  transition: background var(--transition);
}
.newsletter-form button:hover { background: var(--charcoal); }
.newsletter-note { margin-top: 16px; font-size: 11px; color: var(--text-light); font-style: italic; }

/* =========================
   Footer
   ========================= */
.site-footer {
  background: var(--olive-grove);
  color: var(--ivory-linen);
  padding: 80px var(--gutter) 30px;
}
.site-footer .footer-inner,
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr !important;
  gap: 50px;
  align-items: start;
}
.footer-brand img {
  width: 160px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
  margin-bottom: 20px;
}
.footer-brand p { font-size: 12px; line-height: 1.7; opacity: 0.8; max-width: 240px; }
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; margin-bottom: 22px; opacity: 0.9;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 11px; }
.footer-col a { font-size: 13px; opacity: 0.8; }
.footer-col a:hover { opacity: 1; color: var(--ivory-linen); }

.footer-newsletter p { font-size: 12px; opacity: 0.8; line-height: 1.6; margin-bottom: 18px; }
.footer-newsletter form {
  display: flex;
  border-bottom: 1px solid rgba(246, 241, 234, 0.4);
  padding-bottom: 8px;
  margin-bottom: 22px;
}
.footer-newsletter input {
  flex: 1; background: transparent; border: none; color: var(--ivory-linen);
  font-size: 12px; padding: 8px 0; outline: none;
}
.footer-newsletter input::placeholder { color: rgba(246, 241, 234, 0.6); }
.footer-newsletter button { color: var(--ivory-linen); padding: 0 0 0 10px; }
.footer-newsletter button svg { width: 16px; height: 16px; }

.footer-social { display: flex; gap: 14px; }
.footer-social a {
  width: 34px; height: 34px;
  border: 1px solid rgba(246, 241, 234, 0.5);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.85; transition: all var(--transition);
}
.footer-social a:hover { background: var(--ivory-linen); color: var(--olive-grove); opacity: 1; border-color: var(--ivory-linen); }
.footer-social svg { width: 14px; height: 14px; }

.footer-bottom {
  max-width: var(--max-w);
  margin: 60px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(246, 241, 234, 0.22);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

/* =========================
   Page templates
   ========================= */
.page-hero {
  background: var(--soft-sand);
  padding: 100px var(--gutter) 70px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.page-hero .eyebrow { margin-bottom: 18px; display: inline-block; }
.page-hero h1 {
  font-size: clamp(36px, 4.5vw, 58px);
  margin: 0 auto 20px;
  max-width: 800px;
}
.page-hero p {
  color: var(--text-muted); max-width: 640px; margin: 0 auto;
  font-size: 15px; line-height: 1.85;
}

.page-content {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}

/* Friendly helper shown when a page's content is empty or old Elementor markup */
.sarena-content-notice {
  background: var(--soft-sand);
  border: 1px solid var(--border);
  padding: clamp(30px, 4vw, 50px);
  text-align: left;
}
.sarena-content-notice h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 0 0 18px;
}
.sarena-content-notice p { font-size: 14px; line-height: 1.8; color: var(--text-muted); margin-bottom: 14px; }
.sarena-content-notice ol { font-size: 14px; line-height: 1.8; color: var(--text-body); margin: 14px 0 14px 22px; }
.sarena-content-notice li { margin-bottom: 8px; }
.sarena-content-notice p.italic { font-style: italic; color: var(--olive-grove); font-family: var(--font-serif); font-size: 16px; }
.sarena-content-notice strong { color: var(--charcoal); font-weight: 500; }
.page-content h2 { font-size: clamp(26px, 2.8vw, 36px); margin: 44px 0 18px; }
.page-content h3 { font-size: clamp(20px, 2vw, 26px); margin: 32px 0 14px; }
.page-content p { font-size: 15px; line-height: 1.85; margin-bottom: 1.2em; color: var(--charcoal); }
.page-content ul, .page-content ol { margin: 0 0 1.3em 1.3em; line-height: 1.85; }
.page-content li { margin-bottom: 0.4em; }
.page-content a { color: var(--olive-grove); border-bottom: 1px solid var(--olive-grove); padding-bottom: 1px; }
.page-content a:hover { color: var(--olive-dark); border-color: var(--olive-dark); }
.page-content img { margin: 30px 0; }
.page-content blockquote {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  padding: 24px 0 24px 30px; border-left: 2px solid var(--olive-grove);
  margin: 30px 0; color: var(--charcoal); line-height: 1.5;
}

/* =========================
   CUSTOM PAGE TEMPLATES (About / Materials / Care / Shipping / Returns / Contact)
   ========================= */

.sarena-page { background: var(--ivory-linen); }

/* Editorial hero used on most pages */
.page-hero-editorial {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #2E2E2C 0%, #4A514F 40%, #7E8B6A 100%);
  color: var(--ivory-linen);
}
.page-hero-editorial--compact { min-height: 360px; }
.page-hero-editorial__image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 40%;
  z-index: 0;
}
.page-hero-editorial__image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(46, 46, 44, 0.58) 0%, rgba(46, 46, 44, 0.28) 60%, rgba(46, 46, 44, 0.12) 100%);
}
.page-hero-editorial__content {
  position: relative; z-index: 1;
  max-width: var(--max-w); width: 100%;
  margin: 0 auto;
  padding: 100px var(--gutter);
}
.page-hero-editorial .eyebrow { color: rgba(246, 241, 234, 0.85); margin-bottom: 22px; display: inline-block; }
.page-hero-editorial h1 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5.5vw, 74px);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 26px;
  letter-spacing: -0.015em;
  max-width: 900px;
}
.page-hero-editorial p {
  font-size: 16px;
  max-width: 480px;
  line-height: 1.75;
  opacity: 0.95;
  margin: 0;
}

/* Tagline strip (full-width thin section) */
.page-tagline-strip {
  background: var(--ivory-linen);
  padding: 80px var(--gutter);
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.page-tagline-strip p {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 34px);
  color: var(--charcoal);
  margin: 0;
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.4;
  font-weight: 400;
}
.page-tagline-strip em { font-style: italic; color: var(--olive-grove); }

/* Two-column section */
.page-section { padding: var(--section-y) 0; }
.page-section--two-col {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.page-section--two-col.page-section--reverse .page-section__text { order: 2; }
.page-section__text .eyebrow { margin-bottom: 18px; display: inline-block; }
.page-section__text h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  margin-bottom: 22px;
  line-height: 1.15;
  color: var(--charcoal);
}
.page-section__text p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--charcoal);
  margin-bottom: 1.1em;
  max-width: 480px;
}
.page-section__text p.italic {
  font-style: italic;
  color: var(--olive-grove);
  font-family: var(--font-serif);
  font-size: 18px;
  margin-top: 22px;
}
.page-section__image { aspect-ratio: 4/5; overflow: hidden; background: var(--soft-sand); }
.page-section__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Values row (four-up icons) */
.page-values {
  background: var(--soft-sand);
  padding: var(--section-y) var(--gutter);
}
.page-values__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px;
}
.page-value {
  text-align: center;
  color: var(--charcoal);
}
.page-value svg {
  width: 42px;
  height: 42px;
  margin: 0 auto 20px;
}
.page-value h3 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.page-value p { font-size: 13px; color: var(--text-muted); line-height: 1.75; max-width: 220px; margin: 0 auto; }

/* Pull-quote */
.page-quote {
  background: var(--ivory-linen);
  padding: var(--section-y) var(--gutter);
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.page-quote__inner { max-width: 840px; margin: 0 auto; }
.page-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--charcoal);
  line-height: 1.55;
  margin: 0;
}

/* CTA block */
.page-cta {
  background: var(--ivory-linen);
  padding: var(--section-y) var(--gutter);
  text-align: center;
}
.page-cta__inner { max-width: 640px; margin: 0 auto; }
.page-cta h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  margin-bottom: 20px;
  color: var(--charcoal);
}
.page-cta p.italic {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--olive-grove);
  font-size: 18px;
  margin-bottom: 30px;
}

/* Care page columns */
.page-section--care {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.page-care-col .eyebrow { display: inline-block; margin-bottom: 16px; }
.page-care-col h2 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 26px; }
.page-care-list { list-style: none; padding: 0; margin: 0; }
.page-care-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-body);
}
.page-care-list li:last-child { border-bottom: none; }
.page-care-list strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive-grove);
  margin-bottom: 6px;
  font-weight: 500;
}

/* Shipping / Returns policy grid */
.page-section--policy {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}
.page-policy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 80px;
}
.page-policy-grid--three { grid-template-columns: repeat(3, 1fr); }
.page-policy-grid--four { grid-template-columns: repeat(4, 1fr); }

/* =========================
   Split-quote section (image + text, half-and-half, full-bleed)
   ========================= */
.page-split-quote {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  background: var(--charcoal);
  color: var(--ivory-linen);
  overflow: hidden;
}
.page-split-quote__image {
  background-size: cover;
  background-position: center;
  min-height: 360px;
}
.page-split-quote__text {
  padding: clamp(48px, 6vw, 80px) clamp(32px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(140deg, #2E2E2C 0%, #3E463F 60%, #5C6853 100%);
}
.page-split-quote__text .eyebrow { margin-bottom: 22px; display: inline-block; }
.page-split-quote__text blockquote {
  margin: 0 0 24px;
  padding: 0;
  border: none;
}
.page-split-quote__text blockquote p {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.35;
  margin: 0;
  color: var(--ivory-linen);
  font-weight: 400;
}
.page-split-quote__text > p {
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.82;
  max-width: 420px;
  margin: 0;
}
.page-split-quote__text a { color: var(--ivory-linen); }

/* =========================
   Stone / Step cards (shared component)
   ========================= */
.page-stones {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}
.page-stones__header {
  text-align: center;
  margin-bottom: 56px;
}
.page-stones__header .eyebrow { display: inline-block; margin-bottom: 16px; }
.page-stones__header h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  margin: 0;
}
.page-stones__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 28px;
}
.page-stones__grid--3 { grid-template-columns: repeat(3, 1fr); }
.page-stone {
  text-align: center;
  padding: 0 8px;
}
.page-stone__swatch {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 22px;
  box-shadow: inset 0 -8px 16px rgba(46, 46, 44, 0.08), 0 3px 12px rgba(46, 46, 44, 0.08);
}
.page-stone h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--charcoal);
  margin: 0 0 10px;
}
.page-stone__meaning {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-grove);
  margin: 0 0 14px;
  font-weight: 500;
}
.page-stone__note {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0;
  max-width: 240px;
  margin: 0 auto;
}

/* Step variant (number instead of swatch) */
.page-stone--step .page-stone__number {
  font-family: var(--font-serif);
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1;
  color: var(--olive-grove);
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}
.page-stone__note a {
  color: var(--olive-grove);
  border-bottom: 1px solid var(--olive-grove);
  padding-bottom: 1px;
}
.page-policy-item {
  text-align: center;
  padding: 36px 24px;
  background: var(--soft-sand);
  border: 1px solid var(--border);
}
.page-policy-item__big {
  font-family: var(--font-serif);
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  color: var(--olive-grove);
  margin-bottom: 18px;
}
.page-policy-item h3 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--charcoal);
}
.page-policy-item p { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin: 0; }

.page-section__prose {
  max-width: 780px;
  margin: 0 auto;
  color: var(--text-body);
}
.page-section__prose h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  margin: 44px 0 18px;
}
.page-section__prose h2:first-child { margin-top: 0; }
.page-section__prose p {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 1.3em;
}
.page-section__prose a {
  color: var(--olive-grove);
  border-bottom: 1px solid var(--olive-grove);
  padding-bottom: 1px;
}
.page-section__prose a:hover { color: var(--charcoal); border-bottom-color: var(--charcoal); }

/* Contact grid */
.page-section--contact {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}
.page-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}
.page-contact-details { display: flex; flex-direction: column; gap: 34px; }
.page-contact-item .eyebrow { display: block; margin-bottom: 10px; }
.page-contact-item__value {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--charcoal);
  line-height: 1.5;
  display: block;
}
a.page-contact-item__value { transition: color var(--transition); }
a.page-contact-item__value:hover { color: var(--olive-grove); }

.page-contact-form { display: flex; flex-direction: column; gap: 20px; }
.page-contact-form__row { display: flex; flex-direction: column; gap: 6px; }
.page-contact-form__row label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--charcoal);
}
.page-contact-form__row input,
.page-contact-form__row textarea {
  border: 1px solid var(--warm-stone);
  background: var(--ivory-linen);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--charcoal);
  border-radius: 0;
  outline: none;
  transition: border-color 0.3s ease;
}
.page-contact-form__row input:focus,
.page-contact-form__row textarea:focus { border-color: var(--olive-grove); }
.page-contact-form__row textarea { resize: vertical; min-height: 140px; }
.page-contact-form__note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}
.page-contact-form__note a { color: var(--olive-grove); border-bottom: 1px solid var(--olive-grove); }

/* RESPONSIVE for page templates */
@media (max-width: 900px) {
  .page-section--two-col,
  .page-section--care,
  .page-contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .page-section--two-col.page-section--reverse .page-section__text { order: 0; }
  .page-values__inner { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .page-policy-grid, .page-policy-grid--three, .page-policy-grid--four { grid-template-columns: 1fr; gap: 20px; }
  .page-hero-editorial__content { padding: 70px var(--gutter); }
  .page-hero-editorial { min-height: 420px; }
  .page-split-quote { grid-template-columns: 1fr; }
  .page-split-quote__image { min-height: 280px; }
  .page-stones__grid, .page-stones__grid--3 { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
}
@media (max-width: 520px) {
  .page-stones__grid, .page-stones__grid--3 { grid-template-columns: 1fr; gap: 36px; }
}

/* =========================
   Blog posts
   ========================= */
.post-archive {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 40px;
}
.post-card { display: block; }
.post-card__image {
  aspect-ratio: 4/5; overflow: hidden; background: var(--soft-sand);
  margin-bottom: 20px;
}
.post-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.post-card:hover .post-card__image img { transform: scale(1.04); }
.post-card__meta { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-light); margin-bottom: 10px; }
.post-card__title { font-family: var(--font-serif); font-size: 22px; margin-bottom: 10px; color: var(--charcoal); }
.post-card__excerpt { font-size: 13px; color: var(--text-muted); line-height: 1.75; }

.single-post-hero { padding: 90px var(--gutter) 40px; text-align: center; background: var(--ivory-linen); }
.single-post-hero .eyebrow { display: inline-block; margin-bottom: 16px; }
.single-post-hero h1 { font-size: clamp(32px, 4vw, 54px); max-width: 820px; margin: 0 auto 18px; line-height: 1.1; }
.single-post-hero .post-meta { color: var(--text-light); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.single-post-featured {
  max-width: 980px; margin: 0 auto 60px; padding: 0 var(--gutter);
}
.single-post-featured img { width: 100%; height: auto; }
.single-post-content { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter) var(--section-y); }
.single-post-content p { font-size: 16px; line-height: 1.9; margin-bottom: 1.3em; }

/* =========================
   Search, 404, misc
   ========================= */
.page-404, .search-results-empty {
  text-align: center; padding: 140px var(--gutter); max-width: 640px; margin: 0 auto;
}
.page-404 h1 { font-size: clamp(42px, 6vw, 72px); margin-bottom: 18px; }
.page-404 p, .search-results-empty p { color: var(--text-muted); margin-bottom: 30px; font-size: 15px; }

.searchform { display: flex; border: 1px solid var(--warm-stone); max-width: 460px; margin: 0 auto; }
.searchform input[type="search"] { flex: 1; border: none; padding: 14px 18px; background: transparent; outline: none; font-size: 13px; }
.searchform button { background: var(--olive-grove); color: var(--ivory-linen); padding: 14px 24px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }

/* =========================
   WooCommerce
   ========================= */
/* Force Sarena typography on WooCommerce page CONTENT — narrowly scoped so
 * it doesn't accidentally restyle the site-wide footer on shop pages.
 * Footer sits outside .woocommerce-main wrappers so we can safely target
 * inside the shop content only. */
.woocommerce-main, .woocommerce-main *,
.woocommerce ul.products, .woocommerce ul.products *,
.woocommerce div.product, .woocommerce div.product *,
.woocommerce-cart .woocommerce, .woocommerce-cart .woocommerce *,
.woocommerce-checkout .woocommerce, .woocommerce-checkout .woocommerce *,
.woocommerce-account .woocommerce, .woocommerce-account .woocommerce * {
  font-family: var(--font-sans);
}
.woocommerce-main h1, .woocommerce-main h2, .woocommerce-main h3, .woocommerce-main h4,
.woocommerce ul.products h1, .woocommerce ul.products h2, .woocommerce ul.products h3,
.woocommerce div.product h1.product_title,
.woocommerce div.product h2, .woocommerce div.product h3,
.woocommerce-loop-product__title,
.woocommerce-MyAccount-content h1, .woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--font-serif) !important;
  font-weight: 400;
  color: var(--charcoal);
}

/* Footer — force correct font + color even on WooCommerce pages where
 * aggressive plugin CSS or bootstrap resets might try to override. */
.site-footer .footer-col h4,
body.woocommerce .site-footer .footer-col h4,
body.woocommerce-shop .site-footer .footer-col h4,
body.tax-product_cat .site-footer .footer-col h4 {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ivory-linen) !important;
  opacity: 0.9 !important;
  margin-bottom: 22px !important;
}
.site-footer, .site-footer * {
  color: var(--ivory-linen);
}
.site-footer .footer-brand p,
.site-footer .footer-col a,
.site-footer .footer-col li,
.site-footer .footer-newsletter p,
.site-footer .footer-bottom {
  color: var(--ivory-linen) !important;
}

.woocommerce-breadcrumb { padding: 24px var(--gutter); max-width: var(--max-w); margin: 0 auto; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); }
.woocommerce-breadcrumb a { color: var(--warm-stone); }
.woocommerce-breadcrumb a:hover { color: var(--olive-grove); }

/* Default WC products header — hidden; our archive-product.php renders its own */
.woocommerce-products-header { display: none !important; }

/* Sarena shop bar — result count on left, sort on right */
.sarena-shop-bar {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 28px var(--gutter) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}
.sarena-shop-bar__count {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sarena-shop-bar__sort select {
  border: 1px solid var(--border);
  background: var(--ivory-linen);
  color: var(--charcoal);
  padding: 8px 36px 8px 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--charcoal) 50%), linear-gradient(135deg, var(--charcoal) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Product grid container — kept slim since padding is on the ul itself */
.sarena-product-grid-wrap { max-width: 100%; }

/* Pagination */
.sarena-shop-pagination { margin-top: 50px; text-align: center; }
.sarena-shop-pagination .woocommerce-pagination ul { border: none; display: inline-flex; gap: 4px; padding: 0; }
.sarena-shop-pagination .woocommerce-pagination ul li { border: none; margin: 0; }
.sarena-shop-pagination .woocommerce-pagination ul li a,
.sarena-shop-pagination .woocommerce-pagination ul li span {
  padding: 10px 14px !important;
  font-size: 11px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid transparent !important;
  transition: all var(--transition);
}
.sarena-shop-pagination .woocommerce-pagination ul li a:hover,
.sarena-shop-pagination .woocommerce-pagination ul li span.current {
  color: var(--charcoal) !important;
  border-color: var(--olive-grove) !important;
  background: transparent !important;
}

/* Empty shop state */
.sarena-shop-empty {
  text-align: center;
  padding: var(--section-y) var(--gutter);
  max-width: 500px;
  margin: 0 auto;
}
.sarena-shop-empty p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* Main shop grid — 4-up on wide, tightens down.
 * Padding is applied DIRECTLY to the product ul so the grid always has
 * breathing room on every side, whether our wrapper is present or not. */
/* Product grid — v1.9 config (3 cols with 3:4 aspect images) + hard
 * pixel max-widths as failsafes so images can NEVER go full-viewport
 * even if grid layout fails. */
html body .woocommerce .products,
html body .woocommerce ul.products,
html body.woocommerce-shop .woocommerce ul.products,
html body.tax-product_cat .woocommerce ul.products,
html body.tax-product_tag .woocommerce ul.products,
.sarena-product-grid-wrap .products,
.sarena-product-grid-wrap ul.products {
  max-width: var(--max-w) !important;
  margin: 50px auto 80px !important;
  padding: 0 var(--gutter) !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 50px 40px !important;
  list-style: none !important;
}

html body .woocommerce ul.products li.product,
html body.woocommerce-shop .woocommerce ul.products li.product,
html body.tax-product_cat .woocommerce ul.products li.product {
  width: auto !important;
  max-width: 420px !important;
  float: none !important;
  margin: 0 auto !important;
  text-align: center !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

html body .woocommerce ul.products li.product > a {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Hard pixel caps on product images — even if grid fails, max 400×540. */
html body .woocommerce ul.products li.product img,
html body.woocommerce-shop .woocommerce ul.products li.product img,
html body.tax-product_cat .woocommerce ul.products li.product img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 400px !important;
  max-height: 540px !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  margin: 0 auto 20px !important;
  background: var(--soft-sand) !important;
}
html body .woocommerce ul.products li.product:hover img { transform: scale(1.025); }
.woocommerce ul.products li.product:hover img { transform: scale(1.025); }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  font-family: var(--font-serif) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--charcoal) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.25 !important;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price bdi {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.05em !important;
}
.woocommerce ul.products li.product .price ins { background: transparent; color: var(--olive-grove); text-decoration: none; font-weight: 500; }
.woocommerce ul.products li.product .price del { color: var(--warm-stone); opacity: 0.6; margin-right: 6px; }
/* "View Product" button — rectangular olive, matches "Shop the Collection" */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .sarena-view-product {
  display: inline-block !important;
  margin-top: 14px !important;
  padding: 11px 26px !important;
  background: var(--olive-grove) !important;
  color: var(--ivory-linen) !important;
  border: 1px solid var(--olive-grove) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  transition: all var(--transition) !important;
  line-height: 1.4 !important;
  font-style: normal !important;
  text-decoration: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
  width: auto !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .sarena-view-product:hover {
  background: var(--charcoal) !important;
  border-color: var(--charcoal) !important;
  color: var(--ivory-linen) !important;
}

/* In Related Products the buttons can be a bit smaller to match scale */
.related.products ul.products li.product .button,
.upsells.products ul.products li.product .button {
  padding: 9px 20px !important;
  font-size: 9.5px !important;
  margin-top: 10px !important;
}

/* Kill lingering rounded ajax add-to-cart variants and confirmation links */
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .add_to_cart_button.loading,
.woocommerce ul.products li.product .add_to_cart_button.added {
  display: none !important;
}
/* "Added to cart" confirmation link */
.woocommerce ul.products li.product .added_to_cart {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-grove);
  margin-top: 8px;
}
/* Make the whole card click target cleaner */
.woocommerce ul.products li.product { padding-bottom: 6px; }
.woocommerce ul.products li.product .onsale {
  position: absolute;
  background: var(--olive-grove);
  color: var(--ivory-linen);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  margin: 10px;
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  line-height: 1;
}

.woocommerce-result-count { color: var(--warm-stone); font-size: 12px; letter-spacing: 0.1em; }
.woocommerce-ordering select {
  border: 1px solid var(--warm-stone); background: var(--ivory-linen);
  padding: 10px 32px 10px 16px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--charcoal); border-radius: 0;
}

/* Single product */
/* Single product page — image LEFT, summary RIGHT (v1.9 layout).
 * Forced with !important + body-scoped specificity so caching and plugin
 * overrides can't break it. */
html body .woocommerce div.product,
html body.single-product .woocommerce div.product {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 40px var(--gutter) var(--section-y) !important;
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 60px !important;
}
.woocommerce div.product .woocommerce-product-gallery {
  float: none !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 !important;
}

/* Hard cap on single-product gallery images — can't go wider than 640px */
html body.single-product .woocommerce div.product img,
html body.single-product .woocommerce-product-gallery img,
html body.single-product .woocommerce-product-gallery__image img,
html body.single-product .flex-control-thumbs li img {
  max-width: 640px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}
html body.single-product .flex-control-thumbs {
  max-width: 640px !important;
}
html body.single-product .flex-control-thumbs li img {
  max-width: 120px !important;
}
.woocommerce div.product .summary {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-top: 20px;
}
.woocommerce div.product .product_title {
  font-size: clamp(28px, 3.2vw, 42px);
  margin-bottom: 16px;
  color: var(--charcoal);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 24px;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--warm-stone);
  margin-bottom: 30px;
  font-size: 15px;
  line-height: 1.8;
}
.woocommerce div.product form.cart {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.woocommerce div.product form.cart .variations {
  width: 100%;
  margin-bottom: 10px;
}
.woocommerce div.product form.cart .variations label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--charcoal);
}
.woocommerce div.product form.cart .variations select {
  border: 1px solid var(--warm-stone);
  background: var(--ivory-linen);
  padding: 10px 16px;
  font-size: 13px;
  border-radius: 0;
  width: 100%;
}
.woocommerce div.product form.cart .quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--warm-stone);
  max-width: 120px;
}
.woocommerce div.product form.cart .quantity input.qty {
  border: none;
  background: transparent;
  text-align: center;
  width: 50px;
  padding: 10px 0;
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
  background: var(--olive-grove);
  color: var(--ivory-linen);
  padding: 16px 38px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--olive-grove);
  border-radius: 0;
  width: 100%;
  cursor: pointer;
  transition: all var(--transition);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
}
.woocommerce div.product .product_meta {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--warm-stone);
  letter-spacing: 0.05em;
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 6px; }

/* Tabs */
.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1;
  margin-top: 40px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0 !important;
  margin: 0 0 30px !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex;
  gap: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 14px 0 !important;
  margin-right: 36px;
  font-size: 11px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500 !important;
  color: var(--warm-stone) !important;
  font-family: var(--font-sans) !important;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--charcoal) !important;
  border-bottom-color: var(--olive-grove);
}
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 10px 0;
  color: var(--charcoal);
  line-height: 1.8;
}

/* RELATED / UPSELLS — tight 4-col, small thumbnails, no awkward gaps */
.woocommerce .related.products, .woocommerce .upsells.products,
.woocommerce div.product .related.products, .woocommerce div.product .upsells.products {
  grid-column: 1 / -1 !important;
  max-width: var(--max-w) !important;
  margin: 80px auto 0 !important;
  padding: 60px var(--gutter) var(--section-y) !important;
  border-top: 1px solid var(--border);
  width: 100%;
  display: block !important;
  clear: both;
}
.related.products > h2, .upsells.products > h2 {
  text-align: center !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 400 !important;
  margin: 0 auto 40px !important;
  max-width: none !important;
  width: 100%;
  letter-spacing: 0.02em;
  color: var(--charcoal);
}

/* The inner product list — tighter than the main shop grid.
   `justify-content: center` centers the row if only 2 or 3 products
   exist so they never look orphaned / left-aligned. */
html body .related.products ul.products,
html body .upsells.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 240px)) !important;
  gap: 32px 20px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  list-style: none !important;
  max-width: none !important;
  justify-content: center !important;
  justify-items: stretch !important;
}
/* Reset any WooCommerce default .first / .last / :nth-child float-era
   margin rules so a stray left margin can't push the first item out
   of column 1 and create that "3 above, 1 below" stagger. */
html body .related.products ul.products li.product,
html body .upsells.products ul.products li.product,
html body .related.products ul.products li.product.first,
html body .related.products ul.products li.product.last,
html body .related.products ul.products li.product:first-child,
html body .related.products ul.products li.product:last-child,
html body .related.products ul.products li.product:nth-child(n),
html body .upsells.products ul.products li.product:nth-child(n) {
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  text-align: left;
  min-width: 0;
}
.related.products ul.products li.product img,
.upsells.products ul.products li.product img {
  aspect-ratio: 3/4 !important;
  width: 100% !important;
  height: auto !important;
  max-width: 280px !important;
  max-height: 375px !important;
  object-fit: cover !important;
  margin: 0 auto 12px !important;
  background: var(--soft-sand);
}
.related.products ul.products li.product .woocommerce-loop-product__title,
.related.products ul.products li.product h2,
.related.products ul.products li.product h3,
.upsells.products ul.products li.product .woocommerce-loop-product__title,
.upsells.products ul.products li.product h2,
.upsells.products ul.products li.product h3 {
  font-size: 15px !important;
  line-height: 1.25 !important;
  margin: 0 0 3px !important;
}
.related.products ul.products li.product .price,
.upsells.products ul.products li.product .price {
  font-size: 11.5px !important;
}
.related.products ul.products li.product .button,
.upsells.products ul.products li.product .button {
  font-size: 9.5px !important;
  letter-spacing: 0.2em !important;
  padding: 4px 0 !important;
  margin-top: 6px !important;
}

@media (max-width: 900px) {
  .related.products ul.products,
  .upsells.products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 16px !important;
  }
}
@media (max-width: 420px) {
  .related.products ul.products,
  .upsells.products ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* Cart & checkout */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 60px var(--gutter) var(--section-y);
}
.woocommerce-cart-form, .woocommerce-checkout form.checkout {
  font-size: 14px;
}
.woocommerce table.shop_table {
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--ivory-linen);
}
.woocommerce table.shop_table th {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--charcoal);
  background: var(--soft-sand);
  padding: 18px;
}
.woocommerce table.shop_table td {
  padding: 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.woocommerce table.shop_table img { width: 70px; height: auto; }

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 400;
}

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--olive-grove);
  color: var(--ivory-linen);
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--olive-grove);
  border-radius: 0;
  transition: all var(--transition);
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--ivory-linen);
}
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
  background: var(--charcoal);
  border-color: var(--charcoal);
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
  background: var(--olive-grove);
  border-color: var(--olive-grove);
}

/* Coupon field */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout form .form-row input.input-text {
  border: 1px solid var(--warm-stone);
  background: var(--ivory-linen);
  padding: 12px 14px;
  font-size: 14px;
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
}
.woocommerce form .form-row label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 6px;
  display: block;
}

.woocommerce-form-coupon-toggle {
  margin-bottom: 24px;
}
.woocommerce-info {
  background: var(--soft-sand);
  color: var(--charcoal);
  border-top-color: var(--olive-grove);
  padding: 14px 18px;
  font-size: 13px;
}
.woocommerce-info a { color: var(--olive-grove); }
.woocommerce-message {
  background: var(--ivory-linen);
  border-top-color: var(--olive-grove);
  color: var(--charcoal);
}
.woocommerce-error { background: #f8e8e5; border-top-color: #a0392c; color: #5a1e16; }

.checkout_coupon.woocommerce-form-coupon,
form.checkout_coupon {
  border: 1px solid var(--border);
  padding: 22px;
  margin-bottom: 30px;
  background: var(--ivory-linen);
}

/* My Account */
.woocommerce-MyAccount-navigation ul {
  list-style: none; padding: 0;
  border: 1px solid var(--border);
}
.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--border);
}
.woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 14px 18px;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--charcoal);
}
.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation a:hover {
  background: var(--soft-sand);
  color: var(--olive-grove);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr !important; gap: 34px !important; }
  .footer-newsletter { grid-column: auto; margin-top: 0; }
  html body .woocommerce ul.products,
  .sarena-product-grid-wrap ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 40px 24px !important; }
}

/* Tablet — tighten spacing, shrink nav font */
@media (max-width: 1100px) {
  .header-inner { gap: 18px; padding: 18px var(--gutter); }
  .header-right { gap: 26px; }
  .nav-menu-right { gap: 22px; }
  .nav-menu-right a { font-size: 10px; letter-spacing: 0.18em; }
}

/* Mobile — hide the inline nav, show the hamburger.
 * Clicking the hamburger opens the slide-in drawer menu. */
@media (max-width: 900px) {
  .header-inner {
    padding: 14px var(--gutter);
    gap: 12px;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .header-logo { justify-self: flex-start; }
  .header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-end;
  }
  /* Hide the inline desktop nav entirely on mobile */
  .header-nav, .nav-menu-right { display: none !important; }
  /* Show the hamburger */
  .mobile-toggle { display: inline-flex !important; }
  .icon-group { gap: 14px; margin: 0; }
  .header-logo img { height: var(--sarena-logo-h, 42px); }
}

  .mobile-cart {
    display: inline-flex;
    color: var(--charcoal);
    position: relative;
  }
  .mobile-cart svg { width: 22px; height: 22px; }

  .hero-inner { padding: 90px 0; }
  .hero p { font-size: 15px; }

  /* At 900px, .split stays 2-column, cards just tighten. Image + text still side-by-side. */
  .split { padding: 0 var(--gutter) 40px; }
  .split-card { padding: 18px; gap: 24px; }

  .pillars-inner { grid-template-columns: repeat(2, 1fr) !important; gap: 40px 24px; }

  /* .editorial stays 2-col at 900px (tablet / narrow laptop); only collapses at phone sizes */

  .post-archive { grid-template-columns: 1fr; gap: 40px; }
  .woocommerce ul.products,
  .sarena-product-grid-wrap ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 36px 18px !important; }
  /* .woocommerce div.product STAYS 2-column at 900px tablet. Phone collapses in 680px breakpoint below. */
  .sarena-shop-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sarena-shop-bar__sort { width: 100%; text-align: right; }

  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr !important; gap: 28px !important; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

/* Phone — .split and .editorial collapse to single column. */
@media (max-width: 680px) {
  .split { grid-template-columns: 1fr !important; }
  .split-card { grid-template-columns: 1fr !important; padding: 14px 0; gap: 18px; }
  .split-card--reverse .split-card__text { order: 0; }
  .split-card__image { aspect-ratio: 4/3; max-height: 360px; }

  .editorial { grid-template-columns: 1fr !important; }
  .editorial-image { aspect-ratio: 4/3; max-height: 420px; }

  /* Single product: image stacks above summary on phones only */
  html body .woocommerce div.product,
  html body.single-product .woocommerce div.product {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 520px) {
  .pillars-inner { grid-template-columns: 1fr !important; }
  .footer-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
  .site-footer .footer-brand,
  .site-footer .footer-newsletter { grid-column: 1 / -1 !important; }
  .woocommerce ul.products,
  .sarena-product-grid-wrap ul.products { grid-template-columns: 1fr !important; }
  .newsletter-form { flex-direction: column; border: none; }
  .newsletter-form input {
    border: 1px solid var(--warm-stone);
    margin-bottom: 10px;
  }
}

/* Print */
@media print {
  .site-header, .site-footer, .announce, .hero-particles { display: none; }
  body { background: white; color: black; }
}
/* ============================================================
   v1.22 LATE VISUAL FIX v2 — selectors corrected so they match
   your actual DOM (no more `.woocommerce` ancestor requirement)
   ============================================================ */

/* --- Shop / category grids: edge padding + 3-col tiles --- */
html body.woocommerce-shop ul.products,
html body.tax-product_cat ul.products,
html body.tax-product_tag ul.products,
html body.post-type-archive-product ul.products {
	max-width: 1440px !important;
	margin: 30px auto 60px !important;
	padding: 0 40px !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 40px !important;
	list-style: none !important;
	box-sizing: border-box !important;
}
html body.woocommerce-shop ul.products li.product,
html body.tax-product_cat ul.products li.product,
html body.post-type-archive-product ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	grid-column: auto !important;
}

/* --- Single product page: image LEFT, summary RIGHT --- */
html body.single-product div.product {
	display: grid !important;
	grid-template-columns: 1.1fr 1fr !important;
	gap: 50px !important;
	max-width: 1400px !important;
	margin: 40px auto !important;
	padding: 0 40px !important;
	clear: both !important;
}
html body.single-product div.product .woocommerce-product-gallery,
html body.single-product div.product > .images {
	max-width: 600px !important;
	float: none !important;
	grid-column: 1 !important;
	width: 100% !important;
}
html body.single-product div.product .summary {
	float: none !important;
	grid-column: 2 !important;
	width: 100% !important;
	margin: 0 !important;
}
html body.single-product div.product > .woocommerce-tabs,
html body.single-product div.product > .related,
html body.single-product div.product > .upsells {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	margin-top: 40px !important;
	float: none !important;
	clear: both !important;
}

/* --- Related products: single centered row of 4 --- */
html body .related.products,
html body .upsells.products {
	max-width: 1400px !important;
	margin: 60px auto 40px !important;
	padding: 40px !important;
	border-top: 1px solid #e6e0d4 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	float: none !important;
	clear: both !important;
}
html body .related.products > h2,
html body .upsells.products > h2 {
	text-align: center !important;
	margin: 0 auto 30px !important;
}
html body .related.products ul.products,
html body .upsells.products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
html body .related.products ul.products li.product,
html body .upsells.products ul.products li.product {
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	grid-column: auto !important;
	grid-row: auto !important;
}

@media (max-width: 768px) {
	html body.single-product div.product {
		grid-template-columns: 1fr !important;
	}
	html body.woocommerce-shop ul.products,
	html body.tax-product_cat ul.products,
	html body.post-type-archive-product ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		padding: 0 20px !important;
	}
	html body .related.products ul.products,
	html body .upsells.products ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
/* ============================================================
   v1.22 VISUAL FIX v3 — kill first-cell indent + restore pillars
   ============================================================ */

/* Homepage pillars — force 4 in one row on desktop widths */
html body .pillars-inner {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 44px !important;
}

/* Shop grid: hide any stray non-product sibling that's stealing cell 1 */
html body.woocommerce-shop ul.products > *:not(li),
html body.tax-product_cat ul.products > *:not(li),
html body.tax-product_tag ul.products > *:not(li),
html body.post-type-archive-product ul.products > *:not(li),
html body .related.products ul.products > *:not(li),
html body .upsells.products ul.products > *:not(li) {
	display: none !important;
}

/* Force the FIRST product into column 1 / row 1, killing any inherited
   clear/margin/grid-column from WC's legacy float-based CSS */
html body.woocommerce-shop ul.products > li.product:first-child,
html body.tax-product_cat ul.products > li.product:first-child,
html body.tax-product_tag ul.products > li.product:first-child,
html body.post-type-archive-product ul.products > li.product:first-child,
html body .related.products ul.products > li.product:first-child,
html body .upsells.products ul.products > li.product:first-child,
html body ul.products > li.product.first {
	grid-column-start: 1 !important;
	grid-row-start: 1 !important;
	grid-column-end: auto !important;
	margin-left: 0 !important;
	clear: none !important;
}

/* Every product item — reset any leftover grid-column / grid-row that
   WC or a plugin might be setting per-position */
html body ul.products > li.product {
	grid-column: auto !important;
	grid-row: auto !important;
}

/* Pillars: only collapse at real phone widths, not tablet */
@media (max-width: 600px) {
	html body .pillars-inner {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 420px) {
	html body .pillars-inner {
		grid-template-columns: 1fr !important;
	}
}
/* ============================================================
   v1.22 VISUAL FIX v4 — remove the forced grid-column-start: 1
   that was stacking two products in cell 1. Let grid auto-flow
   handle placement, just hide any stray non-product siblings.
   ============================================================ */

/* Hide any non-product sibling inside ul.products */
html body.woocommerce-shop ul.products > *:not(li.product),
html body.tax-product_cat ul.products > *:not(li.product),
html body.tax-product_tag ul.products > *:not(li.product),
html body.post-type-archive-product ul.products > *:not(li.product),
html body .related.products ul.products > *:not(li.product),
html body .upsells.products ul.products > *:not(li.product) {
	display: none !important;
}

/* Reset grid positioning on every product tile so auto-flow handles layout */
html body ul.products > li.product,
html body ul.products > li.product.first,
html body ul.products > li.product.last,
html body ul.products > li.product:first-child,
html body ul.products > li.product:last-child,
html body ul.products > li.product:nth-child(n) {
	grid-column: auto !important;
	grid-row: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	clear: none !important;
	float: none !important;
	width: auto !important;
}
/* ============================================================
   v1.22 VISUAL FIX v5 — switch shop grid from CSS Grid to
   Flexbox. Flex items flow linearly and ignore grid-column /
   grid-row, so no stray positioning can create gaps.
   ============================================================ */

html body.woocommerce-shop ul.products,
html body.tax-product_cat ul.products,
html body.tax-product_tag ul.products,
html body.post-type-archive-product ul.products {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 40px !important;
	padding: 0 40px !important;
	max-width: 1440px !important;
	margin: 30px auto 60px !important;
	list-style: none !important;
	box-sizing: border-box !important;
	grid-template-columns: unset !important;
}

html body.woocommerce-shop ul.products > li.product,
html body.tax-product_cat ul.products > li.product,
html body.tax-product_tag ul.products > li.product,
html body.post-type-archive-product ul.products > li.product {
	flex: 0 0 calc((100% - 80px) / 3) !important;
	max-width: calc((100% - 80px) / 3) !important;
	min-width: 0 !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	grid-column: unset !important;
	grid-row: unset !important;
}

/* Same treatment for Related Products section */
html body .related.products ul.products,
html body .upsells.products ul.products {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 24px !important;
	padding: 0 !important;
	margin: 0 auto !important;
	list-style: none !important;
	justify-content: flex-start !important;
	grid-template-columns: unset !important;
}
html body .related.products ul.products > li.product,
html body .upsells.products ul.products > li.product {
	flex: 0 0 calc((100% - 72px) / 4) !important;
	max-width: calc((100% - 72px) / 4) !important;
	min-width: 0 !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	grid-column: unset !important;
	grid-row: unset !important;
}

@media (max-width: 768px) {
	html body.woocommerce-shop ul.products > li.product,
	html body.tax-product_cat ul.products > li.product,
	html body.tax-product_tag ul.products > li.product,
	html body.post-type-archive-product ul.products > li.product {
		flex: 0 0 calc((100% - 40px) / 2) !important;
		max-width: calc((100% - 40px) / 2) !important;
	}
	html body .related.products ul.products > li.product,
	html body .upsells.products ul.products > li.product {
		flex: 0 0 calc((100% - 24px) / 2) !important;
		max-width: calc((100% - 24px) / 2) !important;
	}
}

@media (max-width: 520px) {
	html body.woocommerce-shop ul.products > li.product,
	html body.tax-product_cat ul.products > li.product,
	html body.post-type-archive-product ul.products > li.product,
	html body .related.products ul.products > li.product,
	html body .upsells.products ul.products > li.product {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}
/* ============================================================
   v1.22 Pillars override — keep 1 row of 4 at wider viewports
   ============================================================ */
html body .pillars-inner {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
}

@media (max-width: 600px) {
	html body .pillars-inner {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 16px !important;
	}
}

@media (max-width: 420px) {
	html body .pillars-inner {
		grid-template-columns: 1fr !important;
	}
}
/* ============================================================
   v1.22 Mobile fix — stack single product image + summary on
   phone widths. Resets explicit grid-column placement so the
   summary doesn't overflow off the right of the viewport.
   ============================================================ */
@media (max-width: 768px) {
	html body.single-product div.product {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 30px !important;
		padding: 0 20px !important;
		max-width: 100% !important;
	}
	html body.single-product div.product .woocommerce-product-gallery,
	html body.single-product div.product > .images,
	html body.single-product div.product .summary,
	html body.single-product div.product > .woocommerce-tabs,
	html body.single-product div.product > .related,
	html body.single-product div.product > .upsells {
		grid-column: 1 !important;
		grid-row: auto !important;
		max-width: 100% !important;
		width: 100% !important;
		min-width: 0 !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	html body.single-product div.product .woocommerce-product-gallery img,
	html body.single-product div.product > .images img {
		max-width: 100% !important;
		height: auto !important;
	}
}
/* ============================================================
   v1.22 Pillars FINAL — flexbox, 4 in a row down to 480px
   ============================================================ */
html body .pillars-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	gap: 24px !important;
	grid-template-columns: unset !important;
}
html body .pillars-inner > .pillar {
	flex: 0 0 calc((100% - 72px) / 4) !important;
	max-width: calc((100% - 72px) / 4) !important;
	min-width: 0 !important;
	width: auto !important;
	grid-column: unset !important;
}

@media (max-width: 480px) {
	html body .pillars-inner > .pillar {
		flex: 0 0 calc((100% - 24px) / 2) !important;
		max-width: calc((100% - 24px) / 2) !important;
	}
}
/* ============================================================
   v1.22 Pillars FINAL v2 — grid with minmax(0, 1fr) so columns
   always shrink to fit, guaranteed 4 in a row.
   ============================================================ */
html body .pillars-inner {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 24px !important;
	flex-direction: unset !important;
	flex-wrap: unset !important;
	justify-content: unset !important;
}
html body .pillars-inner > .pillar {
	flex: unset !important;
	max-width: none !important;
	width: auto !important;
	min-width: 0 !important;
	grid-column: auto !important;
}

@media (max-width: 480px) {
	html body .pillars-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}