/* ═════════════════════════════════════════════════════════
   Planto — main stylesheet
   Palette · grass #4A7A28 · deep forest #1B2A12 · soil #6B4F2E
             sky #CFE4EF · bone #F6F5EF · night #0A0C08
   Type    · Hanken Grotesk (EN) · IBM Plex Sans Arabic (AR)
   ═════════════════════════════════════════════════════════ */

:root {
  --green: #4a7a28;
  --green-deep: #1b2a12;
  --soil: #6b4f2e;
  --sky: #cfe4ef;
  --bone: #f6f5ef;
  --night: #0a0c08;

  --font-en: "Hanken Grotesk", system-ui, sans-serif;
  --font-ar: "Almarai", system-ui, sans-serif;

  --pad-x: clamp(1.25rem, 4vw, 4rem);
}

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

html { scroll-behavior: auto; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-en);
  background: var(--bone);
  color: var(--green-deep);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── Navigation ─────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--pad-x);
  transition: background .5s ease, box-shadow .5s ease;
}

/* WordPress admin bar offset (logged-in views) */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}

.nav--solid {
  background: rgba(246, 245, 239, .88);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(27, 42, 18, .08);
}

.nav__logo { position: relative; display: block; transition: opacity .4s ease; }

.nav__logo img {
  height: 58px;
  width: auto;
  transition: opacity .5s ease;
}

/* white logo over the hero; colored logo once the nav turns solid */
.nav__logo-dark {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.nav--solid .nav__logo-light { opacity: 0; }
.nav--solid .nav__logo-dark { opacity: 1; }
/* the drawer covers everything except the burger while the menu is open */
body.menu-open .nav__logo,
body.menu-open .nav__icons,
body.menu-open .nav__lang {
  opacity: 0;
  pointer-events: none;
}

.nav__links {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 2.2rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nav__links a {
  position: relative;
  color: var(--bone);
  transition: color .5s ease;
}

.nav--solid .nav__links a { color: var(--green-deep); }

.nav__links a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.77, 0, .18, 1);
}

.nav__links a:not(.nav__cta):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__cta {
  position: relative;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 100px;
  padding: .55em 1.5em;
  isolation: isolate;
  transition: color .35s ease, border-color .5s ease;
}

/* ambient drifting green sheen inside the pill */
.nav__cta::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: -2;
  background: linear-gradient(115deg,
    transparent 20%,
    rgba(74, 122, 40, .45) 40%,
    rgba(140, 190, 90, .35) 50%,
    rgba(74, 122, 40, .45) 60%,
    transparent 80%);
  animation: cta-sheen 3.6s linear infinite;
}

@keyframes cta-sheen {
  from { transform: translateX(-45%); }
  to   { transform: translateX(45%); }
}

/* hover: solid green fill wipes up from the bottom */
.nav__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--green);
  transform: translateY(101%);
  transition: transform .45s cubic-bezier(.77, 0, .18, 1);
}

.nav__cta:hover { color: var(--bone) !important; border-color: var(--green); }
.nav__cta:hover::after { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .nav__cta::before { animation: none; }
}

/* ── Nav icons (account / cart) ─────────────────────────── */

.nav__icons {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-left: 2.2rem;
  transition: opacity .4s ease;
}

.nav__lang {
  margin-left: 1.1rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(246, 245, 239, .55);
  border-radius: 50%;
  font-family: var(--font-ar);
  font-size: 1.05rem;
  line-height: 1;
  padding-bottom: 3px;
  color: var(--bone);
  transition: color .5s ease, border-color .5s ease, background .3s ease, transform .3s ease, opacity .4s ease;
}

.nav--solid .nav__lang {
  color: var(--green-deep);
  border-color: rgba(31, 51, 27, .45);
}

.nav__lang:hover {
  transform: translateY(-2px);
  background: var(--bone);
  color: var(--green-deep);
  border-color: var(--bone);
}

.nav--solid .nav__lang:hover {
  background: var(--green-deep);
  color: var(--bone);
  border-color: var(--green-deep);
}

.nav__icon {
  position: relative;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--bone);
  transition: color .5s ease, transform .3s ease;
}

.nav--solid .nav__icon { color: var(--green-deep); }

.nav__icon svg { width: 22px; height: 22px; }

.nav__icon:hover { transform: translateY(-2px); color: var(--green); }

.nav__cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 100px;
  background: var(--green);
  color: var(--bone);
  font-size: .62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ── Product search overlay ─────────────────────────────── */

.search {
  position: fixed;
  inset: 0;
  z-index: 140;
  visibility: hidden;
  transition: visibility 0s .45s;
}

body.search-open .search { visibility: visible; transition-delay: 0s; }

.search__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 8, .55);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .45s ease;
}

body.search-open .search__scrim { opacity: 1; }

.search__panel {
  position: relative;
  width: min(90vw, 44rem);
  margin: 16vh auto 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

body.search-open .search__panel { opacity: 1; transform: translateY(0); }

.search__form { position: relative; }

.search__input {
  width: 100%;
  padding: 1.35rem 4rem 1.35rem 1.8rem;
  border: 0;
  border-radius: 14px;
  background: var(--bone);
  color: var(--green-deep);
  font: inherit;
  font-size: 1.15rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 8px 26px rgba(0, 0, 0, .35);
  outline: none;
}

.search__input::placeholder { color: rgba(27, 42, 18, .45); }
.search__input::-webkit-search-cancel-button { display: none; }

.search__submit {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--green-deep);
  cursor: pointer;
}

