/* ============================================================
   Sooper Organics — Premium layer (v1.1)
   Luxury organic editorial refinement. Loaded last.
   ============================================================ */

:root {
  --so-forest: #1e3d2c;
  --so-forest-deep: #142a1f;
  --so-forest-ink: #0f2118;
  --so-gold: #c6a15b;
  --so-gold-soft: #e7d6ae;
  --so-cream: #fffdf7;
  --so-sand: #ece0cb;
  --so-terracotta: #b0603f;
  --so-shadow-soft: 0 18px 45px rgba(20, 42, 31, 0.10);
  --so-shadow-lift: 0 28px 60px rgba(20, 42, 31, 0.16);
  --so-shadow-card: 0 10px 30px rgba(20, 42, 31, 0.07), 0 2px 8px rgba(20, 42, 31, 0.05);
  --so-radius: 18px;
  --so-radius-lg: 26px;
  --so-header-h: 5rem;
}

::selection { background: var(--so-gold); color: var(--so-forest-ink); }

html { scrollbar-color: var(--so-botanical) var(--so-ivory); }

body {
  background:
    radial-gradient(1100px 500px at 85% -5%, rgba(198, 161, 91, 0.10), transparent 60%),
    radial-gradient(900px 480px at -10% 22%, rgba(94, 115, 86, 0.08), transparent 55%),
    var(--so-ivory);
}

h1, h2, h3, .so-display {
  font-variation-settings: "opsz" 90, "SOFT" 30;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* ---------- Announcement ---------- */
.so-announce {
  background: linear-gradient(90deg, var(--so-forest-ink), var(--so-forest) 55%, var(--so-forest-ink));
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(198, 161, 91, 0.35);
}

/* ---------- Header ---------- */
.so-header {
  background: rgba(255, 253, 247, 0.88);
  border-bottom: 1px solid rgba(198, 161, 91, 0.22);
}
.so-header.is-scrolled { box-shadow: 0 12px 35px rgba(20, 42, 31, 0.10); }
.so-header.is-scrolled .so-header__inner { min-height: 4.25rem; }
.so-header__inner { transition: min-height .35s var(--so-ease); }
.so-logo img { height: 56px; transition: height .35s var(--so-ease); }
.so-header.is-scrolled .so-logo img { height: 46px; }

/* Premium logo lockup (emblem + wordmark) */
.so-logo { gap: 0.85rem; }
.so-logo__markwrap { display: inline-flex; flex: none; line-height: 0; }
.so-logo__mark {
  width: 54px !important; height: 54px !important;
  transition: width .35s var(--so-ease), height .35s var(--so-ease), transform .5s var(--so-ease);
}
.so-header.is-scrolled .so-logo__mark { width: 44px !important; height: 44px !important; }
a.so-logo:hover .so-logo__mark { transform: rotate(-4deg) scale(1.04); }
.so-logo__text { gap: 0.18rem; }
.so-logo__name {
  font-family: var(--so-font-display);
  font-size: 1.62rem; font-weight: 600; line-height: 1;
  letter-spacing: 0.005em; color: var(--so-forest-ink);
  white-space: nowrap;
}
.so-logo__accent { color: #7A5A24; }
.so-logo__tag {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: #8A6D35; white-space: nowrap;
}
.so-logo__tag::before {
  content: ""; width: 26px; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--so-gold), rgba(198,161,91,.15));
}
/* Light lockup on dark backgrounds (footer) */
.so-logo--light .so-logo__name { color: var(--so-cream); }
.so-logo--light .so-logo__accent { color: var(--so-gold-soft); }
.so-logo--light .so-logo__tag { color: #C9B083; }
.so-logo--light .so-logo__mark { width: 58px !important; height: 58px !important; }
/* Drawer mini lockup */
.so-logo--drawer .so-logo__mark { width: 40px !important; height: 40px !important; }
.so-logo--drawer .so-logo__name { font-size: 1.2rem; }
.so-logo--drawer .so-logo__tag { font-size: 0.5rem; letter-spacing: 0.28em; }
@media (max-width: 640px) {
  .so-logo__mark { width: 44px !important; height: 44px !important; }
  .so-logo__name { font-size: 1.28rem; }
  .so-logo__tag { font-size: 0.5rem; letter-spacing: 0.26em; }
  .so-logo { gap: 0.6rem; }
}

.so-nav-list { gap: 2.1rem; }
.so-nav-list a {
  position: relative;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0;
}
.so-nav-list a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--so-gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--so-ease);
}
.so-nav-list a:hover::after,
.so-nav-list .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }

