/* =====================================================================
   Seeds of Cannabis — Premium dark + green theme
   ===================================================================== */

:root {
  /* Palette */
  --bg: #0a0b0a;
  --bg-elevated: #111312;
  --bg-card: #131613;
  --line: #1f2420;
  --line-strong: #2a302a;

  --ink: #edeee9;
  --ink-muted: #9aa49a;
  --ink-dim: #6a746a;

  --green: #8fbf6a;        /* primary accent */
  --green-bright: #a8d880; /* hover / highlight */
  --green-deep: #2e4a2a;   /* structural */
  --green-glow: rgba(143, 191, 106, 0.18);

  --gold: #c9a86a;         /* subtle warm tertiary */

  /* Type */
  --font-display: "Boska", "Georgia", serif;
  --font-body: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing */
  --container: 1240px;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------- Reset ------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02";
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
.italic { font-style: italic; font-family: var(--font-display); font-weight: 500; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: 12px; top: 12px;
  padding: 8px 12px;
  background: var(--green); color: #000;
  border-radius: var(--radius-sm);
  z-index: 100;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.skip-link:focus {
  clip-path: none;
  clip: auto;
  height: auto; width: auto;
  overflow: visible;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

/* ------------------- Header ------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 11, 10, 0.75);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(10, 11, 10, 0.9);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.logo__mark-wrap {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.logo__mark {
  width: 40px;
  height: 40px;
  overflow: visible;
}
.logo__mark--photo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  transform: rotate(-12deg);
  transform-origin: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s cubic-bezier(.2,.7,.3,1), filter 0.3s ease;
}
.logo:hover .logo__mark--photo {
  transform: rotate(-6deg) scale(1.04);
  filter: drop-shadow(0 3px 6px rgba(168, 216, 128, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}
/* legacy leaflet rules retained to avoid breakage, currently unused */
.logo__mark .leaflet-fill {
  fill: rgba(255, 255, 255, 0.82);
  stroke: rgba(255, 255, 255, 1);
  stroke-width: 0.5;
  stroke-linejoin: round;
}
.logo__mark .leaflet-vein {
  fill: none;
  stroke: rgba(10, 11, 10, 0.55);
  stroke-width: 0.6;
  stroke-linecap: round;
  opacity: 0.75;
}
.logo__mark .leaf-stem {
  fill: rgba(255, 255, 255, 0.65);
}
.logo:hover .logo__mark .leaflet-fill {
  fill: rgba(255, 255, 255, 0.95);
}
.footer .logo__mark .leaflet-vein {
  stroke: rgba(10, 11, 10, 0.7);
}
.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--font-display);
  color: var(--ink);
}
.logo__line1 {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-weight: 500;
  margin-bottom: 3px;
}
.logo__line2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  gap: clamp(16px, 2.5vw, 36px);
  font-size: 14px;
}
.nav a {
  position: relative;
  color: var(--ink-muted);
  transition: color .2s;
  padding: 4px 0;
}
.nav a::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--green);
  transition: width .3s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }

.header__actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--ink-muted);
  border-radius: 50%;
  transition: background .2s, color .2s;
}
.icon-btn:hover { background: var(--bg-card); color: var(--ink); }
.cart-count {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--green);
  color: #000;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  display: grid; place-items: center;
  line-height: 1;
}

@media (max-width: 840px) {
  .nav { display: none; }
}

/* ------------------- Hero -------------------
   Sized so that on a typical laptop (720–900px tall) the hero + sticky
   header + marquee all fit within a single viewport on first paint.
   Header is 72px tall, marquee is ~59px tall, so hero fills the rest.
   Minimum 560px so short windows still get a usable hero.
   =============================================== */
.hero {
  position: relative;
  /* Use svh (small viewport height) so the marquee stays visible on mobile
     even when the browser URL bar is showing. svh equals the viewport with
     browser chrome visible — the smallest possible viewport — so the
     banner never ends up behind the URL bar on first paint. */
  min-height: max(520px, calc(100svh - 139px));
  max-height: calc(100svh - 139px);
  display: flex;
  align-items: flex-start;
  padding-block: clamp(24px, 3vh, 40px) clamp(24px, 3vh, 40px);
  overflow: hidden;
  isolation: isolate;
}
@supports not (height: 100svh) {
  .hero { min-height: max(520px, calc(100vh - 139px)); max-height: calc(100vh - 139px); }
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
  filter: brightness(0.82) saturate(1.08);
}
.hero__vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(10,11,10,0.9) 25%, rgba(10,11,10,0.35) 55%, transparent 80%),
    linear-gradient(180deg, rgba(10,11,10,0.5) 0%, transparent 30%, transparent 70%, var(--bg) 100%);
}
.hero__content {
  position: relative;
  max-width: 720px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(17,19,18, 0.6);
  backdrop-filter: blur(8px);
  margin-bottom: 16px;
}
.eyebrow__dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--green-glow);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  50% { box-shadow: 0 0 0 8px rgba(143,191,106,0.05); }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.8vw, 108px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.hero__title .italic {
  color: var(--green);
  font-size: 0.72em;
  display: inline-block;
  padding-left: 0.12em;
}