.search__submit svg { width: 22px; height: 22px; }

.search__results {
  margin-top: .8rem;
  max-height: 52vh;
  overflow-y: auto;
  border-radius: 14px;
  background: var(--bone);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.search__results:empty { display: none; }

.search__empty {
  padding: 1.1rem 1.6rem;
  color: rgba(27, 42, 18, .55);
  font-size: .95rem;
}

.search__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.2rem;
  transition: background .25s ease;
}

.search__item + .search__item { border-top: 1px solid rgba(27, 42, 18, .08); }
.search__item:hover { background: rgba(27, 42, 18, .06); }

.search__item-img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
  flex: none;
}

.search__item-img--empty { background: rgba(27, 42, 18, .08); display: block; }

.search__item-title {
  display: block;
  color: var(--green-deep);
  font-weight: 600;
  font-size: .98rem;
}

.search__item-price {
  display: block;
  margin-top: .15rem;
  color: rgba(27, 42, 18, .6);
  font-size: .85rem;
}

.search__close {
  position: absolute;
  top: 1.4rem;
  right: calc(var(--pad-x));
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s ease;
}

body.search-open .search__close { opacity: 1; }

.search__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 2px;
  background: var(--bone);
}

.search__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.search__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

/* ── Burger + off-canvas drawer ─────────────────────────── */

.nav__burger {
  display: none;
  position: relative;
  z-index: 130;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.nav__burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--bone);
  transition: transform .45s cubic-bezier(.77, 0, .18, 1), background .5s ease;
}

.nav--solid .nav__burger span { background: var(--green-deep); }

body.menu-open .nav { z-index: 130; }
body.menu-open .nav__burger span { background: var(--bone); }
body.menu-open .nav__burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
body.menu-open .nav__burger span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  visibility: hidden;
  transition: visibility 0s .6s;
}

body.menu-open .drawer { visibility: visible; transition-delay: 0s; }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 8, .45);
  opacity: 0;
  transition: opacity .5s ease;
}

body.menu-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(84vw, 22rem);
  background: var(--green-deep);
  color: var(--bone);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7rem 2.5rem 3rem;
  transform: translateX(102%);
  transition: transform .6s cubic-bezier(.77, 0, .18, 1);
}

body.menu-open .drawer__panel { transform: translateX(0); }

.drawer__links {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.drawer__links a {
  opacity: 0;
  transform: translateX(2rem);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

body.menu-open .drawer__links a {
  opacity: 1;
  transform: translateX(0);
}

body.menu-open .drawer__links a:nth-child(1) { transition-delay: .18s; }
body.menu-open .drawer__links a:nth-child(2) { transition-delay: .26s; }
body.menu-open .drawer__links a:nth-child(3) { transition-delay: .34s; }
body.menu-open .drawer__links a:nth-child(4) { transition-delay: .42s; }
body.menu-open .drawer__links a:nth-child(5) { transition-delay: .5s; }

/* account shortcut at the bottom of the drawer menu */
.drawer__links a.drawer__account {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(246, 245, 239, .18);
  font-size: 1.05rem;
  letter-spacing: .18em;
}

.drawer__account svg { width: 21px; height: 21px; }

.drawer__foot {
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
  font-size: .8rem;
}

/* ── Fixed plant layer (populated in scene 2) ───────────── */

.plant-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  display: grid;
  place-items: center;
}


/* ── Scene 1 · Hero ─────────────────────────────────────── */

.hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  color: var(--bone);
}

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

.hero__media img,
.hero__media video { transform: scale(1.08); }

/* second layer: the growth video, revealed on scroll */
.hero__media-grow { opacity: 0; }

.hero__grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 12, 8, .38) 0%, rgba(10, 12, 8, 0) 32%),
    linear-gradient(0deg, rgba(10, 12, 8, .52) 0%, rgba(10, 12, 8, 0) 45%);
}

.hero__content {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  padding: 0 var(--pad-x) clamp(3.5rem, 9vh, 6.5rem);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 1.4rem;
}