.so-icon-btn { transition: background .3s var(--so-ease), transform .3s var(--so-ease); }
.so-icon-btn:hover { background: rgba(198, 161, 91, 0.18); transform: translateY(-1px); }
.so-cart-count { background: var(--so-terracotta); box-shadow: 0 4px 10px rgba(176, 96, 63, .4); }

/* WhatsApp header pill — restrained, not neon */
.so-header__wa.so-btn--whatsapp,
.so-drawer .so-btn--whatsapp {
  background: var(--so-forest); border-color: var(--so-forest);
  box-shadow: 0 10px 22px rgba(20,42,31,.18);
}
.so-header__wa.so-btn--whatsapp:hover { background: var(--so-forest-deep); }

/* ---------- Buttons ---------- */
.so-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  border-radius: 999px;
  padding: 0.85rem 1.7rem;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset;
}
.so-btn--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: linear-gradient(180deg, #26503a, var(--so-forest));
  box-shadow: 0 14px 28px rgba(20, 42, 31, 0.22);
}
.so-btn--primary:hover,
.woocommerce a.button.alt:hover { transform: translateY(-2px); box-shadow: 0 20px 36px rgba(20,42,31,.24); }
.so-btn--light {
  background: var(--so-cream); border-color: var(--so-cream);
  box-shadow: 0 16px 32px rgba(0,0,0,.22);
}
.so-btn--light:hover { transform: translateY(-2px); }
.so-btn--ghost { backdrop-filter: blur(6px); }
.so-btn--ghost:hover { transform: translateY(-2px); }

/* ---------- Eyebrow / sections ---------- */
.so-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  color: var(--so-terracotta);
  font-size: 0.72rem; letter-spacing: 0.18em;
}
.so-eyebrow::before {
  content: ""; width: 34px; height: 1px; background: var(--so-gold);
}
.so-section { padding-block: clamp(4.5rem, 8vw, 7.5rem); }
.so-section--sand {
  background:
    linear-gradient(180deg, rgba(255,253,247,.65), rgba(236,224,203,.9)),
    var(--so-sand);
  border-block: 1px solid rgba(198,161,91,.22);
}
.so-section--forest {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 340px at 90% 0%, rgba(198,161,91,.20), transparent 60%),
    linear-gradient(160deg, #234d36, var(--so-forest-ink));
}
.so-section h2 { max-width: 22ch; }
.so-lede { font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); line-height: 1.6; }

/* ---------- Hero (fix media fill + luxury treatment) ---------- */
.so-hero { min-height: min(92vh, 880px); isolation: isolate; }
.so-hero__media { position: absolute; inset: 0; z-index: -2; }
.so-hero__media picture { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.so-hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  transform: scale(1.02);
}
@media (prefers-reduced-motion: no-preference) {
  .so-hero__media img { animation: so-hero-drift 18s var(--so-ease) both; }
  @keyframes so-hero-drift { from { transform: scale(1.09); } to { transform: scale(1.02); } }
}
.so-hero__overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(15,33,24,.52) 0%, rgba(15,33,24,.22) 48%, rgba(15,33,24,0) 78%),
    linear-gradient(0deg, rgba(15,33,24,.82) 0%, rgba(15,33,24,.34) 42%, rgba(15,33,24,.04) 68%, rgba(15,33,24,.14) 100%);
}
.so-hero__content { max-width: 46rem; padding-top: clamp(5rem, 10vw, 8rem); }
.so-hero__content h1 {
  font-size: clamp(3rem, 2.2rem + 4.2vw, 5.4rem);
  line-height: 0.98; font-weight: 580;
  text-shadow: 0 4px 30px rgba(0,0,0,.25);
}
.so-hero__content h1 em, .so-hero__content h1 i { color: var(--so-gold-soft); }
.so-hero__content .so-lede { max-width: 34rem; font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); }

.so-hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-top: 2.4rem; max-width: 44rem;
  background: rgba(255,253,247,.10);
  border: 1px solid rgba(255,253,247,.22);
  border-radius: 18px; overflow: hidden;
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 45px rgba(0,0,0,.22);
}
.so-hero__stats div { padding: 1rem 1.1rem; }
.so-hero__stats div + div { border-left: 1px solid rgba(255,253,247,.16); }
.so-hero__stats strong {
  display: block; font-family: var(--so-font-display);
  font-size: 1.35rem; font-weight: 580; color: #fff; line-height: 1.1;
}
.so-hero__stats span { display: block; margin-top: .25rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,253,247,.78); }
@media (max-width: 560px) {
  .so-hero__stats { grid-template-columns: 1fr; }
  .so-hero__stats div + div { border-left: 0; border-top: 1px solid rgba(255,253,247,.16); }
}