.hero__lede {
  max-width: 520px;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 22px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--green);
  color: #071207;
}
.btn--primary:hover {
  background: var(--green-bright);
}
.btn--ghost {
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover {
  border-color: var(--green);
  color: var(--green);
}
.btn--small {
  padding: 9px 16px;
  font-size: 13px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}
.btn--small:hover {
  background: var(--green);
  color: #071207;
  border-color: var(--green);
}

.hero__meta {
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  max-width: 580px;
}
.hero__meta div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__meta strong {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hero__meta span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
}

.hero__scroll {
  position: absolute;
  right: clamp(20px, 4vw, 48px);
  bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  animation: float 3s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(6px); } }

@media (max-width: 900px) {
  /* Tablets/phones: fit-to-fold like desktop, but content vertically
     centred in the hero so the title sits closer to the header and the
     whitespace is distributed evenly above and below. Marquee still pins
     to the bottom of the first fold. Uses svh so the banner stays visible
     even when the mobile browser URL bar is showing. */
  .hero {
    min-height: calc(100svh - 139px);
    max-height: none;
    align-items: center;
    padding-block: clamp(20px, 3vh, 40px);
  }
  @supports not (height: 100svh) {
    .hero { min-height: calc(100vh - 139px); }
  }
}
@media (max-width: 640px) {
  .hero__meta { flex-wrap: wrap; gap: 20px; }
  .hero__scroll { display: none; }
}

/* ------------------- Marquee ------------------- */
.marquee {
  overflow: hidden;
  padding-block: 22px;
  border-block: 1px solid var(--line);
  background: var(--bg-elevated);
}
.marquee__track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: marquee 36s linear infinite;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.marquee__track span { flex-shrink: 0; }
.marquee__track span:nth-child(even) { color: var(--green); }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ------------------- Sections ------------------- */
.section {
  padding-block: clamp(72px, 10vw, 140px);
}
.section--dark {
  background:
    radial-gradient(ellipse at top, rgba(143,191,106,0.04), transparent 60%),
    var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 56px;
}
.section__kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 16px;
  font-weight: 500;
}
.section__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 68px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.section__desc {
  font-size: 16px;
  color: var(--ink-muted);
  max-width: 440px;
  margin: 0;
  justify-self: end;
}
.link-arrow {
  color: var(--green);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--green-deep);
  padding-bottom: 4px;
  align-self: end;
  transition: color .2s, border-color .2s;
}
.link-arrow:hover {
  color: var(--green-bright);
  border-color: var(--green);
}

@media (max-width: 780px) {
  .section__head { grid-template-columns: 1fr; gap: 24px; }
  .section__desc, .link-arrow { justify-self: start; }
}

/* ------------------- Category grid ------------------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s, transform .3s var(--ease), background .3s;
  isolation: isolate;
}
.cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, var(--green-glow), transparent 60%);
  opacity: 0;
  transition: opacity .4s;
  z-index: -1;
}
.cat-card:hover {
  border-color: var(--green-deep);
  transform: translateY(-3px);
}
.cat-card:hover::before { opacity: 1; }
.cat-card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--green);
  background: rgba(143,191,106,0.08);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.cat-card__icon svg { width: 24px; height: 24px; }
.cat-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}
.cat-card p {
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.5;
  flex: 1;
}
.cat-card__link {
  font-size: 12px;
  color: var(--green);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  letter-spacing: 0.02em;
}

@media (max-width: 980px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .cat-grid { grid-template-columns: 1fr; }
}

/* ------------------- Strain grid ------------------- */
.strain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.strain {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .3s, transform .3s var(--ease);
  display: flex;
  flex-direction: column;
}
.strain:hover {
  border-color: var(--green-deep);
  transform: translateY(-4px);
}
.strain__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #000;
  text-decoration: none;
  color: inherit;
}
.strain__name a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.strain__name a:hover { color: var(--green-bright); }
.strain__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.strain:hover .strain__media img {
  transform: scale(1.05);
}
.strain__badge {
  position: absolute;
  top: 14px; left: 14px;
  padding: 5px 11px;
  background: var(--green);
  color: #071207;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
}
.strain__badge--alt {
  background: #0a0b0a;
  color: var(--green);
  border: 1px solid var(--green-deep);
}
.strain__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.strain__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.strain__meta .dot {
  width: 3px; height: 3px; background: var(--ink-dim); border-radius: 50%;
}
.strain__name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}
.strain__desc {
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0 0 20px;
  line-height: 1.55;
}
.strain__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 0;
  margin-bottom: 20px;
  border-block: 1px solid var(--line);
}
.strain__stats div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.strain__stats span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}
.strain__stats strong {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.strain__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}
.price em {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: 0.05em;
  margin-left: 2px;
}

