/* Botanical Essence foundations: the only source of visual constants. */
:root {
  /* Semantic color roles. */
  --surface: #f8faf8;
  --surface-dim: #d8dad9;
  --surface-bright: #f8faf8;
  --surface-lowest: #ffffff;
  --surface-low: #f2f4f2;
  --surface-container: #eceeec;
  --surface-high: #e6e9e7;
  --surface-highest: #e1e3e1;
  --surface-variant: #e1e3e1;
  --on-surface: #191c1b;
  --on-surface-variant: #434843;
  --primary: #061b0e;
  --on-primary: #ffffff;
  --primary-container: #1b3022;
  --on-primary-container: #819986;
  --secondary: #56642b;
  --on-secondary: #ffffff;
  --secondary-container: #d6e7a1;
  --on-secondary-container: #5a682f;
  --tertiary: #2f0c00;
  --on-tertiary: #ffffff;
  --tertiary-container: #501b00;
  --on-tertiary-container: #d27d56;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --primary-fixed: #d0e9d4;
  --on-primary-fixed: #0b2013;
  --on-primary-fixed-variant: #364c3c;
  --primary-fixed-dim: #b4cdb8;
  --inverse-primary: #b4cdb8;
  --secondary-fixed: #d9eaa3;
  --secondary-fixed-dim: #bdce89;
  --on-secondary-fixed: #161f00;
  --on-secondary-fixed-variant: #3e4c16;
  --tertiary-fixed: #ffdbcd;
  --tertiary-fixed-dim: #ffb596;
  --on-tertiary-fixed: #360f00;
  --on-tertiary-fixed-variant: #753413;
  --outline: #737973;
  --outline-variant: #c3c8c1;
  --background: #f8faf8;
  --on-background: #191c1b;
  --inverse-surface: #2e3130;
  --inverse-on-surface: #eff1ef;
  --surface-tint: #4d6453;

  /* Typography families and scale. */
  --font-display: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;
  --text-display-lg: 42px;
  --leading-display-lg: 52px;
  --weight-display-lg: 700;
  --tracking-display-lg: -0.02em;
  --text-headline-lg: 32px;
  --leading-headline-lg: 40px;
  --weight-headline-lg: 600;
  --text-headline-lg-mobile: 28px;
  --leading-headline-lg-mobile: 36px;
  --text-headline-md: 24px;
  --leading-headline-md: 32px;
  --weight-headline-md: 500;
  --text-headline-sm: 20px;
  --leading-headline-sm: 28px;
  --text-body-lg: 18px;
  --leading-body-lg: 28px;
  --weight-body-lg: 400;
  --text-body-md: 16px;
  --leading-body-md: 24px;
  --weight-body-md: 400;
  --text-label-md: 14px;
  --leading-label-md: 20px;
  --weight-label-md: 600;
  --tracking-label-md: 0.05em;
  --text-label-sm: 12px;
  --leading-label-sm: 16px;
  --weight-label-sm: 500;
  --text-badge: 10px;
  --leading-badge: 14px;
  --weight-badge: 600;

  /* Spacing scale and named layout rhythm. */
  --space-0: 0;
  --space-0-5: 4px;
  --space-base: 8px;
  --space-1-5: 12px;
  --space-gutter: 16px;
  --space-card: 20px;
  --space-container: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-stack-sm: 12px;
  --space-stack-md: 24px;
  --space-stack-lg: 48px;

  /* Shape, depth, and motion. */
  --radius-sm: 0.25rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --border-thin: 1px;
  --shadow-card: 0 4px 16px rgba(27, 48, 34, 0.04);
  --shadow-nav: 0 1px 8px rgba(0, 0, 0, 0.04);
  --shadow-nav-up: 0 -1px 8px rgba(0, 0, 0, 0.04);
  --shadow-fab: 0 8px 24px rgba(27, 48, 34, 0.12);
  --shadow-focus-search: 0 0 0 1px var(--primary), 0 0 0 4px rgba(27, 48, 34, 0.1);
  --shadow-focus-field: 0 0 0 3px rgba(27, 48, 34, 0.08);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 500ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Shared component geometry and layer order. */
  --container-max: 1140px;
  --header-height: 64px;
  --admin-sidebar-width: 240px;
  --hero-height: 400px;
  --promo-height: 160px;
  --category-size: 120px;
  --product-rail-width: 200px;
  --avatar-size: 40px;
  --control-height: 48px;
  --icon-button-size: 40px;
  --icon-button-size-sm: 32px;
  --fab-size: 56px;
  --thumb-width: 80px;
  --thumb-height: 96px;
  --icon-sm: 18px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 48px;
  --z-content: 1;
  --z-sticky: 40;
  --z-nav: 50;
  --z-modal: 60;
}
/* Reset, document defaults, typography helpers, and native controls. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--background);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: var(--space-0);
}

body {
  min-height: max(884px, 100dvh);
  background: var(--background);
  color: var(--on-background);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-body-md);
  line-height: var(--leading-body-md);
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--on-surface);
  font-family: var(--font-display);
  text-wrap: balance;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--border-thin) solid var(--primary);
  outline-offset: var(--space-0-5);
}

img,
picture,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

ul,
ol {
  margin: var(--space-0);
  padding: var(--space-0);
}

::selection {
  background: var(--secondary-fixed-dim);
  color: var(--on-secondary-fixed);
}

::placeholder {
  color: color-mix(in srgb, var(--on-surface-variant) 70%, transparent);
  opacity: 1;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-container);
}

/* Named typography styles mirror the Stitch type ramp. */
.display-lg {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: var(--weight-display-lg);
  letter-spacing: var(--tracking-display-lg);
  line-height: var(--leading-display-lg);
}

.headline-lg {
  font-family: var(--font-display);
  font-size: var(--text-headline-lg);
  font-weight: var(--weight-headline-lg);
  line-height: var(--leading-headline-lg);
}

.headline-md {
  font-family: var(--font-display);
  font-size: var(--text-headline-md);
  font-weight: var(--weight-headline-md);
  line-height: var(--leading-headline-md);
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-body-lg);
  line-height: var(--leading-body-lg);
}

.body-md {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-body-md);
  line-height: var(--leading-body-md);
}

.label-md {
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: var(--weight-label-md);
  letter-spacing: var(--tracking-label-md);
  line-height: var(--leading-label-md);
}

.label-sm {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-label-sm);
  line-height: var(--leading-label-sm);
}

.material-symbols-outlined {
  display: inline-block;
  font-family: "Material Symbols Outlined";
  font-size: var(--icon-md);
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

@media (max-width: 767px) {
  .headline-lg {
    font-size: var(--text-headline-lg-mobile);
    line-height: var(--leading-headline-lg-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* Small, single-purpose helpers shared by views and components. */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.scrollbar-hide,
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.aspect-45 {
  aspect-ratio: 4 / 5;
}

.pt-safe {
  padding-top: env(safe-area-inset-top, var(--space-0));
}

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, var(--space-0));
}

.underline-offset {
  text-underline-offset: var(--space-0-5);
}

.d--none {
  display: none !important;
}

.d--flex {
  display: flex !important;
}

.sticky-top-64 {
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-sticky);
}

.snap-x {
  scroll-snap-type: x mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-center {
  text-align: center;
}
/* Customer application shell: fixed chrome, safe areas, and content clearance. */
.page-shell {
  min-height: 100dvh;
  background: var(--surface);
}

.page-shell__main,
main.app-main {
  min-height: 100dvh;
  padding-top: calc(var(--header-height) + 33px + env(safe-area-inset-top, var(--space-0)));
  padding-bottom: var(--space-stack-lg);
}

.app-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  padding-top: env(safe-area-inset-top, var(--space-0));
  background: var(--surface-lowest);
  border-bottom: var(--border-thin) solid var(--outline-variant);
  color: var(--on-surface);
  box-shadow: var(--shadow-nav);
}

.app-header__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-gutter);
  min-height: 33px;
  padding-inline: var(--space-container);
  border-bottom: var(--border-thin) solid var(--outline-variant);
  font-size: var(--text-label-sm);
}