.hero__eyebrow span {
  width: 3.2rem;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.hero__eyebrow--ar {
  font-family: var(--font-ar);
  justify-content: flex-start;
  letter-spacing: .08em;
  font-weight: 400;
}

.hero__title {
  font-size: clamp(4rem, 11vw, 9.5rem);
  font-weight: 300;
  letter-spacing: .085em;
  line-height: .95;
  text-transform: uppercase;
}

.hero__tagline {
  margin-top: 1.2rem;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: .12em;
  opacity: .92;
}

.hero__ar {
  font-family: var(--font-ar);
  text-align: right;
  padding-bottom: .4rem;
}

.hero__title-ar {
  font-size: clamp(3.08rem, 8.5vw, 7.3rem);
  font-weight: 400;
  line-height: 1.3;
}

/* keep Arabic descender dots visible inside the reveal mask */
.hero__ar .reveal-line { padding-bottom: .22em; margin-bottom: -.22em; }

.hero__tagline-ar {
  margin-top: 1.2rem;
  font-size: clamp(.81rem, 1.3vw, 1.12rem);
  font-weight: 300;
  letter-spacing: .02em;
  opacity: .92;
}

/* line-reveal helper: children wrapped by JS */
/* growth overlay: the plant grows out of the garden, center stage */
.hero__growth {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  height: min(76vh, 900px);
  aspect-ratio: 3 / 4;
  opacity: 0;
  pointer-events: none;
}

.hero__grow-caption {
  position: absolute;
  top: clamp(6.5rem, 14vh, 11rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 1px 14px rgba(10, 12, 8, .45);
  opacity: 0;
  white-space: nowrap;
}

.reveal-line { overflow: hidden; display: block; }
.reveal-line > .reveal-line__inner { display: block; will-change: transform; }

.hero__scrollhint {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .38em;
  text-transform: uppercase;
  opacity: .8;
}

.hero__scrollhint-line {
  width: 1px;
  height: 3.4rem;
  background: linear-gradient(var(--bone), transparent);
  overflow: hidden;
  position: relative;
}

.hero__scrollhint-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bone);
  animation: scrollhint 2.2s cubic-bezier(.77, 0, .18, 1) infinite;
}

@keyframes scrollhint {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ── Scene 3 · Internal / External split ────────────────── */

.split {
  display: flex;
  min-height: 100svh;
  background: var(--night);
}

.split__panel {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.split__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .8s ease;
}

.split__panel:hover .split__bg { filter: brightness(1.12); }

.split__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 12, 8, .72) 0%, rgba(10, 12, 8, .18) 45%, rgba(10, 12, 8, 0) 70%);
  transition: background .6s ease;
}

.split__content {
  position: relative;
  z-index: 1;
  padding: 0 clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 7vh, 5rem);
  color: var(--bone);
}

.split__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .8rem;
}

.split__title {
  font-size: clamp(1.9rem, 3.6vw, 3.4rem);
  font-weight: 300;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 1.4rem;
}

.split__more {
  position: relative;
  display: inline-block;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-bottom: 6px;
}

.split__more::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(.35);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.split__panel:hover .split__more::after { transform: scaleX(1); }

@media (max-width: 820px) {
  .split { flex-direction: column; }
  .split__panel { min-height: 55svh; }
}

/* ── Scene 4 · Pots Collection ──────────────────────────── */

.pots {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--bone);
}

.pots__media,
.pots__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pots__video { object-fit: cover; }

/* soft vignette on the right so the text sits comfortably */
.pots__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(246, 245, 239, .55) 0%, rgba(246, 245, 239, 0) 45%);
  opacity: 0;
}

.pots__content {
  position: absolute;
  top: 50%;
  right: var(--pad-x);
  transform: translateY(-50%);
  max-width: min(34rem, 42vw);
  text-align: left;
  color: var(--green-deep);
}

.pots__eyebrow {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 1.1rem;
}

.pots__eyebrow span {
  width: 3.2rem;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.pots__title {
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  font-weight: 300;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.02;
  margin-bottom: 1.3rem;
}

.pots__text {
  font-size: clamp(.95rem, 1.15vw, 1.1rem);
  font-weight: 300;
  line-height: 1.7;
  opacity: .82;
  margin-bottom: 1.8rem;
}

.pots__more {
  position: relative;
  display: inline-block;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-bottom: 6px;
  color: inherit;
}

.pots__more::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(.35);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.pots__more:hover::after { transform: scaleX(1); }

@media (max-width: 820px) {
  /* keep the plant (left of frame) in view on narrow screens */
  .pots__video { object-position: 22% 50%; }

  .pots__content {
    right: auto;
    left: var(--pad-x);
    top: auto;
    bottom: clamp(2.5rem, 7vh, 5rem);
    transform: none;
    max-width: min(34rem, 86vw);
  }
}

/* ── Scene 5 · Maintenance ──────────────────────────────── */

.maint {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--night);
}

.maint__media,
.maint__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.maint__video { object-fit: cover; }

/* gentle bottom shade so the CTA reads over the bright macro shot */
.maint__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 12, 8, .55) 0%, rgba(10, 12, 8, 0) 38%);
  opacity: 0;
}

.maint__content {
  position: absolute;
  left: 50%;
  bottom: clamp(3rem, 9vh, 6.5rem);
  transform: translateX(-50%);
  text-align: center;
  color: var(--bone);
}

.maint__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 1.2rem;
  white-space: nowrap;
}

.maint__btn {
  display: inline-block;
  padding: 1.05rem 2.4rem;
  border: 1px solid rgba(246, 245, 239, .55);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(10, 12, 8, .28);
  backdrop-filter: blur(6px);
  transition: background .5s ease, border-color .5s ease, color .5s ease;
  white-space: nowrap;
}

.maint__btn:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--green-deep);
}

@media (max-width: 820px) {
  .maint__eyebrow { white-space: normal; }
  .maint__btn {
    white-space: normal;
    line-height: 1.7;
    padding: .9rem 1.8rem;
  }
  .maint__content { width: min(92vw, 30rem); }
}

/* ── Scene 6 · Footer ───────────────────────────────────── */