@media (max-width: 980px) {
  .strain-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .strain-grid { grid-template-columns: 1fr; }
}

/* ------------------- Editorial ------------------- */
.editorial__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.editorial__figure {
  margin: 0;
  position: relative;
}
.editorial__figure img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.editorial__figure figcaption {
  position: absolute;
  bottom: 20px; left: 20px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: rgba(10,11,10,0.7);
  backdrop-filter: blur(6px);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.editorial__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}
.editorial__text p {
  color: var(--ink-muted);
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
}
.checklist {
  margin: 28px 0 28px;
  display: grid;
  gap: 10px;
}
.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  font-size: 14px;
}
.checklist li::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--green-deep) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fbf6a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat;
  flex-shrink: 0;
}

@media (max-width: 880px) {
  .editorial__grid { grid-template-columns: 1fr; }
  .editorial__figure { max-width: 480px; }
}

/* ------------------- Trust bar ------------------- */
.trust {
  padding-block: clamp(48px, 6vw, 72px);
  background: var(--bg-elevated);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.trust__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink);
}
.trust__item svg {
  width: 32px; height: 32px;
  color: var(--green);
  margin-bottom: 10px;
}
.trust__item h4 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
}
.trust__item p {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 880px) {
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------- Newsletter ------------------- */
.newsletter {
  padding-block: clamp(72px, 10vw, 120px);
}
.newsletter__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  padding: clamp(36px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 80% 20%, var(--green-glow), transparent 50%),
    var(--bg-card);
}
.newsletter__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.newsletter__title .italic { color: var(--green); }
.newsletter__desc {
  color: var(--ink-muted);
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  max-width: 440px;
}
.newsletter__form {
  display: flex;
  gap: 10px;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .2s;
}
.newsletter__form:focus-within {
  border-color: var(--green-deep);
}
.newsletter__form input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 10px 18px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  min-width: 0;
}
.newsletter__form input::placeholder { color: var(--ink-dim); }

@media (max-width: 780px) {
  .newsletter__inner { grid-template-columns: 1fr; }
  .newsletter__form { flex-direction: column; background: transparent; border: 0; padding: 0; }
  .newsletter__form input { background: var(--bg-card); border: 1px solid var(--line); border-radius: 999px; padding: 14px 20px; }
  .newsletter__form .btn { width: 100%; justify-content: center; }
}

/* ------------------- Footer ------------------- */
.footer {
  padding-top: 72px;
  padding-bottom: 32px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--line);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.footer__brand p {
  margin: 16px 0 0;
  max-width: 280px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.6;
}
.footer h5 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 20px;
}
.footer ul { display: grid; gap: 12px; }
.footer ul a {
  color: var(--ink-muted);
  font-size: 14px;
  transition: color .2s;
}
.footer ul a:hover { color: var(--green); }

.footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 32px;
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.6;
}
.footer__legal small:last-child { max-width: 640px; }

@media (max-width: 780px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ------------------- Reveal ------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   WordPress niceties
   ===================================================================== */

/* Ensure admin bar doesn't cover fixed header. */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .header { top: 46px; }
}

/* Skip link — visible only on keyboard focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 18px;
  background: var(--green);
  color: var(--bg);
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Screen-reader only. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Primary nav: support WP-generated <ul> inside .nav (same look as inline <a>s). */
.nav ul.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 34px;
  align-items: center;
}
.nav ul.nav-menu li a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.01em;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.nav ul.nav-menu li a:hover { opacity: 1; color: var(--green-bright); }

/* Footer menus — match the unstyled <ul> look of the preview. */
.footer ul { list-style: none; margin: 0; padding: 0; }

/* =====================================================================
   AGE GATE
   ===================================================================== */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 11, 10, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: ageGateFade 0.3s ease;
}
@keyframes ageGateFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.age-gate[hidden] { display: none; }

.age-gate__panel {
  max-width: 460px;
  width: 100%;
  background: #13141280;
  border: 1px solid rgba(143, 191, 106, 0.22);
  border-radius: 14px;
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
}

.age-gate__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.age-gate__logo img {
  transform: rotate(-12deg);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
}

.age-gate__title {
  font-family: 'Boska', Georgia, serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--ink);
}
.age-gate__title .italic {
  font-style: italic;
  color: var(--green-bright);
}

.age-gate__desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(237, 238, 233, 0.78);
  margin: 0 0 24px;
}

.age-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.age-gate__actions .btn { justify-content: center; width: 100%; }

.age-gate__legal {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(237, 238, 233, 0.5);
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 520px) {
  .age-gate__actions { flex-direction: row; }
}

/* =====================================================================
   WOOCOMMERCE OVERRIDES — black+green treatment for Woo default markup
   ===================================================================== */