.app-header__topbar-link {
  color: var(--on-surface-variant);
  text-decoration: none;
  opacity: 0.9;
}

.app-header__topbar-link--cta {
  color: var(--secondary);
  font-weight: var(--weight-label-md);
  opacity: 1;
}

.app-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-gutter);
  min-height: var(--header-height);
  padding-inline: var(--space-container);
}

.app-header__brand {
  display: flex;
  text-decoration: none;
  align-items: center;
  gap: var(--space-base);
  min-width: var(--space-0);
}

.app-header__logo {
  width: auto;
  height: var(--space-4);
  color: var(--primary);
  object-fit: contain;
}

.app-header__title {
  overflow: hidden;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-style: normal;
  font-weight: var(--weight-headline-md);
  letter-spacing: -0.04em;
  line-height: var(--leading-label-md);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  border: var(--space-0);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--on-surface);
  cursor: pointer;
}

.app-header__burger:hover,
.app-header__burger:focus-visible {
  background: var(--surface-low);
}

.app-header__nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--space-base);
  min-width: var(--space-0);
  overflow-x: auto;
  scrollbar-width: none;
}

.app-header__nav::-webkit-scrollbar {
  display: none;
}

.app-header__nav-link {
  flex: none;
  color: var(--on-surface-variant);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-label-sm);
  line-height: var(--leading-label-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}

.app-header__nav-link:hover,
.app-header__nav-link:focus-visible {
  color: var(--secondary);
}

.app-header__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  padding: var(--space-gutter) var(--space-container) var(--space-stack-md);
  border-top: var(--border-thin) solid var(--outline-variant);
  background: var(--surface-lowest);
}

.app-header__panel[hidden] {
  display: none;
}

.app-header__panel nav {
  display: flex;
  flex-direction: column;
}

.app-header__panel-link {
  padding: var(--space-base) var(--space-0);
  border-bottom: var(--border-thin) solid var(--outline-variant);
  color: var(--on-surface);
  font-size: var(--text-body-md);
  font-weight: var(--weight-label-md);
  text-decoration: none;
}

.app-header__panel-link:last-child {
  border-bottom: var(--space-0);
}

.app-header__panel-search {
  width: 100%;
}

.app-header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  border-radius: var(--radius-full);
  color: var(--on-surface);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.app-header__cart:hover,
.app-header__cart:focus-visible {
  color: var(--secondary);
  background: var(--surface-low);
}

.app-header__cart-icon {
  font-size: var(--icon-md);
}

.app-header__cart-badge {
  position: absolute;
  top: var(--space-0-5);
  right: var(--space-0-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--icon-button-size-sm);
  height: var(--icon-button-size-sm);
  padding-inline: var(--space-0-5);
  border-radius: var(--radius-full);
  background: var(--primary-fixed);
  color: var(--on-primary-fixed);
  font-size: var(--text-badge);
  font-weight: var(--weight-label-md);
  line-height: 1;
}

.app-header__avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
  object-fit: cover;
}

.app-header__back {
  flex: none;
}

.app-header__right {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-base);
}

.app-header__search {
  flex: 1 1 180px;
  min-width: 140px;
  max-width: 320px;
  margin-inline-start: auto;
}

.app-header__search .search__input,
input.app-header__search-input {
  height: 40px;
  background: var(--surface-low);
  color: var(--on-surface);
}

.app-header__search .search__input::placeholder,
input.app-header__search-input::placeholder {
  color: var(--on-surface-variant);
}

.app-header__search .search__icon {
  color: var(--on-surface-variant);
}

.app-header__search:focus-within .search__icon {
  color: var(--secondary);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--on-surface);
  border: var(--border-thin) solid var(--outline-variant);
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: var(--weight-label-md);
}

.app-header .icon-button {
  color: var(--on-surface);
}

.app-header .icon-button:hover,
.app-header .icon-button:focus-visible {
  color: var(--secondary);
  background: var(--surface-low);
}

@media (max-width: 900px) {
  .page-shell__main,
  main.app-main {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, var(--space-0)));
  }

  .app-header__topbar {
    display: none;
  }

  .app-header__inner {
    gap: var(--space-base);
  }

  .app-header__brand {
    flex: 1;
  }

  .app-header__burger {
    display: inline-flex;
    flex: none;
  }

  .app-header__nav,
  .app-header__search {
    display: none;
  }

  .app-header__account {
    display: none;
  }
}
/* Admin shell: persistent forest navigation and a spacious work surface. */
.admin {
  min-height: 100dvh;
  background: var(--surface);
}

.admin__sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-sticky);
  display: flex;
  width: var(--admin-sidebar-width);
  flex-direction: column;
  padding: var(--space-stack-md) var(--space-gutter);
  overflow-y: auto;
  background: var(--primary);
  color: var(--on-primary);
}

.admin__brand {
  margin-bottom: var(--space-stack-lg);
  padding-inline: var(--space-base);
  font-family: var(--font-display);
  font-size: var(--text-headline-md);
  line-height: var(--leading-headline-md);
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
}

.admin-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-stack-sm);
  padding: var(--space-stack-sm) var(--space-gutter);
  border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--on-primary) 78%, transparent);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.admin-nav__item:hover,
.admin-nav__item--active,
.admin-nav__item[aria-current="page"] {
  background: color-mix(in srgb, var(--primary-container) 40%, transparent);
  color: var(--on-primary);
}

.admin__main {
  min-height: 100dvh;
  margin-left: var(--admin-sidebar-width);
  padding: var(--space-stack-lg);
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-gutter);
  margin-bottom: var(--space-stack-md);
}

@media (max-width: 767px) {
  .admin__sidebar {
    position: static;
    width: 100%;
    padding: var(--space-gutter);
  }

  .admin__brand {
    margin-bottom: var(--space-gutter);
  }

  .admin-nav {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .admin-nav::-webkit-scrollbar {
    display: none;
  }

  .admin-nav__item {
    flex: none;
  }

  .admin__main {
    margin-left: var(--space-0);
    padding: var(--space-container);
  }

  .admin-header {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* Button primitive and semantic commerce variants. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-base);
  min-height: var(--control-height);
  padding: var(--space-stack-sm) var(--space-container);
  border: var(--space-0);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: var(--weight-label-md);
  letter-spacing: var(--tracking-label-md);
  line-height: var(--leading-label-md);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}

.btn:hover {
  transform: translateY(calc(var(--space-0-5) / -4));
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn--primary:hover {
  background: color-mix(in srgb, var(--primary) 90%, var(--surface));
}

.btn--secondary {
  border: var(--border-thin) solid var(--primary);
  background: transparent;
  color: var(--primary);
}

.btn--secondary:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.btn--tertiary,
.btn--cta {
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
}

.btn--tertiary:hover,
.btn--cta:hover {
  opacity: 0.9;
}

.btn--icon {
  width: var(--icon-button-size);
  min-width: var(--icon-button-size);
  height: var(--icon-button-size);
  min-height: var(--icon-button-size);
  padding: var(--space-0);
  border-radius: var(--radius-full);
}

.btn--round {
  width: var(--control-height);
  min-width: var(--control-height);
  height: var(--control-height);
  min-height: var(--control-height);
  padding: var(--space-0);
  border-radius: var(--radius-full);
}

.btn--pill {
  min-width: calc(var(--control-height) * 3);
  padding-inline: var(--space-4);
}
/* Filter chips, scrolling chip rails, badges, and category tiles. */
.chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-base) var(--space-container);
  border: var(--space-0);
  border-radius: var(--radius-full);
  font-size: var(--text-label-md);
  font-weight: var(--weight-label-md);
  letter-spacing: var(--tracking-label-md);
  line-height: var(--leading-label-md);
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.chip:active {
  transform: scale(0.95);
}

.chip--active {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-card);
}