.footer {
  background: #000;
  color: var(--bone);
  padding: clamp(4rem, 10vh, 7rem) var(--pad-x) 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  max-width: 1320px;
  margin: 0 auto;
  padding-bottom: clamp(3rem, 7vh, 5rem);
}

.footer__logo {
  height: 44px;
  width: auto;
  margin-bottom: 1.4rem;
}

.footer__blurb {
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.75;
  opacity: .72;
  max-width: 24rem;
  margin-bottom: 1.8rem;
}

.footer__social {
  display: flex;
  gap: .9rem;
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(246, 245, 239, .25);
  border-radius: 50%;
  transition: border-color .5s ease, background .5s ease, color .5s ease;
}

.footer__social svg { width: 19px; height: 19px; }

.footer__social a:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: #000;
}

.footer__heading {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  opacity: .95;
}

.footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.footer__col li {
  font-size: .92rem;
  font-weight: 300;
  opacity: .68;
}

.footer__col a {
  position: relative;
  transition: opacity .4s ease;
}

.footer__col a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.footer__col li:hover { opacity: 1; }
.footer__col a:hover::after { transform: scaleX(1); }

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.6rem 0 2rem;
  border-top: 1px solid rgba(246, 245, 239, .12);
  font-size: .8rem;
  font-weight: 300;
  opacity: .55;
}

.footer__bar-slogan { letter-spacing: .14em; text-transform: uppercase; }

.footer__credit {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(246, 245, 239, .35);
  transition: text-decoration-color .3s ease;
}

.footer__credit:hover { text-decoration-color: currentColor; }

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

@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* ── Scene 2 · Grow ─────────────────────────────────────── */

.grow { position: relative; }

.grow__stage {
  height: 100svh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #e8efe6 0%, var(--bone) 55%);
}

.grow__caption {
  position: absolute;
  top: clamp(6.5rem, 16vh, 12rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--green);
  opacity: 0;
  white-space: nowrap;
}

.grow__ground {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  justify-items: center;
}

.grow__soil {
  width: min(46vw, 460px);
  margin-bottom: -4px;
}

.grow__plant {
  position: absolute;
  /* keep the stem base seated just inside the rising soil mound */
  bottom: calc(min(46vw, 460px) * 0.11);
  left: 50%;
  transform: translateX(-50%);
  width: min(70vw, 520px);
  height: min(72vh, 640px);
  pointer-events: none;
}

.grow__stage-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transform-origin: bottom center;
  opacity: 0;
  will-change: transform, opacity;
}

/* staged max sizes: sprout ⅓ → mid ⅔ → full plant 100% */
.grow__stage-img--sprout { height: 33%; }
.grow__stage-img--mid { height: 66%; }
.grow__stage-img--full { height: 100%; }

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }

  /* the drawer menu carries the account link on mobile */
  .nav__icon--account { display: none; }

  /* icons left · logo center · ع + burger right */
  .nav__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .nav__logo img { height: 44px; }
  .nav__icons { margin-left: 0; }
  .nav__lang { margin-left: auto; margin-right: .6rem; }

  .hero__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .hero__ar { text-align: left; }

  .hero__scrollhint { display: none; }
}

/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero__scrollhint-line::after { animation: none; }
}
/* ═══════════════════════════════════════════════════════
   Planto — WooCommerce
   Shop archives · single product · cart · checkout · account
   Styled on top of Woo's default markup (no template forks).
   ═══════════════════════════════════════════════════════ */

/* ── Shell ──────────────────────────────────────────────── */

.shop {
  min-height: 60vh;
  padding: calc(96px + 2.5rem) var(--pad-x) 6rem;
  background: var(--bone);
  color: var(--green-deep);
}

.shop__inner {
  max-width: 1320px;
  margin: 0 auto;
}

/* page titles (category name, "Cart", "Checkout", "My account") */
.shop h1,
.woocommerce-products-header__title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 300;
  letter-spacing: .04em;
  margin-bottom: .4rem;
}

.woocommerce-breadcrumb {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(27, 42, 18, .5);
  margin-bottom: 2rem;
}

.woocommerce-breadcrumb a { color: inherit; }
.woocommerce-breadcrumb a:hover { color: var(--green); }

/* ── Static content pages (terms, privacy, returns, maintenance) ──
   Only direct children of the article — WooCommerce shortcode pages
   nest inside .woocommerce, so they never match. Logical properties
   keep RTL correct without extra rules. */
.shop article > h2,
.shop article > h3,
.shop article > p,
.shop article > ul,
.shop article > ol { max-width: 46rem; }

/* Centered reading column on legal/info pages (body class from functions.php) */
.prose-page .shop article > h1,
.prose-page .shop article > h2,
.prose-page .shop article > h3,
.prose-page .shop article > p,
.prose-page .shop article > ul,
.prose-page .shop article > ol {
  max-width: 46rem;
  margin-inline: auto;
}

.shop article > h2 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 2.4rem 0 .8rem;
}

.shop article > h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.6rem 0 .5rem;
}

.shop article > p,
.shop article > ul,
.shop article > ol {
  margin: 0 0 1rem;
  line-height: 1.8;
  color: rgba(27, 42, 18, .85);
}

.shop article > ul,
.shop article > ol { padding-inline-start: 1.4rem; }

.shop article > ul li,
.shop article > ol li { margin-bottom: .45rem; }

