/*
Theme Name: GeneratePress Child
Template: generatepress
Version: 1.0.1
Description: Child theme for Zoomies Canada redesign
*/

:root {
  --z-bg: #F8F6FB;
  --z-purple: #7C5CBF;
  --z-purple-hover: #6548A8;
  --z-amber: #C4872A;
  --z-ann-bg: #F5E4C0;
  --z-ann-text: #8A5C1A;
  --z-seo-bg: #EDE8F5;
  --z-dark: #2d1f4a;
  --z-muted: #5a4a72;
  --z-border: #e8e4f0;
  --z-card: #ffffff;
  --z-r-card: 12px;
  --z-r-pill: 20px;
  --z-r-btn: 20px;
  --z-r-input: 8px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  overflow-x: hidden;
}

.zoomies-content-wrap {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Announcement bar */
#zoomies-ann-bar {
  position: sticky;
  top: 0;
  z-index: 400;
  background: #F5E4C0;
  color: #8A5C1A;
  height: 36px;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 44px;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  #zoomies-ann-bar {
    height: auto;
    min-height: 36px;
    padding: 8px 44px;
  }
  #zoomies-header { top: 0; }
}

.zoomies-ann-msg {
  display: none;
}

.zoomies-ann-msg.active {
  display: inline;
}

.zoomies-ann-close {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* ── Header ── */
#zoomies-header {
  position: sticky;
  top: 36px;
  z-index: 300;
  background: #fff;
  height: 60px;
  transition: box-shadow 0.2s;
}

#zoomies-header.scrolled {
  box-shadow: 0 1px 0 #e8e4f0;
}

.zoomies-header-inner {
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 16px;
}

/* Logo */
.zoomies-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.zoomies-logo img {
  height: 32px;
  width: auto;
  display: block;
  filter: brightness(0);
}

/* ── Desktop nav (hidden on mobile) ── */
.zd-nav { display: none; }

.zd-nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}

.zd-item { position: relative; }

.zd-nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 11px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2d1f4a;
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.15s;
  line-height: 1;
}

.zd-nav-link:hover { background: #ede9f7; }

.zd-has-dropdown:hover .zd-nav-link,
.zd-has-dropdown:focus-within .zd-nav-link { background: #ede9f7; }

.zd-chevron { flex-shrink: 0; transition: transform 0.18s; }

.zd-has-dropdown:hover .zd-chevron,
.zd-has-dropdown:focus-within .zd-chevron { transform: rotate(180deg); }

/* Dropdown panel */
.zd-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 6px; /* transparent gap — keeps hover connected */
  background: transparent;
  min-width: 176px;
  z-index: 400;
}

.zd-has-dropdown:hover .zd-dropdown,
.zd-has-dropdown:focus-within .zd-dropdown { display: block; }

.zd-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 28px rgba(44,31,74,0.13);
}

.zd-dropdown a {
  display: block;
  padding: 9px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #2d1f4a;
  text-decoration: none;
  transition: background 0.12s;
  white-space: nowrap;
}

.zd-dropdown a:hover { background: #f3f0fa; }

/* Brands: 2-column wide dropdown */
.zd-dropdown-wide { min-width: 340px; }
.zd-dropdown-wide ul { columns: 2; column-gap: 0; }

/* Right side icons */
.zoomies-nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.zd-icon-btn {
  display: none;
  background: none;
  border: none;
  color: #2d1f4a;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  text-decoration: none;
}

.zd-icon-btn:hover { background: #ede9f7; }

/* Search overlay */
#zd-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#zd-search-overlay[aria-hidden="false"] {
  pointer-events: all;
  opacity: 1;
}
.zd-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 10, 40, 0.6);
  backdrop-filter: blur(4px);
}
.zd-search-modal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  margin: 0 20px;
  transform: translateY(-12px);
  transition: transform 0.2s ease;
}
#zd-search-overlay[aria-hidden="false"] .zd-search-modal {
  transform: translateY(0);
}
.zd-search-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  padding: 0;
}
.zd-search-close:hover { background: rgba(255,255,255,0.25); }
.zd-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.zd-search-form-icon {
  flex-shrink: 0;
  color: #9b8bbb;
}
#zd-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 17px;
  color: #2d1f4a;
  background: transparent;
  font-family: 'Inter', sans-serif;
}
#zd-search-input::placeholder { color: #b0a0cc; }

/* Live search results */
#zd-search-results {
  margin-top: 8px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden;
  max-height: 420px;
  overflow-y: auto;
}
.zd-sr-loading, .zd-sr-empty {
  padding: 16px 20px;
  font-size: 14px;
  color: #9b8bbb;
  margin: 0;
}
.zd-sr-list { list-style: none; margin: 0; padding: 8px 0; }
.zd-sr-item { margin: 0; }
.zd-sr-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  transition: background 0.1s;
  color: inherit;
}
.zd-sr-link:hover { background: #f5f3fc; color: inherit; }
.zd-sr-img, .zd-sr-img-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #ede9f7;
}
.zd-sr-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zd-sr-title {
  font-size: 14px;
  font-weight: 500;
  color: #2d1f4a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zd-sr-price { font-size: 13px; color: #7C5CBF; font-weight: 600; }

/* Hamburger */
.zoomies-hamburger {
  background: transparent;
  border: 1px solid var(--z-border);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.zoomies-hamburger:hover,
.zoomies-hamburger:focus,
.zoomies-hamburger:focus-visible,
.zoomies-hamburger:active {
  background: transparent;
  outline: none;
  box-shadow: none;
}

#zoomies-header .zoomies-hamburger:focus,
#zoomies-header .zoomies-hamburger:focus-visible,
#zoomies-header .zoomies-hamburger:active {
  background: transparent;
  outline: none;
  box-shadow: none;
}

.zoomies-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #2d1f4a;
  border-radius: 2px;
}

/* Cart */
.zoomies-cart-btn {
  display: flex;
  align-items: center;
  color: #2d1f4a;
  text-decoration: none;
  position: relative;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.15s;
}

.zoomies-cart-btn:hover { background: #ede9f7; }

.zoomies-cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--z-purple);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Search always visible on mobile */
.zd-search-btn  { display: flex; }
.zd-account-btn { display: flex; }

/* Desktop breakpoint: show nav + icon buttons, hide hamburger */
@media (min-width: 1024px) {
  .zoomies-header-inner { padding: 0 32px; }
  .zd-nav              { display: flex; }
  .zd-icon-btn         { display: flex; }
  .zoomies-hamburger   { display: none; }
}

/* Hamburger overlay */
/* Backdrop */
#zoomies-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#zoomies-menu-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: all;
}
.admin-bar #zoomies-menu-overlay {
  top: 32px;
}

/* Drawer panel */
.zoomies-overlay-inner {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 88%;
  max-width: 380px;
  background: #F8F6FB;
  overflow-y: auto;
  padding: 20px 18px 40px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
#zoomies-menu-overlay[aria-hidden="false"] .zoomies-overlay-inner {
  transform: translateX(0);
}
.admin-bar .zoomies-overlay-inner {
  top: 32px;
}

.zoomies-overlay-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.zoomies-overlay-logo {
  font: 800 22px/1 'Inter', sans-serif;
  letter-spacing: 0.04em;
  color: #2d1f4a;
}

.zoomies-overlay-close {
  background: #EDEAF4;
  border: none;
  font-size: 20px;
  color: #2d1f4a;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.zoomies-overlay-close:hover,
.zoomies-overlay-close:focus,
.zoomies-overlay-close:focus-visible,
.zoomies-overlay-close:active {
  background: #DDD8EC;
  color: #2d1f4a !important;
  outline: none;
  box-shadow: none;
}

#zoomies-menu-overlay .zoomies-overlay-close,
#zoomies-menu-overlay .zoomies-overlay-close:hover,
#zoomies-menu-overlay .zoomies-overlay-close:focus,
#zoomies-menu-overlay .zoomies-overlay-close:focus-visible,
#zoomies-menu-overlay .zoomies-overlay-close:active {
  outline: none;
  box-shadow: none;
}

/* Hide 3rd-party floating widgets when menu overlay is open */
body.menu-open .needsclick,
body.menu-open .richpanel-micro {
  display: none !important;
}

.zoomies-shop-all-btn {
  display: block;
  width: 100%;
  background: #C4872A;
  color: #fff;
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 10px;
}
.zoomies-shop-all-btn:hover { background: #A86D1A; color: #fff; }

.zoomies-overlay-account-btn {
  display: block;
  width: 100%;
  background: #fff;
  color: #2d1f4a;
  text-align: center;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid #DDD8EC;
  font: 600 15px/1 'Inter', sans-serif;
  text-decoration: none;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.zoomies-overlay-account-btn:hover { background: #F7F5FC; color: #2d1f4a; }

.zoomies-overlay-points-btn {
  display: block;
  width: 100%;
  background: #FDF3DC;
  color: #8A5C1A;
  text-align: center;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid #E8C86A;
  font: 600 15px/1 'Inter', sans-serif;
  text-decoration: none;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.zoomies-overlay-points-btn:hover { background: #F5E9C4; color: #8A5C1A; }

.zoomies-pill-row {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.zoomies-pill-amber {
  background: #F5E4C0;
  color: #8A5C1A;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.zoomies-overlay-heading {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #5a4a72;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}

/* ── Hamburger accordion nav ──────────────────────────────── */

.zoomies-acc-heading {
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9b8db5;
  margin: 0 0 4px;
  padding: 0;
}

.zoomies-acc-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-top: 1px solid #e8e4f0;
}

.zoomies-acc-item {
  border-bottom: 1px solid #e8e4f0;
}

.zoomies-acc-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 0;
  font: 500 15px/1.2 'Inter', sans-serif;
  color: #2d1f4a;
  cursor: pointer;
}

.zoomies-acc-btn:hover { color: var(--z-purple); }
.zoomies-acc-btn[aria-expanded="true"] { color: var(--z-purple); }
.zoomies-acc-btn,
.zoomies-acc-btn:hover,
.zoomies-acc-btn:focus,
.zoomies-acc-btn:active,
.zoomies-acc-btn:focus-visible {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.zoomies-acc-chevron-box {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #EDEAF4;
  border-radius: 8px;
  color: #5a4a72;
  transition: background 0.2s;
}
.zoomies-acc-btn[aria-expanded="true"] .zoomies-acc-chevron-box {
  background: #DDD8EC;
}

.zoomies-acc-chevron {
  display: block;
  transition: transform 0.2s ease;
}
.zoomies-acc-btn[aria-expanded="true"] .zoomies-acc-chevron {
  transform: rotate(180deg);
}

.zoomies-acc-link {
  display: block;
  padding: 15px 0;
  font: 500 15px/1.2 'Inter', sans-serif;
  color: #2d1f4a;
  text-decoration: none;
}
.zoomies-acc-link:hover { color: var(--z-purple); }

/* Hidden by default — display:none must win over any other rule */
.zoomies-acc-children {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 8px 0;
}
.zoomies-acc-children:not([hidden]) {
  display: block;
}

.zoomies-acc-child {
  display: block;
  padding: 11px 14px;
  font: 400 14px/1.2 'Inter', sans-serif;
  color: #2d1f4a;
  text-decoration: none;
  border-bottom: 1px solid #e8e4f0;
  background: none;
}
.zoomies-acc-child:last-child { border-bottom: none; }
.zoomies-acc-child:hover { color: var(--z-purple); }

.zoomies-overlay-links {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.zoomies-overlay-links li a {
  display: block;
  padding: 10px 0;
  color: #2d1f4a;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid #e8e4f0;
}

.zoomies-more-links {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  padding-top: 10px;
}

.zoomies-more-links a {
  font: 500 15px/1.2 'Inter', sans-serif;
  color: #2d1f4a;
  text-decoration: none;
}
.zoomies-more-links a:hover { color: var(--z-purple); }

/* Custom footer */
#zoomies-footer {
  background: #2d1f4a;
  color: rgba(255, 255, 255, 0.85);
  padding: 48px 18px 24px;
  font-family: 'Inter', sans-serif;
}

.zf-top {
  text-align: center;
  margin-bottom: 20px;
}

.zf-logo-img {
  height: 40px !important;
  width: auto;
  display: block;
  margin: 0 auto 10px;
  filter: brightness(0) invert(1);
}

.zf-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.zf-email {
  margin-bottom: 32px;
}


.zf-link-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 16px;
  margin-bottom: 32px;
}
@media (min-width: 640px) {
  .zf-link-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.zf-col-heading {
  color: #C4872A;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 10px;
}

.zf-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zf-col ul li a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 13px;
}

.zf-col ul li a:hover {
  color: #fff;
}

/* Delivery accordion — CSS-only, content always in DOM */
.zf-delivery {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 28px;
}

.zf-delivery-check {
  display: none;
}

.zf-delivery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #C4872A;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  user-select: none;
}

.zf-delivery-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 11px;
  color: #C4872A;
}

.zf-delivery-check:checked ~ .zf-delivery-header .zf-delivery-arrow {
  transform: rotate(180deg);
}

.zf-delivery-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 0;
}

.zf-delivery-check:checked ~ .zf-delivery-body {
  max-height: 500px;
  padding-bottom: 16px;
}

.zf-delivery-body a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  padding: 4px 10px;
}

.zf-delivery-body a:hover {
  color: #fff;
}

.zf-social {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.zf-social-icon {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.zf-social-icon:hover {
  color: #fff;
}

.zf-payment {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.zf-pay-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
}

/* TrustIndex static badge */
.zf-trustbadge {
  text-align: center;
  margin-bottom: 20px;
}
.zf-trust-badge-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--z-r-pill);
  padding: 8px 16px;
  text-decoration: none;
}
.zf-trust-badge-link:hover {
  background: rgba(255, 255, 255, 0.13);
  text-decoration: none;
}
.zf-trust-stars {
  color: #F59E0B;
  font-size: 13px;
  letter-spacing: 1px;
}
.zf-trust-score {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.zf-trust-divider {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}
.zf-trust-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.zf-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 20px;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.zf-bottom p {
  margin: 0 0 4px;
}

/* =============================================================
   T-005: HOMEPAGE — Hero, Trust Strip, Intro Text
   ============================================================= */

/* Suppress GP Blog Images page-header-image on the front page */
body.home .page-header-image,
body.home .featured-image.page-header-image {
  display: none !important;
}

/* Page background */
#zoomies-homepage {
  background: var(--z-bg);
  min-height: 60vh;
  padding-bottom: 40px;
}

/* Inner content of full-bleed sections: constrain to 1200px centered. */
.zh-trust-inner,
.zh-intro-inner,
.zcs-header,
.zcs-scroll,
.zpg-header,
.zpg-tabs-row,
.zpg-grid,
.zhiw-strip,
.zb-inner,
.zr-inner,
.zseo-inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* .zseo-acc is the visible card itself (no extra 64px padding shrinking
   its own edges the way .zcs-header/.zb-inner/etc. do), so it's centered
   to 1072px (1200 minus the 64px gutter those other elements carry as
   padding) to line up with the rest of the full-bleed sections above. */
.zseo-acc {
  max-width: 1072px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

#strain-quiz .zsf-card {
  max-width: 640px;
  margin-left: 16px;
  margin-right: 16px;
}

/* ----- Hero ----- */
.zh-hero {
  padding: 28px 18px 24px;
}

/* Search bar */
.zh-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--z-border);
  border-radius: var(--z-r-pill);
  padding: 10px 16px;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(44, 31, 74, 0.07);
}
.zh-search-icon {
  color: var(--z-muted);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.zh-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--z-dark);
  width: 100%;
}
.zh-search-input::placeholder {
  color: var(--z-muted);
}

/* Eyebrow pill — light lavender */
@keyframes zh-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(1.5); }
}
.zh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(124, 92, 191, 0.1);
  border: 1px solid rgba(124, 92, 191, 0.18);
  color: var(--z-purple);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--z-r-pill);
  margin-bottom: 16px;
}
.zh-eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--z-purple);
  border-radius: 50%;
  flex-shrink: 0;
  animation: zh-dot-pulse 2s infinite;
}

.zh-h1 {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--z-dark);
  line-height: 1.18;
  margin: 0 0 14px;
}

.zh-h1 em {
  font-style: italic;
  color: var(--z-purple);
}

.zh-desc {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--z-muted);
  line-height: 1.6;
  margin: 0 0 20px;
}

/* ----- CTA Buttons ----- */
.zh-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.zh-btn-primary,
.zh-btn-outline {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border-radius: var(--z-r-btn);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.18s;
}

.zh-btn-primary {
  background: var(--z-purple);
  color: #fff;
  border: 2px solid var(--z-purple);
}

.zh-btn-primary:hover {
  background: var(--z-purple-hover);
  border-color: var(--z-purple-hover);
  color: #fff;
  text-decoration: none;
}

.zh-btn-outline {
  background: #F8F6FB;
  color: var(--z-amber);
  border: 2px solid var(--z-amber);
}

.zh-btn-outline:hover {
  background: var(--z-amber);
  color: #fff;
  text-decoration: none;
}

/* ----- Product Cards ----- */
.zh-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

/* Card container — light background, product centered */
.zh-card {
  position: relative;
  display: block;
  background: #f4f0fc;
  border-radius: var(--z-r-card);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 1;
  box-shadow: 0 4px 24px rgba(60, 30, 100, 0.08);
  transition: transform 0.18s, box-shadow 0.18s;
}

.zh-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 31, 74, 0.2);
  text-decoration: none;
}

/* Product image — fills card */
.zh-card-img,
.zh-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Dark gradient shadow at bottom for text legibility */
.zh-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 10, 40, 0.78) 0%, rgba(20, 10, 40, 0.2) 30%, transparent 48%);
  pointer-events: none;
}

/* Placeholder (no image fallback) */
.zh-card-placeholder {
  position: absolute;
  inset: 0;
}

.zh-placeholder-amber  { background: linear-gradient(135deg, #C4872A 0%, #e6a93a 100%); }
.zh-placeholder-purple { background: linear-gradient(135deg, #7C5CBF 0%, #9b7dd4 100%); }

/* Badge — top-left, above gradient */
.zh-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--z-r-pill);
  text-transform: uppercase;
}

.zh-badge-amber  { background: var(--z-amber);  color: #fff; }
.zh-badge-purple { background: var(--z-purple); color: #fff; }

/* Text overlay — pinned to bottom, above gradient */
.zh-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 10px 12px 14px;
}

.zh-card-type {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 3px;
}

.zh-card-name {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  line-height: 1.2;
}

.zh-card-price {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 2px;
}

.zh-card-price .woocommerce-Price-amount,
.zh-card-price .amount {
  color: inherit;
}

/* ----- Stats Strip ----- */
.zh-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--z-card);
  border-radius: var(--z-r-card);
  padding: 0 14px;
}

.zh-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
  padding: 14px 10px;
}

.zh-stat:not(:last-child) {
  border-right: 1px solid var(--z-border);
}

.zh-stat-num {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--z-purple);
}

.zh-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--z-muted);
}

/* ----- Trust Strip — full-bleed background/border; .zh-trust-inner
   (added to the shared 1200px-centering rule above) owns the row layout
   so the white background can still span edge-to-edge on wide viewports ----- */
.zh-trust-strip {
    background: var(--z-card);;
    border-top: 1px solid var(--z-border);
    border-bottom: 1px solid var(--z-border);
}
.zh-trust-inner {
    overflow-x: auto;
    display: flex;
    gap: 0;
}
.zh-trust-inner::-webkit-scrollbar { display: none; }

.zh-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  white-space: nowrap;
  flex-shrink: 0;
  border-right: 1px solid var(--z-border);
}
.zh-trust-item:last-child { border-right: none; }

.zh-trust-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(124, 92, 191, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.zh-trust-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.zh-trust-text strong {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--z-dark);
  line-height: 1.3;
}

.zh-trust-text span {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--z-muted);
  line-height: 1.3;
}

/* ----- Intro Text (SEO) ----- */
/* .zh-intro bleeds edge-to-edge (background/border only); .zh-intro-inner
   (added to the shared 1200px-centering rule above) owns the padding and
   holds the actual heading/paragraph so the white background can still
   span full width on wide viewports. */
.zh-intro {
  background: var(--z-card);
  border-bottom: 1px solid var(--brd);
}
.zh-intro-inner {
  padding: 24px 18px;
}

.zh-intro h2 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--z-dark);
  margin-bottom: 10px;
  line-height: 1.35;
}

.zh-intro p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--z-muted);
  line-height: 1.7;
}

/* ================================================================
   SECTION 4 — CATEGORY SCROLL (.zcs-*)
   ================================================================ */
.zcs-section {
  padding: 36px 0 28px;
  background: #F1EDF8;
}

.zcs-header {
  padding: 0 18px;
  margin-bottom: 6px;
}

.zcs-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--z-purple);
  margin-bottom: 6px;
  display: block;
}

.zcs-title {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 900;
  color: var(--z-dark);
  margin: 0 0 14px;
  line-height: 1.12;
  letter-spacing: -0.3px;
}

.zcs-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 18px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zcs-scroll::-webkit-scrollbar { display: none; }

.zcs-tile {
  position: relative;
  flex-shrink: 0;
  width: 130px;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  background: #1a1030;
  box-shadow: 0 4px 24px rgba(60, 30, 100, 0.08);
}

.zcs-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zcs-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2d1f4a 0%, #1a1030 100%);
}

.zcs-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 10, 40, 0.78) 0%, rgba(20, 10, 40, 0.2) 30%, transparent 48%);
}

.zcs-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 12px;
  z-index: 2;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.zcs-count {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.75;
  margin-bottom: 3px;
}

.zcs-name {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

/* ================================================================
   SECTION 5 — PRODUCT GRID (.zpg-*)
   ================================================================ */
.zpg-section {
  padding: 36px 0 28px;
  background: #fff;
}

.zpg-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 18px;
  margin-bottom: 18px;
}

.zpg-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--z-purple);
  margin-bottom: 6px;
  display: block;
}

.zpg-title {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--z-dark);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.3px;
}

.zpg-view-all {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--z-purple);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.zpg-tabs-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 18px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zpg-tabs-row::-webkit-scrollbar { display: none; }

.zpg-tab {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--z-r-pill);
  border: 1.5px solid rgba(100, 70, 160, 0.10);
  background: #fff;
  color: #9E95AE;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.zpg-tab.active {
  background: var(--z-purple);
  color: #fff;
  border-color: var(--z-purple);
  font-weight: 600;
}

.zpg-grid {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 18px;
}
.zpg-grid.active { display: grid; }

.zpg-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(100, 70, 160, 0.10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(60, 30, 100, 0.08);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.zpg-card:active { transform: scale(0.98); }

.zpg-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.zpg-img-wrap {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
  overflow: hidden;
}
.home .zpg-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 10, 40, 0.78) 0%, rgba(20, 10, 40, 0.2) 30%, transparent 48%);
  pointer-events: none;
}

.zpg-img {
  width: 100%;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
  transition: transform 0.4s;
}

.zpg-img-placeholder {
  width: 100%;
  height: 100%;
  background: #fff;
}

.zpg-badge-stack {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 2;
}

.zpg-badge {
  display: block;
  width: fit-content;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--z-r-pill);
  color: #fff;
  letter-spacing: 0.3px;
}

.zpg-badge-new, .zpg-badge-bundle  { background: var(--z-purple); }
.zpg-badge-hot  { background: #C4872A; }
.zpg-badge-sale { background: #D94040; }

.zpg-badge-oos { background: var(--z-amber); }

.zpg-select-btn--oos {
  background: #c5bdd4;
  cursor: not-allowed;
  pointer-events: none;
  color: #fff;
}

.zpg-body {
  padding: 10px 12px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.zpg-cat {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #9E8FB5;
  margin-bottom: 3px;
  letter-spacing: 0.1px;
}

.zpg-name {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--z-dark);
  line-height: 1.25;
  margin-bottom: 4px;
}

.zpg-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}

.zpg-stars {
  color: #C4872A;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.zpg-stars-c {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #9E95AE;
}

.zpg-potency-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.zpg-potency {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.zpg-potency-mild     { background: rgba(196, 152, 42, 0.15); color: #c4982a; }
.zpg-potency-moderate { background: rgba(168, 113, 26, 0.15); color: #a8711a; }
.zpg-potency-potent,
.zpg-potency-strong   { background: rgba(139, 69, 19, 0.15);  color: #8b4513; }

.zpg-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: auto;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.zpg-from {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #5a4a72;
}

.zpg-price {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--z-purple);
}

.zpg-orig-price {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #D94040;
  text-decoration: line-through;
  white-space: nowrap;
}

.zpg-select-btn {
  display: block;
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 9px 0;
  background: var(--z-purple);
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
  transition: background 0.18s;
  border: none;
  cursor: pointer;
}
.zpg-select-btn:hover { background: #6548A8; color: #fff; }

.zpg-empty {
  grid-column: 1 / -1;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--z-muted);
  text-align: center;
  padding: 32px 0;
  margin: 0;
}

/* ================================================================
   SECTION 6 — STRAIN FINDER (.zsf-*)
   ================================================================ */
.zsf-section {
  padding: 36px 0 28px;
  background: #F1EDF8;
}

.zsf-card {
  position: relative;
  background: var(--z-dark);
  border-radius: 28px;
  margin: 0 18px;
  padding: 32px 24px;
  overflow: hidden;
  text-align: center;
}

.zsf-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(124, 92, 191, 0.22);
  pointer-events: none;
}

.zsf-card::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(196, 135, 42, 0.14);
  pointer-events: none;
}

.zsf-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #C4AAEE;
  margin-bottom: 10px;
  display: block;
}

.zsf-title {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 900;
  color: #F8F6FB;
  margin: 0 0 10px;
  line-height: 1.15;
}

.zsf-desc {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: rgba(248, 246, 251, 0.60);
  margin: 0 0 24px;
  line-height: 1.6;
}

.zsf-step-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(248, 246, 251, 0.45);
  margin-bottom: 14px;
  display: block;
}

.zsf-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}

.zsf-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  padding: 14px 18px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  text-align: left;
}

.zsf-opt.selected {
  border-color: #C4AAEE;
  background: rgba(196, 170, 238, 0.14);
}

.zsf-opt-emoji {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.zsf-opt-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #F7F5F0;
  line-height: 1.2;
}

.zsf-opt-desc {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(247, 245, 240, 0.50);
  margin-top: 1px;
}

.zsf-next-btn {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 15px;
  border-radius: 20px;
  border: none;
  background: var(--z-amber);
  color: #1a1007;
  cursor: pointer;
  transition: opacity 0.18s;
  width: 100%;
  position: relative;
  z-index: 2;
}

.zsf-next-btn:not(:disabled):hover {
  opacity: 0.88;
}
/* Step visibility */
.zsf-step { position: relative; z-index: 2; }

/* Potency pills */
.zsf-potency-pill {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin: 4px 0 16px;
}
.zsf-potency-pill.mild     { background: #D4A43A; color: #1a1007; }
.zsf-potency-pill.moderate { background: #C4872A; color: #1a1007; }
.zsf-potency-pill.potent   { background: #A85A1A; color: #fff; }

/* Result screen — light card */
.zsf-result-why {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #5a4a72;
  line-height: 1.65;
  margin: 0 0 20px;
}
.zsf-another-btn {
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #7C5CBF;
  cursor: pointer;
  padding: 0;
}
.zsf-another-btn:hover { color: #5a3ea0; }

/* ================================================================
   SECTION 7 — HOW IT WORKS (.zhiw-*)
   ================================================================ */
.zhiw-section {
  padding: 36px 18px 28px;
}

.zhiw-title {
  font-family: 'Inter', sans-serif;
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9b8ab5;
  font-weight: 500;
  margin-bottom: 12px;
}

.zhiw-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 8px;
  position: relative;
}

.zhiw-step {
  background: #fff;
  border: 1px solid rgba(124, 92, 191, 0.2);
  border-radius: 12px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  position: relative;
  justify-content: flex-start;
}

.zhiw-step-num {
  font-family: 'Inter', sans-serif;
  color: var(--z-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.zhiw-emoji {
  font-size: 20px;
  line-height: 1;
}

.zhiw-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--z-dark);
  min-height: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zhiw-sub {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--z-muted);
  line-height: 1.3;
  word-break: break-word;
}

/* ================================================================
   SECTION 8 — BRANDS (.zb-*)
   ================================================================ */
.zb-section {
  background: var(--z-dark);
  padding: 36px 0 28px;
}

.zb-inner {
  padding: 0 18px;
}

.zb-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
}

.zb-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--z-purple);
  margin-bottom: 6px;
}

.zb-title {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
}

.zb-view-all {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--z-amber);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.zb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 18px;
}

.zb-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f2fb;
  border: 1px solid rgba(100, 70, 160, 0.08);
  border-radius: 12px;
  padding: 20px 16px;
  min-height: 80px;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.zb-logo-tile:hover {
  border-color: rgba(124, 92, 191, 0.35);
  background: #ede8f7;
}

.zb-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.zb-logo-img {
  max-width: 110px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.zb-logo-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #2d1f4a;
  text-align: center;
  line-height: 1.3;
}

.zb-logo-label {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #2d1f4a;
  margin-right: 2px;
  white-space: nowrap;
}

.zb-logo-tile.zb-extra { display: none; }
.zb-grid.is-expanded .zb-logo-tile.zb-extra { display: flex; }

.zb-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 20px auto 0;
  padding: 11px 24px;
  background: transparent;
  border: 1px solid rgba(124, 92, 191, 0.35);
  border-radius: 100px;
  font: 600 13px/1 'Inter', sans-serif;
  color: #c4b5e8;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.zb-toggle-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(124,92,191,0.6); }
.zb-toggle-icon { transition: transform 0.25s ease; flex-shrink: 0; }
.zb-toggle-btn[aria-expanded="true"] .zb-toggle-icon { transform: rotate(180deg); }

/* ================================================================
   SECTION 9 — EMAIL CAPTURE (.ze-*)
   ================================================================ */
.ze-section {
  padding: 36px 18px 28px;
}

.ze-card {
  background: #fff;
  border: 2px solid var(--z-purple);
  border-radius: 20px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.ze-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  background: var(--z-amber);
  color: #fff;
  border-radius: var(--z-r-pill);
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ze-heading {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--z-dark);
  margin: 0;
  line-height: 1.2;
}

.ze-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--z-muted);
  margin: 0;
  line-height: 1.6;
}

.ze-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ze-input {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 13px 16px;
  border-radius: var(--z-r-input);
  border: 1.5px solid #c4b8e0;
  background: #fff;
  color: var(--z-dark);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.18s;
}
.ze-input:focus { border-color: var(--z-purple); }
.ze-input::placeholder { color: var(--z-muted); }

.ze-btn {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 20px;
  border-radius: var(--z-r-btn);
  border: none;
  background: var(--z-amber);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.18s;
}
.ze-btn:hover { opacity: 0.88; }

.ze-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ze-perks li {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--z-muted);
  line-height: 1.4;
}

/* ================================================================
   SECTION 10 — REVIEWS (.zr-*)
   ================================================================ */
.zr-section {
  padding: 36px 0 28px;
  background: var(--z-bg);
}

.zr-inner {
  padding: 0 18px;
}

.zr-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--z-dark);
  margin-bottom: 18px;
  line-height: 1.2;
}

.zr-summary {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--z-card);
  border-radius: var(--z-r-card);
  border: 1px solid var(--z-border);
  padding: 16px;
  margin-bottom: 18px;
}

.zr-rating-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  min-width: 70px;
}

.zr-big {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--z-dark);
  line-height: 1;
}

.zr-stars {
  font-size: 14px;
  color: #f5a623;
  letter-spacing: 1px;
}

.zr-count {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--z-muted);
  text-align: center;
  line-height: 1.3;
}