.chip--idle {
  background: var(--surface-container);
  color: var(--on-surface-variant);
}

.chip--idle:hover {
  background: var(--surface-high);
}

.chip-scroller,
.cat-scroller {
  display: flex;
  gap: var(--space-base);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.cat-scroller {
  gap: var(--space-gutter);
}

.chip-scroller::-webkit-scrollbar,
.cat-scroller::-webkit-scrollbar {
  display: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: calc(var(--space-base) / 4) var(--space-base);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--secondary-fixed) 50%, transparent);
  color: var(--on-secondary-fixed-variant);
  font-size: var(--text-badge);
  font-weight: var(--weight-badge);
  letter-spacing: var(--tracking-label-md);
  line-height: var(--leading-badge);
  text-transform: uppercase;
}

.cat-tile {
  display: flex;
  flex: none;
  width: var(--category-size);
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-stack-sm);
  padding: var(--space-base);
  border: var(--space-0);
  border-radius: var(--radius-md);
  color: var(--on-surface-variant);
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.cat-tile:active {
  transform: scale(0.95);
}

.cat-tile--secondary {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.cat-tile--neutral {
  background: var(--surface-high);
  color: var(--on-surface-variant);
}

.cat-tile--primary {
  background: var(--primary-fixed);
  color: var(--on-primary-fixed);
}

.cat-tile--clay {
  background: var(--tertiary-fixed);
  color: var(--on-tertiary-fixed);
}

.cat-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-xl);
  height: var(--icon-xl);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-lowest) 50%, transparent);
  box-shadow: var(--shadow-card);
}

.cat-tile__label {
  font-size: var(--text-label-sm);
  font-weight: var(--weight-label-sm);
  line-height: var(--leading-label-sm);
  text-align: center;
}
/* Commerce, promotion, statistic, jungle, and order card families. */
.product-card {
  position: relative;
  display: flex;
  min-width: var(--space-0);
  flex-direction: column;
  padding: var(--space-gutter);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
  transition: transform var(--duration-base) var(--ease-standard);
}

.product-card--rail {
  flex: none;
  width: var(--product-rail-width);
}

.product-card:hover {
  transform: translateY(calc(var(--space-0-5) * -1));
}

.product-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: var(--space-gutter);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-container);
}

.product-card__img {
  position: absolute;
  inset: var(--space-0);
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.product-card:hover .product-card__img {
  transform: scale(1.05);
}

.product-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--on-surface-variant) 30%, transparent);
  mix-blend-mode: normal;
}

.product-card__img--placeholder .material-symbols-outlined {
  font-size: calc(var(--icon-xl) * 1.5);
}

.product-card__fav,
.product-card__add,
.product-card__quick-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--space-0);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.product-card__fav {
  position: absolute;
  top: var(--space-base);
  right: var(--space-base);
  width: var(--icon-button-size-sm);
  height: var(--icon-button-size-sm);
  background: color-mix(in srgb, var(--surface-lowest) 80%, transparent);
  color: var(--on-surface-variant);
  -webkit-backdrop-filter: blur(var(--space-base));
  backdrop-filter: blur(var(--space-base));
}

.product-card__fav:hover {
  color: var(--error);
}

.product-card__body {
  display: flex;
  min-width: var(--space-0);
  flex: 1;
  flex-direction: column;
  gap: var(--space-0-5);
}

.product-card__name {
  overflow: hidden;
  color: var(--on-surface);
  font-size: var(--text-body-md);
  font-weight: var(--weight-label-md);
  line-height: var(--leading-body-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card__meta {
  overflow: hidden;
  color: var(--outline);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-label-sm);
  line-height: var(--leading-label-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-base);
  margin-top: var(--space-base);
}

.product-card__price {
  color: var(--primary-container);
  font-size: var(--text-body-md);
  font-weight: var(--weight-headline-md);
  line-height: var(--leading-body-md);
}

.product-card__add {
  width: var(--icon-button-size-sm);
  height: var(--icon-button-size-sm);
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
}

.product-card__add:active,
.product-card__quick-add:active {
  transform: scale(0.95);
}

.product-card__quick-add {
  position: absolute;
  right: var(--space-base);
  bottom: var(--space-base);
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--primary);
  -webkit-backdrop-filter: blur(var(--space-base));
  backdrop-filter: blur(var(--space-base));
}

.product-card__quick-add:hover {
  background: var(--primary);
  color: var(--on-primary);
}

.promo {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--promo-height);
  padding: var(--space-container);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--primary-fixed);
  box-shadow: var(--shadow-card);
}

.promo__img {
  position: absolute;
  inset: var(--space-0);
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  mix-blend-mode: multiply;
}

.promo__content {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  width: 66.666%;
  flex-direction: column;
  gap: var(--space-0-5);
}

.promo__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: calc(var(--space-base) / 2) var(--space-stack-sm);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--primary);
  font-size: var(--text-badge);
  font-weight: var(--weight-display-lg);
  letter-spacing: calc(var(--tracking-label-md) * 2);
  line-height: var(--leading-badge);
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(var(--space-base));
  backdrop-filter: blur(var(--space-base));
}

.promo__title {
  color: var(--on-primary-container);
  font-family: var(--font-display);
  font-size: var(--text-headline-md);
  font-weight: var(--weight-headline-md);
  line-height: var(--leading-headline-md);
}

.promo__desc {
  color: color-mix(in srgb, var(--on-primary-container) 80%, transparent);
  font-size: var(--text-label-md);
  line-height: var(--leading-label-md);
}

.stat-card {
  display: flex;
  min-width: var(--space-0);
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-base);
  padding: var(--space-gutter);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.stat-card__label {
  display: block;
  margin-bottom: var(--space-0-5);
  color: var(--on-surface-variant);
  font-size: var(--text-label-md);
  font-weight: var(--weight-label-md);
  letter-spacing: var(--tracking-label-md);
  line-height: var(--leading-label-md);
}

.stat-card__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-headline-md);
  font-weight: var(--weight-headline-md);
  line-height: var(--leading-headline-md);
}

.stat-card__icon {
  font-size: var(--icon-lg);
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 32;
}

.stat-card--primary {
  background: var(--surface-highest);
  color: var(--on-surface);
}

.stat-card--primary .stat-card__icon {
  color: var(--primary-container);
}

.stat-card--care {
  background: var(--error-container);
  color: var(--on-error-container);
}

.stat-card--care .stat-card__label,
.stat-card--care .stat-card__icon {
  color: var(--error);
}

.jungle-card {
  position: relative;
  display: flex;
  gap: var(--space-gutter);
  padding: var(--space-gutter);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-card);
}

.jungle-card__thumb {
  position: relative;
  flex: none;
  width: var(--thumb-width);
  height: var(--thumb-height);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-container);
  box-shadow: var(--shadow-card);
}

.jungle-card__thumb::after {
  position: absolute;
  inset: var(--space-0);
  background: linear-gradient(to top, color-mix(in srgb, var(--inverse-surface) 20%, transparent), transparent);
  content: "";
}