/* ---------- Category cards ---------- */
.so-cats { gap: 1.1rem; }
.so-cat-card {
  border-radius: 22px; aspect-ratio: 3/4.1;
  box-shadow: var(--so-shadow-card);
}
.so-cat-card::after {
  content: "↗"; position: absolute; top: .85rem; right: .85rem;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 999px; background: rgba(255,253,247,.92); color: var(--so-forest);
  font-size: 1rem; opacity: 0; transform: translateY(-4px);
  transition: all .35s var(--so-ease);
}
.so-cat-card:hover::after, .so-cat-card:focus-visible::after { opacity: 1; transform: none; }
.so-cat-card img { transition: transform 1s var(--so-ease), filter 1s var(--so-ease); }
.so-cat-card:hover img { transform: scale(1.07); filter: saturate(1.05); }
.so-cat-card__label { font-size: 1.15rem; padding: 3rem 1.1rem 1.1rem; }

/* ---------- Product cards ---------- */
/* WooCommerce's clearfix pseudo becomes a phantom first grid cell
   inside our CSS-grid product loops — remove it. */
ul.products::before, ul.products::after { content: none !important; display: none !important; }
ul.products { gap: 1.4rem !important; }
/* Shop & archives: refined 4-across cards (homepage featured stays 3) */
.woocommerce ul.products { gap: 1.25rem !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.06rem !important; padding: 0.95rem 1rem 0.25rem !important; }
.woocommerce ul.products li.product .price { padding: 0 1rem 0.7rem; font-size: 0.98rem; }
.woocommerce ul.products li.product { padding-bottom: 1.05rem !important; }
.woocommerce ul.products li.product .button { margin: 0 1rem !important; width: calc(100% - 2rem); }
ul.products li.product {
  border: 1px solid rgba(20,42,31,.07) !important;
  border-radius: 22px !important;
  box-shadow: var(--so-shadow-card);
  padding-bottom: 1.35rem !important;
  transition: transform .45s var(--so-ease), box-shadow .45s var(--so-ease) !important;
}
ul.products li.product:hover { transform: translateY(-6px); box-shadow: var(--so-shadow-lift); }
ul.products li.product a img {
  /* Studio shot: full product contained, not zoomed/cropped to fit */
  aspect-ratio: 1/1 !important; object-fit: contain !important;
  object-position: center; padding: 1.1rem; box-sizing: border-box;
  background: radial-gradient(120% 90% at 50% 38%, #fffdf7 0%, #faf4e6 62%, #f3ead6 100%);
  border-bottom: 0; transition: none;
}
ul.products li.product:hover a img { transform: none; }
ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.22rem !important; line-height: 1.22;
  padding: 1.15rem 1.2rem .3rem !important;
}
ul.products li.product .price {
  padding: 0 1.2rem .9rem; font-size: 1.02rem;
  color: var(--so-terracotta) !important; letter-spacing: .01em;
}
ul.products li.product .price del { color: #9a9587; font-weight: 400; margin-right: .35rem; }
ul.products li.product .price ins { text-decoration: none; }
ul.products li.product .button { margin: 0 1.2rem !important; width: calc(100% - 2.4rem); }

.so-badge, span.onsale, .so-badge--sale {
  top: 1rem !important; left: 1rem !important;
  border-radius: 999px !important; padding: .45rem .75rem !important;
  background: linear-gradient(180deg, #c06f49, var(--so-terracotta)) !important;
  box-shadow: 0 10px 20px rgba(176,96,63,.28);
  letter-spacing: .1em !important;
}

/* Stagger reveal for grids */
@media (prefers-reduced-motion: no-preference) {
  ul.products li.product:nth-child(2), .so-cats > *:nth-child(2), .so-trust__item:nth-child(2) { transition-delay: .06s; }
  ul.products li.product:nth-child(3), .so-cats > *:nth-child(3), .so-trust__item:nth-child(3) { transition-delay: .12s; }
  ul.products li.product:nth-child(4), .so-cats > *:nth-child(4), .so-trust__item:nth-child(4) { transition-delay: .18s; }
}

/* ---------- Editorial splits ---------- */
.so-split__media {
  position: relative; border-radius: 26px;
  box-shadow: var(--so-shadow-lift);
  aspect-ratio: 4/3.15;
}
.so-split__media::after {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid rgba(255,253,247,.45); border-radius: 18px; pointer-events: none;
}
.so-split__media picture { display: block; height: 100%; }
.so-split__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--so-ease); }
.so-split:hover .so-split__media img { transform: scale(1.035); }