.zr-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.zr-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.zr-bar-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--z-muted);
  width: 8px;
  text-align: right;
  flex-shrink: 0;
}

.zr-bar-track {
  flex: 1;
  height: 6px;
  background: var(--z-border);
  border-radius: 3px;
  overflow: hidden;
}

.zr-bar-fill {
  height: 100%;
  background: var(--z-purple);
  border-radius: 3px;
}

.zr-bar-pct {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--z-muted);
  width: 28px;
  flex-shrink: 0;
}

.zr-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.zr-card {
  background: var(--z-card);
  border-radius: var(--z-r-card);
  border: 1px solid var(--z-border);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.zr-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.zr-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zr-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--z-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.zr-name {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--z-dark);
}

.zr-location {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--z-muted);
  margin-top: 1px;
}

.zr-stars-sm {
  font-size: 12px;
  color: #f5a623;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.zr-text {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--z-dark);
  line-height: 1.65;
  margin: 0;
}

.zr-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.zr-product {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--z-purple);
  background: rgba(124, 92, 191, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
}

.zr-verified {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #3a9e5f;
  font-weight: 600;
}

/* ================================================================
   SECTION 11 — SEO ACCORDIONS (.zseo-*)
   ================================================================ */
.zseo-section {
  padding: 36px 0 28px;
  background: var(--z-seo-bg);
}

.zseo-inner {
  padding: 0 18px;
  margin-bottom: 20px;
}

.zseo-eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--z-purple);
  background: rgba(124, 92, 191, 0.10);
  border: 1px solid rgba(124, 92, 191, 0.18);
  padding: 4px 12px;
  border-radius: var(--z-r-pill);
  margin-bottom: 8px;
}

.zseo-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 900;
  color: var(--z-dark);
  margin: 0 0 6px;
  line-height: 1.2;
}

.zseo-section-sub {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--z-muted);
  margin: 0;
}

/* --- Accordion (CSS checkbox hack) --- */
.zseo-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.zseo-acc {
  background: var(--z-card);
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-card);
  /* margin-left/right come from the shared 1200px-centering rule near
     #zoomies-homepage (margin-left/right: auto) — set with longhand
     properties here so this rule doesn't clobber that with a fixed value
     via the margin shorthand. */
  margin-top: 0;
  margin-right: 18px;
  margin-bottom: 10px;
  margin-left: 18px;
  overflow: hidden;
}

.zseo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  gap: 12px;
}

.zseo-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--z-dark);
  margin: 0;
  line-height: 1.3;
}

.zseo-icon {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--z-purple);
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.22s;
}

.zseo-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.30s ease;
  padding: 0 18px;
}

.zseo-body p,
.zseo-body ul,
.zseo-body li {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--z-muted);
  line-height: 1.7;
  margin: 0 0 10px;
}

.zseo-body ul {
  padding-left: 18px;
  margin: 0 0 10px;
}

.zseo-body h4 {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--z-dark);
  margin: 12px 0 4px;
}

/* Table (strain comparison) */
.zseo-table-wrap {
  overflow-x: auto;
  margin-bottom: 10px;
  position: relative;
}
.zseo-table-wrap.has-overflow::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  background: linear-gradient(to right, transparent, #fff);
  pointer-events: none;
}

.zseo-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--z-dark);
}

.zseo-table th {
  background: var(--z-seo-bg);
  padding: 8px 10px;
  font-weight: 700;
  text-align: left;
  color: var(--z-purple);
  white-space: nowrap;
  border: none;
}

.zseo-table td {
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--z-border);
  vertical-align: top;
  color: var(--z-muted);
}

/* Accordion open state */
.zseo-check:checked ~ .zseo-header .zseo-icon {
  transform: rotate(45deg);
}

.zseo-check:checked ~ .zseo-body {
  max-height: 2000px;
  padding: 0 18px 18px;
}

/* ================================================================
   AGE GATE (.zag-*)
   Custom popup — no plugin required
   ================================================================ */

#zoomies-age-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #F4EFE8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: 'Inter', sans-serif;
}

#zoomies-age-gate[hidden] {
  display: none;
}

.zag-card {
  background: #fff;
  border-radius: 24px;
  padding: 32px 24px 28px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(60, 30, 100, 0.10);
}

.zag-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(124, 92, 191, 0.10);
  color: #7C5CBF;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
}

.zag-dot {
  width: 6px;
  height: 6px;
  background: #7C5CBF;
  border-radius: 50%;
  flex-shrink: 0;
}

.zag-logo {
  margin-bottom: 16px;
}

.zag-logo img {
  height: 36px;
  width: auto;
  filter: brightness(0) saturate(100%) invert(18%) sepia(40%) saturate(800%) hue-rotate(255deg) brightness(85%);
}

.zag-heading {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: #2d1f4a;
  line-height: 1.2;
  margin: 0 0 14px;
}

.zag-body {
  font-size: 14px;
  color: #5a4a72;
  line-height: 1.6;
  margin: 0 0 24px;
}

.zag-btn-yes {
  display: block;
  width: 100%;
  background: #7C5CBF;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  transition: opacity 0.18s;
}

.zag-btn-yes:hover {
  opacity: 0.88;
}

.zag-btn-no {
  display: block;
  width: 100%;
  background: transparent;
  color: #9E95AE;
  border: 1.5px solid #e8e4f0;
  border-radius: 50px;
  padding: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 20px;
  transition: border-color 0.18s;
}

.zag-btn-no:hover {
  border-color: #c5bdd8;
}

.zag-legal {
  font-size: 12px;
  color: #9E95AE;
  line-height: 1.6;
  margin: 0;
}

.zag-legal a {
  color: #7C5CBF;
  text-decoration: underline;
}

/* Strip GeneratePress container padding on homepage */
body.home #content,
body.home .site-content,
body.home .inside-article {
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove GP's 1200px boxed container on homepage so section backgrounds run
   edge-to-edge. .zoomies-content-wrap still caps the actual content at
   1200px, so the visible content width/proportion is unchanged. */
body.home #page.grid-container.container {
  max-width: 100% !important;
  width: 100% !important;
}

/* .site-content is `display:flex` by default (GP uses it to lay sidebar +
   main side by side). With #page no longer centering things, that flex
   context left main#zoomies-homepage hugging the left edge instead of
   stretching, so .zoomies-content-wrap's own auto margins had no room to
   center it. Drop back to block layout so it fills #content's full width
   and .zoomies-content-wrap can center itself again. */
body.home .site-content {
  display: block !important;
}

/* ================================================================
   CATEGORY ARCHIVE PAGE (.zca-*)
   Ticket: T-015 — Template Shell + Breadcrumb + Hero + Strain Finder
   ================================================================ */

/* Remove GP's 1200px boxed container on the category/shop/sales/bundle/
   brand pages so #zoomies-category-page's background runs edge-to-edge.
   .zca-wrap / .zca-top-sections still cap the actual content at 1200px
   each (with their own padding on the same element), so the visible
   content width/proportion is unchanged. Same fix as body.home — see
   the comment there for why both rules are needed together. /shop/,
   /sales/, /bundle-save/, and each /brand/xyz/ archive all reuse this
   exact same .zca-* template (different body classes instead of
   body.tax-product_cat), so they need the identical fix. On brand
   pages specifically, .site-content being flex was also forcing
   #content's OTHER child — the Perfect WooCommerce Brands plugin's
   auto-injected .pwb-long-brand-description — into a side-by-side
   column next to <main> instead of stacking above it; see
   .pwb-long-brand-description below for why it's hidden rather than
   just re-stacked. */
body.tax-product_cat #page.grid-container.container,
body.woocommerce-shop #page.grid-container.container,
body.page-template-page-sales #page.grid-container.container,
body.zoomies-bundle-save #page.grid-container.container,
body.tax-pwb-brand #page.grid-container.container {
  max-width: 100% !important;
  width: 100% !important;
}
body.tax-product_cat .site-content,
body.woocommerce-shop .site-content,
body.page-template-page-sales .site-content,
body.zoomies-bundle-save .site-content,
body.tax-pwb-brand .site-content {
  display: block !important;
}

/* The brand hero (.zca-brand-hero) already renders this same term meta
   (pwb_long_brand_desc) trimmed to 30 words — PWB's own auto-injected
   full-length block above it is a duplicate, not an additional
   section, so it's hidden rather than left to stack as visible
   duplicate copy. */
body.tax-pwb-brand .pwb-long-brand-description {
  display: none !important;
}

/* Strip GP container padding on category archive + shop + sales + bundle + brand pages */
body.tax-product_cat #content,
body.tax-product_cat .site-content,
body.tax-product_cat .inside-article,
body.woocommerce-shop #content,
body.woocommerce-shop .site-content,
body.woocommerce-shop .inside-article,
body.page-template-page-sales #content,
body.page-template-page-sales .site-content,
body.page-template-page-sales .inside-article,
body.tax-pwb-brand #content,
body.tax-pwb-brand .site-content,
body.tax-pwb-brand .inside-article {
  padding: 0 !important;
  margin: 0 !important;
}
body.tax-product_cat .content-area,
body.tax-product_cat #primary,
body.woocommerce-shop .content-area,
body.woocommerce-shop #primary,
body.tax-pwb-brand .content-area,
body.tax-pwb-brand #primary,
body.zoomies-bundle-save .content-area,
body.zoomies-bundle-save #primary,
body.zoomies-bundle-save #content,
body.zoomies-bundle-save .site-content,
body.zoomies-bundle-save .inside-content-area,
body.right-sidebar.zoomies-bundle-save #primary,
body.right-sidebar.zoomies-bundle-save .content-area,
body.left-sidebar.zoomies-bundle-save #primary,
body.left-sidebar.zoomies-bundle-save .content-area {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  float: none !important;
  padding: 0 !important;
}
body.zoomies-bundle-save #sidebar-primary,
body.zoomies-bundle-save .widget-area { display: none !important; }

/* Wrapper — replaces .zoomies-content-wrap on category pages */
.zca-wrap { width: 100%; }

#zoomies-category-page {
  background: var(--z-bg);
  min-height: 100vh;
  padding-top: 24px;
  width: 100%;
  min-width: 0;
}

.zca-top-sections {
  padding: 16px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Breadcrumb */
.zca-breadcrumb {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #a89bc2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.zca-breadcrumb a {
  color: #5a4a72;
  text-decoration: none;
}
.zca-breadcrumb a:hover {
  color: var(--z-dark);
}
.zca-breadcrumb .zca-sep {
  color: #a89bc2;
}
.zca-breadcrumb .zca-current {
  color: var(--z-purple);
}

/* Category Hero card */
.zca-hero {
  background: var(--z-seo-bg);
  border-radius: 12px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.zca-hero::before {
  content: '';
  position: absolute;
  bottom: -15px;
  left: -13px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(196, 135, 42, 0.1);
  pointer-events: none;
}
.zca-hero::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(124, 92, 191, 0.2);
  pointer-events: none;
}

.zca-hero-tag {
  display: inline-block;
  background: #C4872A;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--z-r-pill);
  padding: 4px 10px;
  width: fit-content;
}

.zca-hero-h1 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--z-dark);
  margin: 0;
  line-height: 1.2;
}

.zca-hero-desc {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #5a4a72;
  margin: 0;
  line-height: 1.6;
}

.zca-stats-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.zca-stat {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #5a4a72;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.zca-stat::before {
  content: '•';
  font-size: 14px;
  line-height: 1;
}
.zca-stat:nth-child(1)::before { color: #C4872A; }
.zca-stat:nth-child(2)::before { color: #7C5CBF; }
.zca-stat:nth-child(3)::before { color: #2d1f4a; }

/* Strain Finder Strip card — dark purple */
.zca-strain-strip {
  background: #EDE8F5;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.zca-strain-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.zca-strain-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(124, 92, 191, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #7C5CBF;
  font-size: 18px;
}

.zca-strain-text {
  min-width: 0;
}
.zca-strain-text strong {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #2d1f4a;
  line-height: 1.3;
}
.zca-strain-text span {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #5a4a72;
  line-height: 1.4;
}

.zca-strain-btn {
  background: #7C5CBF;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0.74rem;
  padding: 8px 20px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
}

/* ── T-016: Filter Pills + Sort ──────────────────────────── */
.zca-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 0;
}
.zca-pills-group {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
  flex: 1;
}
.zca-pills-group::-webkit-scrollbar { display: none; }
.zca-pill {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid #7C5CBF;
  color: #7C5CBF;
  background: #ede8f5;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.zca-pill.active {
  background: #7C5CBF;
  color: #fff;
}

/* Sort By dropdown */
.zca-sort-wrap {
  position: relative;
  flex-shrink: 0;
}
.zca-sort-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #7C5CBF;
  background: #fff;
  color: #7C5CBF;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.zca-sort-btn svg { transition: transform 0.2s; }
.zca-sort-wrap.open .zca-sort-btn svg { transform: rotate(180deg); }
.zca-sort-drop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(45,31,74,0.12);
  overflow: hidden;
  z-index: 50;
}
.zca-sort-wrap.open .zca-sort-drop { display: block; }
.zca-sort-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #2d1f4a;
  cursor: pointer;
}
.zca-sort-opt:hover { background: #f4f1fa; }
.zca-sort-opt.active { font-weight: 700; color: #7C5CBF; }

/* ── T-016: Product Grid ─────────────────────────────────── */
.zca-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 0 16px;
  position: relative;
}
.zca-grid.is-loading {
  min-height: 140px;
}
.zca-grid.is-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.72);
  z-index: 2;
  border-radius: 8px;
  pointer-events: none;
}
.zca-grid.is-loading::after {
  content: '';
  position: absolute;
  top: 60px;
  left: calc(50% - 18px);
  width: 36px;
  height: 36px;
  border: 3px solid #e8e0f7;
  border-top-color: #7C5CBF;
  border-radius: 50%;
  z-index: 3;
  animation: zca-spin 0.7s linear infinite;
  pointer-events: none;
}
@keyframes zca-spin {
  to { transform: rotate(360deg); }
}