.jungle-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jungle-card__body {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  min-width: var(--space-0);
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

.jungle-card__title {
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: var(--text-headline-sm);
  font-weight: var(--weight-headline-md);
  line-height: var(--leading-headline-sm);
}

.jungle-card__sub {
  color: var(--on-surface-variant);
  font-size: var(--text-label-sm);
  font-style: italic;
  font-weight: var(--weight-label-sm);
  line-height: var(--leading-label-sm);
}

.jungle-card__foot,
.jungle-card__status {
  display: flex;
  align-items: center;
}

.jungle-card__foot {
  justify-content: space-between;
  gap: var(--space-base);
  margin-top: var(--space-stack-sm);
}

.jungle-card__status {
  gap: calc(var(--space-base) * 0.75);
  color: var(--secondary);
  font-size: var(--text-label-md);
  font-weight: var(--weight-label-md);
  letter-spacing: var(--tracking-label-md);
  line-height: var(--leading-label-md);
}

.jungle-card__status--care {
  color: var(--error);
}

.jungle-card__status--attention {
  color: var(--tertiary);
}

.jungle-card__action {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-size-sm);
  height: var(--icon-button-size-sm);
  border: var(--space-0);
  border-radius: var(--radius-full);
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.jungle-card__blob {
  position: absolute;
  top: calc(var(--space-gutter) * -1);
  right: calc(var(--space-gutter) * -1);
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  transition: transform var(--duration-base) var(--ease-standard);
}

.jungle-card:active .jungle-card__blob {
  transform: scale(1.1);
}

.order-card {
  display: grid;
  gap: var(--space-gutter);
  padding: var(--space-card);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-card);
}

.order-card__header,
.order-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-base);
}

.order-card__number {
  color: var(--on-surface);
  font-weight: var(--weight-label-md);
}

.order-card__meta {
  color: var(--on-surface-variant);
  font-size: var(--text-label-sm);
  line-height: var(--leading-label-sm);
}

.order-card__total {
  color: var(--primary-container);
  font-family: var(--font-display);
  font-size: var(--text-headline-md);
  line-height: var(--leading-headline-md);
}
/* Labeled fields and the rounded botanical search control. */
.field {
  display: flex;
  flex-direction: column;
}

.field__label {
  display: block;
  margin-bottom: calc(var(--space-base) * 0.75);
  color: var(--on-surface-variant);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-label-sm);
  line-height: var(--leading-label-sm);
}

.field__input {
  width: 100%;
  min-height: var(--control-height);
  padding: calc(var(--space-base) * 1.75) var(--space-gutter);
  border: var(--border-thin) solid var(--outline-variant);
  border-radius: var(--radius-md);
  outline: none;
  background: color-mix(in srgb, var(--secondary) 8%, var(--surface-low));
  color: var(--on-surface);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.field__input {
  min-height: calc(var(--control-height) * 3);
  resize: vertical;
}

.field__input:focus {
  border-color: var(--primary);
  box-shadow: var(--shadow-focus-field);
}

.field--error .field__input,
.field__input[aria-invalid="true"] {
  border-color: var(--error);
}

.field__error {
  margin-top: calc(var(--space-base) * 0.75);
  color: var(--error);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-label-sm);
  line-height: var(--leading-label-sm);
}

.search {
  position: relative;
  flex: 1;
  min-width: var(--space-0);
}

.search__input {
  width: 100%;
  height: var(--control-height);
  padding: var(--space-0) var(--space-gutter) var(--space-0) var(--control-height);
  border: var(--space-0);
  border-radius: var(--radius-full);
  outline: none;
  background: var(--surface-low);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-body-md);
  line-height: var(--leading-body-md);
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}

.search__input:focus {
  box-shadow: var(--shadow-focus-search);
}

.search__icon {
  position: absolute;
  top: 50%;
  left: var(--space-gutter);
  color: var(--on-surface-variant);
  font-size: var(--icon-md);
  pointer-events: none;
  transform: translateY(-50%);
  transition: color var(--duration-fast) var(--ease-standard);
}

.search:focus-within .search__icon {
  color: var(--primary);
}
/* Transient application feedback with a Stimulus-friendly leaving state. */
.flash {
  padding: var(--space-stack-sm) var(--space-gutter);
  margin-bottom: var(--space-gutter);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
}

.flash--notice,
.flash--success {
  background: color-mix(in srgb, var(--secondary-container) 80%, var(--surface));
  color: var(--on-secondary-container);
}

.flash--alert {
  background: var(--error-container);
  color: var(--on-error-container);
}

.flash--leaving {
  opacity: 0;
  transform: translateY(calc(var(--space-base) * -1));
}
/* Shared public footer rendered by every public layout. */
.site-footer {
  margin-top: var(--space-stack-lg);
  background: var(--surface-low);
  border-top: var(--border-thin) solid var(--outline-variant);
  color: var(--on-surface);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-gutter);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-stack-md) var(--space-container);
}

.site-footer__contact strong {
  font-family: var(--font-display);
  font-size: var(--text-label-md);
}

.site-footer__contact p,
.site-footer__contact address {
  margin-top: var(--space-base);
  font-style: normal;
  color: var(--on-surface-variant);
  font-size: var(--text-label-sm);
  line-height: 1.8;
}

.site-footer__contact a {
  display: block;
  color: var(--secondary);
  font-size: var(--text-label-sm);
  text-decoration: none;
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
}

.site-footer__nav a {
  color: var(--on-surface-variant);
  font-size: var(--text-label-sm);
  text-decoration: none;
}

.site-footer__nav a:hover {
  color: var(--secondary);
}

.site-footer__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
}

.site-footer__social a {
  color: var(--on-surface-variant);
  font-size: var(--text-label-sm);
  text-decoration: none;
}

@media (max-width: 700px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}
/* Editorial image hero with a legibility scrim and focused action. */
.hero {
  position: relative;
  height: var(--hero-height);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-container);
  box-shadow: var(--shadow-fab);
}

.hero__img,
.hero__scrim {
  position: absolute;
  inset: var(--space-0);
  width: 100%;
  height: 100%;
}

.hero__img {
  object-fit: cover;
  object-position: center;
}

.hero__scrim {
  background: linear-gradient(to top, color-mix(in srgb, var(--inverse-surface) 80%, transparent), transparent 70%);
}

.hero__content {
  position: absolute;
  inset: auto var(--space-0) var(--space-0);
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  padding: var(--space-container);
}

.hero__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--space-0-5) var(--space-stack-sm);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-container) 30%, transparent);
  color: var(--surface-lowest);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-label-sm);
  line-height: var(--leading-label-sm);
  -webkit-backdrop-filter: blur(var(--space-stack-sm));
  backdrop-filter: blur(var(--space-stack-sm));
}

.hero__title {
  color: var(--surface-lowest);
  font-family: var(--font-display);
  font-size: var(--text-headline-md);
  font-weight: var(--weight-headline-md);
  line-height: var(--leading-headline-md);
}

.hero__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-gutter);
}

.hero__desc {
  max-width: 65ch;
  color: color-mix(in srgb, var(--surface-highest) 90%, transparent);
  font-size: var(--text-body-md);
  line-height: var(--leading-body-md);
}

.hero__cta {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  padding: var(--space-0);
  border: var(--space-0);
  border-radius: var(--radius-full);
  background: var(--primary-container);
  color: var(--on-primary);
  box-shadow: var(--shadow-fab);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.hero__cta:hover {
  transform: scale(1.05);
}

.hero__cta:active {
  transform: scale(0.95);
}
.detail-product {
  display: grid;
  max-width: var(--container-max);
  margin-inline: auto;
}

.detail-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--surface-container);
}

.detail-hero__img,
.detail-hero__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.detail-hero__img {
  object-fit: cover;
}