.so-value, .so-trust__item {
  border-radius: 20px; border: 1px solid rgba(20,42,31,.07);
  box-shadow: var(--so-shadow-card);
  transition: transform .4s var(--so-ease), box-shadow .4s var(--so-ease);
}
.so-value:hover, .so-trust__item:hover { transform: translateY(-4px); box-shadow: var(--so-shadow-lift); }
.so-value { background: linear-gradient(180deg, var(--so-cream), #f4ead6); }
.so-trust__item .so-icon {
  width: 52px; height: 52px; padding: 13px;
  border-radius: 999px; background: rgba(198,161,91,.18); color: var(--so-forest);
}
.so-step { border: 1px solid rgba(255,253,247,.14); background: rgba(255,253,247,.07); backdrop-filter: blur(8px); border-radius: 20px; }
.so-step::before { color: var(--so-gold); font-size: 2rem; }

/* ---------- Banner / chips / forms ---------- */
.so-page-banner {
  background:
    radial-gradient(700px 260px at 90% 0%, rgba(198,161,91,.22), transparent 60%),
    linear-gradient(135deg, #f3e9d4, var(--so-ivory));
  border-bottom: 1px solid rgba(198,161,91,.25);
  padding-block: clamp(3rem, 6vw, 4.8rem) clamp(2.2rem, 4vw, 3.4rem);
}
.so-chip { box-shadow: 0 4px 14px rgba(20,42,31,.05); transition: all .3s var(--so-ease); }
.so-chip:hover { transform: translateY(-1px); }

input, select, textarea { transition: border-color .25s var(--so-ease), box-shadow .25s var(--so-ease); }
.wpforms-container input:focus, .wpforms-container textarea:focus,
.woocommerce form .input-text:focus, .woocommerce form select:focus {
  border-color: var(--so-forest) !important;
  box-shadow: 0 0 0 4px rgba(198,161,91,.22);
  outline: none;
}

/* ---------- Single product / commerce ---------- */
.single-product .woocommerce-product-gallery {
  border-radius: 24px !important; border: 1px solid rgba(20,42,31,.07) !important;
  box-shadow: var(--so-shadow-soft);
}
@media (min-width: 900px) {
  .single-product div.product .summary {
    background: var(--so-cream); border: 1px solid rgba(20,42,31,.07);
    border-radius: 24px; padding: 2rem; box-shadow: var(--so-shadow-card);
  }
}
.single-product .price { font-family: var(--so-font-display); font-size: 1.9rem; }
.so-variation-buttons button { border-radius: 999px; transition: all .3s var(--so-ease); }
.so-variation-buttons button:hover { border-color: var(--so-forest); transform: translateY(-1px); }
.so-variation-buttons button.is-selected { box-shadow: 0 10px 22px rgba(20,42,31,.20); }
.woocommerce-tabs .panel, .woocommerce-cart table.cart, .woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-navigation {
  border-radius: 22px !important; box-shadow: var(--so-shadow-card);
}
.woocommerce-tabs ul.tabs li { border-radius: 999px !important; overflow: hidden; }

/* Product tab prose — merchant content must not inherit page-display
   heading sizes (h2 up to 3.5rem). Editorial scale + rhythm instead. */
.woocommerce-tabs .panel {
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.25rem, 3.5vw, 2.8rem) !important;
  font-size: 1rem; line-height: 1.75; color: var(--so-text);
}
.woocommerce-tabs .panel > * { max-width: 54rem; }
.woocommerce-tabs .panel h2 {
  font-size: 1.45rem !important; line-height: 1.25; letter-spacing: -0.01em;
  margin: 1.8rem 0 0.6rem !important;
}
.woocommerce-tabs .panel h2:first-child { margin-top: 0 !important; font-size: 1.6rem !important; }
.woocommerce-tabs .panel h3 {
  font-size: 1.18rem !important; line-height: 1.3;
  margin: 1.6rem 0 0.5rem !important;
}
.woocommerce-tabs .panel h4, .woocommerce-tabs .panel h5, .woocommerce-tabs .panel h6 {
  font-size: 1.02rem !important; line-height: 1.35;
  margin: 1.4rem 0 0.45rem !important;
}
.woocommerce-tabs .panel p { margin: 0 0 1rem !important; }
.woocommerce-tabs .panel ul, .woocommerce-tabs .panel ol {
  margin: 0 0 1.1rem !important; padding-left: 1.15em !important;
}
.woocommerce-tabs .panel li { margin-bottom: 0.35rem; }
.woocommerce-tabs .panel li::marker { color: var(--so-gold); }
.woocommerce-tabs .panel strong, .woocommerce-tabs .panel b { color: var(--so-forest-ink); }
.woocommerce-tabs .panel table { font-size: 0.95rem; }
/* Same editorial scale for policy / prose pages */
.so-prose h2 { font-size: 1.55rem !important; line-height: 1.25; margin: 2.1rem 0 0.6rem !important; }
.so-prose h2:first-child { margin-top: 0 !important; }
.so-prose h3 { font-size: 1.2rem !important; line-height: 1.3; margin: 1.7rem 0 0.5rem !important; }
.so-prose h4 { font-size: 1.02rem !important; margin: 1.4rem 0 0.45rem !important; }
.so-prose p { margin: 0 0 1rem !important; }
.so-prose ul, .so-prose ol { margin: 0 0 1.1rem !important; padding-left: 1.15em !important; }
.so-prose li { margin-bottom: 0.35rem; }
.so-prose li::marker { color: var(--so-gold); }

/* Same restraint for the short description in the summary card */
.single-product .woocommerce-product-details__short-description { font-size: 0.98rem; line-height: 1.7; }
.single-product .woocommerce-product-details__short-description h2 { font-size: 1.3rem !important; margin: 1.2rem 0 0.5rem !important; }
.single-product .woocommerce-product-details__short-description h3 { font-size: 1.1rem !important; margin: 1.1rem 0 0.45rem !important; }
.single-product .woocommerce-product-details__short-description p { margin: 0 0 0.85rem !important; }

/* ---------- Newsletter / footer / float ---------- */
.so-newsletter {
  background: linear-gradient(180deg, var(--so-cream), #f4ead6);
  border: 1px solid rgba(198,161,91,.30);
  border-radius: 28px; box-shadow: var(--so-shadow-soft);
  padding: clamp(2.2rem, 5vw, 3.8rem);
}
.so-newsletter input[type="email"] { border-radius: 999px !important; min-height: 52px; padding-inline: 1.2rem !important; }
.so-newsletter button, .so-newsletter input[type="submit"] { border-radius: 999px !important; }

.so-footer {
  background:
    radial-gradient(800px 300px at 85% 0%, rgba(198,161,91,.14), transparent 60%),
    linear-gradient(180deg, var(--so-forest), var(--so-forest-ink));
  border-top: 1px solid rgba(198,161,91,.35);
}
.so-footer h3 { color: var(--so-gold-soft); }
.so-footer li a { opacity: .86; transition: opacity .25s, padding-left .25s; }
.so-footer li a:hover { opacity: 1; padding-left: 4px; }
.so-social { flex-wrap: wrap; }
.so-social a {
  width: auto; height: auto; padding: .5rem 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .05em;
  transition: all .3s var(--so-ease);
}
.so-social a:hover { background: var(--so-gold); color: var(--so-forest-ink); border-color: var(--so-gold); transform: translateY(-2px); }

.so-float-wa { background: linear-gradient(180deg, #2fbf71, #1da851); box-shadow: 0 18px 35px rgba(29,168,81,.35); }
@media (prefers-reduced-motion: no-preference) {
  .so-float-wa::after { content:""; position:absolute; inset:-6px; border-radius:999px; border:1px solid rgba(37,211,102,.45); animation: so-wa-pulse 2.6s ease-out infinite; }
  @keyframes so-wa-pulse { 0%{transform:scale(.85);opacity:.8} 70%,100%{transform:scale(1.18);opacity:0} }
}

/* Drawer & search */
.so-drawer__panel { background: linear-gradient(180deg, var(--so-cream), var(--so-ivory)); }
.so-drawer .so-nav-list a { font-family: var(--so-font-display); font-size: 1.45rem; letter-spacing: 0; text-transform: none; }
.so-search { background: rgba(15,33,24,.96); backdrop-filter: blur(14px); }
.so-search__form input[type="search"] { border-radius: 999px; padding-inline: 1.3rem; }
.so-search__form .so-btn { border-radius: 999px; }

/* WooCommerce button certainty (overrides late Woo styles).
   Selectors are not scoped to .woocommerce: the homepage featured
   loop renders product cards outside a .woocommerce wrapper. */
ul.products li.product a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
a.button,
button.button,
input.button,
.single-product .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px;
  padding: .8rem 1.5rem !important;
  border-radius: 999px !important;
  border: 1px solid var(--so-forest) !important;
  background: linear-gradient(180deg, #26503a, var(--so-forest)) !important;
  color: #fff !important;
  font-weight: 600 !important; font-size: .92rem !important;
  letter-spacing: .02em; text-decoration: none !important;
  box-shadow: 0 12px 24px rgba(20,42,31,.18);
  transition: transform .3s var(--so-ease), box-shadow .3s var(--so-ease), background .3s var(--so-ease);
}
ul.products li.product a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
a.button:hover,
button.button:hover,
.single-product .single_add_to_cart_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(20,42,31,.22);
  background: var(--so-forest-deep) !important;
  color: #fff !important;
}
ul.products li.product a.button.so-btn--ghost {
  background: transparent !important; color: var(--so-forest) !important; box-shadow: none;
}
ul.products li.product a.button.so-btn--ghost:hover {
  background: var(--so-forest) !important; color: #fff !important;
}
ul.products li.product .woocommerce-LoopProduct-link { text-decoration: none !important; }
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price { text-decoration: none !important; }
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  background: linear-gradient(180deg, #26503a, var(--so-forest)) !important;
  border-radius: 999px !important;
}
.checkout-button, #place_order { border-radius: 999px !important; padding: 1rem 1.8rem !important; }

/* Empty cart: WooCommerce also prints its own "Return to shop" pill —
   hide it so only the theme's single "Explore our products" CTA shows. */
.woocommerce-cart .return-to-shop { display: none !important; }
.so-empty-actions { margin: 1.25rem 0 0; }

/* Single product layout certainty */
/* Native float layout — the gallery slider sizes correctly against
   percentage widths; CSS grid areas make its slide maths explode. */
@media (min-width: 900px) {
  .single-product div.product { display: block !important; }
  .single-product div.product > .images { width: 52% !important; max-width: 52% !important; float: left !important; }
  .single-product div.product > .summary { width: 42% !important; max-width: 42% !important; float: right !important; }
}
.single-product div.product .images img { max-width: 100%; }

/* Milk price badge (shop/category thumbnail, top-right so it never clashes with Sale top-left) */
ul.products li.product { position: relative; }
.so-badge--milk-price {
  top: 1rem !important; left: auto !important; right: 1rem;
  background: linear-gradient(180deg, #2e6b3e, var(--so-forest, #1b4d20)) !important;
  box-shadow: 0 10px 20px rgba(27,77,32,.28);
  text-transform: none !important; letter-spacing: .02em !important;
  font-size: .78rem !important; white-space: nowrap;
}
.so-milk-price-pill {
  display: inline-block; margin: 0 0 1rem; padding: .5rem .9rem;
  border-radius: 999px; background: var(--so-sand, #f3ead8); color: var(--so-forest, #1b4d20);
  border: 1px solid rgba(27,77,32,.18); font-size: .95rem;
}
.so-notice--plan { margin-top: .75rem; }

/* Mobile finesse */
@media (max-width: 640px) {
  :root { --so-header-h: 4.4rem; }
  .so-logo img { height: 46px; }
  .so-announce { font-size: .62rem; letter-spacing: .1em; padding-inline: .7rem; }
  .so-hero__content { padding-top: 4rem; }
  ul.products li.product .woocommerce-loop-product__title { font-size: 1.05rem !important; }
  .so-footer { padding-top: 3.5rem; }
}

/* ---- 1.2.4: no horizontal scroll + product title scale ---- */
/* JS mirrors the native variation <select> with pill buttons; the select
   itself must never take layout space (it rendered 960px wide and pushed
   the page into horizontal scroll). Without JS the class is never added
   and the native select shows normally. */
.single-product form.cart .variations select.so-variation-native-hidden {
  display: none !important;
}

/* Long marketing titles need a calmer scale than the global h1 (was 56px). */
.single-product .product_title {
  font-size: clamp(1.8rem, 1.55rem + 1.1vw, 2.55rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Safety net: never allow sideways scrolling from decorative overflow.
   `clip` (not `hidden`) so the sticky header keeps working. */
html,
body {
  overflow-x: clip;
}

/* Mobile/tablet product layout: the base single-column grid sized itself
   to the gallery slider's intrinsic width (650px), pushing the image and
   summary off-screen below 900px. Constrain the column and the items. */
@media (max-width: 899px) {
  .single-product div.product { grid-template-columns: minmax(0, 1fr); }
  .single-product div.product > .images,
  .single-product div.product > .summary { min-width: 0; max-width: 100%; }
}

/* ---- 1.2.5: page banner scale, flash messages, cart/checkout layout ---- */
/* "Cart" / "Checkout" inherited the 4.5rem display scale (72px) and a
   260px-tall banner. Utility pages get a calmer title and banner. */
.so-page-banner {
  padding-block: clamp(1.75rem, 3.5vw, 2.6rem) clamp(1.35rem, 2.5vw, 1.9rem);
}
.so-page-banner h1 {
  font-size: clamp(1.9rem, 1.6rem + 1.1vw, 2.5rem);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

/* Flash messages: icon, text and action button on one centred row
   (the button used to float onto its own line under long product names). */
.woocommerce-notices-wrapper { margin-bottom: 1.25rem; }
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 1rem 1.15rem 1rem 3.35rem;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  line-height: 1.55;
  border: 1px solid rgba(30, 58, 42, 0.16) !important;
  border-left: 3px solid var(--so-forest) !important;
  border-radius: var(--so-radius-sm) !important;
  background: #f4f8f1 !important;
  box-shadow: 0 10px 24px rgba(20, 42, 31, 0.07);
}
.woocommerce .woocommerce-info {
  border-left-color: #c6a15b !important;
  background: #fbf7ec !important;
}
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
  float: none !important;
  margin-left: auto;
  flex: 0 0 auto;
  order: 2; /* Woo prints the button first in the DOM; keep it on the right */
}
.woocommerce .woocommerce-error {
  padding: 1rem 1.15rem 1rem 3.35rem;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  line-height: 1.55;
  border: 1px solid rgba(139, 58, 42, 0.22) !important;
  border-left: 3px solid var(--so-danger) !important;
  border-radius: var(--so-radius-sm) !important;
  background: #fbf1ee !important;
  box-shadow: 0 10px 24px rgba(20, 42, 31, 0.07);
}

/* Commerce pages (cart / checkout / account): no prose heading leakage */
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2,
.woocommerce-account h3 {
  font-size: 1.3rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}

/* Cart: items table left, sticky totals card right */
@media (min-width: 1024px) {
  .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 0 2.5rem;
    align-items: start;
  }
  .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
  }
  .woocommerce-cart .cart-collaterals .cart_totals {
    width: 100% !important;
    float: none;
    position: sticky;
    top: calc(var(--so-header-h) + 1rem);
  }
}
.woocommerce-cart table.cart { font-size: 0.95rem; margin-bottom: 0; }
.woocommerce-cart table.cart th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--so-forest);
}
.woocommerce-cart table.cart .product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
}
.woocommerce-cart table.cart td.product-name { min-width: 12rem; }
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal { white-space: nowrap; font-weight: 600; }
.woocommerce-cart table.cart .quantity .qty {
  width: 4.4rem;
  min-height: 46px;
  text-align: center;
  border: 1.5px solid var(--so-border-strong);
  border-radius: var(--so-radius-sm);
  font: inherit;
}
.woocommerce-cart table.cart td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
  width: 12rem !important;
  min-height: 46px;
  padding: 0.5rem 0.85rem;
  border: 1.5px solid var(--so-border-strong);
  border-radius: 999px;
  font: inherit;
}
.woocommerce-cart .cart_totals table { font-size: 0.95rem; }
.woocommerce-cart .cart_totals .wc-proceed-to-checkout { padding-bottom: 0; }
.woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button {
  display: flex;
  width: 100%;
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .woocommerce .woocommerce-message .button,
  .woocommerce .woocommerce-info .button { margin-left: 0; }
}

/* Checkout: Woo's floated 48% columns clash with the grid (billing was
   squeezed to ~300px). Reset floats, place columns explicitly, and give
   the order summary its own sticky right column on wide screens. */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  float: none !important;
  width: auto !important;
  min-width: 0;
}
@media (min-width: 900px) {
  .woocommerce-checkout .col2-set .col-1 { grid-column: 1; }
  .woocommerce-checkout .col2-set .col-2 { grid-column: 2; }
}
@media (min-width: 1024px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 0 2.5rem;
    align-items: start;
  }
  .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
  .woocommerce-checkout form.checkout > #customer_details {
    grid-column: 1;
    grid-row: 2 / span 2;
    min-width: 0;
  }
  .woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 2; }
  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 2;
    grid-row: 3;
    position: sticky;
    top: calc(var(--so-header-h) + 1rem);
  }
}