.woo-wrap {
  /* Trimmed top padding so the buy box stays above the fold on laptops
     once a variation is selected. Was 120px — the extra 60px of black
     space between the sticky header and the hero wasn't doing any work. */
  padding-top: 60px;
  padding-bottom: 120px;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  /* Extra breathing room on woo pages — override the default container padding
     so content never feels cramped against the viewport edges. */
}
.woo-wrap > .container,
.woo-main > .container,
body.single-product main > .container,
body.single-product .woo-main > .container {
  /* Generous inset so content never feels cramped against viewport edges.
     On a 1920px screen this yields ~115px of breathing room each side.
     !important because some hosts inject page-builder CSS that overrides
     the default .container rule. We also match by body class
     `.single-product` so the rule applies even if the theme wrapper hooks
     haven't been output. */
  padding-inline: clamp(28px, 6vw, 120px) !important;
}

/* Belt-and-braces: apply the same generous inset to the Woo <main> itself
   in case no .container wrapper is present at all. */
body.single-product main.woo-main,
body.woocommerce.single-product main#main {
  padding-inline: clamp(28px, 6vw, 120px);
}

/* Extra internal inset on spec-grid, description, and section headings
   so spec rows + text never touch the container edge — even if the outer
   container's own padding has been overridden by the host or a plugin. */
.woo-single .spec-grid,
.woo-single .soc-product__desc-body,
.woo-single .soc-product__section-title,
.woo-single .soc-product__kicker,
body.single-product .spec-grid,
body.single-product .soc-product__desc-body,
body.single-product .soc-product__section-title,
body.single-product .soc-product__kicker,
body.single-product .soc-product__section {
  margin-left: clamp(0px, 1vw, 16px);
  margin-right: clamp(0px, 1vw, 16px);
}

/* Flowing sections below the hero get an extra inset so specs, description,
   reviews, and related-strain cards sit comfortably inside the page margins. */
.woo-single .soc-product__section {
  padding-inline: clamp(0px, 1.5vw, 28px);
}
.woo-single .soc-product__section > .soc-product__kicker,
.woo-single .soc-product__section > .soc-product__section-title,
.woo-single .soc-product__section > .soc-product__desc-body,
.woo-single .soc-product__section > .spec-grid,
.woo-single .soc-product__section > .soc-product__related-head,
.woo-single .soc-product__section > .strain-grid {
  /* Sections are already padded by the rule above — no double padding */
}

.woo-crumbs {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(237, 238, 233, 0.55);
  margin-bottom: 18px;
}
.woo-crumbs a { color: rgba(237, 238, 233, 0.85); text-decoration: none; }
.woo-crumbs a:hover { color: var(--green-bright); }
.woo-crumbs .current { color: var(--ink); }
.woo-crumbs span[aria-hidden] { margin: 0 10px; color: rgba(237,238,233,0.3); }

/* ---------- SINGLE PRODUCT (v1.2.0 flowing layout) ---------- */

.soc-product {
  display: block;
}

/* HERO — gallery + buy box, 2 columns on desktop */
.soc-product__hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-bottom: 64px;
}
@media (min-width: 900px) {
  .soc-product__hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
}

/* Gallery — dark rounded bezel, 4:3, like the featured-strain card */
.soc-product__gallery {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.06);
}
.soc-product__gallery .woocommerce-product-gallery {
  width: 100%;
  float: none;
  margin: 0;
}
.soc-product__gallery .woocommerce-product-gallery__image {
  aspect-ratio: 4 / 3;
  display: block;
  background: #000;
}
.soc-product__gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease);
}
.soc-product__gallery:hover .woocommerce-product-gallery__image img {
  transform: scale(1.02);
}
.soc-product__gallery .flex-control-thumbs {
  list-style: none;
  margin: 12px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.soc-product__gallery .flex-control-thumbs li {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
}
.soc-product__gallery .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  opacity: 0.55;
  transition: opacity 0.2s ease;
  display: block;
}
.soc-product__gallery .flex-control-thumbs img.flex-active,
.soc-product__gallery .flex-control-thumbs img:hover { opacity: 1; }
.soc-product__gallery .onsale {
  position: absolute;
  top: 16px; right: 16px;
  padding: 6px 12px;
  background: rgba(10,11,10,0.85);
  border: 1px solid rgba(143,191,106,0.4);
  color: var(--green-bright);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  z-index: 2;
}

/* Summary (buy box) */
.soc-product__summary {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}
.soc-product__summary .product_title {
  font-family: 'Boska', Georgia, serif;
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, 54px);
  line-height: 1.05;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Italic meta line (Type · Dominance) */