.shop article a { color: var(--green); text-underline-offset: 3px; }

.shop article .page-meta {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(27, 42, 18, .5);
  margin-bottom: 2rem;
}

.shop article .page-cta {
  display: inline-block;
  margin-top: .6rem;
  padding: .9rem 2.2rem;
  border-radius: 999px;
  background: var(--green-deep);
  color: var(--bone);
  text-decoration: none;
  font-size: .95rem;
  letter-spacing: .04em;
  transition: background .25s ease;
}

.shop article .page-cta:hover { background: var(--green); color: var(--bone); }

/* ── Maintenance "what's included" cards (Elementor image-box) ──
   Image fills the card as background; title + text reveal on hover.
   Always visible on touch devices (no hover there). */
.maint-card .elementor-image-box-wrapper {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
}

.maint-card .elementor-image-box-img {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  width: 100% !important;
}

.maint-card .elementor-image-box-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.maint-card:hover .elementor-image-box-img img { transform: scale(1.06); }

.maint-card .elementor-image-box-content {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.8rem 1.6rem 1.6rem;
  background: linear-gradient(to top, rgba(15, 26, 9, .88), rgba(15, 26, 9, .45) 60%, transparent);
  text-align: center;
}

.maint-card .elementor-image-box-title {
  color: var(--bone) !important;
  margin: 0;
  transition: transform .4s ease;
}

.maint-card .elementor-image-box-description {
  color: rgba(246, 245, 239, .85) !important;
  font-size: .9rem;
  line-height: 1.6;
  margin-top: .5rem;
}

@media (hover: hover) {
  .maint-card .elementor-image-box-description {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition: max-height .45s ease, opacity .45s ease, transform .45s ease;
    margin-top: 0;
  }

  .maint-card:hover .elementor-image-box-description {
    max-height: 8em;
    opacity: 1;
    transform: none;
    margin-top: .5rem;
  }
}

/* ── Maintenance packages (Elementor widget) ────────────── */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
  justify-content: center;
  gap: 1.6rem;
}

.pkg {
  display: flex;
  flex-direction: column;
  padding: 2.4rem 2rem;
  background: #fff;
  border: 1px solid rgba(27, 42, 18, .12);
  border-radius: 18px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}

.pkg:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(27, 42, 18, .12);
}

.pkg__name {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--green-deep);
  margin: 0 0 .8rem;
}

.pkg__price {
  font-size: 2rem;
  font-weight: 300;
  color: var(--green-deep);
  margin-bottom: 1.2rem;
}

.pkg__desc {
  flex: 1;
  font-size: .92rem;
  line-height: 1.7;
  color: rgba(27, 42, 18, .75);
  margin-bottom: 1.6rem;
}

.pkg__desc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pkg__desc li {
  padding: .45rem 0;
  border-bottom: 1px solid rgba(27, 42, 18, .08);
}

.pkg__desc li:last-child { border-bottom: 0; }

.pkg__btn {
  display: block;
  padding: .9rem 2rem;
  border-radius: 999px;
  background: var(--green-deep);
  color: var(--bone);
  font-size: .95rem;
  letter-spacing: .04em;
  transition: background .25s ease;
}

.pkg__btn:hover { background: var(--green); }

.woocommerce-result-count {
  color: rgba(27, 42, 18, .55);
  font-size: .9rem;
  margin: .4rem 0 0;
}

.woocommerce-ordering { float: right; margin: -1.6rem 0 1.4rem; }

.woocommerce-ordering select,
.shop select {
  appearance: none;
  padding: .65rem 2.4rem .65rem 1.1rem;
  border: 1px solid rgba(27, 42, 18, .25);
  border-radius: 999px;
  background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2a12' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .9rem center / 14px;
  font: inherit;
  font-size: .85rem;
  color: var(--green-deep);
  cursor: pointer;
}

/* ── Product grid ───────────────────────────────────────── */

.shop ul.products {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.6rem;
  clear: both;
  margin: 1.6rem 0 0;
}

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

.shop ul.products li.product {
  /* undo woo-core float grid */
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

.shop ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(27, 42, 18, .14);
}

.shop ul.products li.product > a {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-bottom: .4rem;
}

.shop ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 1.2rem;
  background: #fff;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.shop ul.products li.product:hover img { transform: scale(1.05); }

.shop ul.products .woocommerce-loop-product__title,
.shop ul.products .woocommerce-loop-category__title {
  font-size: 1rem;
  font-weight: 600;
  padding: 0 1.3rem;
  text-align: center;
}

.shop ul.products .price {
  padding: .25rem 1.3rem .4rem;
  color: var(--green);
  font-weight: 600;
  font-size: .95rem;
  text-align: center;
}

.shop ul.products .price del { color: rgba(27, 42, 18, .4); font-weight: 400; margin-right: .4em; }
.shop ul.products .price ins { text-decoration: none; }

.shop ul.products .button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: auto auto 1.2rem;
  align-self: center;
  text-align: center;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important; /* a plugin's flex-grow made the button absorb the missing price row */
}

.shop ul.products .button svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-inline-end: .5rem;
}