/* ---- 1.3.0: minimal checkout — slim header, steps, one clean form ---- */
.so-header__inner--checkout { justify-content: space-between; }
.so-checkout-title {
  font-family: var(--so-font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--so-forest-deep);
}
body.woocommerce-checkout .so-float-wa { display: none !important; }
body.woocommerce-checkout .so-main { padding-top: clamp(1.25rem, 3vw, 2.25rem); }

/* Progress steps: Cart → Checkout → Confirmation */
.so-checkout-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}
.so-checkout-steps li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--so-text-muted);
}
.so-checkout-steps li a { color: inherit; text-decoration: none; }
.so-checkout-steps li:not(:last-child)::after {
  content: "";
  width: clamp(1.75rem, 7vw, 5.5rem);
  height: 2px;
  border-radius: 2px;
  background: var(--so-border-strong);
  margin-left: 0.6rem;
}
.so-checkout-steps li.is-done:not(:last-child)::after { background: #c6a15b; }
.so-checkout-steps__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid var(--so-border-strong);
  background: #fff;
  font-size: 0.8rem;
  color: var(--so-text-muted);
  flex: 0 0 auto;
}
.so-checkout-steps li.is-done { color: var(--so-forest); }
.so-checkout-steps li.is-done .so-checkout-steps__dot {
  background: #c6a15b;
  border-color: transparent;
  color: #fff;
}
.so-checkout-steps li.is-active { color: var(--so-forest-deep); }
.so-checkout-steps li.is-active .so-checkout-steps__dot {
  background: var(--so-forest);
  border-color: transparent;
  color: #fff;
}