.soc-product__meta {
  font-size: 14px;
  color: rgba(237,238,233,0.7);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.soc-product__meta .italic {
  font-family: 'Boska', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: rgba(237,238,233,0.85);
}
.soc-product__meta .dot {
  display: inline-block;
  width: 3px; height: 3px;
  background: rgba(237,238,233,0.45);
  border-radius: 50%;
  margin: 0 4px;
}

/* Price */
.soc-product__summary .price {
  font-family: 'Boska', Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  color: var(--green-bright);
  margin: 0 0 16px;
  line-height: 1.1;
}
.soc-product__summary .price ins { text-decoration: none; }
.soc-product__summary .price del {
  opacity: 0.5;
  font-size: 22px;
  margin-right: 10px;
}
.soc-product__summary .price .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* Stat chips (THC / Character / Flowering) */
.stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}
.stat-chip {
  display: inline-flex;
  flex-direction: column;
  padding: 10px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  min-width: 90px;
}
.stat-chip__label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237,238,233,0.55);
  margin-bottom: 3px;
}
.stat-chip__value {
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
  font-family: 'Satoshi', sans-serif;
}

/* Short description */
.soc-product__summary .woocommerce-product-details__short-description {
  color: rgba(237,238,233,0.8);
  line-height: 1.6;
  margin: 0 0 16px;
  font-size: 14px;
}
.soc-product__summary .woocommerce-product-details__short-description p { margin: 0 0 12px; }

/* Variations table — compact, dark, symmetrical */
.soc-product__summary table.variations {
  width: 100%;
  margin: 0 0 14px;
  border-collapse: collapse;
}
.soc-product__summary table.variations tr { display: flex; align-items: center; gap: 14px; }
.soc-product__summary table.variations td { padding: 6px 0; border: none; }
.soc-product__summary table.variations td.label {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237,238,233,0.65);
  padding-right: 0;
  white-space: nowrap;
}
.soc-product__summary table.variations td.label label { margin: 0; }
.soc-product__summary table.variations td.value {
  flex: 1;
  max-width: 260px;
}
.soc-product__summary table.variations select {
  width: 100%;
  padding: 10px 36px 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--ink);
  border-radius: 8px;
  font-family: 'Satoshi', sans-serif;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23EDEEE9' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  /* Hints the browser to render the native option list with a dark UI. */
  color-scheme: dark;
}
.soc-product__summary table.variations select option {
  background: #121312;
  color: var(--ink);
}
.soc-product__summary table.variations select:focus {
  outline: none;
  border-color: rgba(143,191,106,0.5);
  box-shadow: 0 0 0 3px rgba(143,191,106,0.12);
}
.soc-product__summary .reset_variations {
  display: inline-block;
  font-size: 12px;
  color: rgba(237,238,233,0.55);
  text-decoration: underline;
  margin-top: 6px;
}
/* Variation price + availability — compact so the add-to-cart stays above the fold */
.soc-product__summary .woocommerce-variation {
  margin: 10px 0 8px;
}
.soc-product__summary .woocommerce-variation-price {
  display: inline-block;
  margin: 0 14px 0 0;
  vertical-align: middle;
}
.soc-product__summary .woocommerce-variation-price .price {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}
.soc-product__summary .woocommerce-variation-availability {
  display: inline-block;
  font-size: 12px;
  color: rgba(237,238,233,0.65);
  margin: 0;
  vertical-align: middle;
}
.soc-product__summary .woocommerce-variation-description {
  font-size: 13px;
  color: rgba(237,238,233,0.7);
  margin: 6px 0 0;
  line-height: 1.5;
}

/* Sealed badge — hidden site-wide per v1.3.1 request (kept in code in case
   it's ever wanted back; just remove the `display: none !important;` here). */
.sealed-badge {
  display: none !important;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(143,191,106,0.12), rgba(143,191,106,0.04));
  border: 1px solid rgba(143,191,106,0.3);
  border-radius: 10px;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(237,238,233,0.9);
  animation: sealedIn 0.25s ease;
}
.sealed-badge__mark {
  color: var(--green-bright);
  font-size: 18px;
  line-height: 1;
  margin-top: 1px;
  flex: 0 0 auto;
}
.sealed-badge__text strong { color: var(--green-bright); font-weight: 600; }
@keyframes sealedIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Quantity + add-to-cart row */
.soc-product__summary form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  margin: 4px 0 16px;
}
.soc-product__summary .quantity {
  display: inline-flex;
  align-items: center;
}
.soc-product__summary .quantity .screen-reader-text { position: absolute; left: -9999px; }
.soc-product__summary .quantity input.qty {
  width: 68px;
  height: 48px;
  padding: 0 10px;
  text-align: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--ink);
  border-radius: 8px;
  font-size: 15px;
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  -moz-appearance: textfield;
}
.soc-product__summary .quantity input.qty:focus {
  outline: none;
  border-color: rgba(143,191,106,0.5);
}
.soc-product__summary .quantity input.qty::-webkit-outer-spin-button,
.soc-product__summary .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.soc-product__summary button.single_add_to_cart_button,
.soc-product__summary button.button.alt {
  background: var(--green);
  color: var(--bg);
  border: none;
  padding: 0 28px;
  height: 48px;
  border-radius: 8px;
  font-family: 'Satoshi', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  flex: 1;
  min-width: 160px;
  transition: background 0.2s ease, transform 0.1s ease;
}
.soc-product__summary button.single_add_to_cart_button:hover,
.soc-product__summary button.button.alt:hover { background: var(--green-bright); }
.soc-product__summary button.single_add_to_cart_button:active { transform: translateY(1px); }
.soc-product__summary button.single_add_to_cart_button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Product meta (SKU, categories, tags) */
.soc-product__summary .product_meta {
  font-size: 12px;
  color: rgba(237,238,233,0.55);
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  line-height: 1.8;
}
.soc-product__summary .product_meta > span { display: block; }
.soc-product__summary .product_meta a { color: rgba(237,238,233,0.85); text-decoration: none; }
.soc-product__summary .product_meta a:hover { color: var(--green-bright); }