.detail-hero__placeholder {
  background: var(--primary-fixed);
  color: var(--on-primary-fixed);
}

.detail-hero__placeholder .material-symbols-outlined {
  font-size: calc(var(--icon-xl) * 2.5);
}

.detail-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
  padding: var(--space-stack-md) var(--space-gutter) var(--space-stack-lg);
  background: var(--surface-lowest);
}

.detail-summary__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
}

.detail-summary__category {
  color: var(--secondary);
  font-size: var(--text-label-md);
  font-weight: var(--weight-label-md);
  letter-spacing: var(--tracking-label-md);
  line-height: var(--leading-label-md);
}

.detail-summary__title {
  color: var(--on-surface);
  font-size: var(--text-headline-lg-mobile);
  font-weight: var(--weight-headline-lg);
  line-height: var(--leading-headline-lg-mobile);
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-base) var(--space-gutter);
}

.detail-meta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  color: var(--on-surface-variant);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-label-sm);
  line-height: var(--leading-label-sm);
}

.detail-meta__item .material-symbols-outlined {
  color: var(--secondary);
  font-size: var(--icon-sm);
}

.detail-summary__price-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.detail-purchase-form {
  display: flex;
  align-items: end;
  gap: var(--space-stack-sm);
}

.quantity-field {
  display: flex;
  flex: 0 0 calc(var(--control-height) * 2);
  flex-direction: column;
  gap: var(--space-0-5);
}

.quantity-field__label {
  color: var(--on-surface-variant);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-label-sm);
  line-height: var(--leading-label-sm);
}

.quantity-field__input {
  width: 100%;
  height: var(--control-height);
  padding-inline: var(--space-stack-sm);
  border: var(--border-thin) solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-low);
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.quantity-field__input:focus {
  border-color: var(--primary);
  box-shadow: var(--shadow-focus-field);
  outline: none;
}

.detail-purchase-form__submit {
  flex: 1;
}

.detail-content {
  display: flex;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-stack-md) var(--space-gutter) var(--space-stack-lg);
  flex-direction: column;
  gap: var(--space-stack-lg);
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
}

.detail-section__title {
  font-size: var(--text-headline-md);
  font-weight: var(--weight-headline-md);
  line-height: var(--leading-headline-md);
}

.detail-content__purchase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-gutter);
}

.detail-content__price {
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: var(--text-headline-lg-mobile);
  font-weight: var(--weight-headline-md);
  line-height: var(--leading-headline-lg-mobile);
  font-variant-numeric: tabular-nums;
}

.detail-content__note {
  color: var(--outline);
  font-size: var(--text-label-sm);
  line-height: var(--leading-label-sm);
}

.detail-content__prose {
  max-width: 70ch;
  color: var(--on-surface-variant);
}

.detail-content__prose p + p {
  margin-top: var(--space-gutter);
}

.related-plants__rail {
  margin-inline: calc(var(--space-gutter) * -1);
  padding-inline: var(--space-gutter);
}

.care-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-base);
}

.care-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  padding: var(--space-gutter);
  border-radius: var(--radius-md);
  background: var(--surface-low);
}

.care-card--full {
  grid-column: 1 / -1;
}

.care-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-lg);
  height: var(--icon-lg);
  border-radius: var(--radius-full);
  background: var(--primary-fixed);
  color: var(--on-primary-fixed);
}

.care-card__icon--water {
  background: var(--secondary-fixed);
  color: var(--on-secondary-fixed);
}

.care-card__icon--humidity {
  background: var(--tertiary-fixed);
  color: var(--on-tertiary-fixed);
}

.care-card__icon .material-symbols-outlined {
  font-size: var(--icon-sm);
}

.care-card__title {
  color: var(--on-surface);
  font-size: var(--text-label-md);
  font-weight: var(--weight-label-md);
  letter-spacing: var(--tracking-label-md);
  line-height: var(--leading-label-md);
}

.care-card__text {
  color: var(--on-surface-variant);
  font-size: var(--text-body-md);
  line-height: var(--leading-body-md);
}

@media (min-width: 768px) {
  .detail-product {
    grid-template-columns: minmax(var(--space-0), 1.15fr) minmax(calc(var(--category-size) * 3), 0.85fr);
    gap: var(--space-stack-lg);
    padding: var(--space-stack-lg) var(--space-container) var(--space-0);
  }

  .detail-hero {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
  }

  .detail-summary {
    align-self: start;
    padding: var(--space-stack-lg) var(--space-container);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
  }

  .detail-summary__title {
    font-size: var(--text-headline-lg);
    line-height: var(--leading-headline-lg);
  }

  .detail-content {
    padding-inline: var(--space-container);
  }

  .care-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .care-card--full {
    grid-column: auto;
  }

}
/* Cart line item with stable media, quantity controls, and totals. */
.cart-item {
  display: grid;
  grid-template-columns: var(--thumb-width) minmax(0, 1fr) auto;
  gap: var(--space-gutter);
  align-items: center;
  padding: var(--space-gutter);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-card);
}

.cart-item__media {
  width: var(--thumb-width);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-container);
}

.cart-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.cart-item__body {
  min-width: var(--space-0);
}

.cart-item__name {
  overflow: hidden;
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: var(--text-headline-sm);
  line-height: var(--leading-headline-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-item__meta {
  margin-top: var(--space-0-5);
  color: var(--on-surface-variant);
  font-size: var(--text-label-sm);
  line-height: var(--leading-label-sm);
}

.cart-item__quantity {
  display: inline-flex;
  align-items: center;
  gap: var(--space-base);
  margin-top: var(--space-stack-sm);
  padding: var(--space-0-5);
  border-radius: var(--radius-full);
  background: var(--surface-low);
}

.cart-item__quantity button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-size-sm);
  height: var(--icon-button-size-sm);
  padding: var(--space-0);
  border: var(--space-0);
  border-radius: var(--radius-full);
  background: var(--surface-high);
  color: var(--on-surface);
  cursor: pointer;
}

.cart-item__price {
  align-self: start;
  color: var(--primary-container);
  font-weight: var(--weight-label-md);
  white-space: nowrap;
}

.cart-item__remove {
  border: var(--space-0);
  background: transparent;
  color: var(--error);
  font-size: var(--text-label-sm);
  cursor: pointer;
}

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-sm);
}

.cart-summary__secondary {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 479px) {
  .cart-item {
    grid-template-columns: var(--thumb-width) minmax(0, 1fr);
  }

  .cart-item__price {
    grid-column: 2;
  }
}
/* Admin data table and status badge treatments. */
.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-card);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-lowest);
}

.admin-table th {
  padding: var(--space-stack-sm) var(--space-base);
  border-bottom: var(--border-thin) solid var(--outline-variant);
  color: var(--on-surface-variant);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-label-sm);
  letter-spacing: var(--tracking-label-md);
  line-height: var(--leading-label-sm);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-table td {
  padding: var(--space-stack-sm) var(--space-base);
  border-bottom: var(--border-thin) solid var(--surface-variant);
  color: var(--on-surface);
  font-size: var(--text-body-md);
  line-height: var(--leading-body-md);
  vertical-align: middle;
}

.admin-table tbody tr:last-child td {
  border-bottom: var(--space-0);
}

.admin-table tbody tr:hover {
  background: var(--surface-low);
}

.badge--status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-base);
  border-radius: var(--radius-full);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-label-md);
  line-height: var(--leading-label-sm);
  white-space: nowrap;
}

.badge--pending {
  background: var(--surface-high);
  color: var(--on-surface-variant);
}