/* Section cards */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
  background: var(--so-white);
  border: 1px solid var(--so-border);
  border-radius: 20px;
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 18px 40px rgba(20, 42, 31, 0.06);
}
.woocommerce-checkout #order_review { padding-top: 1.25rem; }
/* "Order summary" heading sits above #order_review in the DOM; merge them
   visually into a single card (heading = card header). */
.woocommerce-checkout #order_review_heading {
  background: var(--so-white);
  border: 1px solid var(--so-border);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  padding: 1.25rem 1.5rem 0.85rem;
  margin-bottom: 0;
}
.woocommerce-checkout #order_review {
  border-top: 0;
  border-radius: 0 0 20px 20px;
  padding-top: 0.5rem;
}
/* One address only: billing doubles as shipping */
.woocommerce-checkout .col2-set { grid-template-columns: minmax(0, 1fr) !important; }
.woocommerce-checkout .col2-set .col-1 { grid-column: 1 !important; }
.woocommerce-checkout .col2-set .col-2,
.woocommerce-checkout .woocommerce-shipping-fields { display: none !important; }

/* Numbered section headings */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.15rem;
  margin-bottom: 1.25rem;
}
.woocommerce-checkout .woocommerce-billing-fields h3::before,
.woocommerce-checkout #order_review_heading::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--so-forest);
  color: #fff;
  font-family: var(--so-font-body);
  font-size: 0.85rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.woocommerce-checkout .woocommerce-billing-fields h3::before { content: "1"; }