/* ===== Flowing sections below hero ===== */
.soc-product__section {
  padding-top: 48px;
  margin-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.soc-product__kicker {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237,238,233,0.6);
  margin: 0 0 10px;
  font-weight: 500;
}
.soc-product__section-title {
  font-family: 'Boska', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.1;
  margin: 0 0 28px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Specs — 2-column grid of all attributes */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
}
@media (min-width: 720px) {
  .spec-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.spec-grid__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  align-items: center;
}
/* Right column keeps left border on desktop to separate the 2 columns visually */
@media (min-width: 720px) {
  .spec-grid__row:nth-child(2n) {
    border-left: 1px solid rgba(255,255,255,0.06);
  }
  /* Remove bottom border from the last row(s) */
  .spec-grid__row:nth-last-child(-n+2) {
    border-bottom: none;
  }
}
@media (max-width: 719px) {
  .spec-grid__row:last-child { border-bottom: none; }
}
.spec-grid__row dt {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237,238,233,0.6);
  margin: 0;
  font-weight: 500;
}
.spec-grid__row dd {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  font-family: 'Satoshi', sans-serif;
}

/* Description body */
.soc-product__desc-body {
  color: rgba(237,238,233,0.85);
  line-height: 1.75;
  font-size: 16px;
  max-width: 780px;
}
.soc-product__desc-body p { margin: 0 0 16px; }
.soc-product__desc-body h3 {
  font-family: 'Boska', Georgia, serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
  margin: 28px 0 12px;
}

/* Reviews */
#reviews .woocommerce-Reviews-title { display: none; } /* we use our own section title */
#reviews ol.commentlist { list-style: none; margin: 0; padding: 0; }
#reviews ol.commentlist li { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
#reviews ol.commentlist li:last-child { border-bottom: none; }
#reviews .comment_container {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
}
#reviews .comment_container img.avatar {
  width: 48px; height: 48px; border-radius: 50%; margin: 0;
}
#reviews .comment-text { background: transparent; padding: 0; border: none; }
#reviews .meta { font-size: 12px; color: rgba(237,238,233,0.55); margin-bottom: 6px; }
#reviews .meta strong { color: var(--ink); font-weight: 500; font-size: 14px; }
#reviews .description { color: rgba(237,238,233,0.85); line-height: 1.65; font-size: 15px; }
#reviews .star-rating { color: var(--green-bright); margin-bottom: 6px; font-size: 14px; }
#reviews .woocommerce-noreviews {
  color: rgba(237,238,233,0.6);
  font-style: italic;
  margin: 0 0 28px;
}
#review_form_wrapper { margin-top: 36px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.08); }
#review_form_wrapper #reply-title {
  font-family: 'Boska', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 14px;
}
#review_form_wrapper .comment-form-rating label,
#review_form_wrapper .comment-form label { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(237,238,233,0.7); margin: 14px 0 6px; }
#review_form_wrapper textarea,
#review_form_wrapper input[type="text"],
#review_form_wrapper input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: var(--ink);
  font-family: 'Satoshi', sans-serif;
  font-size: 14px;
}
#review_form_wrapper textarea:focus,
#review_form_wrapper input:focus { outline: none; border-color: rgba(143,191,106,0.5); }
#review_form_wrapper .submit {
  background: var(--green); color: var(--bg); border: none;
  padding: 12px 24px; border-radius: 8px;
  font-family: 'Satoshi', sans-serif; font-weight: 600; cursor: pointer;
  margin-top: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 13px;
}
#review_form_wrapper .submit:hover { background: var(--green-bright); }

/* Related strains */
.soc-product__related-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.soc-product__related-head > div { flex: 1; min-width: 240px; }
.soc-product__related-head .soc-product__kicker,
.soc-product__related-head .soc-product__section-title {
  margin-bottom: 0;
}
.soc-product__related-head .soc-product__section-title { margin-top: 6px; }
.soc-product__related .strain-grid { margin-top: 0; }

/* ---------- SHOP ARCHIVE ---------- */
.woo-archive__head {
  margin-bottom: 28px;
  max-width: 720px;
}
.woo-archive__title {
  font-family: 'Boska', Georgia, serif;
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  margin: 8px 0 14px;
  color: var(--ink);
}
.woocommerce-products-header__title { display: none; } /* duplicate from Woo */
.term-description, .page-description {
  color: rgba(237,238,233,0.75);
  font-size: 16px;
  line-height: 1.6;
}