/* ── T-016: Load More ────────────────────────────────────── */
.zca-load-more {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 24px;
  text-align: center;
  border: 1.5px solid #7C5CBF;
  color: #7C5CBF;
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
a.zca-load-more:hover {
  background: rgb(237, 235, 245);
  color: #7C5CBF;
}

/* ── T-016: Badges + empty state ─────────────────────────── */
.zpg-badge-new-cat { background: #2a6049; color: #fff; }
.zca-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 0;
  color: #5a4a72;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.zca-load-more.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

/* ── T-017: SEO Accordions (CSS checkbox hack) ───────────── */
.zca-faq-section { background: #EDE8F5; padding: 28px 18px 28px; margin-bottom: 40px; }
.zca-faq-label { font-size: 11px; font-weight: 700; font-family: 'Inter', sans-serif; color: #5a4a72; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 16px; }
.zca-faq-grid { display: flex; flex-direction: column; gap: 0; }
.zca-check { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.zca-acc { background: #fff; border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.zca-acc-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; cursor: pointer; user-select: none; -webkit-user-select: none; gap: 12px; min-height: 72px; }
.zca-acc-title { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: #2d1f4a; margin: 0; line-height: 1.3; }
.zca-acc-icon { font-size: 20px; color: #7C5CBF; font-weight: 400; flex-shrink: 0; line-height: 1; transition: transform 0.22s; }
.zca-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.30s ease; padding: 0 18px; }
.zca-acc-body p { font-family: 'Inter', sans-serif; font-size: 14px; color: #5a4a72; line-height: 1.6; margin: 0 0 16px; }
.zca-check:checked ~ .zca-acc-header .zca-acc-icon { transform: rotate(45deg); }
.zca-check:checked ~ .zca-acc-body { max-height: 2000px; padding: 0 18px 18px; }

/* ── Category page — desktop (≥992px) ──────────────────────────── */
@media (min-width: 992px) {
    .zca-wrap { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 32px; }
    .zca-top-sections { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 32px; }

    .zca-hero { padding: 56px 40px 48px; min-height: 280px; }
    .zca-hero::after { width: 320px; height: 320px; right: -80px; top: -80px; }
    .zca-hero-h1 { font-size: 38px; line-height: 1.2; max-width: 600px; }
    .zca-hero-desc { font-size: 16px; max-width: 520px; }
    .zca-stats-row { gap: 32px; margin-top: 28px; }

    .zca-strain-strip { padding: 20px 24px; }

    .zca-filter-row { padding: 8px 0 0; }

    .zca-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }

    .zca-load-more { max-width: 360px; margin-left: auto; margin-right: auto; display: block; }

    .zca-faq-section { padding: 40px 40px 52px; }
    .zca-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
}

/* ── T-018: Strain Finder Quiz ─────────────────────────────────── */
.zsf-card { background: #1a1030; border-radius: 24px; overflow: hidden; margin: 0 16px 16px; padding: 0; position: relative; text-align: left; }
.zsf-card-header { text-align: center; padding: 28px 20px 0; position: relative; z-index: 2; }
.zsf-eyebrow { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #C4A84A; margin-bottom: 10px; display: block; }
.zsf-title { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 900; color: #F8F6FB; margin: 0 0 10px; line-height: 1.2; }
.zsf-desc { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(248,246,251,0.6); margin: 0 0 20px; line-height: 1.6; }
.zsf-step-lbl { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 400; color: rgba(248,246,251,0.45); display: block; text-align: center; margin-bottom: 14px; position: relative; z-index: 2; }
.zsf-close { width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent; color: rgba(248,246,251,0.5); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.zsf-close:hover { background: rgba(255,255,255,0.08); }
.zsf-result-close:hover { background: rgba(230,230,230,0.95); }
.zsf-options { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 16px; }
.zsf-option { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1.5px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); cursor: pointer; transition: background 0.15s, border-color 0.15s; position: relative; }
.zsf-option:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }
.zsf-option.zsf-selected { border: 1.5px solid #C4AAEE; background: rgba(196,170,238,0.14); }
.zsf-opt-emoji { font-size: 28px; line-height: 1; flex-shrink: 0; }
.zsf-opt-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.zsf-opt-text strong { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #F7F5F0; line-height: 1.2; }
.zsf-opt-text span { font-family: 'Inter', sans-serif; font-size: 11px; color: rgba(247,245,240,0.5); line-height: 1.3; }
.zsf-option.zsf-selected .zsf-opt-text strong { color: #C4AAEE; }
.zsf-option.zsf-selected .zsf-opt-text span { color: rgba(196,170,238,0.8); }
.zsf-next-btn { display: block; width: calc(100% - 36px); margin: 0 18px 20px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; padding: 15px; border-radius: 16px; border: none; background: var(--z-amber); color: #fff; cursor: pointer; transition: opacity 0.18s; position: relative; z-index: 2; }
.zsf-next-btn:disabled { opacity: 0.45; cursor: default; }
.zsf-next-btn:not(:disabled):hover { opacity: 0.88; }
.zsf-result-img-wrap { position: relative; width: 100%; height: 175px; overflow: hidden; }
/* Result state — card IS the lavender wrapper */
.zsf-card--result { background: #EBE3F7; }
.zsf-card--result::before,
.zsf-card--result::after { display: none; }
.zsf-card--result .zsf-title,
.zsf-card--result .zsf-desc { display: none; }
.zsf-card--result .zsf-eyebrow { color: #7C5CBF; }
.zsf-card--result .zsf-card-header { padding: 20px 20px 0 !important; }
.zsf-card--result #zsf-result { padding: 16px 18px 20px; position: relative; z-index: 2; }

.zsf-match-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #5a4a72; text-align: center; margin: 0 0 12px; }

/* White product card — the only box; contains everything including the button */
.zsf-result-inner { background: #fff; border-radius: 20px; padding: 20px; margin: 0; }
.zsf-recommended-badge { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #7C5CBF; display: block; margin-bottom: 14px; }
.zsf-result-product-row { display: flex; align-items: center; gap: 14px; margin-bottom: 0; }
.zsf-result-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: #f5f3fa; flex-shrink: 0; transition: opacity 0.3s ease; }
.zsf-result-details { flex: 1; }
.zsf-result-name { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: #2d1f4a; margin: 0 0 3px; line-height: 1.2; }
.zsf-result-meta { font-family: 'Inter', sans-serif; font-size: 12px; color: #5a4a72; margin: 0 0 6px; }
.zsf-result-price { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: #2d1f4a; margin: 0; }

/* Shop Now button — inside white box, full content width */
.zsf-shop-btn { display: block; width: 100%; padding: 15px; background: var(--z-amber); color: #fff; text-align: center; border-radius: 14px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; transition: opacity 0.15s; margin: 16px 0 0; }
.zsf-shop-btn:hover { opacity: 0.88; color: #fff; }

/* Start Over link — below white box, inside lavender card */
.zsf-retake { display: block; width: 100%; text-align: center; background: none; border: none; font-family: 'Inter', sans-serif; font-size: 13px; color: #5a4a72; cursor: pointer; margin-top: 14px; padding: 0; }
.zsf-retake:hover { color: #2d1f4a; background: none; }

/* Loading placeholder */
.zsf-result-loading { height: 200px; }

/* =====================================================
   T-019: Single Product Page — Core
   ===================================================== */

/* Remove GP's 1200px boxed container on the product page so
   #zoomies-product-page's background runs edge-to-edge. .zsp-wrap still
   caps the actual content at 1200px (with its own padding on the same
   element), so the visible content width/proportion is unchanged. Same
   fix as body.home / body.tax-product_cat — see the comment on
   body.home for why both rules are needed together. */
body.single-product #page.grid-container.container {
  max-width: 100% !important;
  width: 100% !important;
}
body.single-product .site-content {
  display: block !important;
}

/* Strip GP container padding + make content area full-width (same pattern as home/category) */
body.single-product #content,
body.single-product .site-content,
body.single-product .inside-article {
  padding: 0 !important;
  margin: 0 !important;
}
body.single-product .content-area,
body.single-product #primary {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

#zoomies-product-page { background: #F8F6FB; width: 100%; }
body.single-product .zsp-wrap { max-width: 480px; margin: 0 auto; padding: 0 18px 40px; font-family: 'Inter', sans-serif; }

/* Override WC's float-based 2-column layout → single column */
#zoomies-product-page .woocommerce-product-gallery,
#zoomies-product-page .summary.entry-summary { float: none; width: 100%; clear: both; }

/* Breadcrumb */
.zsp-breadcrumb { font-size: 12px; color: #888; padding: 14px 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.zsp-breadcrumb a { color: #7C5CBF; text-decoration: none; }
.zsp-breadcrumb .zsp-sep { color: #bbb; }
.zsp-breadcrumb .breadcrumb_last { color: #2d1f4a; font-weight: 500; }

/* WC gallery */
/* 2026-08-20: added !important throughout this block — GeneratePress Premium's
   own WooCommerce CSS module (gp-premium/woocommerce/functions/css/woocommerce.min.css)
   loads AFTER this stylesheet and has its own competing
   ".woocommerce div.product div.images .flex-control-thumbs li" rule
   (max-width/padding/box-sizing). Our ID-scoped selector should already win on
   specificity alone, but a live screenshot on template.zoomiescanada.ca showed
   thumbnails rendering with no gap/radius/border at all, so forcing these
   specific properties to win outright rather than relying on specificity math. */
#zoomies-product-page .woocommerce-product-gallery { margin-bottom: 16px; }
#zoomies-product-page .woocommerce-product-gallery__image img { border-radius: 12px; width: 100%; display: block; }
#zoomies-product-page .flex-control-thumbs { display: flex !important; flex-wrap: nowrap; gap: 8px !important; margin: 10px 0 0 !important; padding: 0 !important; list-style: none !important; overflow-x: auto; scrollbar-width: none; }
#zoomies-product-page .flex-control-thumbs::-webkit-scrollbar { display: none; }
#zoomies-product-page .flex-control-thumbs li { flex-shrink: 0 !important; float: none !important; width: 64px !important; max-width: 64px !important; height: 64px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; }
#zoomies-product-page .flex-control-thumbs li img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 8px !important; border: 2px solid transparent !important; opacity: 1 !important; margin: 0 !important; cursor: pointer; }
#zoomies-product-page .flex-control-thumbs li img.flex-active { border-color: #7C5CBF !important; }

/* WC title */
#zoomies-product-page .product_title { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 700; color: #2d1f4a; margin: 0 0 8px; line-height: 36px; }

/* WC star rating */
#zoomies-product-page .woocommerce-product-rating { margin-bottom: 8px; }
#zoomies-product-page .star-rating span::before,
#zoomies-product-page .star-rating::before { color: #C4872A;}
#zoomies-product-page .woocommerce-review-link { font-size: 13px; color: #7C5CBF; }

/* WC price */
#zoomies-product-page p.price,
#zoomies-product-page span.price { font-size: 24px; font-weight: 700; color: #2d1f4a; margin-bottom: 10px; display: block; }
#zoomies-product-page p.price del,
#zoomies-product-page span.price del { font-size: 16px; font-weight: 400; color: #aaa; }
#zoomies-product-page p.price ins,
#zoomies-product-page span.price ins { text-decoration: none; }

/* WC short description */
#zoomies-product-page .woocommerce-product-details__short-description { font-size: 14px; color: #6b7280; line-height: 22.75px;; margin-bottom: 16px; }

/* WC ATC form — hide native variation table, style button */
#zoomies-product-page .variations { display: none !important; }
#zoomies-product-page select[name^="attribute_"] { display: none !important; }
#zoomies-product-page .woocommerce-variation-description { display: none; }
#zoomies-product-page .single_add_to_cart_button {
  display: block; width: 100%;
  background: #7C5CBF; color: #fff; border: none;
  border-radius: 8px; padding: 16px;
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700;
  cursor: pointer; margin-top: 16px;
}
#zoomies-product-page .single_add_to_cart_button:disabled { background: #bbb; cursor: not-allowed; }
#zoomies-product-page .single_add_to_cart_button.loading::after { border-top-color: #fff; }

/* Swatch pills */
.zsp-swatch-row { margin-bottom: 16px; }
.zsp-swatch-label { font-size: 14px; font-weight: 500; color: #2d1f4a; margin: 0 0 8px; }
.zsp-swatch-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zsp-swatch { padding: 12px 20px; border-radius: 20px; border: none; background: #EDE8F8; color: #7C5CBF; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.2; }
.zsp-swatch.active { background: #7C5CBF; color: #fff; font-weight: 500; }

/* Unbuyable pills stay visible but are not clickable — greyed, never struck through (a
   strikethrough reads as a crossed-out price in a shop). The one exception is the pill
   that is currently selected: it keeps normal styling and stays clickable so it can be
   deselected, which is the way out when the current combination has no stock. */
.zsp-swatch:disabled { background: #F3F2F5; color: #A29DAE; cursor: not-allowed; }
.zsp-swatch--soldout.active,
.zsp-swatch--unavailable.active { background: #A29DAE; color: #fff; cursor: pointer; }
.zsp-swatch--soldout.active:hover,
.zsp-swatch--unavailable.active:hover { background: #918BA0; }
.zsp-swatch-note { font-size: 10px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; opacity: .85; }
.zsp-swatch-note:empty { display: none; }

/* Qty controls — GP Premium injects <a class="minus"> / <a class="plus"> around input.qty */
#zoomies-product-page div.quantity { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#zoomies-product-page div.quantity a.minus,
#zoomies-product-page div.quantity a.plus {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: #fff;
  border: 1.5px solid #c8bfe0; border-radius: 6px;
  color: #2d1f4a; font-size: 18px; font-weight: 400;
  cursor: pointer; flex-shrink: 0; text-decoration: none; user-select: none;
}
#zoomies-product-page div.quantity a.minus { border-radius: 6px; border-right: 1.5px solid #c8bfe0; }
#zoomies-product-page div.quantity a.plus  { border-radius: 6px; border-left: 1.5px solid #c8bfe0; }
#zoomies-product-page input.qty { width: 32px; text-align: center; height: 36px; border: none; background: transparent; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: #2d1f4a; -moz-appearance: textfield; padding: 0; }
#zoomies-product-page input.qty::-webkit-outer-spin-button,
#zoomies-product-page input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Wishlist — YITH renders <svg class="yith-wcwl-icon-svg"> + <span> inside the anchor */
#zoomies-product-page .yith-wcwl-add-button { text-align: center; margin: 0; }
#zoomies-product-page .yith-wcwl-add-button a.add_to_wishlist {
  display: inline-flex; align-items: center; gap: 6px;
  color: #9ca3af; font-size: 13px; font-weight: 500;
  text-decoration: none; transition: color .15s;
}
#zoomies-product-page .yith-wcwl-add-button a.add_to_wishlist:hover { color: #7C5CBF; }
#zoomies-product-page .yith-wcwl-add-button a.add_to_wishlist .yith-wcwl-icon-svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Wishlist added/exists notification — inline pill */
#zoomies-product-page .yith-wcwl-wishlistaddedbrowse,
#zoomies-product-page .yith-wcwl-wishlistexistsbrowse {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
}
#zoomies-product-page .yith-wcwl-wishlistaddedbrowse .feedback,
#zoomies-product-page .yith-wcwl-wishlistexistsbrowse .feedback {
  display: inline-flex; align-items: center; gap: 4px;
  color: #7C5CBF; font-size: 13px; font-weight: 500;
}
#zoomies-product-page .yith-wcwl-wishlistaddedbrowse a,
#zoomies-product-page .yith-wcwl-wishlistexistsbrowse a {
  display: inline-block;
  background: #7C5CBF; color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
  text-decoration: none; transition: background .15s;
  white-space: nowrap;
}
#zoomies-product-page .yith-wcwl-wishlistaddedbrowse a:hover,
#zoomies-product-page .yith-wcwl-wishlistexistsbrowse a:hover { background: #6448a8; }

/* Category */
.zsp-category { font-size: 12px; color: #888; margin: 20px 0 16px; text-align: center; font-weight: 500;}
.zsp-category a { color: #7C5CBF; text-decoration: none; }
.zsp-category a:hover {color: #7c5cbf; text-decoration: underline;}

/* Potency badge */
.zsp-potency-badge { display: inline-block; background: #C4872A; color: #fff; font-size: 12px; font-weight: 900; padding: 3px 10px; border-radius: 20px; letter-spacing: .05em; margin-bottom: 12px; }

/* 3-info strip — icon left, text right */
.zsp-info-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 20px 0 28px; }
.zsp-info-box { background: #fff; border-radius: 10px; padding: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.06); display: flex; align-items: center; gap: 10px; }
.zsp-info-icon { font-size: 26px; flex-shrink: 0; line-height: 1; }
.zsp-info-text { font-size: 11px; font-weight: 700; color: #2d1f4a; display: block; text-align: left; }
.zsp-info-text small { font-size: 10px; font-weight: 400; color: #888; display: block; }

/* =====================================================
   T-020: Single Product Page — Tabs
   ===================================================== */

/* Tab nav */
#zoomies-product-page .wc-tabs-wrapper { margin: 0 -18px; }
#zoomies-product-page .tabs.wc-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 2px solid #E8E0F0;
  padding: 0 18px;
  margin: 0;
  list-style: none;
  gap: 0;
}
#zoomies-product-page .tabs.wc-tabs::-webkit-scrollbar { display: none; }
#zoomies-product-page .tabs.wc-tabs li {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  min-width: 0;
}
#zoomies-product-page .tabs.wc-tabs li::before,
#zoomies-product-page .tabs.wc-tabs li::after {
  display: none !important;
}
#zoomies-product-page .tabs.wc-tabs li a {
  display: block;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #9e8fb5;
  text-decoration: none;
  white-space: nowrap;
}
#zoomies-product-page .tabs.wc-tabs li.active {
  box-shadow: inset 0 -2px 0 #7C5CBF !important;
}
#zoomies-product-page .tabs.wc-tabs li.active a { color: #7C5CBF; }

/* Tab panels */
#zoomies-product-page .woocommerce-Tabs-panel { padding: 20px 18px; }

/* Description panel */
#zoomies-product-page .woocommerce-Tabs-panel--description { font-size: 14px; color: #3d3353; line-height: 1.75; }
#zoomies-product-page .woocommerce-Tabs-panel--description h2,
#zoomies-product-page .woocommerce-Tabs-panel--description h3 { color: #2d1f4a; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
#zoomies-product-page .woocommerce-Tabs-panel--description h3 { font-size: 14px; }
#zoomies-product-page .woocommerce-Tabs-panel--description ul { list-style: disc; padding-left: 14px; margin: 0px 0px 18px; }
#zoomies-product-page .woocommerce-Tabs-panel--description li { font-size: 12px; color: #5a4e72;}
#zoomies-product-page .woocommerce-Tabs-panel--description em,
#zoomies-product-page .woocommerce-Tabs-panel--description i { font-size: 12px; color: #888; }
#zoomies-product-page .woocommerce-Tabs-panel--description p{font-size: 12px; color: #5a4e72; line-height: 1.6; margin-bottom: 8px;}

/* Additional Info table — zebra rows, no borders */
#zoomies-product-page .woocommerce-product-attributes { width: 100%; border-collapse: collapse; font-size: 14px; }
#zoomies-product-page .woocommerce-product-attributes th,
#zoomies-product-page .woocommerce-product-attributes td { padding: 14px 12px; border: none; text-align: left; vertical-align: top; background: #fff; }
#zoomies-product-page .woocommerce-product-attributes tr:nth-child(even) th,
#zoomies-product-page .woocommerce-product-attributes tr:nth-child(even) td { background: #f4f2f9; }
#zoomies-product-page .woocommerce-product-attributes th { color: #2d1f4a; font-weight: 700; width: 38%; }
#zoomies-product-page .woocommerce-product-attributes td { color: #2d1f4a; font-style: normal; }
#zoomies-product-page .woocommerce-product-attributes td p,
#zoomies-product-page .woocommerce-product-attributes td em { font-style: normal; margin: 0; }

/* Reviews panel — YITH Advanced Reviews */
#tab-yith_reviews {
  padding-top: 12px;
  --ywar-general-color: #7C5CBF;
  --ywar-graph-accent: #7C5CBF;
  --ywar-stars-accent: #C4872A;
  --ywar-stars-default: #e0d9f0;
  --ywar-review-border: #E8E0F0;
  --ywar-review-shadow: none;
}

/* Remove YITH's large gap between sections */
#tab-yith_reviews .yith-ywar-main-wrapper { gap: 16px !important; }

/* Average rating summary box — horizontal compact layout */
#tab-yith_reviews .yith-ywar-average-rating-box {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: flex-start !important;
  text-align: left !important; flex-wrap: nowrap !important;
  gap: 10px !important;
  min-height: 0 !important;
  background: #f0edf7 !important; border-radius: 10px !important; padding: 16px 20px;
}
#tab-yith_reviews .yith-ywar-average-rating-box .average-rating {
  font-size: 32px !important; font-weight: 700; color: #2d1f4a; line-height: 1;
}
#tab-yith_reviews .yith-ywar-average-rating-box .stars {
  width: 20px !important; height: 20px !important;
  min-height: 0 !important; margin: 0 !important;
  flex-shrink: 0 !important; display: block !important;
}
#tab-yith_reviews .yith-ywar-average-rating-box .total-reviews {
  display: flex !important; flex-direction: column !important;
  font-size: 13px; font-weight: 700; color: #2d1f4a; line-height: 1.4;
}
#tab-yith_reviews .yith-ywar-average-rating-box .total-reviews::before {
  content: 'out of 5'; display: block;
  font-size: 11px; font-weight: 400; color: #9ca3af;
}

/* Hide bar chart and multi-criteria — keep only average rating box */
#tab-yith_reviews .yith-ywar-graph-box,
#tab-yith_reviews .yith-ywar-multi-criteria-box { display: none !important; }
/* Stats wrapper: single column so average box takes full width */
#tab-yith_reviews .yith-ywar-stats-wrapper { grid-template-columns: 1fr !important; }

/* Individual review cards — override YITH's padding:40px and gap:20px */
#tab-yith_reviews .yith-ywar-single-review {
  background: #fff; border: 1px solid #E8E0F0; border-radius: 10px;
  padding: 14px 16px !important; gap: 6px !important;
  box-shadow: none !important;
}

/* Hide avatar */
#tab-yith_reviews .review-user-avatar { display: none !important; }

/* Remove gap left by hidden avatar */
#tab-yith_reviews .review-user-group { gap: 0 !important; }

/* Name row: reviewer name left, verified badge right */
#tab-yith_reviews .review-user {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 12px; font-weight: 700;
}
#tab-yith_reviews .review-user .reviewer {
  font-size: 14px; font-weight: 700; color: #2d1f4a;
}

/* Verified Buyer badge */
#tab-yith_reviews .review-user .verified {
  background: #e6f4ec !important; color: #1a7a3c !important;
  font-size: 9px !important; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; white-space: nowrap;
  display: inline-flex !important; align-items: center; gap: 4px;
}
#tab-yith_reviews .review-user .verified img { width: 12px; height: 12px; opacity: 0.8; }

/* Date */
#tab-yith_reviews .review-date { font-size: 10px; color: #9e8fb5; margin: 0 !important; }

/* Stars row */
#tab-yith_reviews .review-rating { margin: 0 !important; }

/* Review text */
#tab-yith_reviews .review-content { font-size: 12px; color: #5a4e72; line-height: 1.6; }
#tab-yith_reviews .review-content p { margin: 0; }

/* Hide helpful/action buttons and edit button */
#tab-yith_reviews .review-actions { display: none !important; }
#tab-yith_reviews .edit-button { display: none !important; }
/* Hide the review count text that YITH prepends to the load-more wrapper */
#tab-yith_reviews .load-more-reviews br { display: none; }
#tab-yith_reviews .load-more-reviews { display: block; margin-top: 12px; }

/* Load more button */
#tab-yith_reviews .load-more-button,
#tab-yith_reviews .load-more-button-shortcode {
  display: block !important; width: 100% !important;
  background: #fff !important; color: #7C5CBF !important;
  border: 1.5px solid #E8E0F0 !important; border-radius: 10px !important;
  padding: 14px !important; text-align: center !important;
  font-size: 14px !important; font-weight: 600 !important;
  box-sizing: border-box !important; margin: 4px 0 0 !important;
  cursor: pointer;
}

/* Refer a Friend panel */
#zoomies-product-page #tab-refer_tab { background: #fff; padding: 24px 18px !important; width: 100%; box-sizing: border-box; display: block; max-width: 100% !important; }
#zoomies-product-page #tab-refer_tab .gens-refer-a-friend { max-width: 100% !important; }
#zoomies-product-page #tab-refer_tab, #zoomies-product-page #tab-refer_tab * { color: #2d1f4a; }
#zoomies-product-page #tab-refer_tab .gens-refer-a-friend--share-text h2 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
#zoomies-product-page #tab-refer_tab .gens-refer-a-friend--share-text p { font-size: 14px; color: #5a4a72; line-height: 1.6; margin: 0 0 20px; }
#zoomies-product-page #tab-refer_tab .gens-raf-message { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; background: #F3F0F9 !important; border-left: 4px solid #7C5CBF !important; border-radius: 8px; padding: 14px 16px !important; font-size: 13px; margin-bottom: 12px; line-height: 1.5; }
#zoomies-product-page #tab-refer_tab .gens-raf-message strong { color: #7C5CBF; word-break: break-all; flex: 1; min-width: 0; }
#zoomies-product-page #tab-refer_tab .gens-ctc { position: static !important; transform: none !important; background: #7C5CBF !important; color: #fff !important; padding: 6px 14px !important; border-radius: 20px; font-size: 12px !important; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }

/* Refer a Friend — mobile stacked layout */
@media (max-width: 767px) {
  #zoomies-product-page #tab-refer_tab .gens-raf-message { display: grid !important; grid-template-columns: 1fr auto !important; grid-template-rows: auto auto !important; gap: 4px 12px !important; align-items: center !important; }
  #zoomies-product-page #tab-refer_tab .gens-raf-message strong { grid-column: 1 !important; grid-row: 2 !important; font-size: 12px; }
  #zoomies-product-page #tab-refer_tab .gens-ctc { grid-column: 2 !important; grid-row: 1 / 3 !important; align-self: center !important; margin-left: 0 !important; }

  .zca-pill { padding: 5px 9px; font-size: 11px; }
  .zca-sort-btn { padding: 5px 9px; gap: 4px; font-size: 11px; }
}
#zoomies-product-page #tab-refer_tab .gens-referral_share { margin-top: 16px; }
#zoomies-product-page #tab-refer_tab .gens-referral_share a { display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #fff !important; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }
#zoomies-product-page #tab-refer_tab .gens-refer-a-friend--generate .gens-raf-message { background: #FFF8E1 !important; border-left: 4px solid #FFA000 !important; }

/* =====================================================
   T-021: Single Product Page — Related Products
   ===================================================== */
#zoomies-product-page .related.products { margin: 0 0 40px; }
.zsp-related-heading {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #2d1f4a;
  margin-bottom: 14px;
}
.zsp-related-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 18px 16px;
  scrollbar-width: none;
}
.zsp-related-scroll::-webkit-scrollbar { display: none; }

/* Related product cards */
.zsp-rel-card {
  flex: 0 0 140px; min-width: 0; text-decoration: none;
  background: #fff; border: none; border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
}
.zsp-rel-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #ede8f8; }
.zsp-rel-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 8px; box-sizing: border-box; }
.zsp-rel-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.zsp-rel-name { font-size: 13px; font-weight: 700; color: #2d1f4a; margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zsp-rel-rating { font-size: 12px; color: #C4872A; margin: 0; }
.zsp-rel-price { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 400; color: #5a4a72; margin: 0 0 8px; margin-top: auto; }
.zsp-rel-price .woocommerce-Price-amount { font-size: 14px; font-weight: 700; color: var(--z-purple); }
.zsp-rel-btn { display: block; width: 100%; background: #7C5CBF; color: #fff; text-align: center; padding: 9px 0; border-radius: 8px; font-size: 12px; font-weight: 600; box-sizing: border-box; }

/* Hide PhotoSwipe gallery share button */
.pswp__button--share,
.pswp__share-modal { display: none !important; }

/* =====================================================
   T-022: Single Product Page — Visual Alignment Fixes
   ===================================================== */

/* Hide WC variation price/availability from the ATC area — price is near title */
#zoomies-product-page .woocommerce-variation-price,
#zoomies-product-page .woocommerce-variation-availability { display: none; }

/* Wishlist — no underline on YITH's rendered anchor */
#zoomies-product-page .yith-wcwl-add-button a { text-decoration: none; }

/* =====================================================
   T-019/020/021 DESKTOP: Single Product — ≥992px
   ===================================================== */
@media (min-width: 992px) {

  /* Wider container */
  body.single-product .zsp-wrap {
    max-width: 1200px;
    padding: 0 32px 60px;
  }

  /* Breadcrumb */
  .zsp-breadcrumb {
    font-size: 13px;
    padding: 20px 0 16px;
  }

  /* Two-column grid: gallery | summary */
  #zoomies-product-page .product {
    display: grid !important;
    grid-template-columns: 44% 1fr !important;
    column-gap: 48px;
    align-items: start;
    width: 100%;
  }

  /* Gallery — left column */
  #zoomies-product-page .woocommerce-product-gallery {
    grid-column: 1 !important;
    grid-row: 1 !important;
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    clear: none;
    margin-bottom: 0;
  }

  /* Main image ratio — target slide container, not img, to avoid FlexSlider JS conflict.
     Square, not 4:5: every product image in the catalogue is 1:1 (spot-checked 1200x1200
     across the Wonder gummies set), so forcing a 4:5 portrait box made object-fit:contain
     letterbox each one with a tall grey band above and below (reported 2026-08-21 right
     after the live theme switch — the CSS itself is unchanged since 3e9905620 and aweb04
     renders identically, so this is the original ratio choice not matching the assets). */
  #zoomies-product-page .woocommerce-product-gallery__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  #zoomies-product-page .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Summary — right column */
  #zoomies-product-page .summary.entry-summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    clear: none;
  }

  /* Tabs + related span full width below the two columns */
  #zoomies-product-page .woocommerce-tabs,
  #zoomies-product-page .related.products {
    grid-column: 1 / -1;
  }

  /* Product title */
  #zoomies-product-page .product_title {
    font-size: 38px;
    line-height: 1.15;
    margin-bottom: 10px;
  }

  /* Price */
  #zoomies-product-page p.price,
  #zoomies-product-page span.price {
    font-size: 28px;
    margin-bottom: 12px;
  }

  /* Short description */
  #zoomies-product-page .woocommerce-product-details__short-description {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 20px;
  }

  /* Swatch pills */
  .zsp-swatch-row { margin-bottom: 20px; }
  .zsp-swatch-label { font-size: 15px; }
  .zsp-swatch-group {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 10px;
  }
  .zsp-swatch { font-size: 15px; padding: 12px 24px; }

  /* Quantity */
  #zoomies-product-page div.quantity { margin-bottom: 12px; }

  /* Add to cart */
  #zoomies-product-page .single_add_to_cart_button {
    font-size: 17px;
    padding: 18px;
    margin-top: 20px;
    border-radius: 10px;
  }

  /* Wishlist — left-align */
  #zoomies-product-page .yith-wcwl-add-button {
    text-align: left;
    margin: 14px 0;
  }

  /* Category — left-align */
  .zsp-category { text-align: left; margin: 10px 0 20px; }

  /* Info strip */
  .zsp-info-strip { gap: 12px; margin: 24px 0 32px; }
  .zsp-info-box { padding: 10px 12px; }
  .zsp-info-text { font-size: 12px; }

  /* Tabs — reset mobile negative margin, larger text, even spread */
  #zoomies-product-page .wc-tabs-wrapper { margin: 0; }
  #zoomies-product-page .tabs.wc-tabs { padding: 0; overflow-x: visible; }
  #zoomies-product-page .tabs.wc-tabs li { flex: 1; text-align: center; }
  #zoomies-product-page .tabs.wc-tabs li a {
    font-size: 14px;
    padding: 12px 8px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
  #zoomies-product-page .woocommerce-Tabs-panel { padding: 28px 4px; }
  #zoomies-product-page #tab-refer_tab { padding: 40px 48px !important; }
  #zoomies-product-page .woocommerce-Tabs-panel--description { font-size: 15px; }
  #zoomies-product-page .woocommerce-Tabs-panel--description p { font-size: 14px; }
  #zoomies-product-page .woocommerce-Tabs-panel--description li { font-size: 13px; }
  #zoomies-product-page .woocommerce-Tabs-panel--description h2,
  #zoomies-product-page .woocommerce-Tabs-panel--description h3 { font-size: 16px; }

  /* Related products — 4-column grid */
  #zoomies-product-page .related.products { margin: 40px 0 60px; }
  .zsp-related-heading { font-size: 18px; margin-bottom: 20px; }
  .zsp-related-scroll {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    overflow-x: visible;
    padding: 0;
  }
  .zsp-rel-card { flex: none; }
  .zsp-rel-name { font-size: 14px; }
  .zsp-rel-price { font-size: 14px; }
  .zsp-rel-btn { font-size: 13px; padding: 10px 0; }
}

/* =====================================================
   T-024: About Us Page
   ===================================================== */

/* Remove GP's 1200px boxed container so #zoomies-about-page's background
   runs edge-to-edge. This page never had its own desktop max-width —
   its content only ever looked capped at ~1200px because #page was
   capping it upstream — so each section below gets an explicit
   max-width:1200px + margin:auto added (on top of its existing 24px
   padding) to keep that same width now that #page is freed. Same fix
   as body.home — see the comment there for why both rules are needed
   together. */
body.page-id-120 #page.grid-container.container {
  max-width: 100% !important;
  width: 100% !important;
}
body.page-id-120 .site-content {
  display: block !important;
}

#zoomies-about-page { background: #F8F6FB; }

/* S1: Hero */
.zau-hero {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 56px 24px 40px;
  box-sizing: border-box;
}
.zau-eyebrow {
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 600;
  text-transform: uppercase;
  color: #8A5C1A;
  margin: 0 0 12px;
}
.zau-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: #2d1f4a;
  margin: 0 0 24px;
}
.zau-hero-img { margin-top: 0; }
.zau-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  display: block;
}

/* S2: Narrative */
.zau-narrative {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 44px 24px 0;
  box-sizing: border-box;
}
.zau-body {
  font-size: 16px;
  line-height: 1.8;
  color: #4a3d6b;
  margin: 0 0 0;
}
.zau-quote {
  margin: 52px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid #C4872A;
}
.zau-quote p {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  line-height: 1.35;
  color: #2d1f4a;
  font-style: italic;
  margin: 0;
}

/* Divider */
.zau-divider {
  width: 48px;
  height: 2px;
  background: #C4872A;
  margin: 40px auto;
}

/* S3: Our Products */
/* .zau-products bleeds edge-to-edge (background only); .zau-products-inner
   owns the max-width + padding so the light-purple background can still
   span full width on wide viewports. */
.zau-products { padding: 56px 0 48px; background: #EDE8F5; }
.zau-products-inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.zau-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  color: #2d1f4a;
  text-align: center;
  margin: 0 0 16px;
}
.zau-center { text-align: center; }
.zau-lead {
  font-size: 14px;
  line-height: 1.5;
  color: #2d1f4a;
  font-weight: 600;
  margin: 0 0 20px;
}
.zau-italic {
  font-style: italic;
  font-size: 13px;
  margin-top: 20px;
}

/* Cards — always 3-column */
.zau-cards {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin: 0 0 4px;
}
@media (max-width: 767px) {
  .zau-cards {
    flex-direction: column;
  }
}
.zau-card {
  flex: 1;
  background: #fff;
  border: 1px solid #ddd8f0;
  border-radius: 14px;
  padding: 16px 14px;
}
.zau-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F5E4C0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #C4872A;
  font-weight: 700;
  line-height: 1;
}
.zau-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.3;
  color: #2d1f4a;
  font-weight: 700;
  margin: 10px 0 0;
}
.zau-card-body {
  font-size: 12px;
  line-height: 1.6;
  color: #5a4a72;
  margin: 6px 0 0;
}

/* S4: CTA Band */
/* .zau-cta bleeds edge-to-edge (background only); .zau-cta-inner owns
   the max-width + padding so the amber background can still span full
   width on wide viewports. */
.zau-cta {
  padding: 72px 0;
  background: #F5E4C0;
  text-align: center;
}
.zau-cta-inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.zau-cta-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #C4872A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}
.zau-cta-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  color: #2d1f4a;
  margin: 0;
}
.zau-cta-body {
  font-size: 15px;
  line-height: 1.6;
  color: #5a4a72;
  margin: 16px auto 0;
  max-width: 340px;
}
.zau-cta-btn {
  display: inline-block;
  margin-top: 28px;
  background: #7C5CBF;
  color: #fff;
  padding: 14px 32px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.zau-cta-btn:hover { background: #6a4da8; color: #fff; }


/* =====================================================
   T-023: Delivery & Shipping Policy Page
   ===================================================== */

/* Remove GP's 1200px boxed container so #zsp-page's background runs
   edge-to-edge. .zsp-wrap still caps the actual content at 820px (with
   its own padding on the same element), so the visible content
   width/proportion is unchanged. Same fix as body.home — see the
   comment there for why both rules are needed together (the width:100%
   on #zsp-page below already patches the .site-content flex-shrink
   half of that fix, but #page itself was still capping things
   upstream). NOTE: this page's .zsp-* classes are unrelated to and
   coincidentally reuse the single-product page's .zsp-* names — both
   are scoped by body class so they don't collide at runtime. */
body.page-template-page-delivery-shipping-policy #page.grid-container.container {
  max-width: 100% !important;
  width: 100% !important;
}
body.page-template-page-delivery-shipping-policy .site-content {
  display: block !important;
}

/* Strip GP container padding so #zsp-page can go full-width */
body.page-template-page-delivery-shipping-policy .inside-article {
  padding: 0 !important;
  margin: 0 !important;
}

#zsp-page {
  background: #F8F6FB;
  padding: 0 0 60px;
  text-align: center;
  width: 100%;
  min-width: 0;
}

.zsp-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero */
.zsp-hero {
  padding: 56px 0 32px;
}
.zsp-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  font-weight: 700;
  color: #2d1f4a;
  margin: 0 0 10px;
  line-height: 1.15;
}
.zsp-hero-sub {
  font-size: 15px;
  color: #6b5a8a;
  margin: 0;
  line-height: 1.6;
}

/* Quick Stats */
.zsp-stats {
  margin-bottom: 48px;
}
.zsp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.zsp-stat {
  background: #fff;
  border: 1px solid #e8e4f0;
  border-radius: 12px;
  padding: 16px;
}
.zsp-stat-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #FEF3E2;
  color: #C4872A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.zsp-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #9b8bbb;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.zsp-stat-value {
  font-size: 14px;
  font-weight: 700;
  color: #C4872A;
  margin: 0;
}

/* Section common */
.zsp-section {
  margin-bottom: 52px;
}
.zsp-section--last {
  margin-bottom: 0;
}
.zsp-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: #2d1f4a;
  margin: 0 0 20px;
}
.zsp-body {
  font-size: 15px;
  line-height: 1.75;
  color: #4a3d6b;
  margin: 0 0 16px;
}

/* Shipping Rate Cards */
.zsp-rate-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.zsp-rate-card {
  background: #fff;
  border: 1px solid #e8e4f0;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.zsp-rate-card--free {
  border-color: #C4872A;
  border-width: 2px;
}
.zsp-rate-name {
  font-size: 14px;
  font-weight: 600;
  color: #2d1f4a;
  margin: 0 0 4px;
}
.zsp-rate-desc {
  font-size: 12px;
  color: #9b8bbb;
  margin: 0;
}
.zsp-rate-price {
  font-size: 16px;
  font-weight: 700;
  color: #7C5CBF;
  white-space: nowrap;
  margin: 0;
}
.zsp-rate-price--free {
  color: #C4872A;
}

/* How We Ship */
.zsp-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.zsp-how-item {
  background: #fff;
  border: 1px solid #e8e4f0;
  border-radius: 12px;
  padding: 20px 18px;
}
.zsp-how-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #EDEAF7;
  color: #7C5CBF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.zsp-how-title {
  font-size: 14px;
  font-weight: 700;
  color: #2d1f4a;
  margin: 0 0 8px;
}
.zsp-how-body {
  font-size: 13px;
  line-height: 1.65;
  color: #6b5a8a;
  margin: 0;
}

/* Packaging list */
.zsp-pack-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zsp-pack-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  color: #4a3d6b;
  line-height: 1.5;
}
.zsp-pack-list li svg {
  flex-shrink: 0;
}

/* Pro tip */
.zsp-pro-tip {
  background: #EDEAF7;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14px;
  color: #4a3d6b;
  line-height: 1.6;
}
.zsp-pro-tip p { margin: 0; }
.zsp-pro-tip strong { color: #7C5CBF; }

/* Accordion */
.zsp-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zsp-acc-item {
  background: #fff;
  border: 1px solid #e8e4f0;
  border-radius: 12px;
  overflow: hidden;
}
.zsp-acc-trigger {
  width: 100%;
  background: #fff;
  border: none;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #2d1f4a;
  text-align: left;
  transition: background 0.15s;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.zsp-acc-trigger:hover,
.zsp-acc-trigger:focus,
.zsp-acc-trigger:active,
.zsp-acc-trigger:visited {
  color: #2d1f4a !important;
  outline: none;
  box-shadow: none;
}
.zsp-acc-trigger:hover {
  background: #f8f6fb;
}
.zsp-acc-trigger:focus,
.zsp-acc-trigger:active {
  background: #fff;
}
.zsp-acc-icon {
  flex-shrink: 0;
  color: #9b8bbb;
  transition: transform 0.2s;
}
.zsp-acc-open .zsp-acc-icon {
  transform: rotate(45deg);
}
.zsp-acc-body {
  display: none;
  padding: 12px 20px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: #6b5a8a;
  text-align: left;
}
.zsp-acc-body p { margin: 0; }
.zsp-acc-open .zsp-acc-body {
  display: block;
}
.zsp-acc-body p + p {
  margin-top: 10px;
}

/* About section links */
.zsp-about a {
  color: #7C5CBF;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.zsp-about a:hover {
  color: #5a3d9e;
}

/* Responsive */
@media (max-width: 767px) {
  .zsp-hero-title { font-size: 30px; }
  .zsp-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .zsp-rate-cards { grid-template-columns: 1fr; }
  .zsp-how-grid { grid-template-columns: 1fr; }
}


/* =====================================================
   T-022: Support / Contact Page
   ===================================================== */

/* Remove GP's 1200px boxed container so #zsc-page's background runs
   edge-to-edge, and fix #zsc-page (an unsized flex item under GP's
   default .site-content) shrink-wrapping to its widest child's content
   instead of filling #page. Same fix as body.home — see the comment
   there for why both rules are needed together. */
body.page-template-page-support #page.grid-container.container {
  max-width: 100% !important;
  width: 100% !important;
}
body.page-template-page-support .site-content {
  display: block !important;
}

#zsc-page {
  background: #F8F6FB;
  padding: 48px 0;
}

.zsc-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Layout */
.zsc-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

/* Typography */
.zsc-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C4872A;
  margin: 0 0 12px;
}
.zsc-h1 {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 700;
  color: #2d1f4a;
  margin: 0 0 20px;
  line-height: 1.15;
}
.zsc-h2 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 600;
  color: #2d1f4a;
  margin: 0 0 24px;
  line-height: 1.25;
}
.zsc-intro {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #5a4a72;
  line-height: 1.65;
  margin: 0 0 24px;
}
.zsc-inline-link { color: #7C5CBF; text-decoration: underline; }

/* Stat card */
.zsc-stat-card {
  background: #fff;
  border: 1px solid #e8e4f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.zsc-stat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.zsc-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(45,31,74,0.6);
}
.zsc-stat-primary {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
  color: #2d1f4a;
  margin: 0 0 4px;
}
.zsc-stat-helper {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(45,31,74,0.6);
  margin: 0;
  line-height: 1.5;
}

/* Email card */
.zsc-email-card {
  background: #fff;
  border: 1px solid #e8e4f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.zsc-icon-amber { flex-shrink: 0; }
.zsc-email-body { display: flex; flex-direction: column; gap: 3px; }
.zsc-email-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(45,31,74,0.6);
}
.zsc-email-link {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #7C5CBF;
  text-decoration: none;
}
.zsc-email-link:hover { text-decoration: underline; }

/* ── Form ──────────────────────────────────────────── */
.zsc-col-form .wpcf7 { margin: 0; padding: 0; }

.zsc-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.zsc-form-col { display: flex; flex-direction: column; gap: 6px; }
.zsc-form-full { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

.zsc-form-col label,
.zsc-form-full label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #2d1f4a;
  display: block;
}
.zsc-req { color: #C4872A; }
.zsc-optional { font-size: 12px; font-weight: 400; color: rgba(45,31,74,0.5); }
.zsc-helper {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(45,31,74,0.55);
  line-height: 1.4;
}

/* CF7 wrap — make spans block */
#zsc-page .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Inputs / email / textarea / select */
#zsc-page .wpcf7 input[type="text"],
#zsc-page .wpcf7 input[type="email"],
#zsc-page .wpcf7 textarea,
#zsc-page .wpcf7 select {
  width: 100%;
  background: #fff;
  border: 1px solid #e8e4f0;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #2d1f4a;
  box-sizing: border-box;
  transition: border-color 0.15s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
#zsc-page .wpcf7 input[type="text"]::placeholder,
#zsc-page .wpcf7 input[type="email"]::placeholder,
#zsc-page .wpcf7 textarea::placeholder { color: rgba(45,31,74,0.4); }
#zsc-page .wpcf7 input[type="text"]:focus,
#zsc-page .wpcf7 input[type="email"]:focus,
#zsc-page .wpcf7 textarea:focus,
#zsc-page .wpcf7 select:focus { border-color: #7C5CBF; }

/* Textarea */
#zsc-page .wpcf7 textarea { resize: none; }

/* Select chevron */
#zsc-page .wpcf7 .wpcf7-form-control-wrap[data-name="inquiry-type"] {
  position: relative;
  display: block;
}
#zsc-page .wpcf7 .wpcf7-form-control-wrap[data-name="inquiry-type"]::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(45,31,74,0.6);
  pointer-events: none;
}
#zsc-page .wpcf7 select { padding-right: 36px; }
#zsc-page .wpcf7 select.zsc-placeholder { color: rgba(45,31,74,0.4); }
#zsc-page .wpcf7 select option { color: #2d1f4a; }

/* Submit */
#zsc-page .wpcf7 input[type="submit"] {
  display: block;
  width: 100%;
  background: #7C5CBF;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  margin-top: 20px;
  transition: background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
#zsc-page .wpcf7 input[type="submit"]:hover { background: #6B4DA8; }

/* CF7 response messages */
#zsc-page .wpcf7-response-output {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  border-radius: 12px;
  padding: 16px !important;
  margin: 16px 0 0 !important;
  border-width: 1px !important;
  border-style: solid !important;
  line-height: 1.55;
}
#zsc-page .wpcf7-mail-sent-ok {
  background: #fff;
  border-color: #e8e4f0 !important;
  color: #2d1f4a;
}
#zsc-page .wpcf7-validation-errors,
#zsc-page .wpcf7-spam-blocked {
  background: #FBEAEA;
  border-color: #B3261E !important;
  color: #B3261E;
}
#zsc-page .wpcf7-not-valid-tip {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #B3261E;
  margin-top: 4px;
  display: block;
}