.shop ul.products .onsale {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: var(--green);
  color: var(--bone);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── Buttons ────────────────────────────────────────────── */

.shop .button,
.shop a.button,
.shop button.button,
.shop input.button,
.shop ul.products li.product .button,
.woocommerce .shop a.button,
.woocommerce #respond input#submit,
.shop .woocommerce-Button,
.shop button.woocommerce-Button,
.shop .checkout-button,
.shop a.checkout-button,
.shop #place_order,
.shop button#place_order,
.single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  display: inline-block;
  padding: .85rem 1.9rem;
  border: 1px solid var(--green-deep);
  border-radius: 999px;
  background: var(--green-deep);
  color: var(--bone);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}

.shop .button:hover,
.shop a.button:hover,
.shop button.button:hover,
.shop input.button:hover,
.shop ul.products li.product .button:hover,
.shop .woocommerce-Button:hover,
.shop button.woocommerce-Button:hover,
.shop .checkout-button:hover,
.shop a.checkout-button:hover,
.shop #place_order:hover,
.shop button#place_order:hover,
.single_add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: transparent;
  color: var(--green-deep);
  transform: translateY(-2px);
}

.shop .button.loading { opacity: .6; pointer-events: none; }
.shop .button.added::after { content: " ✓"; }

/* quantity stepper */
.shop .quantity .qty {
  width: 5.2rem;
  padding: .8rem .4rem;
  border: 1px solid rgba(27, 42, 18, .25);
  border-radius: 999px;
  text-align: center;
  font: inherit;
  background: transparent;
}

/* ── Pagination ─────────────────────────────────────────── */

.woocommerce-pagination {
  margin-top: 3rem;
  text-align: center;
}

.woocommerce-pagination ul {
  list-style: none;
  display: inline-flex;
  gap: .5rem;
}

.woocommerce-pagination li a,
.woocommerce-pagination li span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 .6rem;
  border: 1px solid rgba(27, 42, 18, .2);
  border-radius: 999px;
  font-size: .9rem;
  transition: background .3s ease, color .3s ease;
}

.woocommerce-pagination li span.current,
.woocommerce-pagination li a:hover {
  background: var(--green-deep);
  color: var(--bone);
  border-color: var(--green-deep);
}

/* ── Notices ────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  padding: 1rem 1.4rem;
  border-radius: 14px;
  margin-bottom: 1.6rem;
  background: #fff;
  border-left: 4px solid var(--green);
  font-size: .95rem;
}

.woocommerce-error { border-left-color: #b3452e; }
.woocommerce-info { border-left-color: var(--sky); }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  float: right;
  margin-left: 1rem;
  padding: .45rem 1.1rem;
  font-size: .72rem;
}

/* ── Single product ─────────────────────────────────────── */

.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* undo woo-core 48% float split — the grid owns the layout */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.single-product div.product .woocommerce-product-gallery {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
}

.single-product div.product .woocommerce-product-gallery img {
  width: 100%;
  object-fit: contain;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport { border-radius: 24px; }

.single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs {
  list-style: none;
  display: flex;
  gap: .6rem;
  padding: .8rem;
}

.single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  opacity: .55;
  cursor: pointer;
  transition: opacity .3s ease;
}

.single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs img.flex-active,
.single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs img:hover { opacity: 1; }

.single-product div.product .summary .product_title {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 300;
  letter-spacing: .02em;
  margin-bottom: .6rem;
}

.single-product div.product .summary .price {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 1.2rem;
}

.single-product div.product .summary .woocommerce-product-details__short-description {
  color: rgba(27, 42, 18, .75);
  line-height: 1.7;
  margin-bottom: 1.6rem;
}

.single-product div.product .summary form.cart {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}

.single-product div.product .summary .product_meta {
  padding-top: 1.4rem;
  border-top: 1px solid rgba(27, 42, 18, .12);
  font-size: .85rem;
  color: rgba(27, 42, 18, .6);
}

.single-product div.product .summary .product_meta a { color: var(--green); }
.single-product div.product .summary .product_meta > span { display: block; margin-bottom: .3rem; }

/* tabs */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: 3rem; }

.woocommerce-tabs ul.tabs {
  list-style: none;
  display: flex;
  gap: .6rem;
  border-bottom: 1px solid rgba(27, 42, 18, .15);
  margin-bottom: 1.6rem;
}

.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: .7rem 1.4rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(27, 42, 18, .55);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--green-deep);
  border-bottom-color: var(--green);
}

.woocommerce-tabs .panel { line-height: 1.75; max-width: 70ch; }

/* related / upsells */
.related.products,
.upsells.products { grid-column: 1 / -1; margin-top: 3.5rem; }

.related.products > h2,
.upsells.products > h2 {
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: .04em;
  margin-bottom: .4rem;
}

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

.woocommerce-cart-form table.shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 .8rem;
}

.woocommerce-cart-form table.shop_table thead th {
  text-align: left;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(27, 42, 18, .5);
  padding: 0 1.2rem .2rem;
}

.woocommerce-cart-form table.shop_table td {
  background: #fff;
  padding: 1rem 1.2rem;
  vertical-align: middle;
}

.woocommerce-cart-form table.shop_table tr td:first-child { border-radius: 16px 0 0 16px; }
.woocommerce-cart-form table.shop_table tr td:last-child { border-radius: 0 16px 16px 0; }

.woocommerce-cart-form td.product-thumbnail img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
}