.woo-archive__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 36px;
  font-size: 13px;
  color: rgba(237,238,233,0.7);
}
.woocommerce-result-count { margin: 0; }
.woocommerce-ordering select {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--ink);
  padding: 8px 32px 8px 12px;
  border-radius: 6px;
  font-family: 'Satoshi', sans-serif;
  font-size: 13px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238FBF6A' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

/* Loop grid */
ul.products, .woo-archive ul.products {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 640px) { ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { ul.products { grid-template-columns: repeat(3, 1fr); } }

li.strain--loop {
  background: #121312;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
li.strain--loop:hover {
  transform: translateY(-3px);
  border-color: rgba(143,191,106,0.28);
}
li.strain--loop .strain__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  text-decoration: none;
}
li.strain--loop .strain__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
li.strain--loop:hover .strain__media img { transform: scale(1.04); }
li.strain--loop .strain__name a {
  color: var(--ink);
  text-decoration: none;
}
li.strain--loop .strain__name a:hover { color: var(--green-bright); }
li.strain--loop .strain__foot .price {
  color: var(--green-bright);
  font-weight: 500;
  font-size: 15px;
}
li.strain--loop .strain__foot .price del {
  color: rgba(237,238,233,0.4);
  margin-right: 6px;
  font-weight: 400;
}
li.strain--loop .strain__foot .price ins { text-decoration: none; }

/* Loop badges */
.loop-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 2;
}
.loop-badges .badge,
span.onsale {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.loop-badges .badge--sealed {
  background: rgba(143,191,106,0.25);
  color: var(--green-bright);
  border: 1px solid rgba(143,191,106,0.45);
}
.loop-badges .badge--loose {
  background: rgba(10,11,10,0.7);
  color: rgba(237,238,233,0.85);
  border: 1px solid rgba(255,255,255,0.15);
}
span.onsale {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  background: var(--green);
  color: var(--bg);
  border: none;
  z-index: 2;
}

/* Pagination */
.woocommerce-pagination ul.page-numbers {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(237,238,233,0.85);
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s ease, color 0.2s ease;
}
.woocommerce-pagination ul.page-numbers li a:hover { background: rgba(143,191,106,0.1); color: var(--green-bright); }
.woocommerce-pagination ul.page-numbers li span.current {
  background: var(--green);
  color: var(--bg);
  border-color: var(--green);
}

/* --- CART / CHECKOUT / ACCOUNT minimal dark theming --- */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
  background: rgba(143,191,106,0.08);
  border: 1px solid rgba(143,191,106,0.3);
  color: var(--ink);
  padding: 14px 18px;
  border-radius: 8px;
  margin: 0 0 18px;
  list-style: none;
}
.woocommerce-notices-wrapper .woocommerce-error {
  background: rgba(220,80,80,0.08);
  border-color: rgba(220,80,80,0.4);
}
.woocommerce-notices-wrapper a {
  color: var(--green-bright);
  font-weight: 500;
  text-decoration: underline;
}

table.shop_table, table.cart, table.order_details {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 24px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}
table.shop_table th,
table.shop_table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left;
  font-size: 14px;
  color: var(--ink);
}
table.shop_table th {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237,238,233,0.6);
  font-weight: 500;
  background: rgba(255,255,255,0.02);
}
table.shop_table tr:last-child td,
table.shop_table tr:last-child th { border-bottom: none; }

.cart_totals h2, .cross-sells h2, .woocommerce-order-details h2,
.woocommerce-column__title, .woocommerce-MyAccount-content h2 {
  font-family: 'Boska', Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  color: var(--ink);
  margin: 0 0 18px;
}

/* Account nav */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 14px;
  color: rgba(237,238,233,0.75);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--green-bright);
  background: rgba(143,191,106,0.05);
}

.woocommerce-MyAccount-content {
  color: rgba(237,238,233,0.85);
  line-height: 1.7;
}

/* Generic forms (login, checkout, register) */
.woocommerce form .form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}
.woocommerce form .form-row label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(237,238,233,0.7);
  margin-bottom: 6px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 8px;
  font-family: 'Satoshi', sans-serif;
  font-size: 14px;
  width: 100%;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--green);
  color: var(--bg);
  border: none;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: 'Satoshi', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--green-bright); }
.woocommerce a.button.wc-backward,
.woocommerce a.button.checkout-button {
  background: var(--green-bright);
}

/* =====================================================================
   AGGRESSIVE BUTTON OVERRIDES
   WooCommerce ships a purple `.button.alt` at #7f54b3, wrapped in a
   `:where(...)` selector which has zero specificity. To beat it we prefix
   every selector with `body.woocommerce` (specificity 0,0,2,1) AND use
   !important AND provide a hex fallback for the green in case CSS variables
   fail to resolve in some edge case (some caching plugins minify CSS and
   can break var() resolution).
   ===================================================================== */