.badge--confirmed {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.badge--delivered {
  background: var(--primary-fixed);
  color: var(--on-primary-fixed);
}

.badge--cancelled {
  background: var(--error-container);
  color: var(--on-error-container);
}
/* Home-only composition: welcome copy, sections, and horizontal product rail. */
.home {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding-bottom: var(--space-4);
}

.home__welcome {
  padding: var(--space-stack-md) var(--space-container) var(--space-stack-lg);
}

.home__title {
  max-width: calc(var(--category-size) * 2.3333);
  color: var(--primary-container);
  font-family: var(--font-display);
  font-size: var(--text-headline-lg-mobile);
  font-weight: var(--weight-headline-lg);
  line-height: var(--leading-headline-lg-mobile);
}

.home__intro {
  margin-top: var(--space-base);
  color: var(--outline);
}

.section {
  margin-bottom: var(--space-stack-lg);
}

.section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-gutter);
  margin-bottom: var(--space-gutter);
}

.section__title {
  color: var(--on-surface-variant);
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: var(--weight-label-md);
  letter-spacing: var(--tracking-label-md);
  line-height: var(--leading-label-md);
  text-transform: uppercase;
}

.section__link {
  color: var(--primary-container);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-label-sm);
  line-height: var(--leading-label-sm);
  text-decoration-color: color-mix(in srgb, var(--primary-container) 30%, transparent);
  text-underline-offset: var(--space-0-5);
}