/* ── FAQ deflection ────────────────────────────────── */
.zsc-faq-deflect {
  text-align: center;
  padding: 32px 0;
  margin-top: 48px;
  border-top: 1px solid #e8e4f0;
}
.zsc-faq-rule {
  width: 48px;
  height: 2px;
  background: #C4872A;
  margin: 0 auto 24px;
  border-radius: 1px;
}
.zsc-faq-h2 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 600;
  color: #2d1f4a;
  margin: 0 0 12px;
}
.zsc-faq-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #5a4a72;
  max-width: 320px;
  margin: 0 auto 16px;
  line-height: 1.6;
}
.zsc-faq-link {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #7C5CBF;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.zsc-faq-link:hover { color: #6B4DA8; }

/* ── Tablet ≥768px ─────────────────────────────────── */
@media (min-width: 768px) {
  #zsc-page { padding: 64px 0; }
  .zsc-wrap { padding: 0 32px; }
  .zsc-h1 { font-size: 40px; }
}

/* ── Desktop ≥1024px ───────────────────────────────── */
@media (min-width: 1024px) {
  #zsc-page { padding: 80px 0; }
  .zsc-wrap { padding: 0 64px; }

  .zsc-layout {
    grid-template-columns: 1fr 1.2fr;
    gap: 96px;
    align-items: start;
  }

  .zsc-h1 { font-size: 44px; }
  .zsc-h2 { font-size: 30px; }

  .zsc-form-row { margin-bottom: 16px; }
  .zsc-form-full { margin-bottom: 16px; }
}

/* ── Support page: newsletter pre-footer ───────────── */
.zsc-newsletter {
  text-align: center;
  padding: 64px 24px;
  border-top: 1px solid #e8e4f0;
  margin-top: 0;
}
.zsc-newsletter-heading {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 600;
  color: #2d1f4a;
  line-height: 1.35;
  max-width: 520px;
  margin: 0 auto 12px;
}
.zsc-newsletter-sub {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #5a4a72;
  margin: 0 auto 24px;
}
@media (min-width: 768px) {
  .zsc-newsletter { padding: 80px 32px; }
  .zsc-newsletter-heading { font-size: 34px; }
}

/* Newsletter fallback form (hidden when Klaviyo loads) */
.klaviyo-form-VvHGd4:not(:empty) + .zsc-newsletter-fallback { display: none; }
.zsc-newsletter-form {
  display: flex;
  gap: 0;
  max-width: 440px;
  margin: 0 auto;
}
.zsc-newsletter-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #e8e4f0;
  border-right: none;
  border-radius: 10px 0 0 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #2d1f4a;
  background: #fff;
  outline: none;
}
.zsc-newsletter-input::placeholder { color: rgba(45,31,74,0.4); }
.zsc-newsletter-input:focus { border-color: #7C5CBF; }
.zsc-newsletter-btn {
  padding: 12px 24px;
  background: #7C5CBF;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   T-023  FAQs page  (/faqs/)
   ════════════════════════════════════════════════════════════ */

/* Remove GP's 1200px boxed container so #zfq-page's background runs
   edge-to-edge. .zfq-wrap still caps the actual content at 820px (with
   its own padding on the same element), so the visible content
   width/proportion is unchanged. Same fix as body.home — see the
   comment there for why both rules are needed together (the width:100%
   below already patches the .site-content flex-shrink half of that fix
   for #zfq-page specifically, but #page itself was still capping things
   upstream). */
body.page-id-113 #page.grid-container.container {
  max-width: 100% !important;
  width: 100% !important;
}
body.page-id-113 .site-content {
  display: block !important;
}

/* ── Page shell ──────────────────────────────────────────── */
#zfq-page {
  background: #F8F6FB;
  padding: 48px 0 0;
  width: 100%;      /* fix: site-content is a flex row; stretch main to full width */
  min-width: 0;
}
.zfq-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Hero ────────────────────────────────────────────────── */
#zfq-page .zfq-hero {
  text-align: center;
  padding-bottom: 48px;
}
.zfq-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C4872A;
  margin: 0 0 12px;
}
.zfq-h1 {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 700;
  color: #2d1f4a;
  line-height: 1.2;
  margin: 0 0 16px;
}
.zfq-intro {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #5a4a72;
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}

/* ── Category section ────────────────────────────────────── */
.zfq-section { padding: 40px 0 8px; }

.zfq-section-head {
  text-align: left;
  margin-bottom: 24px;
}
.zfq-cat-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C4872A;
  margin: 0 0 10px;
}
.zfq-cat-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  color: #2d1f4a;
  margin: 0;
  line-height: 1.25;
  text-align: left;
}

/* ── Accordion resets text-align to left ─────────────────── */
.zfq-accordion { text-align: left; }

/* ── Section divider (short amber rule) ──────────────────── */
.zfq-divider {
  width: 48px;
  height: 2px;
  background: #C4872A;
  border-radius: 1px;
  margin: 8px auto;
}