body.woocommerce .button.alt,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt,
body.woocommerce a.button.alt,
body.woocommerce #respond input#submit.alt,
body.woocommerce button.single_add_to_cart_button,
body.woocommerce .single_add_to_cart_button.button.alt,
body.woocommerce .single_add_to_cart_button,
body.woocommerce-page .button.alt,
body.woocommerce-page button.button.alt,
body.woocommerce-page .single_add_to_cart_button {
  background-color: #8fbf6a !important;      /* hex fallback */
  background: var(--green, #8fbf6a) !important;
  color: #0a0b0a !important;
  border: none !important;
  padding: 0 28px !important;
  height: 48px !important;
  border-radius: 10px !important;
  font-family: 'Satoshi', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.1s ease !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
body.woocommerce .button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce input.button.alt:hover,
body.woocommerce a.button.alt:hover,
body.woocommerce button.single_add_to_cart_button:hover,
body.woocommerce .single_add_to_cart_button:hover,
body.woocommerce-page .button.alt:hover,
body.woocommerce-page .single_add_to_cart_button:hover {
  background-color: #a8d880 !important;
  background: var(--green-bright, #a8d880) !important;
  color: #0a0b0a !important;
}
body.woocommerce .single_add_to_cart_button[disabled],
body.woocommerce-page .single_add_to_cart_button[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* =====================================================================
   PRODUCT GALLERY MAGNIFIER TRIGGER
   Woo's built-in zoom-trigger icon that opens the lightbox.
   Restyled to match the black + green aesthetic.
   ===================================================================== */
.woocommerce-product-gallery__trigger {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 3 !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(10, 11, 10, 0.78) !important;
  border: 1px solid rgba(143, 191, 106, 0.45) !important;
  border-radius: 50% !important;
  color: var(--green-bright) !important;
  text-indent: 0 !important;
  font-size: 0 !important;
  text-decoration: none !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.woocommerce-product-gallery__trigger:hover {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: var(--bg) !important;
  transform: scale(1.04);
}
/* Replace the default ⧉ glyph with a proper magnifier SVG so we get a
   clean icon that doesn't depend on the system font. */
.woocommerce-product-gallery__trigger::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M20 20l-4.35-4.35'/><path d='M10.5 7.5v6M7.5 10.5h6'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M20 20l-4.35-4.35'/><path d='M10.5 7.5v6M7.5 10.5h6'/></svg>") center / contain no-repeat;
  display: inline-block;
}
/* Ensure gallery is a positioning context for the trigger. */
.woocommerce-product-gallery { position: relative; }

/* =====================================================================
   MOBILE PRODUCT PAGE POLISH (v1.3.0)
   Below 760px the product page needs some layout surgery: the pack-size
   dropdown's label + select were on the same flex row (overflowing), the
   spec grid's 150px label column ate the value column (values wrapped
   into 3+ lines), and the review submit button ships without .alt so it
   inherited WooCommerce's default white style.
   ===================================================================== */
@media (max-width: 760px) {
  /* Variation label + select should stack on mobile so the dropdown gets
     full width and isn't cramped next to its 'Pack size' label. */
  .soc-product__summary table.variations tr {
    display: block;
  }
  .soc-product__summary table.variations td.label {
    display: block;
    margin-bottom: 6px;
    padding: 0;
  }
  .soc-product__summary table.variations td.value {
    display: block;
    max-width: none;
    width: 100%;
  }

  /* Spec grid: reduce label column width so the value column has room to
     breathe. 'Medium (80–120 cm)' should not wrap to 3 lines on a phone. */
  .spec-grid__row {
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 14px 18px;
  }

  /* The quantity + add-to-basket row: make the button wider so it's the
     dominant control (qty stays compact). */
  .soc-product__summary .quantity input.qty {
    width: 60px;
  }
  .soc-product__summary button.single_add_to_cart_button,
  body.woocommerce button.single_add_to_cart_button {
    flex: 1 !important;
    min-width: 0 !important;
  }
}

/* Review submit button — ships without .alt so the aggressive overrides
   above don't catch it. Style it to match the rest of the site. Applies
   at all breakpoints so the button is green on desktop too. */
body.woocommerce #respond input#submit,
#review_form_wrapper input#submit,
#review_form_wrapper .submit,
#commentform input[type="submit"] {
  background-color: #8fbf6a !important;
  background: var(--green, #8fbf6a) !important;
  color: #0a0b0a !important;
  border: none !important;
  padding: 12px 28px !important;
  border-radius: 10px !important;
  font-family: 'Satoshi', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin-top: 14px !important;
  transition: background 0.2s ease !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
body.woocommerce #respond input#submit:hover,
#review_form_wrapper input#submit:hover,
#review_form_wrapper .submit:hover,
#commentform input[type="submit"]:hover {
  background-color: #a8d880 !important;
  background: var(--green-bright, #a8d880) !important;
}