.product-scroller {
  display: flex;
  gap: var(--space-gutter);
  padding-bottom: var(--space-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.product-scroller::-webkit-scrollbar {
  display: none;
}

.fab {
  position: fixed;
  right: var(--space-container);
  bottom: var(--space-4);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fab-size);
  height: var(--fab-size);
  border: var(--space-0);
  border-radius: var(--radius-lg);
  background: var(--primary-container);
  color: var(--on-primary-container);
  box-shadow: var(--shadow-fab);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.fab:hover {
  transform: translateY(calc(var(--space-0-5) * -1));
}

.fab:active {
  transform: scale(0.95);
}

@media (min-width: 768px) {
  .home__title {
    max-width: calc(var(--category-size) * 4);
    font-size: var(--text-headline-lg);
    line-height: var(--leading-headline-lg);
  }
}
.garden-home { padding-bottom: var(--space-6); }
.garden-wrap { width: min(1440px, 100%); margin-inline: auto; padding-inline: clamp(16px, 3vw, 48px); }
.garden-home h1, .garden-home h2, .garden-home h3, .journal h1, .journal h2 { font-family: var(--font-display); font-weight: 500; color: var(--primary); }
.garden-home a, .journal a { text-underline-offset: 5px; }
.garden-home [hidden] { display: none !important; }
.garden-home button { font: inherit; cursor: pointer; }
.garden-home :is(a, button):focus-visible { outline: 3px solid var(--secondary); outline-offset: 5px; }
.garden-eyebrow { color: var(--secondary); text-transform: uppercase; letter-spacing: .15em; font-size: 10px; font-weight: 700; line-height: 1.6; }
.garden-intro { display: flex; justify-content: space-between; align-items: end; gap: var(--space-container); padding-block: var(--space-4) var(--space-container); }
.garden-intro h1 { font-size: clamp(32px, 3.3vw, 48px); letter-spacing: -.045em; line-height: 1.2; margin-top: var(--space-base); }
.garden-intro > p { font-size: 13px; line-height: 1.8; color: var(--on-surface-variant); }
.garden-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--space-card); }
.plant-showcase { min-width: 0; padding: var(--space-container); background: var(--surface-low); border: 1px solid var(--surface-high); border-radius: var(--radius-lg); }
.plant-showcase-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-card); }
.plant-showcase-top > span:last-child { color: var(--secondary); }
.plant-showcase-panels { display: grid; }
.plant-showcase-panels > .plant-showcase-panel { grid-area: 1 / 1; }
.garden-home .plant-showcase-panel[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
.plant-showcase-panel { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-container); min-height: 335px; }
.plant-showcase-image { position: relative; min-width: 0; background: var(--surface-container); border-radius: 120px 120px var(--radius-md) var(--radius-md); overflow: hidden; display: grid; place-items: center; }
.plant-showcase-image img { width: 100%; height: 100%; position: absolute; object-fit: cover; }
.plant-showcase-image > .material-symbols-outlined { font-size: 100px; color: var(--surface-tint); }
.plant-showcase-category { position: absolute; bottom: 16px; left: 12px; right: 12px; text-align: center; background: var(--surface-lowest); padding: 8px; border-radius: var(--radius-full); font-size: 10px; }
.plant-showcase-copy { display: flex; align-items: start; flex-direction: column; justify-content: center; padding-block: var(--space-base); }
.plant-showcase-copy h2 { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.04em; line-height: 1.15; margin-block: var(--space-1-5); overflow-wrap: anywhere; }
.plant-showcase-description { font-size: 12px; line-height: 1.8; color: var(--on-surface-variant); }
.plant-showcase-facts { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 11px; margin-top: var(--space-gutter); }
.plant-showcase-facts dt { color: var(--on-surface-variant); margin-bottom: 4px; }
.plant-showcase-facts dd { margin: 0; font-weight: 600; }
.plant-showcase-price { font-family: var(--font-display); font-size: 25px; margin-block: var(--space-gutter) var(--space-base); font-variant-numeric: tabular-nums; }
.garden-text-link { display: inline-block; color: var(--primary); font-size: 12px; font-weight: 600; line-height: 1.7; text-decoration: underline; text-decoration-color: var(--outline-variant); }
.garden-text-link:hover { text-decoration-color: currentColor; }
.garden-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 12px 20px; background: var(--primary); color: var(--on-primary); text-decoration: none; font-size: 12px; font-weight: 600; line-height: 1.5; transition: background var(--duration-base); }
.garden-button:hover { background: var(--secondary); color: var(--on-secondary); }
.garden-button--light { background: var(--surface-lowest); color: var(--primary); }
.plant-showcase-copy form { margin-top: var(--space-gutter); }
.plant-picker { display: flex; gap: var(--space-base); overflow-x: auto; padding: var(--space-gutter) 3px 5px; margin-top: var(--space-gutter); border-top: 1px solid var(--outline-variant); scrollbar-width: thin; }
.plant-picker-item { display: flex; flex: 1 0 100px; align-items: center; gap: 8px; min-height: 54px; max-width: 145px; padding: 6px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--on-surface-variant); text-align: left; }
.plant-picker-item[aria-pressed="true"] { border-color: var(--secondary); background: var(--surface-lowest); color: var(--primary); }
.plant-picker-item img { width: 32px; height: 40px; object-fit: cover; border-radius: 5px; flex: none; }
.plant-picker-item > span:last-child { font-size: 10px; line-height: 1.4; }
.garden-announcements { position: relative; min-width: 0; min-height: 500px; border-radius: var(--radius-lg); overflow: hidden; background: var(--primary-container); color: var(--on-primary); }
.garden-announcement { height: 100%; }
.garden-announcement > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.garden-announcement::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, transparent), color-mix(in srgb, var(--primary) 90%, transparent)); }
.garden-announcement-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: start; justify-content: end; height: 100%; min-height: 500px; padding: 40px 32px 84px; }
.garden-announcement-label { border: 1px solid color-mix(in srgb, var(--on-primary) 65%, transparent); border-radius: var(--radius-full); padding: 7px 12px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: auto; }
.garden-announcement h2 { color: var(--on-primary); font-size: clamp(32px, 3vw, 44px); line-height: 1.12; letter-spacing: -.035em; margin-top: 48px; }
.garden-announcement p { font-size: 12px; line-height: 1.8; margin-block: 16px 24px; max-width: 36ch; }
.garden-carousel-controls { display: flex; position: absolute; z-index: 2; bottom: 16px; left: 28px; right: 24px; gap: 8px; align-items: center; }
.garden-carousel-controls button { width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--on-primary) 45%, transparent); border-radius: 50%; color: var(--on-primary); background: transparent; }
.garden-carousel-controls button:hover { background: color-mix(in srgb, var(--on-primary) 20%, transparent); }
.garden-carousel-dots { display: flex; margin-right: auto; }
.garden-carousel-dots button { width: 28px; border: 0; border-radius: 0; display: grid; place-items: center; }
.garden-carousel-dots span { width: 6px; height: 6px; background: var(--on-primary); opacity: .45; border-radius: 50%; }
.garden-carousel-dots [aria-pressed="true"] span { width: 18px; border-radius: 4px; opacity: 1; }
.garden-carousel-count { font-size: 10px; margin-right: 8px; font-variant-numeric: tabular-nums; }
.garden-promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-block: 28px; border-bottom: 1px solid var(--outline-variant); }
.garden-promises > div { display: flex; gap: 12px; align-items: center; justify-content: center; }
.garden-promises .material-symbols-outlined { color: var(--secondary); font-size: 28px; }
.garden-promises strong, .garden-promises small { display: block; font-size: 11px; line-height: 1.8; }
.garden-promises small { color: var(--on-surface-variant); font-weight: 400; font-size: 10px; }
.garden-section { margin-block: clamp(48px, 6vw, 88px); }
.garden-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.garden-section-head h2, .garden-about h2, .garden-contact h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.18; letter-spacing: -.04em; margin-top: 10px; }
.garden-section-head > div > p:not(.garden-eyebrow) { color: var(--on-surface-variant); font-size: 13px; line-height: 1.8; margin-bottom: 12px; }
.garden-categories { display: flex; gap: 8px; overflow-x: auto; padding-block: 4px 20px; scrollbar-width: thin; }
.garden-categories a { flex: none; padding: 10px 18px; border: 1px solid var(--outline-variant); border-radius: var(--radius-full); font-size: 11px; text-decoration: none; color: var(--on-surface-variant); }
.garden-categories .is-current, .garden-categories a:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.garden-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
.garden-product { min-width: 0; }
.garden-product-image { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1.12; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-container); }
.garden-product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow); }
.garden-product-image:hover img, .garden-service-image:hover img { transform: scale(1.035); }
.garden-product-image > .material-symbols-outlined { font-size: 72px; color: var(--surface-tint); }
.garden-product-tag { position: absolute; left: 12px; top: 12px; background: var(--surface-lowest); border-radius: var(--radius-full); padding: 5px 10px; font-size: 9px; color: var(--primary); }
.garden-product-info { padding-top: 16px; }
.garden-product-info > p { color: var(--secondary); font-size: 10px; }
.garden-product-info h3 { margin-block: 6px; font-size: 21px; }
.garden-product-info h3 a { text-decoration: none; }
.garden-product-info > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 500; }
.garden-product-add { height: 44px; width: 44px; border: 1px solid var(--outline-variant); border-radius: 50%; background: transparent; color: var(--primary); }
.garden-product-add:hover { background: var(--primary); color: var(--on-primary); }
.garden-services { padding-block: 64px; background: var(--surface-low); }
.garden-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.garden-service-image { position: relative; display: block; aspect-ratio: 1.5; overflow: hidden; border-radius: var(--radius-md); }
.garden-service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow); }
.garden-service-image span { position: absolute; top: 12px; left: 12px; padding: 7px 10px; background: var(--surface-lowest); color: var(--primary); border-radius: var(--radius-full); font-size: 11px; }
.garden-service h3 { font-size: 23px; line-height: 1.25; margin-block: 20px 10px; }
.garden-service h3 a { text-decoration: none; }
.garden-service p { font-size: 12px; line-height: 1.8; color: var(--on-surface-variant); margin-bottom: 12px; }
.garden-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.journal-card-image { display: block; aspect-ratio: 1.6; background: var(--surface-container); border-radius: var(--radius-md); overflow: hidden; }
.journal-card-image img { width: 100%; height: 100%; object-fit: cover; }
.journal-card .garden-eyebrow { margin-top: 18px; }
.journal-card h3 { font: 500 24px/1.3 var(--font-display); margin-block: 10px; }
.journal-card h3 a { color: var(--primary); text-decoration: none; }
.journal-card > p:not(.garden-eyebrow) { color: var(--on-surface-variant); font-size: 13px; line-height: 1.8; margin-bottom: 14px; }
.garden-journal-empty { display: flex; gap: 24px; align-items: center; padding: 32px; background: var(--surface-low); border-radius: var(--radius-md); }
.garden-journal-empty > span { font-size: 48px; color: var(--secondary); }
.garden-journal-empty h3 { font-size: 24px; margin-bottom: 8px; }
.garden-journal-empty p { font-size: 13px; line-height: 1.8; color: var(--on-surface-variant); }
.garden-journal-empty > a { margin-left: auto; flex: none; }
.garden-about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.garden-about-image { position: relative; aspect-ratio: 1.12; }
.garden-about-image img { height: 100%; width: 100%; object-fit: cover; border-radius: var(--radius-md) 100px var(--radius-md) var(--radius-md); }
.garden-about-image span { position: absolute; left: 24px; bottom: 24px; right: 24px; background: var(--surface-lowest); padding: 16px; font: 500 18px/1.4 var(--font-display); }
.garden-about-copy > p:not(.garden-eyebrow) { margin-top: 20px; font-size: 14px; line-height: 1.9; color: var(--on-surface-variant); }
.garden-about-copy > a { margin-top: 24px; }
.garden-about-note { display: flex; gap: 8px; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--outline-variant); font-size: 11px; color: var(--secondary); }
.garden-contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; padding: clamp(28px, 5vw, 64px); background: var(--primary-container); color: var(--on-primary); border-radius: var(--radius-lg); }
.garden-contact .garden-eyebrow { color: var(--secondary-fixed); }
.garden-contact h2 { color: var(--on-primary); }
.garden-contact > div > p:not(.garden-eyebrow) { font-size: 13px; line-height: 1.8; margin-block: 20px 28px; }
.garden-contact address { font-style: normal; display: flex; flex-direction: column; justify-content: center; align-items: start; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.garden-contact address span { color: var(--primary-fixed); text-transform: uppercase; font-size: 9px; letter-spacing: .14em; margin-top: 24px; }
.garden-contact address a { color: var(--on-primary); }
.garden-contact address .garden-phone { font: 500 clamp(22px, 2.5vw, 34px)/1.6 var(--font-display); text-decoration: none; }
.garden-contact address > a:last-child { margin-top: 20px; }
.garden-empty { padding: 40px 24px; line-height: 1.8; }
.journal { padding-block: 48px; }
.journal h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.2; margin-block: 16px 24px; }
.journal-lead { max-width: 65ch; color: var(--on-surface-variant); line-height: 1.8; margin-bottom: 32px; }
.journal-article { max-width: 800px; margin-inline: auto; }
.journal-cover { width: 100%; max-height: 480px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 32px; }
.journal-prose { font-size: 17px; line-height: 1.9; overflow-wrap: anywhere; }
.journal-prose p { margin-bottom: 24px; }
.article-editor { max-width: 800px; }
.article-editor .form-group { margin-block: 20px; }
.article-editor .form-group > label { display: block; margin-bottom: 8px; }
.article-editor :is(input:not([type="checkbox"]), textarea) { width: 100%; }
@media (max-width: 1100px) {
  .garden-hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
  .plant-showcase { padding: 20px; }
  .plant-showcase-panel { gap: 16px; }
  .plant-showcase-copy > .garden-eyebrow { display: none; }
  .garden-announcement-copy { padding-inline: 24px; }
  .garden-promises { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .garden-promises > div { justify-content: start; }
}
@media (max-width: 800px) {
  .garden-hero { grid-template-columns: 1fr; }
  .garden-intro > p { display: none; }
  .plant-showcase-panel { min-height: 320px; }
  .garden-announcements, .garden-announcement-copy { min-height: 410px; }
  .garden-announcement-copy { padding-top: 24px; }
  .garden-announcement h2 { max-width: 14ch; }
  .garden-announcement p { max-width: 44ch; }
  .garden-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .garden-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .garden-section-head { align-items: start; }
  .garden-section-head > div > p:not(.garden-eyebrow) { display: none; }
  .garden-articles { grid-template-columns: 1fr; }
  .garden-about { gap: 28px; }
  .garden-about h2 { font-size: 28px; }
  .garden-journal-empty { flex-wrap: wrap; }
  .garden-journal-empty > a { margin-left: 0; }
  .garden-contact { gap: 24px; }
}
@media (max-width: 540px) {
  .garden-intro { padding-top: 24px; }
  .garden-intro h1 { font-size: 32px; }
  .plant-showcase { padding: 16px; }
  .plant-showcase-top .garden-eyebrow { font-size: 9px; letter-spacing: .1em; }
  .plant-showcase-panel { grid-template-columns: .85fr 1fr; gap: 14px; min-height: 300px; }
  .plant-showcase-copy h2 { font-size: 25px; margin-top: 0; }
  .plant-showcase-description { font-size: 11px; line-height: 1.6; }
  .plant-showcase-facts { gap: 8px; font-size: 10px; }
  .plant-showcase-price { font-size: 22px; margin-top: 12px; }
  .plant-showcase-copy .garden-button { padding: 10px 12px; font-size: 10px; }
  .plant-showcase-copy .garden-text-link { font-size: 10px; }
  .plant-showcase-category { font-size: 9px; padding: 6px; left: 8px; right: 8px; }
  .garden-promises { gap: 20px 12px; }
  .garden-promises > div { gap: 8px; }
  .garden-promises strong { font-size: 10px; }
  .garden-promises small { font-size: 9px; }
  .garden-promises .material-symbols-outlined { font-size: 24px; }
  .garden-section-head { flex-direction: column; gap: 16px; }
  .garden-products { gap: 24px 14px; }
  .garden-product-info h3 { font-size: 18px; }
  .garden-product-info > div { font-size: 12px; }
  .garden-product-tag { left: 8px; top: 8px; font-size: 8px; }
  .garden-services { padding-block: 40px; }
  .garden-service-grid { grid-template-columns: 1fr; }
  .garden-about { grid-template-columns: 1fr; }
  .garden-contact { grid-template-columns: 1fr; }
  .garden-contact address { border-top: 1px solid var(--surface-tint); }
  .garden-journal-empty { padding: 24px; }
}
/* Shop-only sticky discovery controls, promotion spacing, and product grid. */
.shop {
  padding-bottom: var(--space-stack-md);
}

.shop-search-row {
  display: flex;
  align-items: center;
  gap: var(--space-stack-sm);
  margin-bottom: var(--space-gutter);
}

.shop-search-panel {
  position: sticky;
  top: calc(var(--header-height) + 33px + env(safe-area-inset-top, var(--space-0)));
  z-index: var(--z-sticky);
  padding: var(--space-gutter) var(--space-container) var(--space-base);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(var(--space-stack-sm));
  backdrop-filter: blur(var(--space-stack-sm));
}

.shop-tabs {
  margin-inline: calc(var(--space-container) * -1);
  padding-inline: var(--space-container);
  padding-bottom: var(--space-base);
}

.shop-promo {
  margin-top: var(--space-base);
  margin-bottom: var(--space-stack-md);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-gutter);
}