/* ── Accordion item (card style) ─────────────────────────── */
.zfq-item {
  border: 1.5px solid #e8e4f0;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #fff;
  overflow: hidden;
}
details[open].zfq-item { border-color: #C4872A; }

.zfq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2d1f4a;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.zfq-question::-webkit-details-marker { display: none; }

/* Amber circle +/− button */
.zfq-question::after {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #C4872A;
  color: #fff;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}
details[open] > .zfq-question::after { content: '−'; }

/* Divider between question and answer */
details[open] > .zfq-question { border-bottom: 1px solid #e8e4f0; }

/* ── Answer content ──────────────────────────────────────── */
.zfq-answer {
  padding: 16px 20px 22px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #5a4a72;
  line-height: 1.75;
}
.zfq-answer p { margin: 0 0 12px; }
.zfq-answer p:last-child { margin-bottom: 0; }
.zfq-answer ul,
.zfq-answer ol {
  margin: 6px 0 12px;
  padding-left: 22px;
}
.zfq-answer li { margin-bottom: 6px; line-height: 1.65; }
.zfq-answer a { color: #7C5CBF; text-decoration: underline; text-underline-offset: 2px; }
.zfq-answer a:hover { color: #6B4DA8; }
.zfq-answer strong { color: #2d1f4a; font-weight: 600; }

/* James Fadiman blockquotes */
.zfq-quote {
  margin: 14px 0 10px;
  padding: 14px 18px;
  border-left: 3px solid #C4872A;
  background: rgba(196,135,42,0.12);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.zfq-quote p { margin: 0; color: #2d1f4a; line-height: 1.7; font-size: 14px; }

/* ── CTA band ────────────────────────────────────────────── */
.zfq-cta {
  text-align: center;
  padding: 56px 16px 48px;
  margin-top: 32px;
  border-top: 1px solid #e8e4f0;
}
.zfq-cta-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C4872A;
  margin: 0 0 10px;
}
.zfq-cta-h2 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 600;
  color: #2d1f4a;
  margin: 0 0 12px;
}
.zfq-cta-sub {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #5a4a72;
  line-height: 1.65;
  max-width: 420px;
  margin: 0 auto 24px;
}
.zfq-cta-btn {
  display: inline-block;
  padding: 14px 36px;
  background: #7C5CBF;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s;
}
.zfq-cta-btn:hover { background: #6B4DA8; color: #fff; }

/* FAQ page Klaviyo fallback rule */
.klaviyo-form-RRMzkX:not(:empty) + .zsc-newsletter-fallback { display: none; }

/* ── Tablet ≥768px ───────────────────────────────────────── */
@media (min-width: 768px) {
  #zfq-page { padding: 64px 0 0; }
  .zfq-wrap { padding: 0 32px; }
  .zfq-h1 { font-size: 44px; }
  .zfq-hero { padding-bottom: 60px; }
  .zfq-cat-title { font-size: 30px; }
  .zfq-question { font-size: 16px; padding: 18px 22px; }
  .zfq-answer { font-size: 15px; }
  .zfq-cta-h2 { font-size: 30px; }
}

/* ── Desktop ≥1024px ─────────────────────────────────────── */
@media (min-width: 1024px) {
  #zfq-page { padding: 80px 0 0; }
  .zfq-wrap { padding: 0 48px; }
  .zfq-h1 { font-size: 52px; }
  .zfq-section { padding: 40px 0 10px; }
  .zfq-cat-title { font-size: 34px; }
}
.zsc-newsletter-btn:hover { background: #6B4DA8; }


/* ════════════════════════════════════════════════════════════
   REFERRAL PROGRAM PAGE  ·  zrp-
════════════════════════════════════════════════════════════ */

/* Remove GP's 1200px boxed container so #zrp-page's background runs
   edge-to-edge, and fix #zrp-page (an unsized flex item under GP's
   default .site-content) shrink-wrapping to its widest child's content
   instead of filling #page. Same fix as body.home / body.page-id-39680
   — see the comment on body.home for why both rules are needed
   together. */
body.page-id-31906 #page.grid-container.container {
  max-width: 100% !important;
  width: 100% !important;
}
body.page-id-31906 .site-content {
  display: block !important;
}

/* ── Page shell ──────────────────────────────────────────── */
#zrp-page { background: var(--z-bg); }

/* ── Layout helpers ──────────────────────────────────────── */
.zrp-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.zrp-narrow    { max-width: 720px;  margin: 0 auto; }
.zrp-center    { text-align: center; }

/* FAQ + Terms should read at the same 1200px width as "How it works"
   above them, not the narrower 720px .zrp-narrow used for the single
   "Why we wait" card. */
.zrp-faq .zrp-narrow,
.zrp-terms .zrp-narrow {
  max-width: none;
}

/* ── Typography ──────────────────────────────────────────── */
.zrp-eyebrow    { font: 600 11px/1 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--z-muted); margin: 0 0 14px; }
.zrp-h1         { font: 700 38px/1.1 'Playfair Display', serif; color: var(--z-dark); margin: 0 0 14px; }
.zrp-section-h2 { font: 700 26px/1.2 'Playfair Display', serif; color: var(--z-dark); margin: 0 0 10px; }
.zrp-section-sub { font: 400 15px/1.6 'Inter', sans-serif; color: var(--z-muted); margin: 0 0 36px; }

/* ── S1: Hero ────────────────────────────────────────────── */
.zrp-hero { padding: 48px 0 40px; }
.zrp-hero-inner { display: flex; flex-direction: column; gap: 28px; }
.zrp-hero-sub   { font: 400 15px/1.6 'Inter', sans-serif; color: var(--z-muted); margin: 0 0 20px; }

.zrp-pills { display: flex; flex-direction: column; gap: 8px; }
.zrp-pill  { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--z-r-pill); font: 500 13px/1.4 'Inter', sans-serif; }
.zrp-pill--amber  { background: #FEF3E2; color: var(--z-amber);  border: 1px solid #F5D9A8; }
.zrp-pill--purple { background: #EDE8F5; color: var(--z-purple); border: 1px solid #D8CFF0; }

/* Right card — shared */
.zrp-hero-card     { background: #fff; border: 1px solid var(--z-border); border-radius: var(--z-r-card); padding: 28px; }
.zrp-card-eyebrow  { font: 600 10px/1 'Inter', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--z-muted); margin: 0 0 10px; }

/* Logged-out card */
.zrp-card-heading { font: 700 19px/1.3 'Playfair Display', serif; color: var(--z-dark); margin: 0 0 10px; }
.zrp-card-body    { font: 400 14px/1.6 'Inter', sans-serif; color: var(--z-muted); margin: 0 0 18px; }
.zrp-signin-btn   { display: block; width: 100%; padding: 13px; background: var(--z-purple); color: #fff; text-align: center; border-radius: var(--z-r-btn); font: 600 14px/1.2 'Inter', sans-serif; text-decoration: none; transition: opacity 0.15s; }
.zrp-signin-btn:hover { opacity: 0.88; color: #fff; }
.zrp-card-footer  { text-align: center; font: 400 13px/1 'Inter', sans-serif; color: var(--z-muted); margin: 10px 0 0; }
.zrp-create-link  { color: var(--z-purple); text-decoration: none; }
.zrp-create-link:hover { text-decoration: underline; }

/* Logged-in card */
.zrp-link-field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--z-border); border-radius: var(--z-r-input); padding: 10px 12px; background: var(--z-bg); margin: 0 0 14px; }
.zrp-link-text  { flex: 1; font: 400 12px/1.4 'Inter', sans-serif; color: var(--z-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.zrp-copy-btn   { background: var(--z-purple); color: #fff; border: none; border-radius: var(--z-r-pill); padding: 6px 14px; font: 600 12px/1.2 'Inter', sans-serif; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: opacity 0.15s; }
.zrp-copy-btn:hover { opacity: 0.88; }

.zrp-share-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; }
.zrp-share-btn { display: flex; align-items: center; justify-content: center; padding: 9px 4px; border: 1.5px solid var(--z-border); border-radius: var(--z-r-card); background: #fff; color: var(--z-dark); font: 500 12px/1.2 'Inter', sans-serif; text-decoration: none; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; white-space: nowrap; }
.zrp-share-btn:hover { border-color: var(--z-purple); background: #EDE8F5; color: var(--z-purple); }
.zrp-share-caption { text-align: center; font: 400 12px/1 'Inter', sans-serif; color: var(--z-muted); margin: 0; }

/* ── S2: Stats Strip ─────────────────────────────────────── */
.zrp-stats { padding: 40px 0; border-top: 1px solid var(--z-border); border-bottom: 1px solid var(--z-border); background: #fff; }
.zrp-stats-heading { font: 700 24px/1.2 'Playfair Display', serif; color: var(--z-dark); margin: 0 0 6px; }
.zrp-stats-sub     { font: 400 14px/1.5 'Inter', sans-serif; color: var(--z-muted); margin: 0 0 28px; }
.zrp-stats-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 20px; }
.zrp-stat-card     { background: #F3F1F9; border-radius: 16px; padding: 20px 22px 22px; display: flex; flex-direction: column; }
.zrp-stat-icon     { width: 36px; height: 36px; border-radius: 50%; background: #E6E2F4; display: flex; align-items: center; justify-content: center; color: var(--z-purple); margin-bottom: 16px; flex-shrink: 0; }
.zrp-stat-num      { font: 700 32px/1 'Playfair Display', serif; color: var(--z-dark); margin-bottom: 6px; }
.zrp-stat-label    { font: 400 13px/1.3 'Inter', sans-serif; color: var(--z-muted); }
.zrp-stat-amber    { font: 500 12px/1.4 'Inter', sans-serif; color: var(--z-amber); margin-top: 4px; }
.zrp-history-link  { color: var(--z-purple); font: 500 14px/1 'Inter', sans-serif; text-decoration: none; }
.zrp-history-link:hover { text-decoration: underline; }

/* ── S3: How It Works ────────────────────────────────────── */
.zrp-hiw { padding: 56px 0; }
.zrp-steps { display: flex; flex-direction: column; gap: 32px; margin-top: 8px; }
.zrp-step  { display: flex; flex-direction: column; gap: 10px; }
.zrp-step-num   { width: 36px; height: 36px; border-radius: 50%; background: var(--z-purple); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 15px/1 'Inter', sans-serif; flex-shrink: 0; }
.zrp-step-title { font: 700 16px/1.3 'Playfair Display', serif; color: var(--z-dark); margin: 0; }
.zrp-step-body  { font: 400 14px/1.6 'Inter', sans-serif; color: var(--z-muted); margin: 0; }

/* ── S4: Why We Wait ─────────────────────────────────────── */
.zrp-why { padding: 0 0 56px; }
.zrp-why-card { background: #FEF9EE; border: 1px solid #F0D98A; border-left: 4px solid var(--z-amber); border-radius: var(--z-r-card); padding: 24px 28px; }
.zrp-why-h2   { display: flex; align-items: center; gap: 10px; font: 700 18px/1.3 'Playfair Display', serif; color: var(--z-dark); margin: 0 0 14px; }
.zrp-why-icon { color: var(--z-amber); flex-shrink: 0; }
.zrp-why-body { font: 400 14px/1.7 'Inter', sans-serif; color: var(--z-muted); margin: 0 0 12px; }
.zrp-why-body:last-child { margin-bottom: 0; }

/* ── S5: FAQ ─────────────────────────────────────────────── */
.zrp-faq { padding: 56px 0; border-top: 1px solid var(--z-border); }
.zrp-accordion { }
.zrp-faq-item  { border-bottom: 1px solid var(--z-border); }
.zrp-faq-item:first-of-type { border-top: 1px solid var(--z-border); }
.zrp-faq-q     { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; cursor: pointer; gap: 14px; list-style: none; }
.zrp-faq-q::-webkit-details-marker, .zrp-faq-q::marker { display: none; content: ''; }
.zrp-faq-h2    { font: 600 14px/1.4 'Inter', sans-serif; color: var(--z-dark); margin: 0; display: inline; flex: 1; }
.zrp-faq-icon  { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--z-purple); color: var(--z-purple); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; line-height: 1; transition: transform 0.2s; }
.zrp-faq-icon::before  { content: '+'; }
.zrp-faq-item[open] .zrp-faq-icon::before { content: '−'; }
.zrp-faq-a     { padding: 0 36px 16px 0; }
.zrp-faq-a p   { font: 400 14px/1.7 'Inter', sans-serif; color: var(--z-muted); margin: 0; }

/* ── S6: Terms & Rules ───────────────────────────────────── */
.zrp-terms { padding: 0 0 64px; border-top: 1px solid var(--z-border); padding-top: 56px; }
.zrp-terms .zrp-section-h2 { margin-bottom: 20px; }
.zrp-terms-card  { background: #F3F0F9; border: 1px solid var(--z-border); border-radius: var(--z-r-card); padding: 24px 28px; }
.zrp-terms-intro { display: flex; align-items: flex-start; gap: 8px; font: 400 14px/1.6 'Inter', sans-serif; color: var(--z-muted); margin: 0 0 18px; }
.zrp-info-icon   { color: var(--z-purple); flex-shrink: 0; margin-top: 2px; }
.zrp-rules       { margin: 0 0 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 14px; }
.zrp-rules li    { font: 400 14px/1.6 'Inter', sans-serif; color: var(--z-muted); padding-left: 2px; }
.zrp-rules li strong { color: var(--z-dark); font-weight: 600; }
.zrp-terms-footer { font: 400 12px/1.5 'Inter', sans-serif; color: var(--z-muted); text-align: center; margin: 0; padding-top: 14px; border-top: 1px solid var(--z-border); }
.zrp-terms-link   { color: var(--z-purple); text-decoration: none; }
.zrp-terms-link:hover { text-decoration: underline; }

/* ── Tablet ≥768px ───────────────────────────────────────── */
@media (min-width: 768px) {
  .zrp-container  { padding: 0 40px; }
  .zrp-h1         { font-size: 48px; }
  .zrp-section-h2 { font-size: 30px; }
  .zrp-pills      { flex-direction: row; flex-wrap: wrap; }
  .zrp-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .zrp-why-card   { padding: 28px 36px; }
  .zrp-terms-card { padding: 28px 36px; }
}

/* ── Desktop ≥1024px ─────────────────────────────────────── */
@media (min-width: 1024px) {
  .zrp-container   { padding: 0 64px; }
  .zrp-hero        { padding: 64px 0 56px; }
  .zrp-hero-inner  { flex-direction: row; align-items: flex-start; gap: 56px; }
  .zrp-hero-left   { flex: 1; min-width: 0; }
  .zrp-hero-card   { flex: 0 0 340px; }
  .zrp-h1          { font-size: 54px; }
  .zrp-section-h2  { font-size: 32px; }
  .zrp-section-sub { font-size: 16px; }
  .zrp-hiw         { padding: 64px 0; }
  .zrp-steps       { flex-direction: row; gap: 40px; }
  .zrp-step        { flex: 1; }
  .zrp-why         { padding: 0 0 64px; }
  .zrp-faq         { padding: 64px 0; }
  .zrp-faq-h2      { font-size: 15px; }
}

/* ================================================================
   T-HP-D: HOMEPAGE — TABLET ≥768px / DESKTOP ≥1024px
   Mobile base (.zh-* .zcs-* .zpg-* .zsf-* .zhiw-* .zb-* .ze-*
   .zr-* .zseo-*) left untouched — these blocks only add on top.
   ================================================================ */

/* ── Tablet ≥768px ─────────────────────────────────────────────── */
@media (min-width: 768px) {

  /* Container: expand width, no horizontal padding — sections manage their own */
  .zoomies-content-wrap {
    max-width: 1200px;
    padding: 0;
    box-sizing: border-box;
  }

  /* ── Hero ── */
  .zh-hero    { padding: 64px 32px 48px; }
  .zh-h1      { font-size: 48px; line-height: 1.1; }
  .zh-cta-wrap { flex-direction: row; gap: 12px; }
  .zh-btn-primary,
  .zh-btn-outline { width: auto; flex: 1; }
  .zh-cards   { gap: 16px; margin-bottom: 24px; }

  /* Trust strip: items visible, no overflow */
  .zh-trust-inner { overflow: visible; flex-wrap: wrap; }
  .zh-trust-item  { flex: 1 0 20%; min-width: 140px; white-space: normal; padding: 18px 24px; }

  /* Intro */
  .zh-intro-inner { padding: 32px 32px; }

  /* Category tiles — section owns the 32px side padding; 3-across wrap */
  .zcs-section { padding: 56px 32px 40px; }
  .zcs-header  { padding: 0; }
  .zcs-scroll  { flex-wrap: wrap; overflow-x: visible; padding: 4px 0 8px; gap: 16px; }
  .zcs-tile    { flex-shrink: 0; width: calc(33.333% - 11px); }

  /* Product grid — 3 columns */
  .zpg-section  { padding: 56px 32px 40px; }
  .zpg-header   { padding: 0; }
  .zpg-tabs-row { padding: 0 0 14px; flex-wrap: wrap; overflow-x: visible; }
  .zpg-grid     { grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0; }

  /* How it works */
  .zhiw-section { padding: 56px 32px; }
  .zhiw-step    { padding: 18px 12px; }

  /* Brands — 4 columns; inner wrapper owns the padding */
  .zb-section { padding: 56px 0 40px; }
  .zb-inner   { padding: 0 32px; }
  .zb-grid    { grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0; }

  /* Email — inline form */
  .ze-section { padding: 56px 32px 40px; }
  .ze-form    { flex-direction: row; gap: 10px; }
  .ze-input   { flex: 1; width: auto; }
  .ze-btn     { white-space: nowrap; }

  /* Reviews — 2-column cards */
  .zr-section    { padding: 56px 0 40px; }
  .zr-inner      { padding: 0 32px; }
  .zr-cards-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* SEO accordions */
  .zseo-section { padding: 56px 0 40px; }
  .zseo-inner   { padding: 0 32px; }
  /* Tablet viewports never exceed the shared rule's 1200px max-width, so
     margin-left/right: auto there would resolve to 0 (no gutter) — keep
     a real 32px gutter at this tier instead. */
  .zseo-acc     { margin-top: 0; margin-right: 32px; margin-bottom: 10px; margin-left: 32px; }
}

/* ── Desktop ≥1024px ───────────────────────────────────────────── */
@media (min-width: 1024px) {

  /* Container: 1200px max, no horizontal padding — each section owns its spacing */
  .zoomies-content-wrap {
    max-width: 1200px;
    padding: 0;
    box-sizing: border-box;
  }

  /* ── HERO — two-column split (55% / 45%), owns its 64px side padding ── */
  .zh-hero {
    display: grid;
    grid-template-columns: 55% 45%;
    column-gap: 56px;
    padding: 120px 64px 80px;
    align-items: start;
  }
  .zh-search   { grid-column: 1; grid-row: 1; }
  .zh-eyebrow  { grid-column: 1; grid-row: 2; }
  .zh-h1       { grid-column: 1; grid-row: 3; font-size: 62px; line-height: 1.06; margin-bottom: 20px; }
  .zh-desc     { grid-column: 1; grid-row: 4; font-size: 17px; margin-bottom: 28px; }
  .zh-cta-wrap { grid-column: 1; grid-row: 5; flex-direction: row; gap: 14px; margin-bottom: 32px; }
  .zh-btn-primary,
  .zh-btn-outline { width: auto; flex: 0 0 auto; padding: 16px 28px; }
  .zh-stats    { grid-column: 1; grid-row: 6; }
  .zh-cards    {
    grid-column: 2;
    grid-row: 1 / 7;
    align-self: center;
    margin-bottom: 0;
    max-width: 100%;
    gap: 24px;
  }

  /* Trust strip */
  .zh-trust-inner { overflow: hidden; flex-wrap: nowrap; }
  .zh-trust-item  { flex: 1; justify-content: center; min-width: 0; white-space: normal; padding: 20px 32px; }

  /* Intro: .zh-intro-inner owns 64px side padding and is already capped
     to 1200px + centered by the shared rule near #zoomies-homepage above */
  .zh-intro-inner { padding: 48px 64px; }
  .zh-intro h2 { font-size: 28px; }
  .zh-intro p  { font-size: 16px; }

  /* ── CATEGORY TILES — 5 across; section bleeds edge-to-edge (no
     horizontal padding of its own — that would add an extra, viewport-
     dependent offset on top of .zcs-header/.zcs-scroll's own 1200px
     centering+padding and misalign it with sections like Shop by Brand
     around the 1280–1366px laptop-width range). Side gutter now lives
     on .zcs-header/.zcs-scroll themselves, same pattern as .zb-inner. */
  .zcs-section { padding: 80px 0; }
  .zcs-header  { padding: 0 64px; margin-bottom: 32px; }
  .zcs-title   { font-size: 34px; }
  .zcs-scroll  { flex-wrap: nowrap; overflow-x: visible; padding: 8px 64px 12px; gap: 20px; }
  .zcs-tile {
    flex: 1;
    width: auto;
    min-width: 0;
    flex-shrink: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .zcs-tile:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 32px rgba(44, 31, 74, 0.20);
  }

  /* ── PRODUCT GRID — 4 columns; section bleeds edge-to-edge, same
     reasoning as Category Tiles above — gutter lives on the header/
     tabs/grid themselves, same pattern as .zb-inner ── */
  .zpg-section  { padding: 80px 0; }
  .zpg-header   { padding: 0 64px; margin-bottom: 28px; }
  .zpg-title    { font-size: 34px; }
  .zpg-tabs-row { padding: 0 64px 18px; overflow-x: visible; justify-content: center; flex-wrap: wrap; }
  .zpg-grid     { grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 0 64px; }
  .zpg-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(44, 31, 74, 0.15); }

  /* ── STRAIN FINDER — .zsf-card already self-centers (max-width:920 +
     margin:auto), section just owns the 64px gutter ── */
  .zsf-section { padding: 80px 64px; }
  #strain-quiz .zsf-card {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }
  .zsf-card-header { padding: 36px 32px 0; }
  .zsf-title { font-size: 32px; }
  .zsf-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 0 32px 16px;
  }
  .zsf-options.zsf-opts-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .zsf-option {
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
  }
  .zsf-opt-emoji { font-size: 34px; }
  .zsf-opt-text { align-items: center; }
  .zsf-next-btn { width: calc(100% - 64px); margin: 0 32px 28px; }
  .zsf-step-lbl { padding: 0 32px; }
  .zsf-card--result .zsf-card-header { padding: 24px 32px 0 !important; }
  .zsf-card--result #zsf-result { padding: 16px 32px 24px; }

  /* ── HOW IT WORKS — 4 cards in one row; section bleeds edge-to-edge,
     same reasoning as Category Tiles above — gutter lives on
     .zhiw-strip itself (added to the shared 1200px-centering rule
     above), same pattern as .zb-inner ── */
  .zhiw-section { padding: 80px 0; }
  .zhiw-strip   { padding: 0 64px; gap: 20px; }
  .zhiw-step    { padding: 24px 16px; }
  .zhiw-emoji   { font-size: 28px; }
  .zhiw-label   { font-size: 14px; height: auto; min-height: 0; }

  /* ── BRANDS — full-width dark section bleeds edge-to-edge; inner
     wrapper owns 64px padding and is already capped to 1200px + centered
     by the shared rule near #zoomies-homepage above ── */
  .zb-section   { padding: 80px 0; }
  .zb-inner     { padding: 0 64px; }
  .zb-grid      { grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 0; }
  .zb-title     { font-size: 34px; }
  .zb-logo-tile { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .zb-logo-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(44, 31, 74, 0.18);
    border-color: rgba(124, 92, 191, 0.45);
  }

  /* ── EMAIL CAPTURE — .ze-card already self-centers (max-width:800 +
     margin:auto), section just owns the 64px gutter ── */
  .ze-section { padding: 80px 64px; }
  .ze-card    { padding: 56px 72px; text-align: center; max-width: 800px; margin: 0 auto; }
  .ze-heading { font-size: 34px; }
  .ze-form    { flex-direction: row; gap: 12px; max-width: 640px; margin: 0 auto; }
  .ze-input   { flex: 1; width: auto; }
  .ze-btn     { white-space: nowrap; }
  .ze-perks   { flex-direction: row; justify-content: center; gap: 28px; }

  /* ── REVIEWS — full-width section bleeds edge-to-edge; inner wrapper
     owns 64px padding and is already capped to 1200px + centered by
     the shared rule near #zoomies-homepage above ── */
  .zr-section    { padding: 80px 0; }
  .zr-inner      { padding: 0 64px; }
  .zr-title      { font-size: 34px; margin-bottom: 32px; }
  .zr-cards-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .zr-summary    { gap: 36px; padding: 24px 28px; margin-bottom: 32px; }
  .zr-big        { font-size: 48px; }

  /* ── SEO ACCORDIONS — full-width section bleeds edge-to-edge; the
     title block and each accordion item (siblings, not nested) both
     own 64px padding/margin and are already capped to 1200px + centered
     by the shared rule near #zoomies-homepage above. .zseo-acc must
     explicitly re-assert margin-left/right: auto here — the base rule
     sets a fixed 18px via longhand, which (being later in the cascade
     than the shared rule) would otherwise win and prevent centering. */
  .zseo-section       { padding: 80px 0; }
  .zseo-inner         { padding: 0 64px; margin-bottom: 32px; }
  .zseo-section-title { font-size: 34px; }
  .zseo-acc    { margin-top: 0; margin-right: auto; margin-bottom: 10px; margin-left: auto; }
  .zseo-header { padding: 20px 28px; }
  .zseo-body   { padding: 0 28px; }
  .zseo-check:checked ~ .zseo-body { padding: 0 28px 22px; }
  .zseo-title  { font-size: 16px; }
}

/* ── Cart Drawer ─────────────────────────────────────────────────────────── */

#zd-cart-drawer[aria-hidden="true"] { display: none; }

#zd-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 600;
}

.zd-cart-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

.zd-cart-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(380px, 100vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  overflow: hidden;
}

#zd-cart-drawer[aria-hidden="false"] .zd-cart-panel {
  transform: translateX(0);
}

body.zd-cart-open { overflow: hidden; }

/* Head */
.zd-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #e8e4f0;
  flex-shrink: 0;
}

.zd-cart-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zd-cart-title-text {
  font: 700 22px/1 'Playfair Display', serif;
  color: #2d1f4a;
}

.zd-cart-badge {
  background: #7C5CBF;
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font: 700 12px/24px 'Inter', sans-serif;
  text-align: center;
  flex-shrink: 0;
}

.zd-cart-item-count {
  font: 400 14px/1 'Inter', sans-serif;
  color: #5a4a72;
}

.zd-cart-close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #2d1f4a;
  cursor: pointer;
  padding: 4px 6px;
}

/* Fragment (scrollable area) */
.zd-cart-fragment {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.zd-cart-fragment.zd-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Empty state ── */
.zd-cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
}

.zd-empty-title {
  font: 700 20px/1.2 'Playfair Display', serif;
  color: #2d1f4a;
  margin: 6px 0 0;
}

.zd-empty-sub {
  font: 400 14px/1.4 'Inter', sans-serif;
  color: #5a4a72;
  margin: 0;
}

.zd-empty-shop-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 14px 36px;
  background: #7C5CBF;
  color: #fff;
  border-radius: 12px;
  font: 600 15px/1 'Inter', sans-serif;
  text-decoration: none;
  transition: background 0.15s;
}

.zd-empty-shop-btn:hover { background: #6a4da8; color: #fff; }

/* ── Shipping banner ── */
.zd-shipping-banner {
  background: #FEF3E2;
  padding: 12px 20px 14px;
  flex-shrink: 0;
}

.zd-shipping-msg {
  font: 500 13px/1.3 'Inter', sans-serif;
  color: #8A5C1A;
  margin: 0 0 8px;
}

.zd-shipping-track {
  height: 6px;
  background: #e8d5b0;
  border-radius: 3px;
  overflow: hidden;
}

.zd-shipping-fill {
  height: 100%;
  background: #C4872A;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* ── Cart items ── */
.zd-cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
}

.zd-cart-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #f0edf7;
}

.zd-item-img {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: #f8f6fb;
}

.zd-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.zd-item-body { flex: 1; min-width: 0; }

.zd-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 3px;
}

.zd-item-name {
  font: 600 14px/1.3 'Inter', sans-serif;
  color: #2d1f4a;
}

.zd-item-remove {
  background: none;
  border: none;
  color: #b0a4cc;
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.zd-item-remove:hover { color: #2d1f4a; }

.zd-item-variant {
  display: block;
  font: 400 13px/1 'Inter', sans-serif;
  color: #5a4a72;
  margin-bottom: 10px;
}

.zd-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zd-qty-ctrl {
  display: flex;
  align-items: center;
  border: 1px solid #e8e4f0;
  border-radius: 8px;
  overflow: hidden;
}

.zd-qty-btn {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  font-size: 17px;
  color: #2d1f4a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}

.zd-qty-btn:hover { background: #f3f0fa; }

.zd-qty-num {
  font: 500 14px/1 'Inter', sans-serif;
  color: #2d1f4a;
  min-width: 28px;
  text-align: center;
}

.zd-item-price {
  font: 600 15px/1 'Inter', sans-serif;
  color: #2d1f4a;
}

/* ── Footer ── */
.zd-cart-footer {
  flex-shrink: 0;
  padding: 14px 20px 24px;
  border-top: 1px solid #e8e4f0;
  background: #fff;
}

.zd-promo-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 14px/1 'Inter', sans-serif;
  color: #7C5CBF;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 14px;
  width: 100%;
  text-align: left;
}

.zd-totals { margin-bottom: 16px; }

.zd-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 400 14px/2 'Inter', sans-serif;
  color: #2d1f4a;
}

.zd-total-grand { font-size: 15px; }
.zd-total-grand strong { font-weight: 700; }

.zd-ship-orig { color: #b0a4cc; }
.zd-free-label { color: #2e7d32; font-weight: 600; }

.zd-checkout-btn {
  display: block;
  width: 100%;
  padding: 15px;
  background: #7C5CBF;
  color: #fff;
  border-radius: 12px;
  font: 600 16px/1 'Inter', sans-serif;
  text-align: center;
  text-decoration: none;
  margin-bottom: 12px;
  transition: background 0.15s;
  box-sizing: border-box;
}

.zd-checkout-btn:hover { background: #6a4da8; color: #fff; }

.zd-continue-btn {
  display: block;
  text-align: center;
  font: 500 14px/1 'Inter', sans-serif;
  color: #C4872A;
  text-decoration: none;
}

.zd-continue-btn:hover { text-decoration: underline; }

/* ── cart-for-woocommerce plugin overrides ─────────────────────────────────
   Targets the plugin's own class names to match Zoomies design.
   Plugin HTML is untouched; only CSS is overridden here.
   ───────────────────────────────────────────────────────────────────────── */

/* Hide plugin's floating cart button — we use our own header icon */
#fkcart-floating-toggler { display: none !important; }

/* Match fkcart drawer width to hamburger menu drawer — both desktop + mobile */
#fkcart-modal {
  --fkcart-slider-desktop-width: 380px;
}

/* Admin bar offset — fkcart z-index (999999999) exceeds WP admin bar (99999) so we
   push both the backdrop and the panel down when the admin bar is present */
.admin-bar .fkcart-modal-backdrop { top: 32px !important; }
.admin-bar .fkcart-preview-ui    { top: 32px !important; height: calc(100% - 32px) !important; max-height: calc(100% - 32px) !important; }
@media screen and (max-width: 782px) {
  .admin-bar .fkcart-modal-backdrop { top: 46px !important; }
  .admin-bar .fkcart-preview-ui    { top: 46px !important; height: calc(100% - 46px) !important; max-height: calc(100% - 46px) !important; }
}

/* Hamburger drawer panel — keep it below admin bar (panel has low z-index so admin bar
   already overlays it, but padding it down prevents content being hidden behind the bar) */
.admin-bar .zoomies-overlay-inner { top: 32px !important; }
@media screen and (max-width: 782px) {
  .admin-bar .zoomies-overlay-inner { top: 46px !important; }
}

/* ── Free-shipping progress banner ─────────────────────────────────────── */
.zd-shipping-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 16px 4px;
  padding: 13px 16px;
  border-radius: 12px;
}

.zd-shipping-min-order { background: #FDECEA; }
.zd-shipping-pending   { background: #EDEAF7; }
.zd-shipping-qualified { background: #FEF3E2; }

.zd-shipping-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zd-shipping-min-order .zd-shipping-icon { background: #f9d0cc; color: #c0392b; }
.zd-shipping-pending   .zd-shipping-icon { background: #ddd8f0; color: #7C5CBF; }
.zd-shipping-qualified .zd-shipping-icon { background: #f5e4c0; color: #C4872A; }

.zd-shipping-content { flex: 1; min-width: 0; }

.zd-shipping-message {
  font-size: 13px;
  font-weight: 500;
  color: #2d1f4a;
  margin: 0 0 8px;
  line-height: 1.4;
}
.zd-shipping-message strong { font-weight: 700; }
.zd-shipping-message .woocommerce-Price-amount { font-weight: 700; }

.zd-shipping-track {
  height: 6px;
  border-radius: 99px;
  background: rgba(0,0,0,0.10);
  overflow: hidden;
}

.zd-shipping-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}
.zd-shipping-min-order .zd-shipping-fill { background: #e74c3c; }
.zd-shipping-pending   .zd-shipping-fill { background: #7C5CBF; }
.zd-shipping-qualified .zd-shipping-fill { background: #C4872A; width: 100% !important; }

/* Overlay */
.fkcart-modal-backdrop {
  background: rgba(0,0,0,0.45) !important;
}

/* Drawer panel */
.fkcart-preview-ui {
  background: #fff !important;
  width: 88% !important;
  max-width: 380px !important;
  border-radius: 0 !important;
  box-shadow: -4px 0 32px rgba(44,31,74,0.12) !important;
  font-family: 'Inter', sans-serif !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── Header: hide plugin's original, show our replacement ── */
.fkcart-slider-header { display: none !important; }

.zd-fk-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid #e8e4f0 !important;
  background: #fff !important;
}

.zd-fk-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.zd-fk-title {
  font: 700 22px/1 'Playfair Display', serif !important;
  color: #2d1f4a !important;
}

.zd-fk-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #7C5CBF !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 22px !important;
  height: 22px !important;
  font: 700 12px/1 'Inter', sans-serif !important;
}

.zd-fk-count {
  font: 400 14px/1 'Inter', sans-serif !important;
  color: #5a4a72 !important;
}

.zd-fk-close {
  background: none !important;
  border: none !important;
  color: #2d1f4a !important;
  cursor: pointer !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Shipping / rewards progress bar ── */
/* Plugin's own reward panel — hidden; we render our own .zd-shipping-banner */
.fkcart-reward-panel { display: none !important; }
.rs_message_for_single_product { display: none !important; }

/* fkcart-reward-message / progress-bar styles removed — panel is hidden */

/* ── Cart items ── */
.fkcart-slider-body {
  padding: 0 20px !important;
  background: #fff !important;
}

.fkcart--item {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #f0edf7 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.fkcart--item:last-child { border-bottom: none !important; }

/* Thumbnail */
.fkcart-thumb-wrap {
  flex-shrink: 0 !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #f8f6fb !important;
  position: static !important; /* allow remove button to position against .fkcart--item */
}

.fkcart-thumb-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Remove button — reposition to top-right of the item row */
.fkcart-remove-item {
  position: absolute !important;
  top: 16px !important;
  right: 0 !important;
  left: auto !important;
  background: none !important;
  border: none !important;
  color: #b0a4cc !important;
  cursor: pointer !important;
  padding: 2px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.15s !important;
}

.fkcart-remove-item:hover { color: #2d1f4a !important; }
.fkcart-remove-item {
  top: 28px !important;
  right: 20px !important;
}
.fkcart-remove-item span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
}
.fkcart-remove-item svg { width: 24px !important; height: 24px !important; }

/* Item info area */
.fkcart-item-info {
  flex: 1 !important;
  min-width: 0 !important;
  padding-right: 62px !important; /* room for absolute trash (top) + price (bottom) */
}

.fkcart-item-meta {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.fkcart-item-title-price {
  font: 600 14px/1.3 'Inter', sans-serif !important;
  color: #2d1f4a !important;
  margin-bottom: 3px !important;
}

.fkcart-item-meta-content {
  font: 400 13px/1 'Inter', sans-serif !important;
  color: #5a4a72 !important;
  margin-bottom: 10px !important;
}

/* Quantity control */
.fkcart-quantity-selector {
  display: flex !important;
  align-items: center !important;
  border: 1px solid #e8e4f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #fff !important;
  width: fit-content !important;
}

.fkcart-quantity-button {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: #2d1f4a !important;
  font-size: 17px !important;
  transition: background 0.12s !important;
}

.fkcart-quantity-button:hover { background: #f3f0fa !important; }

.fkcart-quantity__input {
  width: 32px !important;
  text-align: center !important;
  border: none !important;
  background: none !important;
  font: 500 14px/1 'Inter', sans-serif !important;
  color: #2d1f4a !important;
  padding: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Price — absolutely placed at bottom-right of .fkcart--item */
.fkcart-item-misc {
  position: static !important;
}

.fkcart-item-price {
  display: block !important;
  position: absolute !important;
  bottom: 16px !important;
  right: 0 !important;
  font: 600 14px/1 'Inter', sans-serif !important;
  color: #2d1f4a !important;
  white-space: nowrap !important;
}

/* ── Empty state ── */
.fkcart-zero-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 24px !important;
  text-align: center !important;
  flex: 1 !important;
}

.fkcart-icon-cart svg {
  width: 56px !important;
  height: 56px !important;
  color: #9b8bbb !important;
  stroke: #9b8bbb !important;
}

.fkcart-zero-state-title {
  font: 700 20px/1.2 'Playfair Display', serif !important;
  color: #2d1f4a !important;
  margin: 14px 0 8px !important;
}

.fkcart-zero-state-text {
  font: 400 14px/1.4 'Inter', sans-serif !important;
  color: #5a4a72 !important;
  margin: 0 0 20px !important;
}

.fkcart-shop-button,
.fkcart-primary-button.fkcart-shop-button {
  display: inline-block !important;
  padding: 14px 36px !important;
  background: #7C5CBF !important;
  color: #fff !important;
  border-radius: 12px !important;
  font: 600 15px/1 'Inter', sans-serif !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

.fkcart-shop-button:hover { background: #6a4da8 !important; color: #fff !important; }

/* ── Coupon area ── */
.fkcart-coupon-area {
  padding: 0 20px !important;
  background: #fff !important;
}

.fkcart-coupon-head {
  padding: 12px 0 !important;
  border-top: 1px solid #e8e4f0 !important;
  background: #fff !important;
}

.fkcart-coupon-title {
  font: 500 14px/1 'Inter', sans-serif !important;
  color: #7C5CBF !important;
}

.fkcart-coupon-input-wrap {
  display: flex !important;
  gap: 8px !important;
  padding-bottom: 12px !important;
}

#fkcart-coupon__input {
  flex: 1 !important;
  border: 1px solid #e8e4f0 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font: 400 14px/1 'Inter', sans-serif !important;
  color: #2d1f4a !important;
  outline: none !important;
}

#fkcart-coupon__input:focus { border-color: #7C5CBF !important; }

.fkcart-coupon-button {
  background: #2d1f4a !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font: 600 14px/1 'Inter', sans-serif !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

/* Applied coupon badge */
.fkcart-coupon-code {
  background: #7C5CBF !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font: 500 13px/1 'Inter', sans-serif !important;
}

/* ── Order summary / totals ── */
.fkcart-order-summary {
  padding: 12px 20px 0 !important;
  background: #fff !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.fkcart-summary-line-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font: 400 14px/2 'Inter', sans-serif !important;
  color: #2d1f4a !important;
  border: none !important;
}

/* Subtotal row — regular weight */
.fkcart-subtotal-wrap strong {
  font-weight: 400 !important;
  font-size: 14px !important;
}

/* Hide "Shipping & taxes may be recalculated" note */
.fkcart-shipping-tax-calculation-text { display: none !important; }

/* Shipping FREE row */
.zd-summary-shipping {
  border-top: 1px solid #f0edf7 !important;
  padding-top: 6px !important;
  margin-top: 2px !important;
}

.zd-shipping-original {
  text-decoration: line-through !important;
  color: #9b8bbb !important;
  font-size: 13px !important;
  margin-right: 4px !important;
}

.zd-free-badge {
  display: inline-block !important;
  font: 700 13px/1 'Inter', sans-serif !important;
  color: #22863a !important;
  background: #dcf5e4 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}

/* Total row */
.zd-summary-total {
  border-top: 1px solid #e8e4f0 !important;
  padding-top: 10px !important;
  margin-top: 6px !important;
}

.zd-summary-total strong {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #2d1f4a !important;
}

/* Store credit / fee line items */
.zd-summary-fee { font-size: 13px !important; }
.zd-summary-fee .zd-fee-amount { color: #2a7a2a !important; font-weight: 500 !important; }

/* ── Cart drawer: Zoom Points section ── */
.zd-points-section {
  padding: 10px 0 6px;
  border-bottom: 1px solid #f0edf8;
  margin: 0 0 4px;
}
.zd-points-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #a899cc;
  margin-bottom: 8px;
}
.zd-points-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  margin-bottom: 6px;
}
.zd-pts-value { color: #2a7a2a; font-weight: 500; }
.zd-points-input-row { display: flex; gap: 8px; }
.zd-points-input {
  flex: 1;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #d8d1ec;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
}
.zd-points-input:focus { border-color: #7C5CBF; }
.zd-points-apply-btn {
  height: 34px;
  padding: 0 14px;
  background: #7C5CBF;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.zd-points-apply-btn:hover { background: #6a4daa; }
.zd-points-apply-btn:disabled { opacity: .6; cursor: default; }
.zd-points-feedback {
  font-size: 12px;
  margin: 5px 0 0;
  min-height: 16px;
}
.zd-points-feedback.zd-msg-ok { color: #2a7a2a; }
.zd-points-feedback.zd-msg-err { color: #c0392b; }
.zd-points-applied-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.zd-points-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: #f0f7ee;
  color: #2a7a2a;
}
.zd-points-right { display: flex; align-items: center; gap: 8px; }
.zd-points-amount { font-size: 13px; font-weight: 500; color: #2a7a2a; }
.zd-rm-points {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: #ede8f7;
  cursor: pointer;
  padding: 0;
}
.zd-rm-points:hover { background: #ddd5f0; }
.zd-rm-points.zd-removing svg { display: none; }
.zd-rm-points.zd-removing::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border: 1.5px solid #d0c8e8;
  border-top-color: #7C5CBF;
  border-radius: 50%;
  animation: zco-spin 0.65s linear infinite;
}

/* ── Checkout button ── */
.fkcart-checkout-wrap {
  padding: 14px 20px 24px !important;
  background: #fff !important;
  border-top: 1px solid #e8e4f0 !important;
}

#fkcart-checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 15px !important;
  background: #7C5CBF !important;
  color: #fff !important;
  border-radius: 12px !important;
  font: 600 16px/1 'Inter', sans-serif !important;
  text-decoration: none !important;
  margin-bottom: 12px !important;
  transition: background 0.15s !important;
  box-sizing: border-box !important;
}

#fkcart-checkout-button:hover { background: #6a4da8 !important; }

.fkcart-checkout--icon { display: none !important; } /* hide lock icon */

.fkcart-shopping-link {
  display: block !important;
  text-align: center !important;
  font: 500 14px/1 'Inter', sans-serif !important;
  color: #C4872A !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  width: 100% !important;
}

.fkcart-shopping-link:hover { text-decoration: underline !important; color: #C4872A !important; }

/* ================================================================
   T-CHECKOUT: Custom 2-column checkout layout (.zco-*)
   ================================================================ */

/* Remove GP's 1200px boxed container so .inside-article's white
   background (GP's own "separate containers" card look) runs
   edge-to-edge. Unlike my-account, .zco-zoomies-notice-wrap /
   .zco-login-wrap / .zco-form already carry their own independent
   max-width:1160px + margin:auto + padding (see below) — they don't
   depend on #page for width, so no extra Layer-2 work is needed here;
   once #page stops artificially squeezing .inside-article's available
   space down from 1200 to 1120, they naturally render at their own
   intended 1160px instead of being pinched to 1120px. Same fix as
   body.home — see the comment there for why both rules are needed
   together. */
body.woocommerce-checkout #page.grid-container.container {
  max-width: 100% !important;
  width: 100% !important;
}
body.woocommerce-checkout .site-content {
  display: block !important;
}

/* Hide WC's default heading rendered outside our layout */
#order_review_heading { display: none; }

/* ── Checkout notices — restyle to match my-account card style ── */
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info {
  border: none !important;
  border-left: 3px solid var(--z-amber) !important;
  border-radius: 8px;
  background: #F5E4C0 !important;
  color: #8A5C1A !important;
  padding: 14px 20px !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  box-shadow: none !important;
  outline: none;
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info::before { display: none !important; }
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message a,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info a { color: #8A5C1A; text-decoration: underline; }

.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 1em !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error div,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error li {
  list-style: none !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  border: none !important;
  border-left: 3px solid var(--z-amber) !important;
  border-radius: 8px !important;
  background: #F5E4C0 !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #8A5C1A;
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error div::before,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error li::before { display: none !important; }

/* ── Checkout login toggle & form ── */

/* ZOOMIES20% notice — rendered above the toggle, same alignment as the Contact card */
.zco-zoomies-notice-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 18px 0;
}
.zd-zoomies-checkout-notice {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0;
}

/* Page title + "← Cart" link — previously had no centering of their own
   and just rode along on .inside-article's ambient 40px padding. That
   accidentally lined up with .zco-form only because .zco-form was ALSO
   being squeezed narrower than its own 1160px max-width by #page (see
   the comment above this section) — now that .zco-form renders at its
   true 1160px width, these need their own matching max-width + margin:
   auto + padding so they still align with it. */
body.woocommerce-checkout .entry-header {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 18px;
}
body.woocommerce-checkout .zco-back-link {
  display: block;
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 18px;
}

/* Outer wrapper — mirrors .zco-form padding so toggle + card align with Contact card */
.zco-login-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 18px;
}
.zco-login-toggle { /* no extra padding — parent handles it */ }
.zco-login-prompt {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--z-muted);
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--z-border);
}
.zco-showlogin {
  color: var(--z-purple);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}
.zco-showlogin:hover { text-decoration: underline; }

/* Our custom checkout login form — restore z-login-card visuals, constrain width */
.woocommerce-checkout .zco-login-form.z-login-card {
  max-width: 480px !important;
  width: 100% !important;
  margin: 20px 0 0 !important;
  padding: 32px !important;
  border: 1px solid var(--z-border) !important;
  border-radius: var(--z-r-card) !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(44,31,74,0.06) !important;
}

/* Wrapper */
.zco-form {
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 18px 60px;
  font-family: 'Inter', sans-serif;
}

/* Stack on mobile, row on tablet+ */
.zco-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Section card */
.zco-section {
  background: #fff;
  border: 1px solid #e8e4f0;
  border-radius: 12px;
  padding: 22px 20px 20px;
  margin-bottom: 16px;
}

.zco-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7C5CBF;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0ebfa;
}

/* Suppress WC's own section headings — ours replace them */
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3 { display: none; }

/* Numbered section header */
.zco-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}
.zco-section.zco-active .zco-section-header {
  margin-bottom: 20px;
}
.zco-section:not(.zco-active) .zco-section-header {
  cursor: pointer;
}

/* Section label wraps heading + summary */
.zco-section-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Completed summary — one-line address/email shown under heading */
.zco-step-summary {
  display: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #5a4a72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zco-section.zco-completed .zco-step-summary { display: block; }

/* Edit link — right-aligned, shown only on completed steps */
.zco-step-edit {
  display: none;
  margin-left: auto;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #7C5CBF;
  text-decoration: none;
  white-space: nowrap;
}
.zco-step-edit:hover { text-decoration: underline; }
.zco-section.zco-completed .zco-step-edit { display: block; }

/* Section body — collapsed by default, shown when active */
.zco-section-body { display: none; }
.zco-section.zco-active .zco-section-body { display: block; }

/* Inactive / completed section: tighter padding */
.zco-section:not(.zco-active) {
  padding-top: 16px;
  padding-bottom: 16px;
}

.zco-step-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #7C5CBF;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Inactive badge: outline only */
.zco-section:not(.zco-active):not(.zco-completed) .zco-step-badge {
  background: transparent;
  border: 2px solid #c8bfe0;
  color: #9a8ab8;
  font-size: 14px;
}

/* Completed badge: amber checkmark */
.zco-section.zco-completed .zco-step-badge {
  background: #C4872A;
  border: none;
  color: #fff;
  font-size: 17px;
}

h2.zco-section-heading,
.zco-section-heading {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #2d1f4a;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* Inactive heading: muted */
.zco-section:not(.zco-active):not(.zco-completed) .zco-section-heading {
  color: #9a8ab8;
  font-weight: 500;
}

/* Completed heading: normal weight, same dark colour */
.zco-section.zco-completed .zco-section-heading {
  font-weight: 600;
  font-size: 15px;
}

/* "(optional)" tag in phone label */
.zco-optional {
  font-weight: 400;
  font-size: 12px;
  color: #9a8ab8;
}

/* Helper text below a field */
.zco-field-helper {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #5a4a72;
  margin: -6px 0 14px;
  padding-left: 16px;
  line-height: 1.4;
}

/* ── Floating labels — Contact + Shipping ── */
.zco-contact-section .form-row,
.zco-shipping-section .form-row {
  position: relative;
  margin-bottom: 14px;
}

.zco-contact-section .form-row > label,
.zco-shipping-section .form-row > label {
  position: absolute;
  left: 16px;
  top: 19px;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #9a8ab8;
  transition: top 0.15s, font-size 0.15s, color 0.15s;
  z-index: 2;
  margin: 0;
  display: block;
  line-height: 1.2;
  max-width: calc(100% - 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zco-contact-section .form-row .woocommerce-input-wrapper,
.zco-shipping-section .form-row .woocommerce-input-wrapper { display: block; width: 100%; }

.zco-contact-section .form-row .input-text,
.zco-shipping-section .form-row .input-text {
  height: 56px !important;
  padding: 22px 16px 8px !important;
  border: 1px solid #d4ccec;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #2d1f4a;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.zco-shipping-section .form-row select {
  height: 56px !important;
  padding: 22px 40px 8px 16px !important;
  border: 1px solid #d4ccec;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #2d1f4a;
  background: #fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%235a4a72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center no-repeat;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.15s;
}

.zco-contact-section .form-row .input-text::placeholder,
.zco-shipping-section .form-row .input-text::placeholder { color: transparent; }

.zco-contact-section .form-row .input-text:focus,
.zco-shipping-section .form-row .input-text:focus,
.zco-shipping-section .form-row select:focus { outline: none; border-color: #7C5CBF; }

/* Float label up when input has content or is focused */
.zco-contact-section .form-row:has(.input-text:not(:placeholder-shown)) > label,
.zco-contact-section .form-row:has(.input-text:focus) > label,
.zco-contact-section .form-row.zco-has-value > label,
.zco-shipping-section .form-row:has(.input-text:not(:placeholder-shown)) > label,
.zco-shipping-section .form-row:has(.input-text:focus) > label,
.zco-shipping-section .form-row.select-has-value > label {
  top: 8px;
  font-size: 11px;
  color: #7C5CBF;
  font-weight: 500;
}

/* Account box: locked state when ZOOMIES20% forces checkbox checked */
.zco-account-lock-msg {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #5a4a72;
  margin: 8px 0 0;
  font-style: italic;
}

/* Inline validation error messages (password, email-exists) */
.zco-pwd-error,
.zco-email-exists-error {
  display: block;
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #B3261E;
}
.zco-email-exists-error a {
  color: #B3261E;
  text-decoration: underline;
}

/* Country field — readonly, locked to Canada; suppress floating-label highlight */
.zco-country-input[readonly] { background: #fafafa !important; color: #2d1f4a !important; cursor: default; }
#billing_country_display_field > label,
#shipping_country_display_field > label { color: #9a8ab8 !important; top: 8px !important; font-size: 11px !important; font-weight: 400 !important; }
#billing_country_display_field .zco-country-input,
#shipping_country_display_field .zco-country-input { border-color: #d4ccec !important; outline: none !important; box-shadow: none !important; }
#billing_country_display_field .zco-country-input:focus,
#shipping_country_display_field .zco-country-input:focus { border-color: #d4ccec !important; box-shadow: none !important; }

/* Hide WooCommerce "(optional)" suffix inside checkout floating-label fields */
.zco-contact-section .form-row label .optional,
.zco-shipping-section .form-row label .optional { display: none; }
/* Phone field exception — show the (optional) label */
#billing_phone_field label .optional { display: inline; }

/* ── Checkout field validation errors ── */
.zco-contact-section .form-row.woocommerce-invalid .input-text,
.zco-shipping-section .form-row.woocommerce-invalid .input-text,
.zco-contact-section .form-row.woocommerce-invalid select,
.zco-shipping-section .form-row.woocommerce-invalid select { border-color: #e85555 !important; }

.zco-contact-section .form-row.woocommerce-invalid > label,
.zco-shipping-section .form-row.woocommerce-invalid > label { color: #e85555; }

/* ::after error text removed — JS inserts .zco-field-required-error / .zco-email-format-error spans instead */

/* Select2 Province field */
.zco-shipping-section .select2-container .select2-selection--single {
  height: 56px !important; border: 1px solid #d4ccec !important;
  border-radius: 12px !important; background: #fff !important;
  display: flex !important; align-items: flex-end !important;
  padding-bottom: 8px !important; box-sizing: border-box !important;
}
.zco-shipping-section .select2-container .select2-selection__rendered {
  padding: 0 40px 0 16px !important; font-size: 15px !important;
  color: #2d1f4a !important; line-height: 1 !important;
}
.zco-shipping-section .select2-container .select2-selection__arrow { height: 56px !important; right: 12px !important; }
.zco-shipping-section .select2-container--open .select2-selection--single,
.zco-shipping-section .select2-container--focus .select2-selection--single { border-color: #7C5CBF !important; }

/* ── Payment method tabs ── */
.zco-payment-section .wc_payment_methods {
  display: grid; grid-template-columns: 1fr 1fr;
  list-style: none; padding: 4px 4px 0; margin: 0 0 16px;
  border: 1px solid #e8e4f0; border-radius: 12px;
  column-gap: 4px; background: #fafafa;
}

/* scope display:contents to DIRECT li children only — avoids leaking into nested ol.zco-wemt-steps */
.zco-payment-section .wc_payment_methods > li { display: contents; }
.zco-payment-section .wc_payment_methods > li > input[type="radio"] { display: none; }

.zco-payment-section .wc_payment_methods > li > label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 14px 12px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: #5a4a72;
  background: transparent; min-height: 60px; text-align: center;
  border-radius: 8px; border: 1px solid #e8e4f0;
  transition: background 0.15s, box-shadow 0.15s;
  margin: 0; box-sizing: border-box;
  grid-row: 1;
}
/* Active tab: input:checked + label avoids display:contents scoping bugs with :has() */
.zco-payment-section .wc_payment_methods input[type="radio"]:checked + label {
  background: #EDE8F5; color: #7C5CBF; box-shadow: inset 0 0 0 2px #7C5CBF;
}
.zco-payment-section .wc_payment_methods input[type="radio"]:checked + label .zco-interac-brand { color: #2d1f4a; }
.zco-payment-section .wc_payment_methods input[type="radio"]:checked + label .zco-tab-interac > span:last-child { color: #7C5CBF; }

.zco-payment-section .wc_payment_methods .payment_box {
  grid-row: 2; grid-column: 1 / -1;
  padding: 16px; border-top: 1px solid #f0ebfa; background: #fff !important; margin: 0; position: static !important;
}
/* Remove WC's default speech-bubble arrow on .payment_box */
.zco-payment-section .payment_box::before,
.zco-payment-section .payment_box:before { display: none !important; }

/* Credit Card tab */
.zco-tab-cc { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: inherit; line-height: 1; }
.zco-tab-cc svg { flex-shrink: 0; }

/* INTERAC tab */
.zco-tab-interac { display: flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1; }
.zco-interac-brand { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 900; letter-spacing: -0.02em; color: #1a1a1a; text-transform: uppercase; }
.zco-interac-brand span { color: #C4872A; }
.zco-tab-interac > span:last-child { font-size: 12px; font-weight: 400; color: #5a4a72; }

/* ── INTERAC e-Transfer instructions ── */
.zco-wemt-wrap { font-family: 'Inter', sans-serif; }
.zco-wemt-autodeposit { display: flex; align-items: center; gap: 8px; background: #F0FBF2; border: 1px solid #c3e6c8; border-radius: 8px; padding: 12px 14px; font-size: 13px; color: #2a6a36; font-weight: 500; margin-bottom: 16px; }
.zco-wemt-steps { list-style: none; padding: 0; margin: 0; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.zco-wemt-steps > li { display: block; width: 100%; font-size: 13px; color: #2d1f4a; line-height: 1.5; }
.zco-wemt-step-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.zco-wemt-num { width: 24px; height: 24px; border-radius: 50%; background: #7C5CBF; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.zco-wemt-code-box { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; border: 1.5px dashed #e8c580; border-radius: 10px; background: #FFF8EC; overflow: hidden; }
.zco-wemt-email { display: block; padding: 12px 14px; font-family: 'Courier New', monospace; font-size: 13px; color: #2d1f4a; background: transparent; border: none; width: 100%; box-sizing: border-box; }
.zco-wemt-copy { display: block; width: calc(100% - 20px); margin: 0 10px 10px; border-radius: 8px; padding: 11px 16px; background: #C4872A; color: #fff; border: none; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; text-align: center; transition: opacity 0.15s; }
.zco-wemt-copy:hover { opacity: 0.88; }
.zco-wemt-example code { padding: 10px 14px; font-family: 'Courier New', monospace; font-size: 13px; color: #2d1f4a; display: block; }
.zco-wemt-aside { color: #9a8ab8; font-style: normal; }

/* Account creation promo box */
.zco-account-box {
  background: #EEEDFE;
  border: 1px solid #CECBF6;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 4px 0 18px;
}

.zco-account-label {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  margin: 0;
}

.zco-account-label input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #7C5CBF;
  flex-shrink: 0 !important;
  margin-top: 3px !important;
  margin-right: 0 !important;
  float: none !important;
  cursor: pointer;
}

.zco-account-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zco-account-text strong {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #2d1f4a;
  line-height: 1.3;
}

.zco-account-text span {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #5a4a72;
}

/* Conflict notice: ZOOMIES20% saved for later when another coupon is active */
.zco-conflict-notice {
  margin: 8px 0 16px;
  padding: 10px 14px;
  background: #F5E4C0;
  border-left: 3px solid #C4872A;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #8A5C1A;
  line-height: 1.5;
}

/* "Continue to Shipping" pill button */
.zco-continue-btn {
  width: 100%;
  padding: 16px 24px;
  background: #7C5CBF;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s;
  margin-top: 8px;
  display: block;
  text-align: center;
}

.zco-continue-btn:hover { opacity: 0.88; }

/* Inline field pairs (WC renders form-row-first + form-row-last) */
.zco-section .woocommerce-billing-fields__field-wrapper,
.zco-section .woocommerce-shipping-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}
.zco-section .form-row-first,
.zco-section .form-row-last { width: calc(50% - 6px); }
.zco-section .form-row-wide { width: 100%; }

/* Input styling */
.zco-section .input-text,
.zco-section select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d4ccec;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #2d1f4a;
  background: #fafafa;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.zco-section .input-text:focus,
.zco-section select:focus {
  outline: none;
  border-color: #7C5CBF;
  background: #fff;
}
.zco-section label { font-size: 13px; color: #5a4a72; font-weight: 500; margin-bottom: 4px; display: block; }

/* Payment section — strip WC's default background/border */
.zco-payment-section #payment {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.zco-payment-section #payment .wc_payment_methods { padding: 0; }
.zco-payment-section #payment .payment_box { background: #fff; }
.zco-payment-section #payment .form-row.place-order { padding: 0; margin-top: 16px; }
.zco-payment-section #place_order {
  width: 100%;
  padding: 16px;
  background: #7C5CBF;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s;
}
.zco-payment-section #place_order:hover { opacity: 0.88; }

/* ── "Billing to a different address?" toggle ── */
.zco-billing-toggle { margin: 16px 0 0; }
.zco-billing-toggle-label {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 14px; color: #2d1f4a; margin: 0;
}
.zco-billing-toggle-label input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: #7C5CBF; flex-shrink: 0; cursor: pointer;
}

/* Billing address form inside CC tab — same floating-label treatment as Shipping section */
.zco-billing-address-form { margin-top: 16px; }
.zco-billing-address-fields {
  display: flex; flex-wrap: wrap; gap: 0 12px; width: 100%;
}
.zco-billing-address-form .form-row { position: relative; margin-bottom: 14px; width: 100%; box-sizing: border-box; }
.zco-billing-address-form .form-row-first,
.zco-billing-address-form .form-row-last { width: calc(50% - 6px); }
.zco-billing-address-form .form-row > label {
  position: absolute; left: 16px; top: 19px;
  pointer-events: none; font-size: 14px; font-weight: 400; color: #9a8ab8;
  transition: top 0.15s, font-size 0.15s, color 0.15s;
  z-index: 2; margin: 0; display: block; line-height: 1.2;
}
.zco-billing-address-form .form-row .input-text {
  height: 56px !important; padding: 22px 16px 8px !important;
  border: 1px solid #d4ccec; border-radius: 12px; width: 100%; box-sizing: border-box;
}
.zco-billing-address-form .form-row .input-text::-webkit-input-placeholder { color: transparent !important; }
.zco-billing-address-form .form-row .input-text::placeholder { color: transparent !important; }
.zco-billing-address-form .form-row:has(.input-text:not(:placeholder-shown)) > label,
.zco-billing-address-form .form-row:has(.input-text:focus) > label,
.zco-billing-address-form .form-row.select-has-value > label {
  top: 8px; font-size: 11px; color: #7C5CBF; font-weight: 500;
}
/* select2 Province in billing form — mirrors shipping section exactly */
.zco-billing-address-form .select2-container .select2-selection--single {
  height: 56px !important; border: 1px solid #d4ccec !important;
  border-radius: 12px !important; background: #fff !important;
  display: flex !important; align-items: flex-end !important;
  padding-bottom: 8px !important; box-sizing: border-box !important;
}
.zco-billing-address-form .select2-container .select2-selection__rendered {
  padding: 0 40px 0 16px !important; font-size: 15px !important;
  color: #2d1f4a !important; line-height: 1 !important;
}
.zco-billing-address-form .select2-container .select2-selection__arrow { height: 56px !important; right: 12px !important; }
.zco-billing-address-form .select2-container--open .select2-selection--single,
.zco-billing-address-form .select2-container--focus .select2-selection--single { border-color: #7C5CBF !important; }

/* Override gp-premium: it sets #order_review { width:41%; float:right } which crushes our flex layout */
.zco-right #order_review { width: 100% !important; float: none !important; }

/* Order review table */
.zco-order-section .shop_table { width: 100%; border-collapse: collapse; font-size: 14px; }
.zco-order-section .shop_table th,
.zco-order-section .shop_table td { padding: 10px 4px; border-bottom: 1px solid #f0ebfa; color: #2d1f4a; }
.zco-order-section .shop_table thead th { font-weight: 600; color: #5a4a72; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.zco-order-section .shop_table .order-total td { font-weight: 700; font-size: 16px; }
.zco-order-section .shop_table .order-total th { font-weight: 700; }

/* Shipping banner inside checkout Order Summary: no extra side margins (section already has 20px padding) */
.zco-order-section .zd-shipping-banner {
  margin: 0 0 16px;
}

/* ── Order Summary redesign ── */
.zco-order-section .zco-section-title {
  font-size: 18px; font-weight: 700; text-transform: none;
  letter-spacing: 0; color: #2d1f4a; border-bottom: 1px solid #f0ebfa;
  padding-bottom: 14px; margin-bottom: 16px;
}
.zco-os-items { margin-bottom: 4px; }
.zco-os-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid #f0ebfa;
}
.zco-os-item-img {
  width: 60px; height: 60px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden; background: #f5f2fb;
}
.zco-os-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zco-os-item-details {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
}
.zco-os-item-name {
  font-family: 'Inter', sans-serif; font-size: 14px;
  font-weight: 600; color: #2d1f4a; line-height: 1.3;
}
.zco-os-item-qty { font-family: 'Inter', sans-serif; font-size: 13px; color: #9a8ab8; }
.zco-os-item-right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; flex-shrink: 0;
}
.zco-os-item-price {
  font-family: 'Inter', sans-serif; font-size: 14px;
  font-weight: 600; color: #2d1f4a;
}
.zco-os-remove {
  font-size: 16px; color: #c8bfe0; text-decoration: none;
  line-height: 1; transition: color 0.15s;
}
.zco-os-remove:hover { color: #7C5CBF; }

/* ── Coupon row ── */
.zco-os-coupon-row { align-items: center; }
.zco-coupon-left { display: flex; align-items: center; gap: 6px; }
.zco-coupon-pill {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: #7C5CBF; background: #ede8f7; border-radius: 20px;
  padding: 3px 10px; line-height: 1.4;
}
.zco-coupon-right { display: flex; align-items: center; gap: 8px; }
.zco-coupon-amount { font-size: 13px; font-weight: 500; color: #2a7a2a; }
.zco-rm-coupon {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #f0edf8; border: none; cursor: pointer;
  color: #a899cc; transition: background .15s, color .15s; padding: 0;
}
.zco-rm-coupon:hover { background: #fde8e8; color: #d94f4f; }
.zco-rm-coupon:disabled { opacity: .5; cursor: not-allowed; }
.zco-rm-coupon.zco-removing { background: #ede8f7; cursor: default; }
.zco-rm-coupon.zco-removing svg { display: none; }
.zco-rm-coupon.zco-removing::after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border: 1.5px solid #d0c8e8;
	border-top-color: #7C5CBF;
	border-radius: 50%;
	animation: zco-spin 0.65s linear infinite;
}

/* ── Coupon group ── */
.zco-coupon-group { padding: 10px 0 6px; border-bottom: 1px solid #f0edf8; margin: 4px 0; }
.zco-coupon-group-title { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #a899cc; margin-bottom: 8px; }
.zco-add-coupon-row { display: flex; gap: 8px; margin-top: 8px; }
/* Zoom Points pill */
.zco-coupon-pill-pts { background: #f0f7ee; color: #2a7a2a; }
/* Points section */
.zco-points-group .zco-points-balance { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 4px; }
.zco-pts-value { color: #2a7a2a; font-weight: 500; }
.zco-coupon-input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  border: 1px solid #e8e4f0; border-radius: 8px;
  font-size: 13px; font-family: 'Inter', sans-serif;
  color: #2d1f4a; background: #fff; outline: none;
  transition: border-color .15s;
}
.zco-coupon-input:focus { border-color: #7C5CBF; }
.zco-coupon-apply-btn {
  height: 40px; padding: 0 16px; border-radius: 8px;
  background: #7C5CBF; color: #fff; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: 'Inter', sans-serif;
  transition: background .15s; white-space: nowrap;
}
.zco-coupon-apply-btn:hover { background: #6448a8; }
.zco-coupon-apply-btn:disabled { opacity: .6; cursor: not-allowed; }
.zco-coupon-feedback { margin: 6px 0 0; font-size: 12px; }
.zco-msg-err { color: #c0392b; }
.zco-msg-ok  { color: #2a7a2a; }
.zco-recalc  { opacity: 0.35; transition: opacity 0.15s; }
/* Grand total spinner — > ensures only the direct child span, not nested WC price spans */
.zco-os-grand.zco-recalc > span:last-child { position: relative; padding-right: 20px; }
.zco-os-grand.zco-recalc > span:last-child::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	border: 2px solid #d0c8e8;
	border-top-color: #7C5CBF;
	border-radius: 50%;
	animation: zco-spin 0.65s linear infinite;
}
/* Coupon amount placeholder spinner */
.zco-coupon-amount.zco-recalc {
	display: inline-block;
	position: relative;
	width: 14px;
	height: 14px;
	vertical-align: middle;
}
.zco-coupon-amount.zco-recalc::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px solid #d0c8e8;
	border-top-color: #7C5CBF;
	border-radius: 50%;
	animation: zco-spin 0.65s linear infinite;
}
@keyframes zco-spin { to { transform: translateY(-50%) rotate(360deg); } }
.zco-os-ship-banner {
  background: #ede8f7; border-radius: 10px;
  padding: 10px 14px; margin: 12px 0 16px;
  display: flex; align-items: center; gap: 12px;
}
.zco-os-ship-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  background: #ddd5f5; display: flex; align-items: center; justify-content: center;
}
.zco-os-ship-content { flex: 1; min-width: 0; }
.zco-os-ship-text {
  font-family: 'Inter', sans-serif; font-size: 13px;
  font-weight: 400; color: #2d1f4a; margin-bottom: 7px; line-height: 1.4;
}
.zco-os-ship-text strong { font-weight: 700; color: #2d1f4a; }
.zco-os-ship-bar {
  height: 5px; background: #d4ccec; border-radius: 3px; overflow: hidden;
}
.zco-os-ship-bar-fill {
  height: 100%; background: #7C5CBF; border-radius: 3px; transition: width 0.3s ease;
}
.zco-os-totals { margin-bottom: 4px; }
.zco-os-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #f0ebfa;
  font-family: 'Inter', sans-serif; font-size: 14px; color: #2d1f4a;
}
.zco-os-grand {
  font-weight: 700; font-size: 16px; border-bottom: none; padding-top: 12px;
}
/* Shipping row: strikethrough original price + green FREE */
.zco-os-ship-value { display: flex; align-items: center; gap: 6px; }
.zco-os-ship-was { font-size: 13px; color: #9a8ab8; text-decoration: line-through; font-style: normal; }
.zco-os-free-ship { color: #0F6E56; font-weight: 700; }
/* Tax microcopy */
.zco-os-tax-note {
  font-family: 'Inter', sans-serif; font-size: 11px; color: #9a8ab8;
  margin: 6px 0 0; text-align: right;
}
.zco-os-trust {
  display: flex; justify-content: space-between;
  padding-top: 16px; border-top: 1px solid #f0ebfa; margin-top: 4px;
}
.zco-os-trust-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.zco-os-trust-icon { font-size: 22px; }
.zco-os-trust-label {
  font-family: 'Inter', sans-serif; font-size: 11px;
  color: #7a6a96; font-weight: 500;
}

/* ── Tablet ≥768px ── */
@media (min-width: 768px) {
  .zco-layout { flex-direction: row; align-items: flex-start; gap: 24px; }
  .zco-left  { flex: 1 1 0; min-width: 0; }
  .zco-right { width: 320px; flex-shrink: 0; position: sticky; top: 20px; }
}

/* ── Desktop ≥1024px ── */
@media (min-width: 1024px) {
  .zco-form              { padding: 32px 40px 80px; }
  .zco-login-wrap        { padding: 0 40px; }
  .zco-zoomies-notice-wrap { padding: 24px 40px 0; }
  body.woocommerce-checkout .entry-header { padding: 0 40px; }
  body.woocommerce-checkout .zco-back-link { padding: 0 40px; }
  .zco-right { width: 360px; }
  .zco-section { padding: 26px 24px 22px; }
}

/* ── < Cart back link — sits above "Returning customer?" toggle ── */
.zco-back-link {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #5a4a72;
  text-decoration: none;
  margin-bottom: 12px;
}
.zco-back-link:hover { text-decoration: underline; }
.zco-back-link.zco-back-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

/* ── Mobile: Order Summary above left column ── */
@media (max-width: 767px) {
  .zco-right { order: -1; }
}

/* ── Upsell block (standalone, outside Step 2) ── */
.zco-upsell-block { margin-top: 24px; margin-bottom: 20px; }
.zco-upsell-label {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #8c6d3f;
  margin: 0 0 8px;
}
.zco-upsell-card {
  display: flex; flex-direction: column; gap: 12px;
  background: #FAEEDA; border: 1px solid #F5E4C0; border-radius: 12px;
  padding: 14px;
}
.zco-upsell-product-row { display: flex; align-items: center; gap: 12px; }
.zco-upsell-img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.zco-upsell-info { flex: 1; min-width: 0; }
.zco-upsell-subtext {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  margin: 0 0 2px;
}
.zco-hook-free      { color: #7C5CBF; }
.zco-hook-together  { color: #5a4a72; }
.zco-upsell-name {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  color: #2d1f4a; margin: 0 0 2px; line-height: 1.2;
}
.zco-upsell-price { font-family: 'Inter', sans-serif; font-size: 13px; color: #2d1f4a; margin: 0; }
.zco-upsell-add-btn {
  display: block; width: 100%; padding: 14px 16px; background: #C4872A;
  color: #fff; border: none; border-radius: 10px; font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; text-align: center;
}
.zco-upsell-add-btn:hover { opacity: 0.88; }
.zco-upsell-add-btn.zco-upsell-added { background: #3D9A50; cursor: default; }

/* ── Order summary loading overlay ── */
.zco-order-section { position: relative; }
.zco-order-section::after {
  content: '';
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.65);
  border-radius: 12px;
  z-index: 10;
}
.zco-order-section.zco-order-loading::after { display: block; }
.zco-order-section .zco-order-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border: 3px solid #e8dff5;
  border-top-color: #6b3fa0;
  border-radius: 50%;
  animation: zco-spin 0.7s linear infinite;
  z-index: 11;
}
.zco-order-section.zco-order-loading .zco-order-spinner { display: block; }
@keyframes zco-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── Empty cart state ── */
.zco-empty-cart {
  text-align: center; padding: 80px 24px;
  font-family: 'Inter', sans-serif;
}
.zco-empty-cart-title {
  font-family: 'Playfair Display', serif; font-size: 26px;
  color: #2d1f4a; margin: 0 0 12px;
}
.zco-empty-cart-sub { font-size: 15px; color: #5a4a72; margin: 0 0 28px; }
.zco-empty-cart-btn {
  display: inline-block; background: #7C5CBF; color: #fff;
  padding: 14px 32px; border-radius: 8px; font-weight: 600;
  font-size: 15px; text-decoration: none; transition: opacity 0.15s;
}
.zco-empty-cart-btn:hover { opacity: 0.88; color: #fff; }

/* ── Hide chat bubble on /checkout/ ── */
body.woocommerce-checkout .ask-zara-bubble,
body.woocommerce-checkout #ask-zara-wrap,
body.woocommerce-checkout .zsiq_floatmain,
body.woocommerce-checkout #zsiq_agtpic,
body.woocommerce-checkout .crisp-client,
body.woocommerce-checkout #hubspot-messages-iframe-container { display: none !important; }

/* Hide footer TrustIndex badge on checkout — Order Summary already has trust icons */
body.woocommerce-checkout .zf-trustbadge { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   T-LEARN-ARTICLE  —  page-learn-article.php
   ═══════════════════════════════════════════════════════════════════════════ */

body.page-template-page-learn-article { background: #F8F6FB; }

/* Remove GP content padding on this template */
body.page-template-page-learn-article .inside-article { padding: 0 !important; margin: 0 !important; }

#zla-page {
  width: 100%;
  flex: 0 0 100%;
  min-width: 0;
  padding: 24px 0 80px;
  box-sizing: border-box;
}

/* ── Breadcrumb ── */
.zla-breadcrumb {
  max-width: 860px;
  margin: 0 auto 20px;
  padding: 0 20px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #9a8ab8;
}
.zla-breadcrumb a { color: #9a8ab8; text-decoration: none; }
.zla-breadcrumb a:hover { color: #7C5CBF; }
.zla-breadcrumb .breadcrumb_last { color: #2d1f4a; }
.zla-bc-sep { margin: 0 6px; color: #c4b8d8; }

/* ── FAQ Accordions ── */
.zla-faq-item {
  border: 1px solid #e8e4f0;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.zla-faq-item summary.zla-faq-q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  background: #fff;
  user-select: none;
}
.zla-faq-item summary.zla-faq-q::-webkit-details-marker { display: none; }
.zla-faq-item summary.zla-faq-q::marker { display: none; }
.zla-faq-item summary.zla-faq-q h2 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2d1f4a;
  margin: 0;
  flex: 1;
}
.zla-faq-item summary.zla-faq-q::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-left: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237C5CBF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.25s ease;
}
.zla-faq-item[open] summary.zla-faq-q::after {
  transform: rotate(180deg);
}
.zla-faq-item .zla-faq-a {
  padding: 0 20px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #4a3a6b;
  line-height: 1.7;
}

/* ── Header block ── */
.zla-header {
  max-width: 860px;
  margin: 0 auto 32px;
  padding: 0 20px;
}

.zla-label {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B57A28;
  margin-bottom: 12px;
}

.zla-h1 {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 700;
  color: #2d1f4a;
  line-height: 1.15;
  margin: 0 0 14px;
}

.zla-meta {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #9a8ab8;
  margin: 0;
}

/* ── Featured image (blog posts only — the Learn pages don't set one) ── */
.zla-featured {
  max-width: 860px;
  margin: 0 auto 28px;
  padding: 0 20px;
}
.zla-featured-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* ── Article body ── */
.zla-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: #2d1f4a;
}

.zla-content > * + * { margin-top: 20px; }

.zla-content h2 {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  color: #2d1f4a;
  margin: 40px 0 12px;
  line-height: 1.25;
}
.zla-content h3 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #2d1f4a;
  margin: 28px 0 10px;
}
.zla-content h4 {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #2d1f4a;
  margin: 20px 0 8px;
}
.zla-content p { margin: 0 0 16px; }
.zla-content a { color: #7C5CBF; text-decoration: underline; }
.zla-content a:hover { color: #5a3fa0; }

.zla-content ul,
.zla-content ol { padding-left: 20px; margin: 0 0 16px; }
.zla-content li { margin-bottom: 8px; }

/* Tables */
.zla-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 20px 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2d9f3;
}
.zla-content th,
.zla-content td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid #e2d9f3;
  vertical-align: top;
}
.zla-content tr:first-child th,
.zla-content thead td,
.zla-content tbody tr:first-child td {
  background: #F0EBF8;
  font-weight: 600;
  color: #2d1f4a;
}
.zla-content tbody tr:last-child td { border-bottom: none; }

/* Images */
.zla-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 8px auto;
}
.zla-content figure { margin: 24px 0; }
.zla-content figcaption {
  text-align: center;
  font-size: 13px;
  color: #9a8ab8;
  margin-top: 8px;
}

/* ── Key Takeaways box ── */
.zla-takeaways {
  background: #F0EBF8;
  border-radius: 14px;
  padding: 20px 24px;
  margin: 24px 0;
}
.zla-takeaways-heading {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7C5CBF;
  margin: 0 0 14px;
}
.zla-takeaways-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.zla-takeaways-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: #2d1f4a;
}
.zla-takeaways-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B57A28;
}
.zla-takeaways-list li:last-child { margin-bottom: 0; }

/* ── Checklist variant — add class "zla-checklist" to the list block in Gutenberg ── */
.zla-content ul.zla-checklist { list-style: none; padding: 0; }
.zla-content ul.zla-checklist li {
  padding-left: 24px;
  margin-bottom: 10px;
}
.zla-content ul.zla-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #B57A28;
  font-weight: 700;
  font-size: 14px;
}

/* ── Table of Contents (Table of Contents Plus plugin) ── */
#toc_container {
  background: #fff;
  border: 1px solid #e2d9f3;
  border-radius: 14px;
  padding: 20px 24px;
  margin: 24px 0;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}
#toc_container p.toc_title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a8ab8;
  margin: 0 0 12px;
}
#toc_container ul.toc_list,
#toc_container ul.toc_list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#toc_container ul.toc_list > li {
  margin-bottom: 8px;
  counter-increment: toc-counter;
}
#toc_container ul.toc_list > li > a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2d1f4a;
  text-decoration: none;
}
#toc_container ul.toc_list > li > a:hover { color: #7C5CBF; }
#toc_container .toc_number {
  font-size: 12px;
  font-weight: 600;
  color: #7C5CBF;
  min-width: 16px;
}
#toc_container ul.toc_list ul { margin-left: 26px; margin-top: 4px; }
#toc_container ul.toc_list ul li a {
  font-size: 13px;
  color: #9a8ab8;
  text-decoration: none;
}
#toc_container ul.toc_list ul li a:hover { color: #7C5CBF; }

/* ── Responsive ── */
@media (min-width: 768px) {
  #zla-page { padding: 40px 0 100px; }
  .zla-breadcrumb, .zla-header, .zla-content { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1024px) {
  #zla-page { padding: 48px 0 120px; }
  .zla-breadcrumb, .zla-header, .zla-content { padding-left: 60px; padding-right: 60px; }
}


/* ════════════════════════════════════════════════════════════
   POINTS PROGRAM PAGE  ·  zpp-
════════════════════════════════════════════════════════════ */

/* Remove GP's 1200px boxed container so #zpp-page's background runs
   edge-to-edge. .zpp-container still caps each section's actual
   content at 1080px (with its own padding on the same element), so
   the visible content width/proportion is unchanged. Same fix as
   body.home — see the comment there for why both rules are needed
   together: without the .site-content fix, #zpp-page (an unsized flex
   item) shrink-wraps to its widest child's content — here that's
   .zpp-container's own 1080px max-width — leaving it narrower than
   #page's 1200px frame with unused space to the right, even before
   #page itself gets freed. */
body.page-id-39680 #page.grid-container.container {
  max-width: 100% !important;
  width: 100% !important;
}
body.page-id-39680 .site-content {
  display: block !important;
}

/* ── Page shell ──────────────────────────────────────────── */
#zpp-page { background: var(--z-bg); }

/* ── Layout helpers ──────────────────────────────────────── */
.zpp-container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.zpp-narrow    { max-width: 680px;  margin: 0 auto; }

/* ── Typography ──────────────────────────────────────────── */
.zpp-h1         { font: 700 34px/1.15 'Playfair Display', serif; color: var(--z-dark); margin: 0 0 12px; text-align: center; }
.zpp-hero-sub   { font: 400 15px/1.6 'Inter', sans-serif; color: var(--z-muted); margin: 0 0 22px; text-align: center; }
.zpp-section-h2 { font: 700 26px/1.2 'Playfair Display', serif; color: var(--z-dark); margin: 0 0 10px; text-align: center; }
.zpp-section-sub { font: 400 15px/1.6 'Inter', sans-serif; color: var(--z-muted); margin: 0 0 36px; text-align: center; }

/* ── S1: Hero ────────────────────────────────────────────── */
.zpp-hero { padding: 48px 0 44px; text-align: center; }

.zpp-sparkles { margin: 0 auto 4px; display: block; }

.zpp-hero-balance {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: 16px;
  padding: 14px 28px 12px;
  margin: 0 auto 22px;
}
.zpp-balance-num   { font: 700 36px/1 'Playfair Display', serif; color: var(--z-purple); }
.zpp-balance-label { font: 400 12px/1.4 'Inter', sans-serif; color: var(--z-muted); margin-top: 4px; }

.zpp-btn-primary {
  display: inline-block;
  padding: 13px 28px;
  background: var(--z-purple);
  color: #fff;
  border-radius: var(--z-r-btn);
  font: 600 15px/1.2 'Inter', sans-serif;
  text-decoration: none;
  transition: opacity 0.15s;
  margin-bottom: 14px;
}
.zpp-btn-primary:hover { opacity: 0.88; color: #fff; }

.zpp-tier-line {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--z-muted);
  margin: 0;
}
.zpp-tier-line strong { color: var(--z-dark); }

.zpp-signin-line {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--z-muted);
  margin: 6px 0 0;
}
.zpp-signin-link { color: var(--z-purple); text-decoration: none; }
.zpp-signin-link:hover { text-decoration: underline; }

/* ── S2: Stats Strip ─────────────────────────────────────── */
.zpp-stats { padding: 32px 0; border-top: 1px solid var(--z-border); border-bottom: 1px solid var(--z-border); background: #fff; }
.zpp-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.zpp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px;
  border-right: 1px solid var(--z-border);
}
.zpp-stat:last-child { border-right: none; }
.zpp-stat-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #EDE8F5;
  color: var(--z-purple);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.zpp-stat-val   { font: 700 20px/1.1 'Playfair Display', serif; color: var(--z-dark); margin-bottom: 5px; }
.zpp-stat-label { font: 500 10px/1.3 'Inter', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--z-muted); }

/* ── S3: How Tiers Work ──────────────────────────────────── */
.zpp-tiers { padding: 56px 0; }
.zpp-tiers-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.zpp-tier-card {
  background: #fff;
  border: 1px solid var(--z-border);
  border-top: 3px solid var(--z-border);
  border-radius: var(--z-r-card);
  padding: 24px;
  position: relative;
  transition: box-shadow 0.2s;
}
.zpp-tier-card:hover { box-shadow: 0 4px 20px rgba(124,92,191,0.10); }

/* Tier-specific top border colours */
.zpp-tier--curious    { border-top-color: #9a8ab8; }
.zpp-tier--explorer   { border-top-color: var(--z-amber); }
.zpp-tier--psychonaut { border-top-color: var(--z-purple); }

/* Active (current user tier) highlight */
.zpp-tier--active {
  border-color: var(--z-purple);
  border-top-color: var(--z-purple);
  box-shadow: 0 0 0 2px rgba(124,92,191,0.18);
}

.zpp-tier-head { margin-bottom: 18px; }
.zpp-tier-name-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.zpp-tier-name  { font: 700 17px/1.2 'Playfair Display', serif; color: var(--z-dark); }
.zpp-tier-range { font: 400 12px/1.3 'Inter', sans-serif; color: var(--z-muted); }

/* Badges */
.zpp-tier-badge {
  font: 700 10px/1 'Inter', sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 100px;
}
.zpp-badge--curious    { background: #EDE9F5; color: #7057a8; }
.zpp-badge--explorer   { background: #FEF3E2; color: var(--z-amber); }
.zpp-badge--psychonaut { background: #EDE8F5; color: var(--z-purple); }

/* Perk list */
.zpp-tier-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zpp-tier-perks li {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--z-muted);
  padding-left: 20px;
  position: relative;
}
.zpp-tier-perks li::before {
  content: '';
  position: absolute;
  left: 0; top: 5px;
  width: 12px; height: 8px;
  border-left: 2px solid var(--z-purple);
  border-bottom: 2px solid var(--z-purple);
  transform: rotate(-45deg) translateY(-2px);
}

.zpp-tier-note {
  font: 400 12px/1.5 'Inter', sans-serif;
  color: var(--z-muted);
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--z-border);
}

.zpp-current-badge {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 10px;
  background: var(--z-purple);
  color: #fff;
  font: 600 10px/1.4 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
}

/* ── S4: Psychonaut Reward ───────────────────────────────── */
.zpp-reward { padding: 0 0 64px; }

.zpp-lock-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F3F0F9;
  border: 1px solid #D8CFF0;
  border-radius: var(--z-r-card);
  padding: 10px 16px;
  font: 500 13px/1.4 'Inter', sans-serif;
  color: var(--z-purple);
  margin-bottom: 18px;
}

.zpp-reward-card {
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-card);
  overflow: hidden;
}
.zpp-reward--locked { opacity: 0.55; pointer-events: none; }

.zpp-reward-option {
  padding: 28px 28px 24px;
}
.zpp-reward-option + .zpp-or-divider + .zpp-reward-option {
  border-top: 1px solid var(--z-border);
}

.zpp-option-eyebrow {
  display: block;
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--z-muted);
  margin-bottom: 14px;
}
.zpp-option-icon  { margin-bottom: 14px; }
.zpp-option-heading {
  font: 700 20px/1.2 'Playfair Display', serif;
  color: var(--z-dark);
  margin: 0 0 6px;
}
.zpp-option-worth {
  font: 500 13px/1.4 'Inter', sans-serif;
  color: var(--z-purple);
  margin: 0 0 10px;
}
.zpp-option-body {
  font: 400 13px/1.6 'Inter', sans-serif;
  color: var(--z-muted);
  margin: 0;
}

.zpp-or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
}
.zpp-or-divider::before,
.zpp-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--z-border);
}
.zpp-or-divider span {
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: 0.1em;
  color: var(--z-muted);
  flex-shrink: 0;
}

.zpp-claiming {
  background: #F8F6FD;
  border-top: 1px solid var(--z-border);
  padding: 20px 28px 24px;
}
.zpp-claiming-heading {
  font: 700 10px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--z-muted);
  margin: 0 0 12px;
}
.zpp-claiming-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zpp-claiming-list li {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--z-muted);
  padding-left: 18px;
  position: relative;
}
.zpp-claiming-list li::before {
  content: '·';
  position: absolute;
  left: 6px;
  color: var(--z-purple);
  font-weight: 700;
}

/* ── S5: More Ways to Earn ───────────────────────────────── */
.zpp-bonus { padding: 56px 0; border-top: 1px solid var(--z-border); }

.zpp-left { text-align: left; }

.zpp-bonus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.zpp-bonus-card {
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-card);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
}
.zpp-bonus-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.zpp-bonus-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #EDE8F5;
  color: var(--z-purple);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.zpp-bonus-pts {
  font: 600 12px/1.4 'Inter', sans-serif;
  color: var(--z-purple);
  background: #EDE8F5;
  border: 1px solid #D8CFF0;
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}
.zpp-bonus-title {
  font: 700 16px/1.3 'Playfair Display', serif;
  color: var(--z-dark);
  margin: 0 0 8px;
}
.zpp-bonus-body {
  font: 400 13px/1.6 'Inter', sans-serif;
  color: var(--z-muted);
  margin: 0 0 16px;
  flex: 1;
}
.zpp-bonus-btn {
  display: block;
  width: 100%;
  padding: 11px 16px;
  background: var(--z-purple);
  color: #fff;
  text-align: center;
  border-radius: var(--z-r-btn);
  font: 600 13px/1.2 'Inter', sans-serif;
  text-decoration: none;
  transition: opacity 0.15s;
  margin-top: auto;
}
.zpp-bonus-btn:hover { opacity: 0.88; color: #fff; }

/* ── S6: Three Easy Steps ────────────────────────────────── */
.zpp-steps-section { padding: 56px 0; border-top: 1px solid var(--z-border); }

.zpp-steps-track { position: relative; margin-top: 8px; }
.zpp-steps-row {
  display: flex;
  justify-content: center;
  gap: 0;
}
.zpp-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
}
.zpp-steps-line {
  position: absolute;
  top: 18px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  background: #D8CFF0;
  z-index: 0;
}
.zpp-step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--z-purple);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 15px/1 'Inter', sans-serif;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.zpp-step-label {
  font: 400 13px/1.4 'Inter', sans-serif;
  color: var(--z-dark);
  text-align: center;
  max-width: 120px;
}

/* ── S7: How the Program Works ───────────────────────────── */
.zpp-how { padding: 56px 0; border-top: 1px solid var(--z-border); }

.zpp-accordion { margin-top: 4px; }
.zpp-acc-item { border-bottom: 1px solid var(--z-border); }
.zpp-acc-item:first-of-type { border-top: 1px solid var(--z-border); }

.zpp-acc-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font: 600 14px/1.4 'Inter', sans-serif;
  color: var(--z-dark);
  gap: 14px;
}
.zpp-acc-q::-webkit-details-marker,
.zpp-acc-q::marker { display: none; content: ''; }

.zpp-acc-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--z-purple);
  color: var(--z-purple);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.zpp-acc-icon::before { content: '+'; }
.zpp-acc-item[open] .zpp-acc-icon::before { content: '−'; }

.zpp-acc-body { padding: 0 36px 16px 0; }
.zpp-acc-body p,
.zpp-acc-body li {
  font: 400 14px/1.7 'Inter', sans-serif;
  color: var(--z-muted);
  margin: 0 0 6px;
}
.zpp-acc-body ul {
  margin: 10px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zpp-acc-body strong { color: var(--z-dark); font-weight: 600; }

/* ── S8: Support Banner ──────────────────────────────────── */
.zpp-support-section { padding: 0 0 56px; }
.zpp-support-banner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  background: #F3F0F9;
  border: 1px solid #D8CFF0;
  border-radius: var(--z-r-card);
  padding: 24px 28px;
}
.zpp-support-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zpp-support-text strong {
  font: 700 17px/1.3 'Playfair Display', serif;
  color: var(--z-dark);
}
.zpp-support-text span {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--z-muted);
}
.zpp-support-btn { margin-bottom: 0; white-space: nowrap; }

/* ── S9: Browse Zoomies ──────────────────────────────────── */
.zpp-browse { padding: 56px 0 64px; border-top: 1px solid var(--z-border); }
.zpp-browse-body {
  font: 400 14px/1.7 'Inter', sans-serif;
  color: var(--z-muted);
  margin: 0 0 12px;
}
.zpp-browse-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--z-border);
  margin-top: 28px;
}
.zpp-browse-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 12px;
  font: 500 13px/1.2 'Inter', sans-serif;
  color: var(--z-purple);
  text-decoration: none;
  border-right: 1px solid var(--z-border);
  text-align: center;
  transition: background 0.15s;
}
.zpp-browse-link:last-child { border-right: none; }
.zpp-browse-link:hover { background: #EDE8F5; }

/* ── Tablet ≥768px ───────────────────────────────────────── */
@media (min-width: 768px) {
  .zpp-container    { padding: 0 40px; }
  .zpp-h1           { font-size: 42px; }
  .zpp-section-h2   { font-size: 30px; }
  .zpp-tiers-grid   { grid-template-columns: repeat(3, 1fr); }
  .zpp-bonus-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ── Desktop ≥1024px ─────────────────────────────────────── */
@media (min-width: 1024px) {
  .zpp-container    { padding: 0 56px; }
  .zpp-hero         { padding: 64px 0 56px; }
  .zpp-h1           { font-size: 48px; }
  .zpp-section-h2   { font-size: 32px; }
  .zpp-tiers        { padding: 64px 0; }
  .zpp-reward       { padding: 0 0 80px; }
  .zpp-bonus        { padding: 64px 0; }
  .zpp-bonus-grid   { grid-template-columns: repeat(4, 1fr); }
  .zpp-steps-section { padding: 64px 0; }
  .zpp-how          { padding: 64px 0; }
  .zpp-support-section { padding: 0 0 64px; }
  .zpp-support-banner { flex-direction: row; align-items: center; justify-content: space-between; }
  .zpp-browse       { padding: 64px 0 80px; }
}


/* ════════════════════════════════════════════════════════════
   MY ACCOUNT PAGE  ·  zma-
════════════════════════════════════════════════════════════ */

/* Remove GP's 1200px boxed container so .inside-article's white
   background (GP's own "separate containers" card look) runs
   edge-to-edge. Unlike home/category/product, this page has no
   dedicated content-wrap of its own — its 1200px width is only ever
   inherited from #page — so .woocommerce below must independently
   take over that max-width + centering, or content would stretch
   full-bleed too. Same fix as body.home — see the comment there for
   why both rules are needed together. */
body.woocommerce-account #page.grid-container.container {
  max-width: 100% !important;
  width: 100% !important;
}
body.woocommerce-account .site-content {
  display: block !important;
}
/* .inside-article carries GP's white card background + 40px/30px
   padding (see generate_dynamic_css_output). Strip its padding so the
   background can bleed; .woocommerce below re-applies the same
   padding values on top of its own 1200px centering, so the visible
   content position is unchanged. */
body.woocommerce-account .inside-article {
  padding: 0 !important;
}

/* Kill WooCommerce default sidebar layout */
.woocommerce-account .woocommerce-MyAccount-navigation { display: none !important; }
.woocommerce-account .woocommerce {
  display: block !important;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 40px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .woocommerce-account .woocommerce { padding: 30px; }
}
.woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; float: none !important; }

/* ── Tab bar ──────────────────────────────────────────────── */
.zma-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--z-border);
  margin-bottom: 32px;
}
.zma-tab {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--z-border);
  background: #fff;
  font: 500 13px/1.2 'Inter', sans-serif;
  color: var(--z-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.zma-tab:hover {
  border-color: var(--z-purple);
  color: var(--z-purple);
  background: #F3F0F9;
}
.zma-tab--active {
  background: var(--z-purple);
  border-color: var(--z-purple);
  color: #fff;
}
.zma-tab--active:hover { color: #fff; opacity: 0.92; }

/* ── Content area ─────────────────────────────────────────── */
.zma-content { margin-bottom: 40px; }

/* ── Dashboard welcome ────────────────────────────────────── */
.zma-welcome-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 28px;
}
.zma-welcome {
  font: 400 15px/1.5 'Inter', sans-serif;
  color: var(--z-muted);
  margin: 0;
}
.zma-welcome strong { color: var(--z-dark); }

.zma-logout-btn {
  flex-shrink: 0;
  font: 500 13px/1.2 'Inter', sans-serif;
  color: var(--z-muted);
  text-decoration: none;
  padding: 7px 16px;
  border: 1px solid var(--z-border);
  border-radius: 100px;
  transition: border-color 0.15s, color 0.15s;
}
.zma-logout-btn:hover { border-color: #999; color: var(--z-dark); }

/* ── Recent orders header ─────────────────────────────────── */
.zma-recent-orders { margin-bottom: 8px; }
.zma-recent-orders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.zma-recent-orders-title {
  font: 700 18px/1.2 'Playfair Display', serif;
  color: var(--z-dark);
  margin: 0;
}
.zma-recent-orders-viewall {
  font: 500 13px/1.2 'Inter', sans-serif;
  color: var(--z-purple);
  text-decoration: none;
}
.zma-recent-orders-viewall:hover { text-decoration: underline; }

/* ── Quick-link cards ─────────────────────────────────────── */
.zma-quick-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
.zma-quick-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 22px;
  background: #F3F0F9;
  border: 1px solid #E0D9F2;
  border-radius: var(--z-r-card);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.zma-quick-card:hover { border-color: var(--z-purple); background: #EDE8F5; }

.zma-quick-icon {
  color: var(--z-purple);
  margin-bottom: 6px;
}
.zma-quick-title {
  font: 600 15px/1.3 'Inter', sans-serif;
  color: var(--z-dark);
}
.zma-quick-sub {
  font: 400 13px/1.3 'Inter', sans-serif;
  color: var(--z-muted);
}

/* ── Order cards ──────────────────────────────────────────── */
.zma-orders { display: flex; flex-direction: column; gap: 14px; }

.zma-order-card {
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-card);
  padding: 20px 22px;
}

/* Head row: order # + date left, status badge right */
.zma-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.zma-order-meta { display: flex; flex-direction: column; gap: 3px; }
.zma-order-number { font: 700 15px/1.3 'Inter', sans-serif; color: var(--z-dark); }
.zma-order-date   { font: 400 13px/1.3 'Inter', sans-serif; color: var(--z-muted); }

/* Status badge */
.zma-order-status {
  font: 500 12px/1.3 'Inter', sans-serif;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}
.zma-status--completed  { background: #E6F4EA; color: #2E7D32; border: 1px solid #C8E6C9; }
.zma-status--processing { background: #EDE8F5; color: var(--z-purple); border: 1px solid #D8CFF0; }
.zma-status--on-hold    { background: #FEF3E2; color: var(--z-amber); border: 1px solid #F5D9A8; }
.zma-status--pending    { background: #FEF3E2; color: var(--z-amber); border: 1px solid #F5D9A8; }
.zma-status--cancelled  { background: #F5F5F5; color: #757575; border: 1px solid #E0E0E0; }
.zma-status--refunded   { background: #F5F5F5; color: #757575; border: 1px solid #E0E0E0; }
.zma-status--failed     { background: #FDE8E8; color: #C62828; border: 1px solid #FFCDD2; }

/* Product thumbnails */
.zma-order-thumbs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.zma-order-thumb {
  width: 56px; height: 56px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--z-border);
}

/* Items · total summary */
.zma-order-summary {
  font: 400 13px/1.3 'Inter', sans-serif;
  color: var(--z-muted);
  margin-bottom: 16px;
}
.zma-order-summary strong { color: var(--z-dark); }

/* Action buttons */
.zma-order-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.zma-order-btn {
  display: block;
  padding: 11px 16px;
  border-radius: 100px;
  font: 600 14px/1.2 'Inter', sans-serif;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.zma-order-btn--outline {
  border: 1px solid var(--z-border);
  background: #fff;
  color: var(--z-dark);
}
.zma-order-btn--outline:hover { border-color: var(--z-purple); color: var(--z-purple); }
.zma-order-btn--primary {
  background: var(--z-purple);
  border: 1px solid var(--z-purple);
  color: #fff;
}
.zma-order-btn--primary:hover { opacity: 0.88; color: #fff; }

/* Pagination */
.zma-orders-pagination {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.zma-page-btn {
  padding: 9px 18px;
  border: 1px solid var(--z-border);
  border-radius: 100px;
  font: 500 13px/1.2 'Inter', sans-serif;
  color: var(--z-dark);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.zma-page-btn:hover { border-color: var(--z-purple); color: var(--z-purple); }

/* Empty state */
.zma-orders-empty {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--z-muted);
}
.zma-orders-empty a { color: var(--z-purple); }

/* ── Points balance card ──────────────────────────────────── */
.zma-balance-card {
  background: #6B4DA8;
  background: linear-gradient(135deg, #7C5CBF 0%, #5B3D9E 100%);
  border-radius: 16px;
  padding: 22px 24px 20px;
  margin-bottom: 28px;
  color: #fff;
}
.zma-balance-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.zma-balance-eyebrow {
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.zma-balance-tier-badge {
  font: 600 12px/1.2 'Inter', sans-serif;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 100px;
  padding: 5px 12px;
  color: #fff;
}
.zma-balance-num {
  font: 700 44px/1 'Playfair Display', serif;
  color: #fff;
  margin-bottom: 4px;
}
.zma-balance-sub {
  font: 400 13px/1.4 'Inter', sans-serif;
  color: rgba(255,255,255,0.75);
  margin-bottom: 18px;
}
.zma-balance-bar-wrap {
  height: 6px;
  background: rgba(255,255,255,0.25);
  border-radius: 100px;
  margin-bottom: 10px;
  overflow: hidden;
}
.zma-balance-bar-fill {
  height: 100%;
  background: #fff;
  border-radius: 100px;
  transition: width 0.4s ease;
}
.zma-balance-bar-labels {
  display: flex;
  justify-content: space-between;
  font: 400 12px/1.3 'Inter', sans-serif;
  color: rgba(255,255,255,0.75);
}

/* ── Dashboard balance card (white) ──────────────────────── */

.zma-dash-card {
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: 16px;
  padding: 22px 24px 20px;
  margin-bottom: 28px;
}
.zma-dash-card .zma-balance-eyebrow {
  color: var(--z-muted);
}
.zma-dash-card .zma-balance-tier-badge {
  background: #FFF3DC;
  border: 1px solid #E8C86A;
  color: #8A6000;
}
.zma-dash-card .zma-balance-num {
  color: var(--z-dark);
}
.zma-dash-card .zma-balance-sub {
  color: var(--z-muted);
}
.zma-dash-card .zma-balance-bar-wrap {
  background: #EDE8F5;
}
.zma-dash-card .zma-balance-bar-fill {
  background: #6B4DA8;
}
.zma-dash-card .zma-balance-bar-labels {
  color: var(--z-muted);
}
.zma-dash-view-rewards {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  background: #C4872A;
  color: #fff;
  font: 600 14px/1 'Inter', sans-serif;
  text-align: center;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s;
}
.zma-dash-view-rewards:hover { background: #A86D1A; color: #fff; }

/* ── Points activity list ─────────────────────────────────── */

.zma-pts-list {
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-card);
  overflow: hidden;
}
.zma-pts-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--z-border);
}
.zma-pts-row:last-child { border-bottom: none; }

.zma-pts-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.zma-pts-label {
  font: 600 14px/1.3 'Inter', sans-serif;
  color: var(--z-dark);
}
.zma-pts-date {
  font: 400 13px/1.3 'Inter', sans-serif;
  color: var(--z-muted);
}

.zma-pts-amount {
  font: 600 14px/1.2 'Inter', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}
.zma-pts-pos { color: #2E7D32; }
.zma-pts-neg { color: var(--z-muted); }

/* ── Tiers list ───────────────────────────────────────────── */
.zma-tiers-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.zma-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-card);
}
.zma-tier-row--active {
  background: #EDE8F5;
  border-color: var(--z-purple);
}
.zma-tier-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.zma-tier-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.zma-tier-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.zma-tier-name {
  font: 600 14px/1.3 'Inter', sans-serif;
  color: var(--z-dark);
}
.zma-tier-here {
  font-weight: 400;
  color: var(--z-purple);
  margin-left: 2px;
}
.zma-tier-range {
  font: 400 13px/1.3 'Inter', sans-serif;
  color: var(--z-muted);
}
.zma-tier-mult {
  font: 700 15px/1 'Inter', sans-serif;
  color: var(--z-purple);
  flex-shrink: 0;
}

/* ── Ways to earn ─────────────────────────────────────────── */
.zma-earn-list {
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-card);
  overflow: hidden;
}
.zma-earn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--z-border);
}
.zma-earn-row:last-child { border-bottom: none; }
.zma-earn-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.zma-earn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: #EDE8F5;
  border-radius: 10px;
  color: var(--z-purple);
}
.zma-earn-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.zma-earn-label {
  font: 600 14px/1.3 'Inter', sans-serif;
  color: var(--z-dark);
}
.zma-earn-desc {
  font: 400 13px/1.3 'Inter', sans-serif;
  color: var(--z-muted);
}
.zma-earn-pts {
  font: 700 14px/1.2 'Inter', sans-serif;
  color: var(--z-amber);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── How to redeem ────────────────────────────────────────── */
.zma-redeem-card {
  background: #F3F0FA;
  border: 1px solid #DDD6F0;
  border-radius: var(--z-r-card);
  padding: 22px 24px;
}
.zma-redeem-title {
  font: 700 15px/1.4 'Inter', sans-serif;
  color: var(--z-dark);
  margin: 0 0 8px;
}
.zma-redeem-sub {
  font: 400 13px/1.6 'Inter', sans-serif;
  color: var(--z-muted);
  margin: 0 0 14px;
}
.zma-redeem-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zma-redeem-list li {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--z-muted);
}

/* ── Account Details form ─────────────────────────────────── */
.zma-form-heading {
  font: 700 20px/1.3 'Playfair Display', serif;
  color: var(--z-dark);
  margin: 0 0 24px;
}

/* 密码 eye icon — SVG 替换 WC 字体图标，开/关状态明显区分 */
.woocommerce .password-input {
  position: relative;
  display: block;
}
.woocommerce .password-input .show-password-input {
  position: absolute;
  right: 10px;
  /* 固定 top，锚定在 input 行中心（padding-top 10px + line-height 21px / 2 - icon 10px）
     不随密码强度条高度变化 */
  top: 10px;
  transform: none;
  cursor: pointer;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 默认：密码隐藏 → eye-off（眼睛+斜线） */
.woocommerce .password-input .show-password-input::after {
  font-family: inherit !important;
  font-size: 0 !important;
  content: '' !important;
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
/* 激活：密码可见 → eye-open（普通眼睛） */
.woocommerce .password-input .show-password-input.display-password::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  color: transparent !important;
}

.zma-af-card {
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-card);
  overflow: hidden;
  margin-bottom: 20px;
}

/* Individual field row */
.zma-af-field {
  padding: 16px 20px;
  border-bottom: 1px solid var(--z-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zma-af-field:last-child { border-bottom: none; }

.zma-af-field label {
  font: 600 13px/1.2 'Inter', sans-serif;
  color: var(--z-dark);
  margin: 0;
}

.zma-af-field .woocommerce-Input {
  width: 100%;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 400 14px/1.5 'Inter', sans-serif;
  color: var(--z-dark);
  outline: none;
}
.zma-af-field .woocommerce-Input:focus { outline: none; box-shadow: none !important; }
.zma-af-field .woocommerce-Input::placeholder { color: var(--z-muted); }

/* Account form inputs：加边框（仅限 edit-account 表单，地址卡片不受影响） */
.zma-account-form .zma-af-field {
  gap: 8px;
}
.zma-account-form .zma-af-field .woocommerce-Input {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  background: #fff !important;
}
.zma-account-form .zma-af-field .woocommerce-Input:focus {
  border-color: var(--z-purple) !important;
  box-shadow: 0 0 0 3px rgba(124,92,191,0.12) !important;
}
/* 密码 input 右侧留出眼睛 icon 的空间 */
.zma-account-form .password-input {
  display: block;
  position: relative;
}
.zma-account-form .password-input input[type="password"],
.zma-account-form .password-input input[type="text"] {
  padding-right: 42px !important;
}

.zma-af-hint {
  font: 400 12px/1.4 'Inter', sans-serif;
  color: var(--z-muted);
}

/* CHANGE PASSWORD divider */
.zma-af-divider {
  padding: 12px 20px;
  background: #F8F6FD;
  border-bottom: 1px solid var(--z-border);
}
.zma-af-divider span {
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--z-muted);
}

/* Save button */
.zma-af-submit {
  display: block;
  width: 100%;
  padding: 15px;
  background: var(--z-purple);
  color: #fff;
  border: none;
  border-radius: 100px;
  font: 600 15px/1.2 'Inter', sans-serif;
  cursor: pointer;
  transition: opacity 0.15s;
}
.zma-af-submit:hover { opacity: 0.88; }
.zma-af-submit:disabled,
.zma-af-submit[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hide GeneratePress + plugin default description output on brand archives. */
body.tax-pwb-brand .taxonomy-description,
body.tax-pwb-brand .pwb-brand-description,
body.tax-pwb-brand .pwb-long-brand-description,
body.tax-pwb-brand .pwb-before-loop,
body.tax-pwb-brand .pwb-after-loop,
body.tax-pwb-brand .pwb-brand-banner-cont { display: none !important; }

body.tax-pwb-brand #zoomies-category-page { padding-top: 24px; }

/* ================================================================
   BUNDLE & SAVE PAGE (.zbc-*)
   ================================================================ */
#zoomies-bundle {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.zbc-header {
  text-align: center;
  margin-bottom: 32px;
}

.zbc-title {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  color: var(--z-dark);
  margin: 0 0 8px;
}

.zbc-sub {
  font-size: 16px;
  color: var(--z-muted);
  margin: 0;
}

.zbc-grid .products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 900px) {
  .zbc-grid .products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .zbc-title { font-size: 28px; }
  .zbc-grid .products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ════════════════════════════════════════════════════════════
   MY ACCOUNT — REFERRAL PAGE  ·  zraf-
════════════════════════════════════════════════════════════ */

.zraf-wrap { display: flex; flex-direction: column; gap: 20px; }

/* ── Hero ────────────────────────────────────────────────── */
.zraf-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(135deg, #EDE8F5 0%, #F8F6FB 100%);
  border: 1px solid #D8CFF0;
  border-radius: var(--z-r-card);
  padding: 24px 22px;
}
.zraf-hero-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: var(--z-purple);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zraf-hero-title {
  font: 700 20px/1.2 'Playfair Display', serif;
  color: var(--z-dark);
  margin: 0 0 6px;
}
.zraf-hero-desc {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--z-muted);
  margin: 0;
}

/* ── Rewards split ───────────────────────────────────────── */
.zraf-rewards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-card);
  padding: 18px 22px;
}
.zraf-reward-half {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.zraf-reward-label {
  font: 400 12px/1.3 'Inter', sans-serif;
  color: var(--z-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.zraf-reward-value {
  font: 700 18px/1.2 'Inter', sans-serif;
  color: var(--z-purple);
}
.zraf-reward-divider {
  font: 700 20px/1 'Inter', sans-serif;
  color: var(--z-border);
}

/* ── Card shell ──────────────────────────────────────────── */
.zraf-card {
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-card);
  padding: 20px 22px;
}
.zraf-card-label {
  font: 600 12px/1.3 'Inter', sans-serif;
  color: var(--z-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.zraf-card-label--code { margin-top: 18px; }

/* ── Copy row ────────────────────────────────────────────── */
.zraf-copy-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: #F8F6FB;
  border: 1px solid var(--z-border);
  border-radius: 10px;
  overflow: hidden;
}
.zraf-link-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: 400 13px/1.4 'Inter', sans-serif;
  color: var(--z-dark);
  padding: 12px 14px;
  outline: none;
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zraf-copy-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--z-purple);
  color: #fff;
  border: none;
  padding: 10px 16px;
  font: 600 13px/1 'Inter', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.zraf-copy-btn:hover { background: var(--z-purple-hover); }
.zraf-copied-icon { display: none; }
.zraf-copy-btn.zraf-copied { background: #4a8c4a; }
.zraf-copy-btn.zraf-copied .zraf-copy-icon { display: none; }
.zraf-copy-btn.zraf-copied .zraf-copied-icon { display: block; }

/* ── Social share ────────────────────────────────────────── */
.zraf-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.zraf-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font: 600 13px/1 'Inter', sans-serif;
  text-decoration: none;
  transition: opacity 0.15s;
}
.zraf-social-btn:hover { opacity: 0.85; text-decoration: none; }
.zraf-social-btn--wa  { background: #25D366; color: #fff; }
.zraf-social-btn--fb  { background: #1877F2; color: #fff; }
.zraf-social-btn--tw  { background: #000;    color: #fff; }
.zraf-social-btn--msg { background: #0084FF; color: #fff; }

/* ── Email invite ────────────────────────────────────────── */
.zraf-email-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--z-border); }
.zraf-email-label {
  font: 600 12px/1.3 'Inter', sans-serif;
  color: var(--z-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.zraf-email-inputs { display: flex; flex-direction: column; gap: 10px; }
.zraf-email-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zraf-email-input,
.zraf-name-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--z-border);
  border-radius: 8px;
  font: 400 13px/1.4 'Inter', sans-serif;
  color: var(--z-dark);
  background: #F8F6FB;
  outline: none;
  box-sizing: border-box;
}
.zraf-email-input:focus,
.zraf-name-input:focus { border-color: var(--z-purple); }
.zraf-email-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 12px;
}
.zraf-add-email {
  background: none;
  border: none;
  color: var(--z-purple);
  font: 500 13px/1 'Inter', sans-serif;
  cursor: pointer;
  padding: 0;
}
.zraf-add-email:hover { text-decoration: underline; }
.zraf-send-btn {
  background: var(--z-amber);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 100px;
  font: 600 13px/1 'Inter', sans-serif;
  cursor: pointer;
  transition: opacity 0.15s;
}
.zraf-send-btn:hover { opacity: 0.88; }

/* ── Stats row ───────────────────────────────────────────── */
.zraf-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.zraf-stat-card {
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-card);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.zraf-stat-num {
  font: 700 32px/1 'Playfair Display', serif;
  color: var(--z-purple);
}
.zraf-stat-label {
  font: 400 12px/1.3 'Inter', sans-serif;
  color: var(--z-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Section (tables) ────────────────────────────────────── */
.zraf-section { display: flex; flex-direction: column; gap: 14px; }
.zraf-section-title {
  font: 700 16px/1.2 'Playfair Display', serif;
  color: var(--z-dark);
  margin: 0;
}
.zraf-table-wrap {
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-card);
  overflow: hidden;
}
.zraf-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 13px/1.4 'Inter', sans-serif;
}
.zraf-table thead th {
  padding: 12px 16px;
  background: #F8F6FB;
  text-align: left;
  font: 600 11px/1.2 'Inter', sans-serif;
  color: var(--z-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--z-border);
}
.zraf-table tbody td {
  padding: 14px 16px;
  color: var(--z-dark);
  border-bottom: 1px solid var(--z-border);
  vertical-align: middle;
}
.zraf-table tbody tr:last-child td { border-bottom: none; }
.zraf-table tbody tr:hover { background: #FAFAFF; }
.zraf-coupon-code {
  display: inline-block;
  font: 600 12px/1.4 'Inter', sans-serif;
  background: #EDE8F5;
  color: var(--z-purple);
  border-radius: 6px;
  padding: 3px 8px;
  letter-spacing: 0.04em;
}

/* ── Status badge ────────────────────────────────────────── */
.zraf-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font: 600 11px/1.6 'Inter', sans-serif;
  text-transform: capitalize;
  background: #F5F5F5;
  color: #757575;
}
.zraf-status--completed  { background: #E6F4EA; color: #2E7D32; }
.zraf-status--processing { background: #EDE8F5; color: var(--z-purple); }
.zraf-status--on-hold    { background: #FEF3E2; color: var(--z-amber); }
.zraf-status--pending    { background: #FEF3E2; color: var(--z-amber); }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .zraf-hero { flex-direction: column; gap: 12px; }
  .zraf-rewards { grid-template-columns: 1fr; text-align: center; }
  .zraf-reward-divider { display: none; }
  .zraf-email-row { grid-template-columns: 1fr; }
  .zraf-social-btn span { display: none; } /* icon-only on very small screens */
  .zraf-social-btn { padding: 10px 12px; }
  .zraf-table thead { display: none; }
  .zraf-table tbody td {
    display: flex;
    justify-content: space-between;
    border-bottom: none;
    padding: 8px 16px;
  }
  .zraf-table tbody tr { border-bottom: 1px solid var(--z-border); display: block; }
  .zraf-table tbody tr:last-child { border-bottom: none; }
}

/* ── T-VO: View Order — Order header ──────────────────────────────────── */
.zvo-order-header { margin-bottom: 24px; }
.zvo-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #7C5CBF;
  text-decoration: none;
  margin-bottom: 14px;
}
.zvo-back-link:hover { text-decoration: underline; color: #7C5CBF; }
.zvo-order-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.zvo-order-number {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: #2d1f4a;
  margin: 0;
  line-height: 1.2;
}
.zvo-order-date {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #7a6a99;
  margin: 0;
}
/* Status badges */
.zvo-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.zvo-status-completed  { background: #d4f4e2; color: #1a6640; }
.zvo-status-processing { background: #dbeafe; color: #1e40af; }
.zvo-status-pending    { background: #fef3c7; color: #92400e; }
.zvo-status-on-hold    { background: #fef3c7; color: #92400e; }
.zvo-status-cancelled  { background: #fee2e2; color: #991b1b; }
.zvo-status-refunded   { background: #f3f4f6; color: #4b5563; }
.zvo-status-failed     { background: #fee2e2; color: #991b1b; }

/* ── T-VO: View Order — hide native table chrome ──────────────────────── */
.woocommerce-order-details tfoot { display: none; }
.woocommerce-order-details thead { display: none; }
.woocommerce-order-details__title { display: none; }

/* ── T-VO: View Order — Summary, Address & Payment Cards ──────────────── */
.zvo-shipping-card,
.zvo-payment-card {
  background: #f5f3fb;
  border: 1.5px solid #e8e2f4;
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 16px;
}
.zvo-card-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2d1f4a;
  margin: 0 0 12px;
}
.zvo-shipping-name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #2d1f4a;
  margin: 0 0 4px;
}
.zvo-shipping-addr {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #4a3b6b;
  font-style: normal;
  line-height: 1.6;
}
.zvo-shipping-addr br { display: block; content: ''; }
.zvo-payment-method {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #2d1f4a;
}
.zvo-payment-icon { flex-shrink: 0; }

/* Summary card */
.zvo-summary-card {
  background: #f5f3fb;
  border: 1.5px solid #e8e2f4;
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 16px;
}
.zvo-summary-rows { display: flex; flex-direction: column; gap: 10px; }
.zvo-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #4a3b6b;
}
.zvo-summary-row-label { font-weight: 400; }
.zvo-summary-row-value { font-weight: 500; color: #2d1f4a; }
.zvo-summary-divider {
  border: none;
  border-top: 1px solid #e0d9f0;
  margin: 14px 0;
}
.zvo-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #2d1f4a;
}
.zvo-points-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ece8f6;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #4a3b6b;
}
.zvo-points-banner strong { color: #2d1f4a; font-weight: 600; }
.zvo-points-banner svg { flex-shrink: 0; }

/* Items card */
.zvo-items-card {
  background: #f5f3fb;
  border: 1.5px solid #e8e2f4;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 4px;
}
.zvo-items-list { display: flex; flex-direction: column; }
.zvo-item-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #e8e2f4;
}
.zvo-item-row:first-child { padding-top: 12px; }
.zvo-item-row:last-child { border-bottom: none; padding-bottom: 4px; }
.zvo-item-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: #ece8f6;
}
.zvo-item-img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;
  display: block;
}
.zvo-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.zvo-item-name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #2d1f4a;
  line-height: 1.3;
}
.zvo-item-name a { color: inherit; text-decoration: none; }
.zvo-item-name a:hover { text-decoration: underline; }
.zvo-item-meta {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #7a6a99;
}
.zvo-item-price {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2d1f4a;
  text-align: right;
}
.zvo-item-note {
  font-size: 13px;
  color: #7a6a99;
  padding: 0 0 12px 78px;
}

/* ── View Order: Tracking card ────────────────────────────── */
.zvo-tracking-card {
  background: #fff;
  border: 1px solid #e8e2f5;
  border-radius: 12px;
  padding: 20px 20px 16px;
  margin-bottom: 16px;
}
.zvo-steps {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.zvo-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.zvo-step-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.zvo-step-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.zvo-step-icon--done {
  background: #7C5CBF;
}
.zvo-step-icon--pending {
  border: 2px solid #d0c8e8;
  background: #fff;
}
.zvo-step-line {
  width: 2px;
  flex: 1;
  min-height: 18px;
  background: #e0d8f0;
  margin: 3px 0;
}
.zvo-step-line--done {
  background: #7C5CBF;
}
.zvo-step-body {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex: 1;
  padding-bottom: 18px;
  gap: 8px;
}
.zvo-step-body--last {
  padding-bottom: 0;
}
.zvo-step-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #b0a4cc;
}
.zvo-step-label--done {
  color: #2d1f4a;
  font-weight: 500;
}
.zvo-step-date {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #7a6a99;
  white-space: nowrap;
}
.zvo-step-date--expected {
  color: #b0a4cc;
  font-style: italic;
}
.zvo-tracking-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f0ebfa;
  flex-wrap: wrap;
}
.zvo-tracking-num {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #7a6a99;
}
.zvo-tracking-num strong {
  color: #2d1f4a;
  font-weight: 600;
}
.zvo-track-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1.5px solid #7C5CBF;
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #7C5CBF;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.zvo-track-btn:hover {
  background: #7C5CBF;
  color: #fff;
}
.zvo-step-icon--cancelled {
  background: #e5e0ef;
}
.zvo-step-label--cancelled {
  color: #9a8cb5;
  font-weight: 500;
}

/* ── View-order bottom action bar ────────────────────────── */
.zvo-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.zvo-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .18s, background .18s, color .18s;
  border: none;
  line-height: 1;
}
.zvo-action-btn--outline {
  background: #fff;
  border: 1.5px solid var(--z-purple, #7C5CBF);
  color: var(--z-purple, #7C5CBF);
}
.zvo-action-btn--outline:hover { opacity: .8; }
.zvo-action-btn--primary {
  background: var(--z-purple, #7C5CBF);
  color: #fff;
}
.zvo-action-btn--primary:hover { opacity: .88; }
.zvo-action-btn--ghost {
  background: transparent;
  border: 1.5px solid #d5cce8;
  color: #6b5c8f;
}
.zvo-action-btn--ghost:hover { border-color: var(--z-purple, #7C5CBF); color: var(--z-purple, #7C5CBF); }
.zvo-action-btn--right { margin-left: auto; }

/* ── Buy Again toast ──────────────────────────────────────── */
.zba-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(calc(-50% + 16px));
  background: #2d1f4a;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 99999;
}
.zba-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: auto;
}
.zba-toast--error {
  background: #991b1b;
}

/* ── My Reviews cards ────────────────────────────────────── */
.zmr-reviews { display: flex; flex-direction: column; gap: 14px; }

.zmr-review-card {
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-card);
  padding: 20px 22px;
}

/* Stars + date row */
.zmr-review-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.zmr-stars { display: flex; gap: 2px; }
.zmr-star { font-size: 17px; color: var(--z-border); line-height: 1; }
.zmr-star--filled { color: #F59E0B; }

.zmr-review-date {
  font: 400 12px/1.3 'Inter', sans-serif;
  color: var(--z-muted);
}

/* Review text */
.zmr-review-title {
  font: 600 15px/1.4 'Inter', sans-serif;
  color: var(--z-dark);
  margin: 0 0 6px;
}

.zmr-review-content {
  font: 400 14px/1.65 'Inter', sans-serif;
  color: var(--z-dark);
  margin: 0 0 16px;
}

/* Product footer */
.zmr-review-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--z-border);
}

.zmr-review-thumb {
  width: 40px; height: 40px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--z-border);
  flex-shrink: 0;
}

.zmr-footer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.zmr-product-name {
  font: 500 13px/1.3 'Inter', sans-serif;
  color: var(--z-muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zmr-product-name:hover { color: var(--z-purple); }

.zmr-verified {
  font: 500 11px/1.3 'Inter', sans-serif;
  color: #2E7D32;
  background: #E6F4EA;
  border: 1px solid #C8E6C9;
  border-radius: 100px;
  padding: 2px 8px;
  white-space: nowrap;
}

.zmr-empty {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--z-muted);
}

/* ── My Account: Address Cards ────────────────────────────────────────────── */
.zma-addresses {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.zma-addr-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
}

.zma-addr-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid #f3f4f6;
}

.zma-addr-card-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--z-muted, #6b7280);
  text-transform: uppercase;
}

.zma-addr-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--z-purple);
  background: none;
  border: none;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.zma-addr-edit-btn:hover {
  background: rgba(124, 92, 191, 0.08);
}
.zma-addr-edit-btn svg {
  flex-shrink: 0;
  color: var(--z-purple);
}

.zma-addr-display {
  padding: 16px 22px 20px;
}
.zma-addr-display p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #101010;
  margin: 0;
}
.zma-addr-empty,
.zma-addr-same {
  color: var(--z-muted, #6b7280) !important;
  font-style: italic;
}

/* Inline edit form */
.zma-addr-form-wrap {
  padding: 0 22px 22px;
}

.zma-addr-form-inner {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 18px 8px;
  margin-bottom: 16px;
}
.zma-addr-form-inner .zma-af-field {
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 0;
}
.zma-addr-form-inner .zma-af-field:last-child {
  border-bottom: none;
}

.zma-addr-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.zma-addr-row-3 {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.2fr;
  gap: 0 12px;
}

.zma-addr-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Save 按钮在地址卡片里不需要全宽 */
.zma-addr-form-actions .zma-af-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 11px 28px;
  font-size: 14px;
}

.zma-addr-cancel-btn {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 100px;
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.zma-addr-cancel-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* Same-as-shipping checkbox label */
.zma-addr-same-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 14px;
  cursor: pointer;
}
.zma-addr-same-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #101010;
  cursor: pointer;
  flex-shrink: 0;
}

/* Required star */
.zma-addr-form-inner .required {
  color: #ef4444;
}

/* My Account notice — 去掉主题/插件叠加的蓝色外框，保持简洁 */
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-account .woocommerce-message {
  border: none;
  border-left: 3px solid var(--z-amber);
  border-radius: 8px;
  background: #F5E4C0;
  color: #8A5C1A;
  padding: 14px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  box-shadow: none;
  outline: none;
}
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-account .woocommerce-message::before {
  display: none;
}
/* ul 本身去掉框，让每个 li 单独成一个 notice 框 */
.woocommerce-account .woocommerce-error {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0;
  list-style: none;
  margin: 0 0 1em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.woocommerce-account .woocommerce-error div,
.woocommerce-account .woocommerce-error li {
  list-style: none !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  border: none !important;
  border-left: 3px solid var(--z-amber) !important;
  border-radius: 8px !important;
  background: #F5E4C0 !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #8A5C1A;
}
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-error div::before,
.woocommerce-account .woocommerce-error li::before {
  display: none !important;
}

/* Notices relocated by JS to inside .z-account-login-page — add breathing room */
.z-account-login-page .woocommerce-notices-wrapper {
  margin: 0 0 24px;
}

@media (max-width: 600px) {
  .zma-addr-row-2,
  .zma-addr-row-3 {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════
   Wishlist page (page-id-150)
   ════════════════════════════════════════════════════════════ */

/* Strip GP separate-containers white box */
body.page-id-150 .inside-article {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}
body.page-id-150 .site-main {
  margin: 0 !important;
  background: transparent !important;
}
body.page-id-150 .content-area,
body.page-id-150 #primary {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  background: transparent !important;
}

/* Page background + content width */
body.page-id-150 { background: #F8F6FB; }
body.page-id-150 .entry-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  font-family: 'Inter', sans-serif;
}

/* Hide GP page title */
body.page-id-150 .entry-header { display: none; }

/* Custom heading above wishlist */
body.page-id-150 .entry-content::before {
  content: 'My Wishlist';
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 700;
  color: #2d1f4a;
  margin-bottom: 28px;
}

/* ── Strip WooCommerce/YITH default table chrome ── */
body.page-id-150 .wishlist_table {
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 16px !important;
  width: 100% !important;
  background: transparent !important;
  margin-top: -10px !important;
}
body.page-id-150 .wishlist_table thead { display: none !important; }
body.page-id-150 .wishlist_table th,
body.page-id-150 .wishlist_table td {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

/* ── Each row = card ── */
body.page-id-150 .wishlist_table tbody tr {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: #fff !important;
  border: 1px solid #e8e4f0 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
  margin-bottom: 16px !important;
}

/* ── Thumbnail ── */
body.page-id-150 .wishlist_table td.product-thumbnail {
  width: 76px;
  flex-shrink: 0;
}
body.page-id-150 .wishlist_table td.product-thumbnail img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* ── Product name ── */
body.page-id-150 .wishlist_table td.product-name {
  flex: 1;
  min-width: 0;
}
body.page-id-150 .wishlist_table td.product-name a {
  font-size: 14px;
  font-weight: 600;
  color: #2d1f4a;
  text-decoration: none;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-id-150 .wishlist_table td.product-name a:hover { color: #7C5CBF; }

/* ── Price ── */
body.page-id-150 .wishlist_table td.product-price {
  font-size: 15px;
  font-weight: 700;
  color: #7C5CBF;
  white-space: nowrap;
  flex-shrink: 0;
}
body.page-id-150 .wishlist_table td.product-price .woocommerce-Price-amount { color: #7C5CBF; }

/* ── Stock status ── */
body.page-id-150 .wishlist_table td.product-stock-status { flex-shrink: 0; }
body.page-id-150 .wishlist-in-stock {
  font-size: 11px;
  font-weight: 600;
  color: #2d6a4f;
  background: #d1fae5;
  padding: 3px 8px;
  border-radius: 20px;
}
body.page-id-150 .wishlist-out-of-stock {
  font-size: 11px;
  font-weight: 600;
  color: #991b1b;
  background: #fee2e2;
  padding: 3px 8px;
  border-radius: 20px;
}

/* ── Add to cart ── */
body.page-id-150 .wishlist_table td.product-add-to-cart { flex-shrink: 0; }
body.page-id-150 .wishlist_table .button.add_to_cart_button,
body.page-id-150 .wishlist_table .single_add_to_cart_button {
  display: inline-block;
  background: #7C5CBF !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 9px 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s;
  box-shadow: none !important;
}
body.page-id-150 .wishlist_table .button.add_to_cart_button:hover,
body.page-id-150 .wishlist_table .single_add_to_cart_button:hover { background: #6448a8 !important; }

/* ── Remove (× button in first column) ── */
body.page-id-150 .wishlist_table td.product-remove { flex-shrink: 0; }
body.page-id-150 .wishlist_table .remove_from_wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #f5f3fb;
  border-radius: 50%;
  color: #9b8bbb;
  font-size: 18px;
  font-weight: 300;
  text-decoration: none;
  line-height: 1;
  transition: background .15s, color .15s;
}
body.page-id-150 .wishlist_table .remove_from_wishlist:hover {
  background: #fee2e2;
  color: #991b1b;
}

/* ── Empty state ── */
body.page-id-150 .wishlist_table td.wishlist-empty {
  text-align: center;
  padding: 60px 0 !important;
  color: #9b8bbb;
  font-size: 15px;
}

/* ── Remove all borders/padding from YITH's form wrapper ── */
body.page-id-150 #yith-wcwl-form,
body.page-id-150 .yith-wcwl-form,
body.page-id-150 .wishlist-fragment {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ── YITH chrome — hide title row, edit form, share ── */
body.page-id-150 .wishlist-title-container,
body.page-id-150 .hidden-title-form,
body.page-id-150 .yith-wcwl-share { display: none !important; }

/* Empty state: hide YITH's default text row, show a clean message */
body.page-id-150 .wishlist_table td.wishlist-empty {
  display: block;
  text-align: center;
  padding: 60px 24px !important;
  color: #9b8bbb;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  border: none !important;
  background: transparent !important;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  body.page-id-150 .entry-content { padding: 24px 16px 48px; }
  body.page-id-150 .entry-content::before { font-size: 26px; margin-bottom: 20px; }
  body.page-id-150 .wishlist_table tbody tr { flex-wrap: wrap; gap: 10px; }
  body.page-id-150 .wishlist_table td.product-stock-status { display: none; }
  body.page-id-150 .wishlist_table td.product-name { flex: 1 1 calc(100% - 90px); }
}

/* ── My Account: Login / Register (logged-out state) ─────────────────────── */

/* Hide GP page title on the logged-out my-account page */
.woocommerce-account:not(.logged-in) .entry-title { display: none; }

/* Remove the white-box / border from GP's separate-containers article */
.woocommerce-account:not(.logged-in) .inside-article,
.woocommerce-account:not(.logged-in) article.page {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.woocommerce-account:not(.logged-in) .site-main {
  margin: 0 !important;
}
/* Make the WooCommerce output wrapper fill the available width, capped
   to the same 1200px frame the logged-in dashboard uses (see
   .woocommerce-account .woocommerce above). This used to say
   max-width:none, which only ever rendered at 1200px because #page
   was still capping everything upstream — now that #page is freed to
   bleed the page background, "none" would let the login/register grid
   stretch to the full viewport instead of staying centered. */
.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}

.z-account-login-page {
  padding: 48px 0 80px;
}
.z-account-page-title {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--z-dark);
  margin: 0 0 32px;
}

/* Grid — override WC's float-based .u-columns layout */
.z-login-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}
.z-login-grid::before,
.z-login-grid::after { display: none !important; }
.z-login-grid > div {
  float: none !important;
  width: auto !important;
  clear: none !important;
}

.z-login-card {
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-card);
  padding: 32px;
  box-shadow: 0 1px 4px rgba(44,31,74,0.06);
}
/* Strip any inner card/border styling that WC or plugins add to the <form> */
.z-login-card form,
.z-login-card .woocommerce-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.z-login-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--z-dark);
  margin: 0 0 24px;
  padding: 0;
  border: none;
}
.z-field {
  margin-bottom: 16px;
}
.z-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--z-dark);
  margin-bottom: 6px;
}
.z-field label .required {
  color: var(--z-purple);
  margin-left: 2px;
}
.z-input {
  width: 100% !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid var(--z-border) !important;
  border-radius: var(--z-r-input) !important;
  background: var(--z-bg) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--z-dark) !important;
  box-sizing: border-box !important;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
}
.z-input:focus {
  border-color: var(--z-purple) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(124,92,191,0.15) !important;
}
.z-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}
.z-form-footer--register {
  justify-content: flex-start;
}
.z-lost-password-wrap {
  max-width: 560px;
}
.z-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--z-muted);
  cursor: pointer;
}
.z-btn-primary {
  display: inline-block;
  height: 44px;
  padding: 0 28px !important;
  background: var(--z-purple) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--z-r-btn) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  box-shadow: none !important;
  text-shadow: none !important;
}
.z-btn-primary:hover {
  background: var(--z-purple-hover) !important;
  color: #fff !important;
}
.z-login-card .woocommerce-LostPassword {
  margin-top: 16px;
  font-size: 13px;
}
.z-login-card .woocommerce-LostPassword a {
  color: var(--z-purple);
  text-decoration: none;
}
.z-login-card .woocommerce-LostPassword a:hover {
  text-decoration: underline;
}
.z-register-note {
  font-size: 13px;
  color: var(--z-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.z-login-card .woocommerce-privacy-policy-text {
  font-size: 12px;
  color: var(--z-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.z-login-card .woocommerce-privacy-policy-text a {
  color: var(--z-purple);
}

@media (max-width: 700px) {
  .z-account-login-page { padding: 24px 16px 48px; }
  .z-login-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .z-login-card { padding: 24px 20px; }
  .z-login-title { font-size: 19px; margin-bottom: 20px; }
  .z-form-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .z-btn-primary {
    width: 100% !important;
    text-align: center;
    justify-content: center;
  }
}

/* ── Lost Password page  ·  zma-lp- ──────────────────────── */
.woocommerce-lost-password .entry-title,
.woocommerce-lost-password h1.page-title { display: none !important; }

@media (max-width: 768px) {
  .woocommerce-lost-password .entry-header { padding-left: 16px !important; }
}

.zma-lp-wrap {
  padding: 48px 0 56px;
}
@media (max-width: 768px) {
  .zma-lp-wrap { padding: 32px 16px 48px; }
}

.woocommerce .lost_reset_password.zma-account-form {
  padding: 0 !important;
}

.zma-lp-intro {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--z-muted);
  margin: -12px 0 24px;
}

.zma-req {
  color: var(--z-purple);
  margin-left: 2px;
}

.zma-lp-back {
  text-align: center;
  margin-top: 16px;
  font: 400 13px/1 'Inter', sans-serif;
}
.zma-lp-back a {
  color: var(--z-muted);
  text-decoration: none;
}
.zma-lp-back a:hover { color: var(--z-purple); }

.lost_reset_password.zma-account-form,
.woocommerce .lost_reset_password {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── Blog listing  ·  zblog- ──────────────────────────────── */

/* suppress GeneratePress default article chrome on blog page */
.blog .site-main > article.zblog-card,
.blog .site-main { background: transparent; box-shadow: none; }

.zblog-wrap {
  background: var(--z-bg, #f9f9fb);
  min-height: 60vh;
  width: 100%;
  flex: 1;
}

/* Hero banner */
.zblog-hero {
  background: var(--z-dark, #1a1a2e);
  padding: 56px 0 48px;
  margin-bottom: 0;
}
.zblog-hero-inner {
  text-align: center;
}
.zblog-hero-title {
  font: 700 36px/1.2 'Inter', sans-serif;
  color: #fff;
  margin-bottom: 12px;
}
.zblog-hero-sub {
  font: 400 16px/1.6 'Inter', sans-serif;
  color: rgba(255,255,255,0.65);
  max-width: 520px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .zblog-hero { padding: 40px 16px 36px; }
  .zblog-hero-title { font-size: 26px; }
}

/* Container */
.zblog-container {
  padding-top: 48px;
  padding-bottom: 64px;
}
@media (max-width: 768px) {
  .zblog-container { padding: 32px 16px 48px; }
}

/* Card grid */
.zblog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 960px) {
  .zblog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .zblog-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Card */
.zblog-card {
  background: #fff;
  border-radius: var(--z-r-card, 14px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow 0.2s, transform 0.2s;
  /* reset GeneratePress article defaults */
  margin: 0 !important;
  padding: 0 !important;
}
.zblog-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
  transform: translateY(-2px);
}

/* Thumbnail */
.zblog-card-img-wrap {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #eee;
}
.zblog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.zblog-card:hover .zblog-card-img { transform: scale(1.04); }

/* Card body */
.zblog-card-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Category badge */
.zblog-card-cat {
  font: 600 11px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--z-purple, #7C5CBF);
  margin-bottom: 10px;
  display: block;
}

/* Title */
.zblog-card-title {
  font: 600 17px/1.35 'Inter', sans-serif;
  color: var(--z-dark, #1a1a2e);
  margin: 0 0 10px;
}
.zblog-card-title a {
  color: inherit;
  text-decoration: none;
}
.zblog-card-title a:hover { color: var(--z-purple, #7C5CBF); }

/* Excerpt */
.zblog-card-excerpt {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--z-muted, #6b7280);
  margin: 0 0 16px;
  flex: 1;
}

/* Meta */
.zblog-card-meta {
  font: 400 12px/1 'Inter', sans-serif;
  color: var(--z-muted, #6b7280);
  margin-top: auto;
}

/* Pagination */
.zblog-pagination {
  margin-top: 48px;
  text-align: center;
}
.zblog-pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.zblog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  font: 500 14px/1 'Inter', sans-serif;
  color: var(--z-dark, #1a1a2e);
  background: #fff;
  border: 1px solid var(--z-border, #e5e7eb);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.zblog-pagination .page-numbers:hover,
.zblog-pagination .page-numbers.current {
  background: var(--z-purple, #7C5CBF);
  color: #fff;
  border-color: var(--z-purple, #7C5CBF);
}

/* Hide GeneratePress page title on blog listing */
.blog .page-header { display: none; }

/* hide GP default page title on sales page */
.page-template-page-sales .entry-title { display: none !important; }

/* Part 5B: hide fkcart "Select options" link — customer already chose their variation */
.fkcart-select-options { display: none !important; }

/* Part 3: $50 minimum order — drawer message + disabled checkout button */
.zd-min-order-msg {
  font-size: 13px;
  color: #c0392b;
  text-align: center;
  margin: 0 0 8px;
  line-height: 1.4;
}
.zd-sumo-coupon-msg {
  font-size: 13px;
  color: #c0392b;
  margin: 0 0 10px;
  line-height: 1.4;
}
.zd-login-required-msg {
  font-size: 13px;
  color: #555;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 10px;
  line-height: 1.4;
  text-align: center;
}
.zd-login-link {
  color: #7b3fa0;
  font-weight: 600;
  text-decoration: underline;
}
/* Old custom drawer disabled state (kept for reference) */
.zd-checkout-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* fkcart drawer: disable checkout button when cart is under $50 (href set to # by PHP filter) */
#fkcart-checkout-button[href="#"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Part A2: account icon always visible on mobile */
@media (max-width: 1023px) {
  .zd-account-btn { display: flex !important; }
}

/* Part A4: required field error message */
.zco-field-required-error {
  color: #B3261E;
  font-size: 12px;
  display: block;
  margin-top: 4px;
  padding-left: 16px;
}
/* Part A4: red border on invalid fields */
.form-row.woocommerce-invalid-required-field input:not([type=hidden]):not([type=radio]):not([type=checkbox]),
.form-row.woocommerce-invalid-required-field select,
.form-row.woocommerce-invalid-required-field textarea {
  border-color: #B3261E !important;
}

/* Part A6: checkout under-$50 message — uses .zco-layout two-column, no wrapper needed */
.zco-under-minimum {
  background: #fff8f8;
  border: 1px solid #f0d0d0;
  border-radius: 12px;
  padding: 32px 28px;
  text-align: center;
}
.zco-under-min-title {
  font-size: 18px;
  font-weight: 700;
  color: #2d1f4a;
  margin: 0 0 10px;
}
.zco-under-min-msg {
  font-size: 15px;
  color: #555;
  margin: 0 0 18px;
}
.zco-under-min-btn {
  display: inline-block;
  background: #7C5CBF;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}
.zco-under-min-btn:hover { background: #6a4daa; color: #fff; }

/* ── 18C: Logged-in bar ─────────────────────────────────────── */
.zco-logged-in-bar {
  font-size: 13px;
  color: #5a4a72;
  margin: 8px 0 14px;
  text-align: center;
}
.zco-logout-link { color: #7C5CBF; text-decoration: underline; }
.zco-logout-link:hover { color: #5a3aa0; }

/* ── 18D: Zoom Points accordion ─────────────────────────────── */
.zco-zp-block {
  background: #EEEDFE;
  border: 1px solid #CECBF6;
  border-radius: 10px;
  margin: 0 0 10px;
  overflow: hidden;
}
.zco-zp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
  gap: 8px;
}
.zco-zp-header-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zco-zp-title { font-size: 13px; font-weight: 600; color: #26215C; }
.zco-zp-balance { font-size: 12px; color: #534AB7; }
.zco-zp-chevron { flex-shrink: 0; transition: transform 0.2s; }
.zco-zp-block.is-open .zco-zp-chevron { transform: rotate(180deg); }
.zco-zp-block.is-locked { opacity: 0.55; pointer-events: none; }

.zco-zp-body { padding: 0 14px 12px; }

/* Slider */
.zco-zp-slider {
  width: 100%;
  accent-color: #7C5CBF;
  margin: 6px 0 2px;
  cursor: pointer;
}
.zco-zp-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #888;
  margin-bottom: 8px;
}
.zco-zp-value-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #26215C;
  margin: 0 0 10px;
}

/* Apply button */
.zco-zp-apply-btn {
  display: block;
  width: 100%;
  background: #7C5CBF;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.zco-zp-apply-btn:hover { background: #6a4daa; }
.zco-zp-apply-btn:disabled { opacity: .6; cursor: default; }

.zco-zp-feedback { font-size: 12px; margin: 6px 0 0; text-align: center; min-height: 16px; }
.zco-zp-feedback.zco-msg-err { color: #c0392b; }
.zco-zp-feedback.zco-msg-ok  { color: #2a7a2a; }

/* Applied state */
.zco-zp-applied-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}
.zco-zp-applied-label { font-size: 13px; color: #26215C; }
.zco-zp-applied-amount { font-weight: 600; color: #7C5CBF; margin-left: 4px; }
.zco-zp-remove-btn {
  font-size: 12px;
  color: #7C5CBF;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.zco-zp-remove-btn:hover { color: #7C5CBF; background: none; }

/* Lock message (external coupon applied) */
.zco-zp-lock-msg {
  font-size: 12px;
  color: #5a4a72;
  line-height: 1.5;
  margin: 0;
}

/* 18I: Points applied → coupon input replaced by lock message */
.zco-coupon-pts-lock-msg {
  font-size: 12px;
  color: #5a4a72;
  line-height: 1.5;
  margin: 4px 0 0;
}

/* ── Zoom Points: earned notice on thankyou + view-order ─────────────────── */
.zvo-earned-points-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f5f0fc;
  border: 1px solid #d8caf0;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #3a2a5e;
  line-height: 1.5;
}
.zvo-pts-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.zvo-pts-body { display: flex; flex-direction: column; gap: 3px; }
.zvo-pts-text strong { color: #7C5CBF; }
.zvo-pts-note { font-size: 12px; color: #9b8abf; }

/* ── EMT Thankyou Card ───────────────────────────────────────────────────── */
.zco-emt-card {
  background: #fdf6e8;
  border: 1.5px solid #d4a830;
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 24px;
  color: #1a1506;
}
.zco-emt-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #b07a10;
  margin-bottom: 10px;
}
.zco-emt-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e09820;
  flex-shrink: 0;
}
.zco-emt-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px;
  color: #1a1506;
}
.zco-emt-desc {
  font-size: 14px;
  color: #4a3f20;
  margin: 0 0 24px;
  line-height: 1.6;
}
.zco-emt-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .zco-emt-fields { grid-template-columns: 1fr; }
}
.zco-emt-field {
  background: #fff;
  border: 1.5px solid #d4a830 !important;
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zco-emt-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  color: #b07a10;
}
.zco-emt-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.zco-emt-field-value {
  font-size: 20px;
  font-weight: 700;
  color: #1a1506;
  word-break: break-all;
}
.zco-emt-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #7a5c10;
  background: #fdf0cc;
  border: 1.5px solid #d4a830;
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.zco-emt-copy-btn:hover { background: #f5e0a0; }
.zco-emt-copied { background: #d4edda !important; border-color: #4caf50 !important; color: #2e7d32 !important; }
.zco-emt-field-note {
  font-size: 12px;
  color: #7a6a3a;
  margin: 0;
  line-height: 1.5;
}
.zco-emt-autodeposit {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #4a3f20;
  margin: 0 0 8px;
}
.zco-emt-firsttime {
  font-size: 13px;
  color: #4a3f20;
  margin: 0;
}
.zco-emt-firsttime a {
  color: #b07a10;
  text-decoration: underline;
}

/* Constrain order-received content to the same 1160px width as the rest
   of the checkout page (.entry-header, .zco-back-link, .zco-form). #page/
   .site-content already bleed edge-to-edge via the shared
   body.woocommerce-checkout Layer-1 rule above — but .woocommerce-order
   itself had no width of its own, so it was just riding .inside-article's
   ambient padding instead of lining up with the "Order received" title
   and back-link above it. Same fix as body.home / .zco-form — see the
   comments there for why max-width + margin + padding all need to live
   on this one element instead of relying on the parent. */
.woocommerce-order {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 18px;
}

/* ── Order received: header (replaces WC order-overview bar) ────────────── */
.woocommerce-thankyou-order-received {
  display: none;
}
.zco-order-header {
  margin-bottom: 24px;
}
.zco-order-heading {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 6px;
}
.zco-order-email-note {
  font-size: 14px;
  color: #374151;
  margin: 0;
  line-height: 1.6;
}

/* ── Payment confirmed banner (non-wemt orders) ─────────────────────────── */
.zco-payment-confirmed {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f0faf4;
  border: 1.5px solid #a8d5b8;
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 24px;
}
.zco-pc-icon { flex-shrink: 0; margin-top: 1px; }
.zco-pc-body { flex: 1; }
.zco-pc-title {
  font-size: 15px;
  color: #1a3d2a;
  margin: 0 0 5px;
}
.zco-pc-note {
  font-size: 14px;
  color: #2d5a3d;
  margin: 0;
  line-height: 1.6;
}

/* ── Two-column section below EMT card ──────────────────────────────────── */
.zco-two-col {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 768px) {
  .zco-two-col { grid-template-columns: 1fr; }
}

/* Left: What happens next */
.zco-what-next {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 28px 24px;
  height: 100%;
  box-sizing: border-box;
}
.zco-wn-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 24px;
}
.zco-wn-steps {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.zco-wn-step {
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.zco-wn-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
}
.zco-wn-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #7C5CBF;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.zco-wn-line {
  width: 2px;
  flex: 1;
  background: #ddd8f5;
  margin: 5px 0;
  min-height: 16px;
}
.zco-wn-content {
  flex: 1;
  padding-bottom: 22px;
}
.zco-wn-step:last-child .zco-wn-content {
  padding-bottom: 0;
}
.zco-wn-heading {
  display: block;
  font-weight: 700;
  color: #1a1a2e;
  font-size: 15px;
  margin: 8px 0 5px;
  line-height: 1.3;
}
.zco-wn-body {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}
.zco-wn-footer {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
}
.zco-wn-footer a {
  color: #7C5CBF;
  text-decoration: underline;
}

/* Left column */
.zco-col-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Create account card */
.zco-create-account {
  background: #eeedf8;
  border-radius: 14px;
  padding: 24px;
}
.zco-ca-badge {
  display: inline-block;
  background: #7C5CBF;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 14px;
}
.zco-ca-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 10px;
  line-height: 1.3;
}
.zco-ca-desc {
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
  margin: 0 0 18px;
}
.zco-ca-form {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-end;
}
.zco-ca-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.zco-ca-label {
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}
.zco-ca-input {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #1a1a2e;
  width: 100%;
  box-sizing: border-box;
}
.zco-ca-input[readonly] { color: #6b7280; }
.zco-ca-btn {
  background: #7C5CBF;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 11px 20px;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  transition: background .15s;
}
.zco-ca-btn:hover { background: #6548A8; }
@media (max-width: 600px) {
  .zco-ca-form { flex-direction: column; }
  .zco-ca-btn { width: 100%; }
}

/* Also ensure the existing points notice fits nicely in left column */
.zco-col-left .zvo-earned-points-notice {
  margin: 0;
}
.zvo-pts-card {
  background: #eeedf8;
  border-radius: 14px;
  padding: 24px;
}
.zvo-pts-card-badge {
  display: inline-block;
  background: #7C5CBF;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 14px;
}
.zvo-pts-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 10px;
  line-height: 1.3;
}
.zvo-pts-card-desc {
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
  margin: 0 0 6px;
}
.zvo-pts-card-desc strong { color: #7C5CBF; }
.zvo-pts-card-note {
  font-size: 12px;
  color: #9b8abf;
  margin: 0;
  line-height: 1.5;
}

/* Right column */
.zco-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Order summary card */
.zco-summary-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 24px;
}
.zco-summary-title,
.zco-address-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 16px;
}
.zco-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f4;
}
.zco-item:last-child { border-bottom: none; }
.zco-item-img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  flex-shrink: 0;
  background: #f3f4f6;
}
.zco-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zco-item-img--empty { background: #f3f4f6; }
.zco-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.zco-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  line-height: 1.4;
}
.zco-item-meta {
  font-size: 13px;
  color: #9ca3af;
}
.zco-item-price {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  white-space: nowrap;
  flex-shrink: 0;
}
.zco-totals {
  margin-top: 14px;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
}
.zco-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #374151;
  padding: 4px 0;
}
.zco-grand-total {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
  margin-top: 6px;
}
.zco-pts-earned-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid #e5e7eb;
}
.zco-pts-earned-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
}
.zco-pts-earned-sub {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}
.zco-pts-earned-val {
  font-size: 15px;
  font-weight: 700;
  color: #c89a1a;
  white-space: nowrap;
  padding-left: 12px;
}
.zco-payment-due {
  font-size: 13px;
  color: #2d5a3d;
  text-align: right;
  margin-top: 5px;
}
.zco-shipping-free {
  color: #16a34a;
  font-weight: 600;
}
.zco-ship-orig {
  color: #9ca3af;
  font-weight: 400;
  text-decoration: line-through;
  margin-right: 4px;
}

/* Shipping address card */
.zco-address-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 24px;
}
.zco-addr-line {
  font-size: 14px;
  color: #374151;
  margin: 0 0 3px;
  line-height: 1.6;
}
.zco-addr-name {
  font-weight: 700;
  color: #1a1a2e;
}

/* ── Global WooCommerce notice override — all pages ─────────────────────── */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: 3px solid var(--z-amber) !important;
  border-radius: 8px !important;
  background: #F5E4C0 !important;
  color: #8A5C1A !important;
  box-shadow: none !important;
  padding-left: 16px !important;
  position: relative !important;
}
.woocommerce-error::before,
.woocommerce-error::after,
.woocommerce-error div::before,
.woocommerce-error div::after,
.woocommerce-error li::before,
.woocommerce-error li::after,
.woocommerce-info::before,
.woocommerce-info::after,
.woocommerce-message::before,
.woocommerce-message::after {
  display: none !important;
  content: none !important;
  font-family: inherit !important;
}
.woocommerce-error div,
.woocommerce-error li {
  list-style: none !important;
  border-left: 3px solid var(--z-amber) !important;
  border-radius: 8px !important;
  background: #F5E4C0 !important;
  color: #8A5C1A !important;
  padding-left: 16px !important;
}