.woocommerce-cart-form td.product-name a { font-weight: 600; }
.woocommerce-cart-form td.product-name a:hover { color: var(--green); }

.woocommerce-cart-form td.product-remove a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.2rem;
  color: rgba(27, 42, 18, .45);
  transition: background .3s ease, color .3s ease;
}

.woocommerce-cart-form td.product-remove a:hover {
  background: rgba(179, 69, 46, .12);
  color: #b3452e;
}

.woocommerce-cart-form td.actions { background: transparent; padding: .6rem 0; }

.woocommerce-cart-form .coupon {
  display: inline-flex;
  gap: .7rem;
  align-items: center;
}

.woocommerce-cart-form .coupon .input-text {
  padding: .8rem 1.3rem;
  border: 1px solid rgba(27, 42, 18, .25);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .88rem;
  min-width: 13rem;
}

.cart-collaterals {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
}

.cart-collaterals .cart_totals {
  width: min(100%, 26rem);
  background: #fff;
  border-radius: 20px;
  padding: 1.8rem;
  box-shadow: 0 18px 44px rgba(27, 42, 18, .1);
}

.cart-collaterals .cart_totals h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.cart-collaterals table.shop_table { width: 100%; margin-bottom: 1.2rem; }

.cart-collaterals table.shop_table th,
.cart-collaterals table.shop_table td {
  padding: .55rem 0;
  text-align: left;
  border-bottom: 1px solid rgba(27, 42, 18, .08);
  font-size: .95rem;
}

.cart-collaterals table.shop_table tr.order-total th,
.cart-collaterals table.shop_table tr.order-total td {
  border-bottom: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.wc-proceed-to-checkout .checkout-button {
  display: block;
  text-align: center;
  font-size: .9rem;
  padding: 1rem;
}

.cart-empty.woocommerce-info { margin-top: 1rem; }
.return-to-shop { margin-top: 1rem; }

/* ── Checkout ───────────────────────────────────────────── */

form.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

form.woocommerce-checkout #customer_details { grid-column: 1; }

/* stack Woo's internal billing / additional-info float columns */
form.woocommerce-checkout .col2-set { width: 100%; }
form.woocommerce-checkout .col2-set .col-1,
form.woocommerce-checkout .col2-set .col-2 {
  float: none !important;
  width: 100% !important;
}

form.woocommerce-checkout .col2-set .col-2 { margin-top: 1.6rem; }

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last,
.woocommerce-account .form-row-first,
.woocommerce-account .form-row-last {
  float: none !important;
  width: 100% !important;
}

form.woocommerce-checkout #order_review_heading,
form.woocommerce-checkout #order_review {
  grid-column: 2;
}

form.woocommerce-checkout #order_review_heading {
  grid-row: 1;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: -2.2rem;
}

form.woocommerce-checkout #order_review {
  grid-row: 1 / span 2;
  margin-top: 2.4rem;
  background: #fff;
  border-radius: 20px;
  padding: 1.8rem;
  box-shadow: 0 18px 44px rgba(27, 42, 18, .1);
  position: sticky;
  top: calc(96px + 1.5rem);
}

.woocommerce-checkout h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
}

.woocommerce-checkout .form-row { margin-bottom: 1.05rem; }
.woocommerce-checkout .form-row label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(27, 42, 18, .6);
  margin-bottom: .35rem;
}

.shop .input-text,
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.select2-container--default .select2-selection--single {
  width: 100%;
  padding: .85rem 1.2rem;
  border: 1px solid rgba(27, 42, 18, .22);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: .95rem;
  color: var(--green-deep);
  transition: border-color .3s ease, box-shadow .3s ease;
}

.shop .input-text:focus,
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(74, 122, 40, .15);
}

/* select2 (country/state dropdowns) */
.select2-container--default .select2-selection--single {
  height: auto;
  display: flex;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; color: var(--green-deep); }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: .9rem; }
.select2-dropdown { border: 1px solid rgba(27, 42, 18, .2); border-radius: 14px; overflow: hidden; }

form.woocommerce-checkout table.shop_table { width: 100%; }
form.woocommerce-checkout table.shop_table th,
form.woocommerce-checkout table.shop_table td {
  padding: .55rem 0;
  text-align: left;
  border-bottom: 1px solid rgba(27, 42, 18, .08);
  font-size: .93rem;
}

form.woocommerce-checkout table.shop_table tr.order-total th,
form.woocommerce-checkout table.shop_table tr.order-total td {
  border-bottom: 0;
  font-size: 1.08rem;
  font-weight: 700;
}

#payment {
  background: transparent;
  margin-top: 1.2rem;
}

#payment ul.wc_payment_methods {
  list-style: none;
  border-top: 1px solid rgba(27, 42, 18, .1);
  padding-top: 1.1rem;
  margin-bottom: 1.2rem;
}

#payment ul.wc_payment_methods li { margin-bottom: .8rem; }
#payment div.payment_box {
  margin-top: .5rem;
  padding: .9rem 1.1rem;
  border-radius: 12px;
  background: rgba(27, 42, 18, .05);
  font-size: .88rem;
}

#place_order { width: 100%; padding: 1rem; font-size: .9rem; }

.woocommerce-terms-and-conditions-wrapper { margin-bottom: 1rem; font-size: .85rem; }