.shop-load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-stack-md);
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Orders and My Jungle page rhythm: summary, filters, and stacked records. */
.orders,
.my-jungle {
  padding-bottom: var(--space-stack-lg);
}

.jungle-summary,
.orders-summary {
  padding: var(--space-stack-md) var(--space-container);
  background: var(--surface-low);
}

.jungle-summary__title,
.orders-summary__title {
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: var(--text-headline-lg-mobile);
  font-weight: var(--weight-headline-lg);
  line-height: var(--leading-headline-lg-mobile);
}

.stats-row {
  display: flex;
  gap: var(--space-gutter);
  margin-top: var(--space-gutter);
}

.jungle-filters,
.order-filters {
  padding: var(--space-gutter) var(--space-container);
}

.jungle-list,
.order-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-gutter);
  padding: var(--space-base) var(--space-container) var(--space-stack-lg);
}

.orders-empty {
  display: grid;
  max-width: calc(var(--category-size) * 4);
  margin: var(--space-stack-lg) auto;
  gap: var(--space-gutter);
  justify-items: center;
  color: var(--on-surface-variant);
  text-align: center;
}

.orders-empty__icon {
  display: grid;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--primary-fixed);
  color: var(--on-primary-fixed);
  place-items: center;
}

@media (max-width: 479px) {
  .stats-row {
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  .jungle-list,
  .order-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.auth-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
  padding: var(--space-gutter) var(--space-gutter) calc(var(--space-gutter) * 2);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: calc(var(--space-gutter) * 1.5);
  border: var(--border-thin) solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.auth-card h2 {
  margin: 0 0 var(--space-gutter);
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: var(--weight-display-sm);
  line-height: var(--leading-display-sm);
}

.auth-card .field {
  margin-bottom: var(--space-gutter);
}

.auth-card .field label {
  display: block;
  margin-bottom: calc(var(--space-base) * 0.75);
  color: var(--on-surface-variant);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-label-sm);
  line-height: var(--leading-label-sm);
}

.auth-card .field input[type="email"],
.auth-card .field input[type="password"],
.auth-card .field input[type="text"] {
  width: 100%;
  min-height: var(--control-height);
  padding: calc(var(--space-base) * 1.75) var(--space-gutter);
  border: var(--border-thin) solid var(--outline-variant);
  border-radius: var(--radius-md);
  outline: none;
  background: color-mix(in srgb, var(--secondary) 8%, var(--surface-low));
  color: var(--on-surface);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.auth-card .field input[type="email"]:focus,
.auth-card .field input[type="password"]:focus,
.auth-card .field input[type="text"]:focus {
  border-color: var(--primary);
  box-shadow: var(--shadow-focus-field);
}

.auth-card .field input[type="checkbox"] {
  margin-right: calc(var(--space-base) * 0.5);
}

.auth-card .actions {
  margin-top: var(--space-gutter);
}

.auth-card .actions input[type="submit"] {
  width: 100%;
  min-height: var(--control-height);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-body-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.auth-card .actions input[type="submit"]:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.auth-card > p {
  margin: var(--space-gutter) 0 0;
  text-align: center;
}

.auth-card > p a {
  color: var(--primary);
  font-weight: var(--weight-body-md);
  text-decoration: none;
}

.auth-card > p a:hover {
  text-decoration: underline;
}

.auth-card .alert,
.auth-card .notice {
  margin-bottom: var(--space-gutter);
  padding: calc(var(--space-base) * 0.75) var(--space-gutter);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
}

.auth-card .alert {
  background: color-mix(in srgb, var(--error) 12%, var(--surface));
  color: var(--error);
}

.auth-card .notice {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}
/*
 * Botanical Essence stylesheet manifest.
 * Dependencies are explicit so tokens and foundations always precede consumers.
 *




















 */