.woocommerce-checkout #order_review_heading::before { content: "2"; }

/* Clean stacked fields */
.woocommerce-checkout form.checkout .form-row { margin-bottom: 1.1rem; padding: 0; }
.woocommerce-checkout form.checkout .form-row label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--so-forest-deep);
}
.woocommerce-checkout form.checkout .form-row .input-text,
.woocommerce-checkout form.checkout .form-row select,
.woocommerce-checkout form.checkout .form-row textarea,
.woocommerce-checkout form.checkout .select2-container .select2-selection--single {
  width: 100%;
  min-height: 52px;
  padding: 0.78rem 1rem;
  border: 1.5px solid var(--so-border-strong);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 1rem;
}
.woocommerce-checkout form.checkout .form-row textarea { min-height: 5.5rem; }
.woocommerce-checkout form.checkout .select2-container .select2-selection__rendered {
  line-height: 1.45;
  padding-left: 0;
}
.woocommerce-checkout form.checkout .select2-container .select2-selection__arrow { height: 50px; }
.woocommerce-checkout form.checkout .form-row abbr.required {
  color: var(--so-danger);
  text-decoration: none;
}

/* Order summary + payment inside the right card */
.woocommerce-checkout #order_review table.shop_table { font-size: 0.95rem; margin-bottom: 1rem; }
.woocommerce-checkout #payment { background: transparent !important; }
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--so-border);
  padding: 0.5rem 0 1rem;
}
.woocommerce-checkout #place_order {
  width: 100%;
  min-height: 54px;
  font-size: 1rem !important;
  float: none !important;
}
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 1rem; }