/* thank-you page */
.woocommerce-order .woocommerce-thankyou-order-received {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.woocommerce-order ul.order_details {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
  background: #fff;
  border-radius: 16px;
  padding: 1.4rem 1.8rem;
  margin-bottom: 2rem;
  font-size: .9rem;
}

/* ── My account ─────────────────────────────────────────── */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.woocommerce-account .woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) {
  grid-column: 1 / -1;
}

/* woo-core's clearfix pseudo-elements would become stray grid items */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { display: none; content: none; }

/* undo woo-core float split inside the grid */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; }

.woocommerce-MyAccount-navigation ul { list-style: none; }

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: .75rem 1.2rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  color: rgba(27, 42, 18, .65);
  transition: background .3s ease, color .3s ease;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  background: var(--green-deep);
  color: var(--bone);
}

.woocommerce-MyAccount-content {
  background: #fff;
  border-radius: 20px;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: 0 18px 44px rgba(27, 42, 18, .08);
  line-height: 1.7;
}

.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
  padding: .8rem .6rem;
  border-bottom: 1px solid rgba(27, 42, 18, .08);
  text-align: left;
  font-size: .92rem;
}

.woocommerce-MyAccount-content .woocommerce-Button { margin-top: 1rem; }

/* login / register card */
.woocommerce-account:not(.logged-in) .woocommerce { display: block; max-width: 30rem; margin: 0 auto; }

.woocommerce-account form.login,
.woocommerce-account form.register {
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 18px 44px rgba(27, 42, 18, .1);
}

.woocommerce-account form .form-row { margin-bottom: 1rem; }
.woocommerce-account form label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; }
.woocommerce-account .lost_password { margin-top: 1rem; font-size: .85rem; }
.woocommerce-account .lost_password a { color: var(--green); }

/* ── WooCommerce Blocks (cart + checkout pages) ─────────── */

.wc-block-components-button:not(.is-link) {
  border-radius: 999px;
  background: var(--green-deep);
  color: var(--bone);
  border: 1px solid var(--green-deep);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .95rem 1.6rem;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}

.wc-block-components-button:not(.is-link):hover {
  background: transparent;
  color: var(--green-deep);
  transform: translateY(-2px);
}

.wc-block-cart .wc-block-components-sidebar,
.wc-block-checkout .wc-block-components-sidebar {
  background: #fff;
  border-radius: 20px;
  padding: 1.6rem;
  box-shadow: 0 18px 44px rgba(27, 42, 18, .1);
}

.wc-block-components-product-name {
  font-weight: 600;
  color: var(--green-deep);
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  border-radius: 12px;
  background: #fff;
}

.wc-block-components-quantity-selector {
  border-radius: 999px;
  border: 1px solid rgba(27, 42, 18, .25);
}

.wc-block-components-quantity-selector::after { border: 0 !important; }

.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-form .wc-block-components-text-input input {
  border-radius: 14px;
  border-color: rgba(27, 42, 18, .22);
  background: #fff;
}

.wc-block-components-checkout-step__heading .wc-block-components-title,
.wc-block-components-title {
  font-weight: 600;
}

.wc-block-components-radio-control__option {
  border-radius: 14px;
}

.wc-block-components-totals-coupon-link,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--green-deep);
}

.wc-block-cart__submit-container .wc-block-cart__submit-button { width: 100%; }

/* ── Toast (AJAX add-to-cart) ───────────────────────────── */

.wc-toast {
  position: fixed;
  bottom: 1.6rem;
  left: 50%;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.4rem;
  border-radius: 999px;
  background: var(--green-deep);
  color: var(--bone);
  font-size: .9rem;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
  transform: translate(-50%, 150%);
  opacity: 0;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
  pointer-events: none;
}

.wc-toast--show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

.wc-toast svg { width: 18px; height: 18px; color: #9ed36a; flex: none; }

.wc-toast a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 920px) {
  .shop ul.products {
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  }
  .shop ul.products li.product .button, .woocommerce .shop a.button {
    padding: .85rem 0.4rem;
  }
  .single-product div.product,
  form.woocommerce-checkout,
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
  }

  form.woocommerce-checkout #order_review_heading,
  form.woocommerce-checkout #order_review {
    grid-column: 1;
    grid-row: auto;
    position: static;
    margin-top: 0;
  }

  form.woocommerce-checkout #order_review_heading { margin: 1rem 0 -1.4rem; }

  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    grid-column: 1;
    grid-row: auto;
  }

  .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .6rem;
  }

  .woocommerce-cart-form table.shop_table thead { display: none; }
  .woocommerce-cart-form table.shop_table tr {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: .2rem .9rem;
    background: #fff;
    border-radius: 16px;
    padding: .9rem;
    margin-bottom: .8rem;
  }
  .woocommerce-cart-form table.shop_table td { padding: .2rem 0; border-radius: 0 !important; }
  .woocommerce-cart-form table.shop_table td.product-thumbnail { grid-row: 1 / span 3; }
  .woocommerce-cart-form table.shop_table tr td.actions { display: block; background: transparent; }
  .woocommerce-cart-form .coupon { flex-wrap: wrap; }
  .cart-collaterals { justify-content: stretch; }
  .cart-collaterals .cart_totals { width: 100%; }
}