/*
Theme Name: NNVS Starter
Description: Giao dien thu nghiem cho Nong Nghiep Vi Sinh, child theme cua Twenty Twenty-Five.
Author: NNVS Project
Version: 0.9.1
Template: twentytwentyfive
Text Domain: nnvs-starter
Requires at least: 6.6
Requires PHP: 7.4
*/

/* --------------------------------------------------------------------------
   1. Design tokens
   theme.json is the source of truth. These aliases keep component CSS concise
   and include fallbacks for environments where Global Styles load later.
   -------------------------------------------------------------------------- */

:root {
  --nnvs-color-primary: var(--wp--preset--color--primary, #245c3b);
  --nnvs-color-secondary: var(--wp--preset--color--secondary, #6c914d);
  --nnvs-color-dark: var(--wp--preset--color--dark, #153f2c);
  --nnvs-color-accent: var(--wp--preset--color--accent, #d79a36);
  --nnvs-color-background: var(--wp--preset--color--background, #f9f7ef);
  --nnvs-color-surface: var(--wp--preset--color--surface, #ffffff);
  --nnvs-color-text: var(--wp--preset--color--text, #20352a);
  --nnvs-color-muted: var(--wp--preset--color--muted, #58695f);
  --nnvs-color-border: var(--wp--preset--color--border, #dce5da);
  --nnvs-color-mint: var(--wp--preset--color--mint, #edf3e8);

  --nnvs-font-body: var(--wp--preset--font-family--system-ui, "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --nnvs-font-display: var(--wp--preset--font-family--display, "Fraunces", Georgia, "Times New Roman", serif);

  --nnvs-space-2xs: var(--wp--preset--spacing--20, clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem));
  --nnvs-space-xs: var(--wp--preset--spacing--30, clamp(0.75rem, 0.69rem + 0.3vw, 0.9375rem));
  --nnvs-space-sm: var(--wp--preset--spacing--40, clamp(1rem, 0.92rem + 0.4vw, 1.25rem));
  --nnvs-space-md: var(--wp--preset--spacing--50, clamp(1.5rem, 1.34rem + 0.8vw, 2rem));
  --nnvs-space-lg: var(--wp--preset--spacing--60, clamp(2rem, 1.68rem + 1.6vw, 3rem));
  --nnvs-space-xl: var(--wp--preset--spacing--70, clamp(3rem, 2.36rem + 3.2vw, 5rem));
  --nnvs-space-2xl: var(--wp--preset--spacing--80, clamp(4rem, 3.04rem + 4.8vw, 7rem));

  --nnvs-radius-sm: var(--wp--custom--radius--small, 0.625rem);
  --nnvs-radius-md: var(--wp--custom--radius--medium, 1rem);
  --nnvs-radius-lg: var(--wp--custom--radius--large, 1.375rem);
  --nnvs-radius-pill: var(--wp--custom--radius--pill, 999px);

  --nnvs-shadow-soft: var(--wp--custom--shadow--soft, 0 10px 30px rgba(21, 63, 44, 0.08));
  --nnvs-shadow-lifted: var(--wp--custom--shadow--lifted, 0 18px 50px rgba(21, 63, 44, 0.14));
  --nnvs-shadow-focus: var(--wp--custom--shadow--focus, 0 0 0 4px rgba(215, 154, 54, 0.24));

  --nnvs-motion-fast: var(--wp--custom--motion--duration--fast, 180ms);
  --nnvs-motion-normal: var(--wp--custom--motion--duration--normal, 300ms);
  --nnvs-motion-entrance: var(--wp--custom--motion--duration--entrance, 520ms);
  --nnvs-ease-standard: var(--wp--custom--motion--easing--standard, cubic-bezier(0.2, 0, 0, 1));
  --nnvs-ease-entrance: var(--wp--custom--motion--easing--entrance, cubic-bezier(0.22, 1, 0.36, 1));

  --nnvs-content-gutter: clamp(1rem, 0.64rem + 1.8vw, 2.125rem);
  --nnvs-header-height: 4.75rem;
  --nnvs-section-space: clamp(3.5rem, 2.7rem + 4vw, 6rem);
  --nnvs-reading-measure: var(--wp--custom--content--measure, 68ch);
}

/* Phase 0.8.3: native commerce shells and editorial page templates. */
.nnvs-commerce-shell,
.nnvs-account-main {
  width: min(calc(100% - 2rem), 72rem);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 4.5rem);
}

.nnvs-commerce-shell > *,
.nnvs-account-main > * {
  max-width: none !important;
}

.nnvs-commerce-shell > .wp-block-post-title,
.nnvs-account-main > .wp-block-post-title,
.nnvs-editorial-main > .wp-block-post-title {
  font-family: var(--nnvs-font-display);
  font-size: 2.25rem;
  line-height: 1.08;
}

.nnvs-commerce-shell :is(.wc-block-cart, .wc-block-checkout, .woocommerce),
.nnvs-account-main .woocommerce,
.nnvs-editorial-surface,
.nnvs-contact-card {
  border-radius: 1.375rem;
  background: #fff;
}

.nnvs-commerce-shell :is(.wc-block-cart, .wc-block-checkout),
.nnvs-account-main .woocommerce,
.nnvs-editorial-surface {
  padding: clamp(1rem, 3vw, 2rem);
}

.nnvs-commerce-shell :is(label, .wc-block-components-formatted-money-amount),
.nnvs-account-main label {
  color: var(--nnvs-color-dark);
  font-size: 1rem;
  font-weight: 700;
}

.nnvs-commerce-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, button),
.nnvs-account-main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, button) {
  min-height: 3rem;
  border-radius: 1rem;
  font: inherit;
}

.nnvs-commerce-shell :is(input, select, textarea):focus-visible,
.nnvs-account-main :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--nnvs-color-accent);
  outline-offset: 2px;
}

.nnvs-commerce-shell :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner),
.nnvs-account-main :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  margin-block: 1rem;
  padding: 1rem;
  border: 2px solid var(--nnvs-color-primary);
  border-radius: 1rem;
  background: #fff;
}

.nnvs-commerce-shell :is(.woocommerce-error, .is-error) {
  border-color: #a5261f;
  color: #7d1c17;
}

.nnvs-cart-page .wc-block-cart__main,
.nnvs-cart-page .wc-block-cart__sidebar,
.nnvs-checkout-page :is(.wc-block-checkout__main, .wc-block-checkout__sidebar) {
  min-width: 0;
}

.nnvs-checkout-page :is(*, *::before, *::after) {
  animation: none !important;
}

.nnvs-account-main .woocommerce:has(> .woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2rem;
}

.nnvs-account-main .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.nnvs-account-main .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
  display: none;
  content: none;
}

.nnvs-account-main .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
  min-width: 0;
}

.nnvs-account-main .woocommerce-MyAccount-navigation ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nnvs-account-main .woocommerce-MyAccount-navigation a {
  display: flex;
  min-height: 3rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  border-radius: 0.75rem;
  text-decoration: none;
}

.nnvs-account-main .woocommerce-MyAccount-navigation .is-active a,
.nnvs-account-main .woocommerce-MyAccount-navigation a:is(:hover, :focus-visible) {
  color: #fff;
  background: var(--nnvs-color-primary);
}

.nnvs-account-main .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  min-width: 0;
}

.nnvs-editorial-main {
  width: min(calc(100% - 2rem), 45rem);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 7vw, 5rem);
  font-size: 1rem;
  line-height: 1.8;
}

.nnvs-editorial-surface {
  margin-top: 1.5rem;
}

.nnvs-editorial-surface > * {
  max-width: none !important;
}

.nnvs-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.nnvs-contact-card {
  display: grid;
  min-height: 8rem;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  color: var(--nnvs-color-dark);
  text-decoration: none;
  box-shadow: var(--nnvs-shadow-soft);
}

.nnvs-contact-card__icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 50%;
  color: var(--nnvs-color-dark);
  background: #f3c869;
  font-weight: 800;
}

.nnvs-contact-card__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .nnvs-commerce-shell,
  .nnvs-account-main {
    width: min(calc(100% - 3rem), 72rem);
  }

  .nnvs-commerce-shell > .wp-block-post-title,
  .nnvs-account-main > .wp-block-post-title,
  .nnvs-editorial-main > .wp-block-post-title {
    font-size: 3rem;
  }
}

@media (max-width: 47.999rem) {
  .nnvs-account-main .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .nnvs-account-main .woocommerce-MyAccount-navigation {
    width: auto;
  }

  .nnvs-account-main .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
  }

  .nnvs-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phase 0.7.0: WooCommerce archive and single-product presentation. */
.nnvs-shop-main,
.nnvs-product-main {
  width: min(calc(100% - 2rem), 72rem);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 4.5rem);
}

.nnvs-shop-main .wc-block-product-template {
  grid-template-columns: minmax(0, 1fr) !important;
}

.nnvs-related-products .wc-block-product-template {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.nnvs-shop-main > *,
.nnvs-product-main > * {
  max-width: none !important;
}

.nnvs-shop-main .woocommerce-breadcrumb,
.nnvs-product-main .woocommerce-breadcrumb,
.nnvs-shop-main .wp-block-woocommerce-breadcrumbs,
.nnvs-product-main .wp-block-woocommerce-breadcrumbs {
  margin-bottom: 1.25rem;
  color: rgba(21, 63, 44, 0.68);
  font-size: 0.875rem;
}

.nnvs-shop-title,
.nnvs-product-summary .wp-block-post-title {
  margin-block: 0 1rem;
  color: var(--nnvs-color-dark);
  font-family: var(--wp--preset--font-family--fraunces, Fraunces, Georgia, serif);
  font-size: 2.25rem;
  line-height: 1.04;
}

.nnvs-shop-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block: 1.5rem 2rem;
}

.nnvs-shop-categories a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(21, 63, 44, 0.22);
  border-radius: 999px;
  color: var(--nnvs-color-dark);
  background: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.nnvs-shop-categories a:is(:hover, :focus-visible) {
  border-color: var(--nnvs-color-primary);
  color: #fff8e8;
  background: var(--nnvs-color-primary);
}

.nnvs-shop-toolbar {
  gap: 1rem;
  margin-block: 1.5rem;
  padding-block: 1rem;
  border-block: 1px solid rgba(21, 63, 44, 0.12);
}

.nnvs-shop-toolbar__controls {
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.nnvs-shop-search {
  min-width: min(100%, 18rem);
  max-width: 100%;
}

.nnvs-shop-search .wp-block-search__input {
  width: 100%;
  min-width: 0;
}

.nnvs-shop-main .wp-block-woocommerce-product-collection {
  margin-top: 1.5rem;
}

.nnvs-shop-main .wc-block-product-template,
.nnvs-related-products .wc-block-product-template {
  gap: clamp(1rem, 2vw, 1.5rem);
}

.nnvs-shop-main .wc-block-product-template > li,
.nnvs-related-products .wc-block-product-template > li {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.nnvs-shop-main .wc-block-components-product-image,
.nnvs-related-products .wc-block-components-product-image {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
}

.nnvs-shop-main .wc-block-components-product-image img,
.nnvs-related-products .wc-block-components-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nnvs-shop-main .wp-block-post-title,
.nnvs-related-products .wp-block-post-title {
  font-family: var(--wp--preset--font-family--be-vietnam-pro, sans-serif);
  font-size: 1.125rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.nnvs-shop-main :is(.wp-block-woocommerce-product-price, .wp-block-woocommerce-product-button),
.nnvs-related-products :is(.wp-block-woocommerce-product-price, .wp-block-woocommerce-product-button) {
  display: block;
}

.nnvs-shop-main .wp-block-woocommerce-product-button .wp-element-button,
.nnvs-related-products .wp-block-woocommerce-product-button .wp-element-button {
  width: 100%;
  white-space: normal;
}

.nnvs-shop-main .wp-block-query-pagination {
  margin-top: 2.5rem;
}

.nnvs-shop-empty {
  min-height: 14rem;
  padding: 2rem;
  border-radius: 1rem;
  background: #fff;
  text-align: center;
}

/* Native ?s=...&post_type=product results only; ordinary searches are not affected. */
.nnvs-product-search-results .woocommerce ul.products {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: minmax(0, 1fr);
  margin-block: 1.5rem 0;
}

.nnvs-product-search-results .woocommerce ul.products::before,
.nnvs-product-search-results .woocommerce ul.products::after {
  display: none;
}

.nnvs-product-search-results .woocommerce ul.products li.product {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
}

.nnvs-product-search-results .woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.nnvs-product-search-results .wc-block-product-template {
  grid-template-columns: minmax(0, 1fr) !important;
}

.nnvs-product-search-results .wc-block-product-template > li {
  min-width: 0;
}

/* Phase 0.8.2: equal-height WooCommerce loop cards without changing actions. */
:is(.nnvs-shop-main, .nnvs-related-products, .nnvs-product-search-results) .wc-block-product-template {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

:is(.nnvs-shop-main, .nnvs-related-products, .nnvs-product-search-results) .wc-block-product-template > li {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
}

:is(.nnvs-shop-main, .nnvs-related-products, .nnvs-product-search-results) .wc-block-product-template > li > :is(.wp-block-woocommerce-product-price, .wc-block-components-product-price) {
  margin-top: auto;
}

:is(.nnvs-shop-main, .nnvs-related-products, .nnvs-product-search-results) .wc-block-product-template > li > :is(.wp-block-woocommerce-product-button, .wc-block-components-product-button, .wp-block-button) {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-top: 0.75rem;
}

:is(.nnvs-shop-main, .nnvs-related-products, .nnvs-product-search-results) .wc-block-product-template > li .wc-block-components-product-button__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  margin: 0;
}

:is(body.home, .nnvs-product-search-results, .nnvs-shop-main) .woocommerce ul.products {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

:is(body.home, .nnvs-product-search-results, .nnvs-shop-main) .woocommerce ul.products li.product {
  display: flex;
  height: 100%;
  flex-direction: column;
}

:is(body.home, .nnvs-product-search-results) .woocommerce ul.products li.product > a:first-child {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

:is(body.home, .nnvs-product-search-results) .woocommerce ul.products li.product .price {
  margin-top: auto;
}

:is(body.home, .nnvs-product-search-results) .woocommerce ul.products li.product > .button {
  width: 100%;
  margin-top: 0.75rem;
}

.nnvs-product-layout {
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start !important;
  margin-top: 1rem;
}

.nnvs-product-gallery,
.nnvs-product-summary {
  min-width: 0;
}

.nnvs-product-summary .wp-block-woocommerce-product-price {
  margin-block: 1rem;
  color: var(--nnvs-color-primary);
  font-weight: 800;
}

.nnvs-product-summary .wp-block-post-excerpt {
  color: rgba(21, 63, 44, 0.78);
  line-height: 1.75;
}

.nnvs-product-summary .wp-block-woocommerce-add-to-cart-form {
  margin-block: 1.5rem;
}

.nnvs-product-hotline a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--nnvs-color-primary);
  font-weight: 800;
}

.nnvs-product-main :is(button, input, select, .wp-element-button) {
  min-height: 2.75rem;
}

.nnvs-product-main .wp-block-woocommerce-product-details,
.nnvs-related-products {
  margin-top: clamp(2.5rem, 6vw, 5rem);
}

@media (hover: hover) and (pointer: fine) {
  .nnvs-shop-main .wc-block-product-template > li:hover,
  .nnvs-related-products .wc-block-product-template > li:hover {
    transform: translateY(-3px);
  }
}

@media (max-width: 56.249rem) {
  .nnvs-product-layout {
    flex-wrap: wrap !important;
  }

  .nnvs-product-layout > .wp-block-column {
    flex-basis: 100% !important;
  }

}

@media (min-width: 22.5rem) {
  .nnvs-shop-main .wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .nnvs-product-search-results .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nnvs-product-search-results .wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 48rem) {
  .nnvs-shop-main,
  .nnvs-product-main {
    width: min(calc(100% - 3rem), 72rem);
  }

  .nnvs-shop-main .wc-block-product-template {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .nnvs-product-search-results .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nnvs-product-search-results .wc-block-product-template {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 64rem) {
  .nnvs-shop-title,
  .nnvs-product-summary .wp-block-post-title {
    font-size: 3rem;
  }

  .nnvs-shop-main .wc-block-product-template,
  .nnvs-related-products .wc-block-product-template {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .nnvs-product-search-results .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nnvs-product-search-results .wc-block-product-template {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 47.999rem) {
  .nnvs-shop-toolbar,
  .nnvs-shop-toolbar__controls {
    align-items: stretch !important;
    flex-direction: column;
  }

  .nnvs-shop-search {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   2. Foundation and accessibility
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  background: var(--nnvs-color-background);
  color: var(--nnvs-color-text);
  font-family: var(--nnvs-font-body);
  font-feature-settings: normal;
  font-kerning: normal;
  font-synthesis: none;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  word-spacing: normal;
}

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

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

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--nnvs-color-text);
  font-family: var(--nnvs-font-display);
  hyphens: none;
  overflow-wrap: normal;
  text-wrap: pretty;
  word-break: normal;
  word-spacing: normal;
}

:where(p, li) {
  text-wrap: pretty;
}

:where(a) {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition:
    color var(--nnvs-motion-fast) var(--nnvs-ease-standard),
    text-decoration-color var(--nnvs-motion-fast) var(--nnvs-ease-standard);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  border-radius: max(0.125rem, var(--nnvs-radius-sm));
  box-shadow: var(--nnvs-shadow-focus);
  outline: 3px solid var(--nnvs-color-accent);
  outline-offset: 3px;
}

:target {
  scroll-margin-block-start: var(--nnvs-space-lg);
}

::selection {
  background: var(--nnvs-color-accent);
  color: var(--nnvs-color-dark);
}

/* --------------------------------------------------------------------------
   3. Reusable button components
   Add .nnvs-button to a link, or use the native Button block/Woo button.
   -------------------------------------------------------------------------- */

:where(
  .nnvs-button,
  .wp-element-button,
  .wp-block-button__link,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit
) {
  align-items: center;
  background: var(--nnvs-color-primary);
  border: 1px solid transparent;
  border-radius: var(--nnvs-radius-pill);
  color: var(--nnvs-color-surface);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  gap: 0.5em;
  justify-content: center;
  line-height: 1.2;
  min-height: 2.75rem;
  padding: 0.75em 1.35em;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--nnvs-motion-fast) var(--nnvs-ease-standard),
    border-color var(--nnvs-motion-fast) var(--nnvs-ease-standard),
    box-shadow var(--nnvs-motion-fast) var(--nnvs-ease-standard),
    color var(--nnvs-motion-fast) var(--nnvs-ease-standard),
    transform var(--nnvs-motion-fast) var(--nnvs-ease-standard);
}

:where(.nnvs-button--secondary, .wp-block-button.is-style-outline > .wp-block-button__link) {
  background: transparent;
  border-color: currentColor;
  color: var(--nnvs-color-primary);
}

:where(
  .nnvs-button,
  .wp-element-button,
  .wp-block-button__link,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit
):active {
  transform: translateY(1px) scale(0.985);
}

:where(
  .nnvs-button,
  .wp-element-button,
  .wp-block-button__link,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit
):disabled,
:where(.nnvs-button, .wp-element-button, .wp-block-button__link, .woocommerce .button).disabled,
:where(.nnvs-button, .wp-element-button, .wp-block-button__link, .woocommerce .button)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   4. Reusable surface, card, section and media components
   -------------------------------------------------------------------------- */

.nnvs-surface {
  background: var(--nnvs-color-surface);
  border: 1px solid var(--nnvs-color-border);
  border-radius: var(--nnvs-radius-lg);
}

.nnvs-card,
.nnvs-category,
body.home .woocommerce ul.products li.product {
  background: var(--nnvs-color-surface);
  border: 1px solid var(--nnvs-color-border);
  border-radius: var(--nnvs-radius-lg);
  box-shadow: var(--nnvs-shadow-soft);
  height: 100%;
  transition:
    border-color var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    box-shadow var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    transform var(--nnvs-motion-normal) var(--nnvs-ease-standard);
}

.nnvs-card {
  padding: var(--nnvs-space-md);
}

.nnvs-card--flat {
  box-shadow: none;
}

:where(.nnvs-card, .nnvs-category, body.home .woocommerce ul.products li.product):focus-within {
  border-color: var(--nnvs-color-secondary);
  box-shadow: var(--nnvs-shadow-lifted);
}

.nnvs-section {
  background: var(--nnvs-color-surface);
  padding-block: var(--nnvs-section-space);
  padding-inline: var(--nnvs-content-gutter);
}

.nnvs-section--cream {
  background: var(--nnvs-color-background);
}

.nnvs-section :where(h2) {
  font-size: var(--wp--preset--font-size--x-large, clamp(1.75rem, 1.51rem + 1.2vw, 2.5rem));
  letter-spacing: normal;
  margin-bottom: var(--nnvs-space-sm);
}

.nnvs-eyebrow,
.nnvs-section__eyebrow {
  color: var(--nnvs-color-primary);
  font-size: var(--wp--preset--font-size--x-small, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: none;
}

.nnvs-media-zoom,
.nnvs-media-zoom > a,
.nnvs-media-zoom > figure {
  border-radius: inherit;
  display: block;
  overflow: hidden;
}

.nnvs-media-zoom img {
  transition: transform var(--nnvs-motion-entrance) var(--nnvs-ease-entrance);
}

/* --------------------------------------------------------------------------
   5. Header, navigation and existing theme regions
   -------------------------------------------------------------------------- */

/* The template-part wrapper stays in normal flow, so sticky positioning does
   not need a synthetic spacer. WordPress keeps the desktop Admin Bar fixed,
   while its <=600px Admin Bar scrolls with the document. */
header.wp-block-template-part {
  --nnvs-sticky-top: var(--wp-admin--admin-bar--height, 0px);

  background: var(--nnvs-color-dark);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 28px rgba(9, 35, 23, 0.12);
  isolation: isolate;
  position: -webkit-sticky;
  position: sticky;
  top: var(--nnvs-sticky-top);
  z-index: 1000;
}

.nnvs-header {
  background: var(--nnvs-color-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--nnvs-color-surface);
}

.nnvs-header__inner {
  gap: clamp(0.25rem, 0.6vw, 0.75rem);
  min-height: var(--nnvs-header-height);
  padding-block: 0.625rem;
  padding-left: max(var(--nnvs-content-gutter), env(safe-area-inset-left));
  padding-right: max(var(--nnvs-content-gutter), env(safe-area-inset-right));
  position: relative;
  width: 100%;
}

/* On <=600px WordPress lets the Admin Bar leave the viewport while scrolling.
   A zero sticky offset matches Core and prevents a lingering 46px gap/jump. */
@media screen and (max-width: 600px) {
  header.wp-block-template-part {
    --nnvs-sticky-top: 0px;
  }
}

.nnvs-brand {
  flex: 1 1 auto;
  gap: var(--nnvs-space-2xs);
  margin: 0;
  min-width: 0;
  order: 1;
}

.nnvs-brand__logo {
  flex: 0 0 auto;
  margin: 0;
}

.nnvs-brand__official-fallback {
  display: block;
}

.nnvs-brand__logo :where(.custom-logo, img) {
  height: auto;
  max-height: 4rem;
  object-fit: contain;
  width: auto;
}

.nnvs-brand__title {
  margin: 0;
  min-width: 0;
}

.nnvs-brand__title a {
  color: var(--nnvs-color-surface);
  display: block;
  font-family: var(--nnvs-font-body);
  font-weight: 800;
  letter-spacing: normal;
  max-width: 9rem;
  line-height: 1.2;
  text-decoration: none;
  text-wrap: balance;
}

/* Site Title remains in the document as an accessible fallback, but becomes
   visually hidden when WordPress has a real Site Logo. */
.nnvs-brand:has(.custom-logo) .nnvs-brand__title {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* The bundled fallback uses the official stacked lockup: symbol above and
   compact wordmark below. The Site Title stays accessible but is not repeated. */
.nnvs-brand:has(.nnvs-brand__logo--official) .nnvs-brand__title {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.nnvs-brand__logo--official,
.nnvs-brand__logo--official .nnvs-brand__official-fallback {
  flex: 0 0 4rem;
  height: 4rem;
  width: 4rem;
}

.nnvs-brand__logo--official :where(img) {
  height: 4rem;
  max-height: none;
  object-fit: contain;
  width: 4rem;
}

@media screen and (max-width: 43.75rem) {
  .nnvs-brand:has(.custom-logo),
  .nnvs-brand:has(.nnvs-brand__logo--official) {
    flex: 0 0 3.625rem;
  }

  .nnvs-brand__logo--official,
  .nnvs-brand__logo--official .nnvs-brand__official-fallback,
  .nnvs-brand__logo--official :where(img) {
    height: 3.625rem;
    width: 3.625rem;
  }
}

.nnvs-primary-nav {
  flex: 0 0 auto;
  margin: 0;
  order: 3;
}

/* Keep the native Navigation overlay through tablet sizes. WordPress provides
   focus management, Escape handling and aria-expanded for these controls. */
.nnvs-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
  display: none !important;
}

.nnvs-primary-nav .wp-block-navigation__responsive-container-open {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--nnvs-radius-pill);
  color: var(--nnvs-color-surface);
  display: flex !important;
  height: 2.75rem;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  transition:
    background-color var(--nnvs-motion-fast) var(--nnvs-ease-standard),
    border-color var(--nnvs-motion-fast) var(--nnvs-ease-standard),
    transform var(--nnvs-motion-fast) var(--nnvs-ease-standard);
}

.nnvs-primary-nav .wp-block-navigation__responsive-container-close {
  align-items: center;
  border: 1px solid var(--nnvs-color-border);
  border-radius: var(--nnvs-radius-pill);
  color: var(--nnvs-color-text);
  display: flex;
  height: 2.75rem;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0;
}

.nnvs-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
  animation: nnvs-nav-overlay-in var(--nnvs-motion-fast) var(--nnvs-ease-standard) both;
  background: var(--nnvs-color-surface);
  color: var(--nnvs-color-text);
  overscroll-behavior: contain;
  overflow-y: auto;
  padding-bottom: max(var(--nnvs-space-md), env(safe-area-inset-bottom));
  padding-left: max(var(--nnvs-content-gutter), env(safe-area-inset-left));
  padding-right: max(var(--nnvs-content-gutter), env(safe-area-inset-right));
  padding-top: max(var(--nnvs-space-md), env(safe-area-inset-top));
}

.nnvs-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: stretch;
  padding-top: var(--nnvs-space-xl);
}

.nnvs-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.nnvs-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  border-bottom: 1px solid var(--nnvs-color-border);
  width: 100%;
}

.nnvs-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--nnvs-color-text);
  display: block;
  font-size: var(--wp--preset--font-size--medium, 1.0625rem);
  font-weight: 600;
  line-height: 1.4;
  padding: 0.875rem 0;
  text-decoration: none;
  width: 100%;
}

.nnvs-primary-nav .wp-block-navigation-submenu__toggle {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

@media (max-width: 1023px) {
  .nnvs-primary-nav .wp-block-navigation__responsive-container.is-menu-open .nnvs-mobile-submenu__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 2.75rem;
    justify-content: center;
    margin-inline-start: auto;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
  }

  .nnvs-primary-nav .wp-block-navigation__responsive-container.is-menu-open .nnvs-mobile-submenu__toggle svg {
    transition: transform 160ms ease;
  }

  .nnvs-primary-nav .wp-block-navigation__responsive-container.is-menu-open .nnvs-mobile-submenu__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .nnvs-primary-nav .wp-block-navigation__responsive-container.is-menu-open [data-nnvs-mobile-submenu] > .wp-block-navigation__submenu-container[hidden] {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nnvs-primary-nav .nnvs-mobile-submenu__toggle svg {
    transition: none;
  }
}

.nnvs-primary-nav :is(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle):focus-visible {
  outline: 3px solid var(--nnvs-color-accent);
  outline-offset: 3px;
}

.nnvs-header-actions {
  flex: 0 0 auto;
  gap: 0.25rem;
  margin: 0;
  order: 2;
}

/* Product Search uses the official WooCommerce variation of core/search.
   Its hidden post_type=product field keeps searches inside the catalog. */
.nnvs-product-search {
  flex: 0 0 2.75rem;
  margin: 0;
  min-width: 2.75rem;
  overflow: visible;
  position: static;
  width: 2.75rem;
}

.nnvs-product-search .wp-block-search__inside-wrapper {
  width: 2.75rem;
}

.nnvs-product-search .wp-block-search__button {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--nnvs-radius-pill);
  box-shadow: none;
  color: var(--nnvs-color-surface);
  display: flex;
  height: 2.75rem;
  justify-content: center;
  margin: 0;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  transform: none;
}

.nnvs-product-search .wp-block-search__button svg {
  height: 1.25rem;
  width: 1.25rem;
}

.nnvs-product-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
  background: var(--nnvs-color-surface);
  border: 1px solid var(--nnvs-color-border);
  border-radius: var(--nnvs-radius-pill);
  box-sizing: border-box;
  box-shadow: var(--nnvs-shadow-lifted);
  left: max(var(--nnvs-content-gutter), env(safe-area-inset-left));
  max-width: calc(100vw - var(--nnvs-content-gutter) - var(--nnvs-content-gutter));
  min-width: 0;
  padding: 0.3125rem;
  position: absolute;
  right: max(var(--nnvs-content-gutter), env(safe-area-inset-right));
  top: calc(100% + 0.5rem);
  width: auto !important;
  z-index: 4;
}

.nnvs-product-search .wp-block-search__input {
  background: var(--nnvs-color-surface);
  border: 0;
  border-radius: var(--nnvs-radius-pill);
  color: var(--nnvs-color-text);
  flex: 1 1 auto;
  min-height: 2.5rem;
  min-width: 0;
  padding: 0.625rem 0.875rem;
  width: 100%;
}

.nnvs-product-search .wp-block-search__input:focus {
  box-shadow: none;
  outline: none;
}

.nnvs-product-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
  background: var(--nnvs-color-primary);
  border-color: var(--nnvs-color-primary);
}

.nnvs-mini-cart,
.nnvs-header .wc-block-mini-cart {
  flex: 0 0 2.75rem;
  margin: 0;
}

.nnvs-header .wc-block-mini-cart__button {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--nnvs-radius-pill);
  color: var(--nnvs-color-surface);
  display: flex;
  height: 2.75rem;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.625rem;
  text-decoration: none;
  transition:
    background-color var(--nnvs-motion-fast) var(--nnvs-ease-standard),
    border-color var(--nnvs-motion-fast) var(--nnvs-ease-standard),
    transform var(--nnvs-motion-fast) var(--nnvs-ease-standard);
}

.nnvs-header .wc-block-mini-cart__amount {
  display: none;
}

.nnvs-header .wc-block-mini-cart__badge {
  background: var(--nnvs-color-accent);
  color: var(--nnvs-color-dark);
  font-size: 0.6875rem;
  font-weight: 800;
}

@keyframes nnvs-nav-overlay-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.nnvs-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(108, 145, 77, 0.16), transparent 32%),
    linear-gradient(135deg, var(--nnvs-color-mint), var(--nnvs-color-background) 72%);
  border-bottom: 1px solid var(--nnvs-color-border);
  padding-block: clamp(4rem, 2.8rem + 6vw, 8.5rem);
  padding-inline: var(--nnvs-content-gutter);
}

.nnvs-hero h1 {
  font-size: var(--wp--preset--font-size--display, clamp(2.75rem, 2.03rem + 3.6vw, 5rem));
  letter-spacing: normal;
  line-height: 1.12;
  max-width: 15ch;
}

.nnvs-hero p:not(.nnvs-eyebrow) {
  color: var(--nnvs-color-muted);
  line-height: 1.75;
  max-width: 42rem;
}

.nnvs-hero .wp-block-buttons {
  margin-top: var(--nnvs-space-md);
}

.nnvs-category-grid {
  gap: var(--nnvs-space-sm);
}

.nnvs-category {
  padding: var(--nnvs-space-sm);
}

.nnvs-category p {
  color: var(--nnvs-color-muted);
  font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.nnvs-footer {
  background: var(--nnvs-color-dark);
  color: #f2f5f0;
  padding-block: var(--nnvs-space-lg);
  padding-inline: var(--nnvs-content-gutter);
}

.nnvs-footer a {
  color: #f2f5f0;
}

.nnvs-body-main {
  padding-block: var(--nnvs-section-space);
  padding-inline: var(--nnvs-content-gutter);
}

.nnvs-body-main h1 {
  font-size: var(--wp--preset--font-size--xx-large, clamp(2.25rem, 1.85rem + 2vw, 3.5rem));
  letter-spacing: normal;
  line-height: 1.15;
}

.nnvs-body-main .wp-block-post-content {
  line-height: 1.8;
}

.nnvs-body-main .wp-block-post-content > :where(p, ul, ol) {
  max-width: var(--nnvs-reading-measure);
}

.nnvs-post-meta {
  color: var(--nnvs-color-muted);
  font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* --------------------------------------------------------------------------
   6. WordPress Query Loop and WooCommerce prototype grid
   Keeps the current homepage content and WooCommerce data source unchanged.
   -------------------------------------------------------------------------- */

.nnvs-section .wp-block-post-template {
  gap: var(--nnvs-space-md);
}

.nnvs-section .wp-block-post-template > li {
  min-width: 0;
}

.nnvs-section .wp-block-post-featured-image {
  border-radius: var(--nnvs-radius-md);
  overflow: hidden;
}

.nnvs-section .wp-block-post-featured-image img {
  transition: transform var(--nnvs-motion-entrance) var(--nnvs-ease-entrance);
}

body.home .woocommerce ul.products {
  display: grid;
  gap: var(--nnvs-space-sm);
  grid-template-columns: minmax(0, 1fr);
  margin: var(--nnvs-space-md) 0 0;
}

body.home .woocommerce ul.products::before,
body.home .woocommerce ul.products::after {
  display: none;
}

body.home .woocommerce ul.products li.product {
  float: none;
  margin: 0;
  min-width: 0;
  padding: var(--nnvs-space-sm);
  width: auto;
}

body.home .woocommerce ul.products li.product a {
  text-decoration: none;
}

body.home .woocommerce ul.products li.product img {
  aspect-ratio: 1 / 1;
  background: var(--nnvs-color-background);
  border-radius: var(--nnvs-radius-sm);
  height: auto;
  object-fit: contain;
  transition: transform var(--nnvs-motion-entrance) var(--nnvs-ease-entrance);
  width: 100%;
}

body.home .woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--nnvs-color-text);
  font-family: var(--nnvs-font-body);
  font-size: var(--wp--preset--font-size--medium, 1rem);
  font-weight: 700;
  line-height: 1.35;
}

body.home .woocommerce ul.products li.product .price {
  color: var(--nnvs-color-primary);
  font-weight: 700;
}

body.home .woocommerce ul.products li.product .button {
  margin-top: var(--nnvs-space-xs);
  width: 100%;
}

body.home .woocommerce span.onsale {
  background: var(--nnvs-color-accent);
  color: var(--nnvs-color-dark);
  font-size: var(--wp--preset--font-size--x-small, 0.75rem);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   7. Motion utilities
   Content stays visible without JavaScript. Apply these classes selectively.
   -------------------------------------------------------------------------- */

@keyframes nnvs-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes nnvs-translate-up {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nnvs-motion-fade-in {
  animation: nnvs-fade-in var(--nnvs-motion-entrance) var(--nnvs-ease-entrance) both;
}

.nnvs-motion-translate-up {
  animation: nnvs-translate-up var(--nnvs-motion-entrance) var(--nnvs-ease-entrance) both;
}

/* Hover motion only runs where a real hover pointer exists. */
@media (hover: hover) and (pointer: fine) {
  .nnvs-category-marquee.is-ready:hover .nnvs-category-marquee__track {
    animation-play-state: paused;
  }

  :where(
    .nnvs-button,
    .wp-element-button,
    .wp-block-button__link,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit
  ):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover {
    background: var(--nnvs-color-dark);
    box-shadow: 0 8px 22px rgba(21, 63, 44, 0.18);
    color: var(--nnvs-color-surface);
    transform: translateY(-2px);
  }

  :where(.nnvs-button--secondary, .wp-block-button.is-style-outline > .wp-block-button__link):hover {
    border-color: var(--nnvs-color-primary);
  }

  :where(.nnvs-card, .nnvs-category, body.home .woocommerce ul.products li.product):hover {
    border-color: rgba(108, 145, 77, 0.55);
    box-shadow: var(--nnvs-shadow-lifted);
    transform: translateY(-4px);
  }

  .nnvs-media-zoom:hover img,
  .nnvs-section .wp-block-post-featured-image:hover img,
  body.home .woocommerce ul.products li.product:hover img {
    transform: scale(1.035);
  }

  .nnvs-primary-nav .wp-block-navigation-item__content:hover::after {
    transform: scaleX(1);
  }

  .nnvs-primary-nav .wp-block-navigation__responsive-container-open:hover,
  .nnvs-header .wc-block-mini-cart__button:hover,
  .nnvs-product-search .wp-block-search__button:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow: none;
    color: var(--nnvs-color-surface);
    transform: translateY(-1px);
  }
}

/* Phase 0.6.2: progressive-enhancement category strip. */
.nnvs-category-marquee {
  --nnvs-marquee-gap: 3rem;
  position: relative;
  z-index: 2;
  margin: 0;
  padding: clamp(1.15rem, 2.5vw, 1.75rem) 0;
  color: #fff8e8;
  background: #153f2c;
}

.nnvs-category-marquee__inner {
  position: relative;
  display: block;
  width: 100%;
  max-width: none !important;
  margin-inline: 0 !important;
}

.nnvs-category-marquee__viewport {
  width: 100%;
  min-width: 0;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.nnvs-category-marquee__track,
.nnvs-category-marquee__set {
  display: flex;
  align-items: center;
}

.nnvs-category-marquee__track {
  width: 100%;
}

.nnvs-category-marquee__set {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  width: 100%;
}

.nnvs-category-marquee__set--duplicate {
  display: none;
}

.nnvs-category-marquee :is(a, .nnvs-category-marquee__set--duplicate > span:not(.nnvs-category-marquee__leaf)) {
  color: inherit;
  font-family: var(--wp--preset--font-family--fraunces, Fraunces, Georgia, serif);
  font-size: clamp(1.1rem, 1rem + 0.8vw, 1.55rem);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.nnvs-category-marquee a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  border-radius: 0.35rem;
}

.nnvs-category-marquee a:focus-visible,
.nnvs-category-marquee__toggle:focus-visible {
  outline: 3px solid #f3c869;
  outline-offset: 4px;
}

.nnvs-category-marquee__leaf {
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  color: #f3c869;
}

.nnvs-category-marquee__leaf svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.nnvs-category-marquee__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.nnvs-category-marquee__toggle:focus-visible {
  z-index: 3;
  right: 1rem;
  bottom: 0.35rem;
  width: auto;
  height: auto;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.55rem 0.8rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  border: 2px solid #153f2c;
  border-radius: 999px;
  color: #153f2c;
  background: #f3c869;
  font: 700 0.78rem/1.2 var(--wp--preset--font-family--be-vietnam-pro, sans-serif);
  white-space: normal;
}

.nnvs-category-marquee.is-ready .nnvs-category-marquee__viewport {
  overflow: hidden;
  padding-inline: 0;
}

.nnvs-category-marquee.is-ready .nnvs-category-marquee__track {
  width: max-content;
  gap: var(--nnvs-marquee-gap);
  animation: nnvs-category-scroll 44s linear infinite;
  will-change: transform;
}

.nnvs-category-marquee.is-ready .nnvs-category-marquee__set {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  gap: 1.25rem;
}

.nnvs-category-marquee.is-ready .nnvs-category-marquee__set--duplicate {
  display: flex;
}

.nnvs-category-marquee.is-paused .nnvs-category-marquee__track,
.nnvs-category-marquee.is-ready .nnvs-category-marquee__viewport:focus-within .nnvs-category-marquee__track,
.nnvs-category-marquee.is-ready:hover .nnvs-category-marquee__track {
  animation-play-state: paused;
}

@keyframes nnvs-category-scroll {
  to {
    transform: translateX(calc(-50% - (var(--nnvs-marquee-gap) / 2)));
  }
}

/* --------------------------------------------------------------------------
   8. Mobile-first responsive enhancements
   -------------------------------------------------------------------------- */

@media (min-width: 30rem) {
  body.home .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .nnvs-category-grid {
    gap: var(--nnvs-space-md);
  }

  .nnvs-category {
    padding: var(--nnvs-space-md);
  }

  body.home .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .nnvs-header__inner {
    gap: clamp(0.75rem, 1.4vw, 1.5rem);
    padding-block: 0.75rem;
  }

  .nnvs-brand {
    flex: 0 0 4.25rem;
  }

  .nnvs-brand__title a {
    max-width: 12rem;
  }

  .nnvs-primary-nav {
    flex: 1 1 auto;
    order: 2;
  }

  .nnvs-primary-nav .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  .nnvs-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block !important;
    position: static;
    width: 100%;
  }

  .nnvs-primary-nav .wp-block-navigation__responsive-container-content {
    width: 100%;
  }

  .nnvs-primary-nav .wp-block-navigation__container {
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(0.5rem, 1vw, 1.125rem);
    justify-content: center;
    width: 100%;
  }

  .nnvs-primary-nav .wp-block-navigation-item__content {
    color: var(--nnvs-color-surface);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.75rem 0;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
  }

  .nnvs-primary-nav .wp-block-navigation-item__content::after {
    background: var(--nnvs-color-accent);
    bottom: 0.35rem;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--nnvs-motion-fast) var(--nnvs-ease-standard);
  }

  .nnvs-primary-nav .current-menu-item > .wp-block-navigation-item__content::after,
  .nnvs-primary-nav .current-menu-ancestor > .wp-block-navigation-item__content::after {
    transform: scaleX(1);
  }

  .nnvs-primary-nav .wp-block-navigation__submenu-container {
    min-width: 18rem !important;
    padding: 0.5rem !important;
    border: 1px solid var(--nnvs-color-border) !important;
    border-radius: 1rem;
    background: #fffdf8 !important;
    box-shadow: var(--nnvs-shadow-lifted);
  }

  .nnvs-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
    width: 100%;
  }

  .nnvs-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border-radius: 0.65rem;
    color: var(--nnvs-color-dark);
    line-height: 1.35;
    white-space: normal;
  }

  .nnvs-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
    display: none;
  }

  .nnvs-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
    color: #fff;
    background: var(--nnvs-color-primary);
  }

  .nnvs-header-actions {
    order: 3;
    position: relative;
  }

  .nnvs-product-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
    left: auto;
    max-width: calc(100vw - var(--nnvs-content-gutter) - var(--nnvs-content-gutter));
    min-width: 20rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.75rem);
    width: clamp(20rem, 30vw, 24rem) !important;
  }

  body.home .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 90rem) {
  :root {
    --nnvs-content-gutter: 2.5rem;
  }
}

/* Respect the operating-system motion preference across theme and plugin UI. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}

/* Reveal enhancement is opt-in: without JavaScript every item remains visible. */
.nnvs-home :is(
  .nnvs-reveal-grid > *,
  .nnvs-product-collection.nnvs-reveal-grid .wc-block-product-template > li,
  .nnvs-reveal-pair > *
) {
  animation: none !important;
}

.nnvs-motion-ready .nnvs-home :is(
  .nnvs-reveal-grid > *,
  .nnvs-product-collection.nnvs-reveal-grid .wc-block-product-template > li,
  .nnvs-reveal-pair > *
) {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 700ms var(--nnvs-ease-entrance),
    transform 700ms var(--nnvs-ease-entrance);
  transition-delay: calc(var(--nnvs-reveal-index, 0) * 80ms);
}

.nnvs-motion-ready .nnvs-home :is(
  .nnvs-reveal-grid > *,
  .nnvs-product-collection.nnvs-reveal-grid .wc-block-product-template > li,
  .nnvs-reveal-pair > *
).is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .nnvs-motion-ready .nnvs-home :is(
    .nnvs-reveal-grid > *,
    .nnvs-product-collection.nnvs-reveal-grid .wc-block-product-template > li,
    .nnvs-reveal-pair > *
  ) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    box-shadow: none;
  }

  :where(.nnvs-card, .nnvs-category, body.home .woocommerce ul.products li.product) {
    border: 1px solid CanvasText;
  }
}

/* --------------------------------------------------------------------------
   9. Sales-primary Hybrid homepage
   Commerce leads the page; brand and editorial content reinforce trust. The
   layout is mobile-first and all primary content remains visible without JS.
   -------------------------------------------------------------------------- */

.nnvs-home {
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

.nnvs-home > * {
  margin-block-start: 0;
}

.nnvs-home :where(h1, h2, h3, p, figure) {
  margin-top: 0;
}

.nnvs-home-section {
  background: var(--nnvs-color-surface);
  padding: 3rem var(--nnvs-content-gutter);
}

.nnvs-home-section--cream {
  background: var(--nnvs-color-background);
}

.nnvs-home-section :where(h2),
.nnvs-consult-section h2 {
  font-size: clamp(1.75rem, 1.44rem + 1.55vw, 2.75rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 0.875rem;
}

.nnvs-section-heading {
  align-items: flex-end;
  gap: 1rem 2rem;
  margin-bottom: 1.75rem;
}

.nnvs-section-heading > :first-child {
  flex: 1 1 32rem;
  max-width: 42rem;
}

.nnvs-section-heading p:not(.nnvs-section__eyebrow),
.nnvs-story-content > p,
.nnvs-consult-panel p {
  color: var(--nnvs-color-muted);
  font-size: var(--wp--preset--font-size--medium, 1.0625rem);
  line-height: 1.7;
  margin-bottom: 0;
}

.nnvs-section__eyebrow,
.nnvs-eyebrow {
  align-items: center;
  color: var(--nnvs-color-primary);
  display: flex;
  font-size: var(--wp--preset--font-size--x-small, 0.75rem);
  font-weight: 700;
  gap: 0.625rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.nnvs-section__eyebrow::before,
.nnvs-eyebrow::before {
  background: var(--nnvs-color-accent);
  content: "";
  flex: 0 0 1.5rem;
  height: 2px;
}

.nnvs-section-link {
  flex: 0 0 auto;
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  font-weight: 700;
  margin: 0;
}

.nnvs-section-link a {
  text-decoration: none;
}

.nnvs-home-hero {
  background: var(--nnvs-color-background);
  padding: 2.75rem var(--nnvs-content-gutter) 3rem;
}

.nnvs-home-hero__grid {
  display: grid;
  gap: 2rem;
}

.nnvs-home-hero__content {
  align-self: center;
  max-width: 38rem;
}

.nnvs-home-hero h1 {
  font-size: clamp(2.35rem, 1.82rem + 2.65vw, 4.5rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: 1.125rem;
  max-width: 13ch;
  padding-inline-start: 0.04em;
}

.nnvs-home-hero__lead {
  color: var(--nnvs-color-muted);
  font-size: var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem));
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 38rem;
}

.nnvs-home-hero__actions {
  gap: 0.625rem;
  margin-top: 1.5rem;
}

.nnvs-home-hero__actions .wp-block-button {
  flex: 1 1 100%;
}

.nnvs-home-hero__actions .wp-block-button__link {
  width: 100%;
}

.nnvs-cta-primary .wp-block-button__link::after {
  content: "→";
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--nnvs-motion-fast) var(--nnvs-ease-standard);
}

.nnvs-home-media {
  background: var(--nnvs-color-mint);
  border-radius: 1.25rem;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.nnvs-home-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform var(--nnvs-motion-entrance) var(--nnvs-ease-entrance);
  width: 100%;
}

.nnvs-home-media--hero {
  aspect-ratio: 4 / 3;
  border-radius: 2.5rem 0.875rem 2.5rem 0.875rem;
  box-shadow: 0 24px 54px rgba(21, 63, 44, 0.14);
}

@keyframes nnvs-hero-image-in {
  from {
    opacity: 0.01;
    transform: translateY(0.5rem) scale(0.988);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .nnvs-home-media--hero {
    animation: nnvs-hero-image-in var(--nnvs-motion-entrance) var(--nnvs-ease-entrance) both;
  }
}

.nnvs-home-media--need {
  aspect-ratio: 3 / 2;
  border-radius: 0;
  height: 100%;
  min-width: 0;
  width: 100%;
}

.nnvs-home-media--story {
  aspect-ratio: 4 / 3;
  border-radius: 1.125rem 3rem 1.125rem 3rem;
}

.nnvs-trust-strip {
  background: var(--nnvs-color-dark);
  color: var(--nnvs-color-surface);
  padding-inline: var(--nnvs-content-gutter);
}

.nnvs-trust-strip__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.nnvs-trust-item {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  gap: 0.875rem;
  min-height: 4.5rem;
  padding: 0.875rem 0;
}

.nnvs-trust-item:last-child {
  border-bottom: 0;
}

.nnvs-trust-item > * {
  margin: 0;
}

.nnvs-trust-item__number {
  color: var(--nnvs-color-accent);
  flex: 0 0 auto;
  font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.nnvs-trust-item p {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  line-height: 1.5;
  margin: 0;
}

.nnvs-trust-item strong {
  color: var(--nnvs-color-surface);
  display: block;
  font-size: 0.9375rem;
  margin-bottom: 0.125rem;
}

.nnvs-needs-grid {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: minmax(0, 1fr);
}

.nnvs-need-card {
  background: var(--nnvs-color-surface);
  border: 1px solid var(--nnvs-color-border);
  border-radius: var(--nnvs-radius-lg);
  box-shadow: var(--nnvs-shadow-soft);
  display: grid;
  grid-template-columns: minmax(5.75rem, 34%) minmax(0, 1fr);
  min-height: 8.75rem;
  overflow: hidden;
  transition:
    border-color var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    box-shadow var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    transform var(--nnvs-motion-normal) var(--nnvs-ease-standard);
}

.nnvs-need-card__content {
  align-self: center;
  min-width: 0;
  padding: 0.875rem;
}

.nnvs-card-index {
  color: var(--nnvs-color-accent);
  font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.375rem;
}

.nnvs-need-card h3 {
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 0.375rem;
}

.nnvs-need-card h3 a {
  color: var(--nnvs-color-text);
  text-decoration: none;
}

.nnvs-need-card__content > p:last-child {
  color: var(--nnvs-color-muted);
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  line-height: 1.55;
  margin-bottom: 0;
}

.nnvs-categories-section {
  background: var(--nnvs-color-surface);
}

.nnvs-product-categories {
  margin-block-start: 0;
}

.nnvs-product-categories .wc-block-product-categories-list {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nnvs-product-categories .wc-block-product-categories-list-item {
  background: var(--nnvs-color-background);
  border: 1px solid var(--nnvs-color-border);
  border-radius: var(--nnvs-radius-lg);
  box-shadow: 0 8px 24px rgba(21, 63, 44, 0.06);
  min-width: 0;
  overflow: hidden;
  position: relative;
  transition:
    border-color var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    box-shadow var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    transform var(--nnvs-motion-normal) var(--nnvs-ease-standard);
}

.nnvs-product-categories .wc-block-product-categories-list-item > a {
  align-items: center;
  color: var(--nnvs-color-text);
  display: grid;
  font-size: 1rem;
  font-weight: 700;
  gap: 0.875rem;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  min-height: 5.75rem;
  padding-right: 0.875rem;
  text-decoration: none;
}

.nnvs-product-categories .wc-block-product-categories-list-item__image {
  align-self: stretch;
  aspect-ratio: 1;
  background: var(--nnvs-color-mint);
  display: block;
  overflow: hidden;
}

.nnvs-product-categories .wc-block-product-categories-list-item__image img {
  height: 100%;
  object-fit: cover;
  transition: transform var(--nnvs-motion-entrance) var(--nnvs-ease-entrance);
  width: 100%;
}

.nnvs-product-categories .wc-block-product-categories-list-item-count {
  align-items: center;
  background: var(--nnvs-color-surface);
  border: 1px solid var(--nnvs-color-border);
  border-radius: var(--nnvs-radius-pill);
  color: var(--nnvs-color-muted);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  justify-content: center;
  min-height: 1.5rem;
  min-width: 1.5rem;
  padding-inline: 0.375rem;
  position: absolute;
  right: 0.625rem;
  top: 0.625rem;
}

.nnvs-category-empty-state {
  margin-inline: auto;
}

.nnvs-products-section {
  background: var(--nnvs-color-background);
}

.nnvs-product-collection {
  margin-block-start: 0;
}

.nnvs-product-collection .wc-block-product-template {
  display: grid !important;
  gap: 0.875rem !important;
  grid-auto-rows: 1fr;
  grid-template-columns: minmax(0, 1fr) !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nnvs-product-collection .wc-block-product-template > li {
  background: var(--nnvs-color-surface);
  border: 1px solid var(--nnvs-color-border);
  border-radius: var(--nnvs-radius-md);
  box-shadow: 0 8px 24px rgba(21, 63, 44, 0.07);
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  min-width: 0;
  overflow: hidden;
  padding: 0.5rem 0.5rem 0.75rem;
  transition:
    border-color var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    box-shadow var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    transform var(--nnvs-motion-normal) var(--nnvs-ease-standard);
  width: auto !important;
}

.nnvs-product-collection .wc-block-components-product-image,
.nnvs-product-collection .wc-block-components-product-image > a {
  aspect-ratio: 1;
  background: var(--nnvs-color-background);
  border-radius: 0.75rem;
  display: block;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.nnvs-product-collection .wc-block-components-product-image img {
  height: 100%;
  object-fit: contain;
  transition: transform var(--nnvs-motion-entrance) var(--nnvs-ease-entrance);
  width: 100%;
}

.nnvs-product-collection .wp-block-post-terms {
  color: var(--nnvs-color-muted);
  font-size: 0.75rem !important;
  line-height: 1.4;
  margin: 0.125rem 0 0.375rem;
  text-transform: uppercase;
}

.nnvs-product-collection .wp-block-post-terms a {
  color: inherit;
  text-decoration: none;
}

.nnvs-product-collection .wp-block-post-title {
  font-family: var(--nnvs-font-body);
  font-size: 0.9375rem !important;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.625rem;
}

.nnvs-product-collection .wp-block-post-title a {
  color: var(--nnvs-color-text);
  text-decoration: none;
}

.nnvs-product-collection .wc-block-components-product-price {
  color: var(--nnvs-color-primary);
  font-size: 0.875rem !important;
  font-weight: 700;
  margin: auto 0 0.625rem;
}

.nnvs-product-collection .wp-block-button,
.nnvs-product-collection .wc-block-components-product-button {
  margin-top: auto;
  width: 100%;
}

.nnvs-product-collection .wp-block-button__link,
.nnvs-product-collection .wc-block-components-product-button__button {
  font-size: 1rem;
  line-height: 1.3;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  width: 100%;
}

.nnvs-product-collection .wc-block-components-product-sale-badge {
  background: var(--nnvs-color-accent);
  border: 0;
  color: var(--nnvs-color-dark);
  font-size: 0.75rem;
  font-weight: 700;
}

.nnvs-empty-state {
  background: var(--nnvs-color-background);
  border: 1px dashed var(--nnvs-color-border);
  border-radius: var(--nnvs-radius-lg);
  max-width: 42rem;
  padding: 1.5rem;
  text-align: center;
}

.nnvs-empty-state :last-child {
  margin-bottom: 0;
}

.nnvs-story-section {
  background: var(--nnvs-color-mint);
}

.nnvs-story-grid {
  display: grid;
  gap: 2rem;
}

.nnvs-story-content {
  align-self: center;
  max-width: 38rem;
}

.nnvs-story-content .wp-block-separator {
  border-color: var(--nnvs-color-border);
  margin-block: 1.5rem;
}

.nnvs-story-content h3 {
  margin-bottom: 0.625rem;
}

.nnvs-story-content .nnvs-section-link {
  margin-top: 1.25rem;
}

.nnvs-knowledge-query .wp-block-post-template {
  display: grid !important;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nnvs-post-card {
  background: var(--nnvs-color-surface);
  border: 1px solid var(--nnvs-color-border);
  border-radius: var(--nnvs-radius-lg);
  box-shadow: 0 8px 24px rgba(21, 63, 44, 0.06);
  height: 100%;
  overflow: hidden;
  transition:
    border-color var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    box-shadow var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    transform var(--nnvs-motion-normal) var(--nnvs-ease-standard);
}

.nnvs-post-card .wp-block-post-featured-image {
  aspect-ratio: 3 / 2;
  border-radius: 0;
  margin: 0;
  overflow: hidden;
}

.nnvs-post-card .wp-block-post-featured-image a,
.nnvs-post-card .wp-block-post-featured-image img {
  display: block;
  height: 100%;
  width: 100%;
}

.nnvs-post-card .wp-block-post-featured-image img {
  object-fit: cover;
}

.nnvs-post-card:not(:has(.wp-block-post-featured-image))::before {
  align-items: center;
  aspect-ratio: 3 / 2;
  background: var(--nnvs-color-mint);
  color: var(--nnvs-color-muted);
  content: "Chưa có ảnh đại diện";
  display: grid;
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  justify-items: center;
}

.nnvs-post-card__content {
  padding: 1rem;
}

.nnvs-post-card__content .wp-block-post-terms,
.nnvs-post-card__content .wp-block-post-date {
  color: var(--nnvs-color-muted);
  font-size: 0.8125rem !important;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.nnvs-post-card__content .wp-block-post-terms a {
  color: var(--nnvs-color-primary);
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.nnvs-post-card__content .wp-block-post-title {
  font-family: var(--nnvs-font-body);
  font-size: 1.0625rem !important;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

.nnvs-post-card__content .wp-block-post-title a {
  color: var(--nnvs-color-text);
  text-decoration: none;
}

:is(
  .nnvs-product-categories .wc-block-product-categories-list-item,
  .nnvs-need-card,
  .nnvs-product-collection .wc-block-product-template > li,
  .nnvs-post-card
):focus-within {
  border-color: var(--nnvs-color-secondary);
  box-shadow: var(--nnvs-shadow-lifted);
  transform: translateY(-2px);
}

.nnvs-consult-section {
  background: var(--nnvs-color-surface);
  padding: 3rem var(--nnvs-content-gutter);
}

.nnvs-consult-panel {
  align-items: center;
  background: var(--nnvs-color-primary);
  border-radius: 2rem 0.875rem 2rem 0.875rem;
  color: var(--nnvs-color-surface);
  gap: 1.5rem 2rem;
  padding: 2rem 1.25rem;
}

.nnvs-consult-panel > :first-child {
  flex: 1 1 34rem;
  max-width: 42rem;
}

.nnvs-consult-panel h2 {
  color: var(--nnvs-color-surface);
}

.nnvs-consult-panel p {
  color: rgba(255, 255, 255, 0.74);
}

.nnvs-consult-panel .nnvs-section__eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.nnvs-consult-panel .wp-block-buttons,
.nnvs-consult-panel .wp-block-button,
.nnvs-consult-panel .wp-block-button__link {
  width: 100%;
}

.nnvs-footer {
  background: var(--nnvs-color-dark);
  color: #f2f5f0;
  padding: 2.75rem var(--nnvs-content-gutter) 2rem;
}

.nnvs-footer__grid {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}

.nnvs-footer__brand,
.nnvs-footer__column {
  margin: 0;
}

.nnvs-footer__logo {
  margin: 0 0 1rem;
  width: fit-content;
}

.nnvs-footer__logo img {
  display: block;
  height: 6rem;
  object-fit: contain;
  object-position: left center;
  width: auto !important;
}

.nnvs-footer h3 {
  color: var(--nnvs-color-surface);
  font-family: var(--nnvs-font-body);
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 1rem;
}

.nnvs-footer p {
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  line-height: 1.65;
  margin-bottom: 0.625rem;
}

.nnvs-footer a {
  color: inherit;
  text-decoration-color: transparent;
}

@media (min-width: 23.4375rem) {
  .nnvs-product-categories .wc-block-product-categories-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nnvs-product-categories .wc-block-product-categories-list-item > a {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .nnvs-product-categories .wc-block-product-categories-list-item__image {
    aspect-ratio: 3 / 2;
    height: auto;
    width: 100%;
  }

  .nnvs-product-categories .wc-block-product-categories-list-item > a > span:last-child:not(.wc-block-product-categories-list-item__image) {
    display: block;
    line-height: 1.4;
    padding: 0.75rem;
  }

  .nnvs-product-collection .wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 30rem) {
  .nnvs-home-hero__actions .wp-block-button {
    flex: 0 1 auto;
  }

  .nnvs-home-hero__actions .wp-block-button__link {
    width: auto;
  }

  .nnvs-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nnvs-footer__brand,
  .nnvs-footer__business {
    grid-column: 1 / -1;
  }
}

@media (min-width: 48rem) {
  .nnvs-home-section,
  .nnvs-consult-section {
    padding-block: 4.5rem;
  }

  .nnvs-home-hero {
    padding-block: 4rem;
  }

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

  .nnvs-trust-item {
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    min-height: 5.5rem;
    padding-inline: 1.25rem;
  }

  .nnvs-trust-item:first-child {
    padding-left: 0;
  }

  .nnvs-trust-item:last-child {
    border-right: 0;
    padding-right: 0;
  }

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

  .nnvs-product-categories .wc-block-product-categories-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nnvs-need-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .nnvs-home-media--need {
    aspect-ratio: 3 / 2;
    height: auto;
  }

  .nnvs-need-card__content {
    align-self: stretch;
    padding: 1.25rem;
  }

  .nnvs-need-card h3 {
    font-size: 1.0625rem;
  }

  .nnvs-product-collection .wc-block-product-template {
    gap: 1rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .nnvs-product-collection .wc-block-product-template > li {
    padding: 0.625rem 0.625rem 1rem;
  }

  .nnvs-product-collection .wp-block-post-title {
    font-size: 0.9375rem !important;
  }

  .nnvs-knowledge-query .wp-block-post-template {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .nnvs-consult-panel {
    padding: 2.75rem 3rem;
  }

  .nnvs-consult-panel .wp-block-buttons,
  .nnvs-consult-panel .wp-block-button,
  .nnvs-consult-panel .wp-block-button__link {
    width: auto;
  }
}

@media (min-width: 56rem) {
  .nnvs-home-hero__grid {
    align-items: center;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(3rem, 5vw, 5rem);
  }

  .nnvs-home-media--hero {
    aspect-ratio: 4 / 5;
    max-height: 35rem;
  }

  .nnvs-story-grid {
    align-items: center;
    gap: clamp(3rem, 5vw, 5rem);
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  }
}

@media (min-width: 64rem) {
  .nnvs-home-section,
  .nnvs-consult-section {
    padding-block: 5.5rem;
  }

  .nnvs-home-hero {
    padding-block: 4.75rem 5.25rem;
  }

  .nnvs-product-collection .wc-block-product-template {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .nnvs-product-categories .wc-block-product-categories-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nnvs-product-collection .wp-block-post-title {
    font-size: 1rem !important;
  }

  .nnvs-footer {
    padding-block: 3.5rem 2.5rem;
  }

  .nnvs-footer__grid {
    grid-template-columns: 1.35fr 0.8fr 0.8fr 1.05fr;
  }

  .nnvs-footer__brand,
  .nnvs-footer__business {
    grid-column: auto;
  }
}

@media (hover: hover) and (pointer: fine) {
  .nnvs-cta-primary .wp-block-button__link:hover::after {
    transform: translateX(0.2rem);
  }

  .nnvs-product-categories .wc-block-product-categories-list-item:hover,
  .nnvs-need-card:hover,
  .nnvs-product-collection .wc-block-product-template > li:hover,
  .nnvs-post-card:hover {
    border-color: rgba(108, 145, 77, 0.55);
    box-shadow: var(--nnvs-shadow-lifted);
    transform: translateY(-4px);
  }

  .nnvs-product-categories .wc-block-product-categories-list-item:hover .wc-block-product-categories-list-item__image img,
  .nnvs-need-card:hover .nnvs-home-media img,
  .nnvs-home-media--story:hover img,
  .nnvs-product-collection .wc-block-product-template > li:hover .wc-block-components-product-image img,
  .nnvs-post-card:hover .wp-block-post-featured-image img {
    transform: scale(1.03);
  }

  .nnvs-footer a:hover,
  .nnvs-section-link a:hover {
    text-decoration-color: currentColor;
  }
}

@keyframes nnvs-scroll-reveal {
  from {
    opacity: 0.01;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Progressive CSS scroll reveal for secondary content only. Browsers without
   scroll-driven animation support render every item normally. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(
      .nnvs-product-categories.nnvs-reveal-grid .wc-block-product-categories-list > li,
      .nnvs-product-collection.nnvs-reveal-grid .wc-block-product-template > li,
      .nnvs-trust-strip__grid.nnvs-reveal-grid > .nnvs-trust-item,
      .nnvs-needs-grid.nnvs-reveal-grid > .nnvs-need-card,
      .nnvs-knowledge-query.nnvs-reveal-grid .wp-block-post-template > li,
      .nnvs-reveal-pair > *
    ) {
      animation: nnvs-scroll-reveal 1ms linear both;
      animation-range: entry 0% cover 24%;
      animation-timeline: view();
    }

    :is(
      .nnvs-product-categories.nnvs-reveal-grid .wc-block-product-categories-list > li,
      .nnvs-product-collection.nnvs-reveal-grid .wc-block-product-template > li,
      .nnvs-trust-strip__grid.nnvs-reveal-grid > .nnvs-trust-item,
      .nnvs-needs-grid.nnvs-reveal-grid > .nnvs-need-card,
      .nnvs-knowledge-query.nnvs-reveal-grid .wp-block-post-template > li,
      .nnvs-reveal-pair > *
    ):nth-child(2n) {
      animation-range: entry 4% cover 28%;
    }

    :is(
      .nnvs-product-categories.nnvs-reveal-grid .wc-block-product-categories-list > li,
      .nnvs-product-collection.nnvs-reveal-grid .wc-block-product-template > li,
      .nnvs-trust-strip__grid.nnvs-reveal-grid > .nnvs-trust-item,
      .nnvs-needs-grid.nnvs-reveal-grid > .nnvs-need-card,
      .nnvs-knowledge-query.nnvs-reveal-grid .wp-block-post-template > li
    ):nth-child(3n) {
      animation-range: entry 8% cover 32%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .nnvs-home .nnvs-home-media--hero,
  .nnvs-home .nnvs-motion-fade-in,
  .nnvs-home .nnvs-motion-translate-up,
  .nnvs-home .nnvs-reveal-grid *,
  .nnvs-home .nnvs-reveal-pair > * {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .nnvs-need-card,
  .nnvs-product-collection .wc-block-product-template > li,
  .nnvs-post-card,
  .nnvs-empty-state {
    border: 1px solid CanvasText;
  }
}

/* --------------------------------------------------------------------------
   12. Homepage redesign 0.6.0
   Scoped overrides preserve WooCommerce behavior while matching the approved
   floating-header, landscape-hero and editorial-card direction.
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

.nnvs-home :is(h1, h2, h3),
.nnvs-footer h3 {
  font-family: var(--nnvs-font-display);
  font-optical-sizing: auto;
}

header.wp-block-template-part {
  position: relative;
  top: auto;
  z-index: 1001;
  isolation: auto;
  background: transparent;
  box-shadow: none;
}

.wp-site-blocks > header.wp-block-template-part + main.nnvs-home {
  margin-block-start: 0;
}

body:not(.wp-admin) .nnvs-header {
  position: fixed;
  z-index: 1000;
  top: 1rem;
  right: max(1rem, env(safe-area-inset-right));
  left: max(1rem, env(safe-area-inset-left));
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.admin-bar:not(.wp-admin) .nnvs-header {
  top: calc(1rem + var(--wp-admin--admin-bar--height, 32px));
}

body:not(.home):not(.front-page):not(.wp-admin) .nnvs-header {
  position: sticky;
  top: 1rem;
  right: auto;
  left: auto;
  width: min(calc(100% - 2rem), 72rem);
  margin: 1rem auto;
}

body.admin-bar:not(.home):not(.front-page):not(.wp-admin) .nnvs-header {
  top: calc(1rem + var(--wp-admin--admin-bar--height, 32px));
}

.nnvs-header .nnvs-header__inner {
  display: flex;
  width: min(100%, 72rem);
  min-height: 4.25rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-inline: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(249, 247, 239, 0.22);
  border-radius: var(--nnvs-radius-pill);
  background: rgba(21, 63, 44, 0.82);
  box-shadow: 0 18px 48px rgba(8, 31, 20, 0.24);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.nnvs-header :is(.wp-block-navigation-item__content, .wp-block-site-title a) {
  color: #fff8e8;
  text-decoration: none;
}

.nnvs-header .wp-block-navigation-item__content {
  position: relative;
}

.nnvs-header .wp-block-navigation-item__content::after {
  position: absolute;
  right: 0;
  bottom: -0.35rem;
  left: 0;
  height: 2px;
  border-radius: var(--nnvs-radius-pill);
  background: var(--nnvs-color-accent);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--nnvs-motion-fast) var(--nnvs-ease-standard);
}

.nnvs-header .wp-block-navigation-item__content:hover,
.nnvs-header .wp-block-navigation-item__content:focus-visible {
  color: #f3c869;
}

.nnvs-header .wp-block-navigation-item__content:hover::after,
.nnvs-header .wp-block-navigation-item__content:focus-visible::after {
  transform: scaleX(1);
}

.nnvs-header :is(
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close,
  .wp-block-search__button,
  .wc-block-mini-cart__button,
  .wc-block-customer-account__account-icon
) {
  color: #fff8e8;
}

.nnvs-header :is(a, button):focus-visible {
  outline: 3px solid #f3c869;
  outline-offset: 3px;
}

.nnvs-home-hero {
  position: relative;
  display: grid;
  min-height: min(56rem, 100svh);
  overflow: clip;
  isolation: isolate;
  color: #fff8e8;
  background: var(--nnvs-color-dark);
}

.nnvs-home-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 35, 23, 0.86) 0%, rgba(10, 35, 23, 0.65) 48%, rgba(10, 35, 23, 0.28) 100%),
    linear-gradient(0deg, rgba(8, 27, 18, 0.58), transparent 55%);
  content: "";
}

.nnvs-home-hero__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
}

.nnvs-home-hero__media img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
  transform: scale(1.025);
  animation: nnvs-ken-burns 14s ease-in-out infinite alternate;
}

.nnvs-home-hero__inner {
  display: flex;
  align-items: center;
  width: min(calc(100% - 2rem), 72rem);
  min-height: inherit;
  padding-block: clamp(8rem, 16vh, 11rem) clamp(5rem, 10vh, 8rem);
}

.nnvs-home-hero__content {
  max-width: 45rem;
  margin: 0;
}

.nnvs-home-hero .nnvs-eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 1.25rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(255, 248, 232, 0.34);
  border-radius: var(--nnvs-radius-pill);
  color: #fff8e8;
  background: rgba(255, 248, 232, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.nnvs-home-hero h1 {
  max-width: 12ch;
  margin: 0;
  color: #fff8e8;
  font-size: clamp(3rem, 6.2vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

.nnvs-home-hero h1 em {
  color: #f3c869;
  font-style: italic;
  font-weight: 700;
}

.nnvs-home-hero__lead {
  max-width: 38rem;
  margin-block: 1.5rem 0;
  color: rgba(255, 248, 232, 0.9);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.75;
}

.nnvs-home-hero__actions {
  gap: 0.75rem 1rem;
  margin-top: 2rem;
}

.nnvs-home-hero .wp-block-button__link {
  min-height: 3.25rem;
  padding: 0.9rem 1.35rem;
  border: 1px solid transparent;
  font-size: 1rem;
  transition:
    transform var(--nnvs-motion-fast) var(--nnvs-ease-standard),
    box-shadow var(--nnvs-motion-fast) var(--nnvs-ease-standard),
    background-color var(--nnvs-motion-fast) var(--nnvs-ease-standard);
}

.nnvs-home-hero .nnvs-cta-primary .wp-block-button__link {
  color: var(--nnvs-color-dark);
  background: #f3c869;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.nnvs-home-hero .nnvs-cta-secondary .wp-block-button__link {
  border-color: rgba(255, 248, 232, 0.55);
  color: #fff8e8;
  background: rgba(255, 248, 232, 0.08);
}

.nnvs-home-hero .wp-block-button__link:hover {
  transform: translateY(-2px) scale(1.02);
}

.nnvs-home-hero__credit {
  position: absolute;
  right: 1rem;
  bottom: 0.75rem;
  margin: 0;
  color: rgba(255, 248, 232, 0.72);
  font-size: 0.6875rem;
}

@keyframes nnvs-ken-burns {
  from {
    transform: scale(1.025) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.095) translate3d(-1.2%, -0.7%, 0);
  }
}

@keyframes nnvs-hero-rise-060 {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nnvs-hero-rise {
  animation: nnvs-hero-rise-060 800ms var(--nnvs-ease-entrance) both;
}

.nnvs-hero-rise--2 {
  animation-delay: 120ms;
}

.nnvs-hero-rise--3 {
  animation-delay: 240ms;
}

.nnvs-hero-rise--4 {
  animation-delay: 360ms;
}

.nnvs-home-section {
  scroll-margin-top: 7rem;
  padding-block: clamp(4.5rem, 7vw, 7rem);
}

.nnvs-section-heading {
  align-items: end;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.nnvs-section-heading h2,
.nnvs-story-panel h2,
.nnvs-consult-panel h2 {
  max-width: 18ch;
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

.nnvs-section__eyebrow {
  color: var(--nnvs-color-primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nnvs-section-link a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  text-underline-offset: 0.3em;
}

.nnvs-needs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.nnvs-needs-grid > .wp-block-column {
  min-width: 0;
}

.nnvs-need-card {
  min-height: 100%;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(36, 92, 59, 0.12);
  border-radius: 1.375rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 38px rgba(21, 63, 44, 0.08);
  transition:
    color var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    background-color var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    border-color var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    box-shadow var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    transform var(--nnvs-motion-normal) var(--nnvs-ease-standard);
}

.nnvs-need-card .nnvs-card-index {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 0.875rem;
  color: var(--nnvs-color-dark);
  background: rgba(215, 154, 54, 0.23);
  font-family: var(--nnvs-font-display);
  font-weight: 700;
  transition: transform var(--nnvs-motion-normal) var(--nnvs-ease-standard);
}

.nnvs-need-card h3 {
  margin-top: 2.5rem;
  font-size: clamp(1.35rem, 1.1rem + 0.5vw, 1.65rem);
}

.nnvs-need-card h3 a {
  color: inherit;
  text-decoration: none;
}

.nnvs-need-card:focus-within {
  outline: 3px solid var(--nnvs-color-accent);
  outline-offset: 4px;
}

.nnvs-home-section--cream {
  background: #f0ede2;
}

.nnvs-products-section .wc-block-product-template > li {
  overflow: hidden;
  border: 1px solid rgba(36, 92, 59, 0.11);
  border-radius: 1.375rem;
  background: #fffdf8;
  box-shadow: 0 12px 36px rgba(21, 63, 44, 0.08);
}

.nnvs-products-section .wc-block-components-product-image {
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
}

.nnvs-products-section .wc-block-components-product-image img {
  transition: transform 620ms var(--nnvs-ease-entrance);
}

.nnvs-products-section .wp-block-woocommerce-product-price {
  color: var(--nnvs-color-primary);
  font-weight: 700;
}

.nnvs-story-section {
  background: var(--nnvs-color-background);
}

.nnvs-story-panel {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: clamp(1.5rem, 3vw, 2.25rem);
  background: #fffdf8;
  box-shadow: var(--nnvs-shadow-lifted);
}

.nnvs-story-points {
  display: grid;
  gap: 1rem;
}

.nnvs-story-point {
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--nnvs-color-border);
}

.nnvs-story-point:last-child {
  border-bottom: 0;
}

.nnvs-story-point__icon {
  display: grid;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  place-items: center;
  border-radius: 50%;
  color: var(--nnvs-color-dark);
  background: #f3c869;
  font-weight: 800;
}

/* 0.9.0: concise brand introduction and clearly labelled garden-feedback demo. */
.nnvs-brand-story-section .nnvs-story-panel__intro .wp-block-buttons {
  margin-top: 1.5rem;
}

#ve-ht {
  scroll-margin-top: clamp(6.5rem, 9vw, 8rem);
}

.nnvs-brand-story-section .nnvs-phone-number {
  white-space: nowrap;
}

.nnvs-brand-story-section .nnvs-story-point__icon {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.nnvs-garden-demo-section {
  position: relative;
  overflow: clip;
  color: #fff8e8;
  background:
    radial-gradient(circle at 8% 8%, rgba(243, 200, 105, 0.16), transparent 26rem),
    radial-gradient(circle at 94% 92%, rgba(112, 154, 94, 0.18), transparent 30rem),
    var(--nnvs-color-dark);
}

.nnvs-garden-demo-heading {
  align-items: end;
}

.nnvs-garden-demo-heading > :first-child {
  max-width: 45rem;
}

.nnvs-garden-demo-heading :is(h2, p) {
  color: inherit;
}

.nnvs-garden-demo-section .nnvs-garden-demo-heading > .wp-block-group p:not(.nnvs-section__eyebrow) {
  color: #eef1df;
}

.nnvs-garden-demo-heading .nnvs-section__eyebrow {
  color: #f3c869;
}

.nnvs-demo-notice {
  max-width: 17rem;
  margin: 0;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(243, 200, 105, 0.52);
  border-radius: 1rem;
  color: #fff8e8;
  background: rgba(243, 200, 105, 0.1);
  font-size: 0.82rem;
  line-height: 1.45;
}

.nnvs-demo-notice strong {
  color: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nnvs-garden-demo-section p.nnvs-demo-notice,
.nnvs-garden-demo-section p.nnvs-demo-notice strong {
  color: #fff8e8;
}

.nnvs-garden-demo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.nnvs-garden-demo-card {
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  padding: 0.75rem 0.75rem 1.6rem;
  border: 1px solid rgba(243, 200, 105, 0.24);
  border-radius: 1.5rem;
  color: var(--nnvs-color-text);
  background: #fffdf8;
  box-shadow: 0 18px 46px rgba(5, 24, 15, 0.22);
  transition:
    border-color var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    box-shadow var(--nnvs-motion-normal) var(--nnvs-ease-standard),
    transform var(--nnvs-motion-normal) var(--nnvs-ease-standard);
}

.nnvs-garden-demo-card__art {
  display: grid;
  overflow: hidden;
  aspect-ratio: 8 / 5;
  margin-bottom: 1.25rem;
  place-items: center;
  border-radius: 1rem;
  color: var(--nnvs-color-primary);
  background:
    linear-gradient(155deg, rgba(243, 200, 105, 0.34), transparent 58%),
    #e7efe3;
}

.nnvs-garden-demo-card:nth-child(2) .nnvs-garden-demo-card__art {
  color: #8b651e;
  background:
    linear-gradient(145deg, rgba(36, 92, 59, 0.14), transparent 54%),
    #f5ead2;
}

.nnvs-garden-demo-card:nth-child(3) .nnvs-garden-demo-card__art {
  color: #326f49;
  background:
    radial-gradient(circle at 76% 24%, rgba(243, 200, 105, 0.56), transparent 18%),
    #dfead9;
}

.nnvs-garden-demo-card__art svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  fill-opacity: 0.18;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.nnvs-garden-demo-card__tag {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  margin: 0 0 0.75rem;
  padding-inline: 0.75rem;
  border-radius: 999px;
  color: var(--nnvs-color-dark);
  background: #f3c869;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nnvs-garden-demo-card h3 {
  margin: 0 0 0.75rem;
  color: var(--nnvs-color-dark);
  font-size: clamp(1.35rem, 1.1rem + 0.5vw, 1.65rem);
}

.nnvs-garden-demo-card > p:last-child {
  margin-bottom: 0;
}

.nnvs-consult-section {
  background: var(--nnvs-color-background);
}

.nnvs-consult-panel {
  gap: 2rem;
  padding: clamp(2rem, 6vw, 4.5rem);
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  color: #fff8e8;
  background:
    radial-gradient(circle at 88% 10%, rgba(215, 154, 54, 0.18), transparent 28%),
    var(--nnvs-color-dark);
  box-shadow: 0 26px 65px rgba(21, 63, 44, 0.22);
}

.nnvs-consult-panel :is(h2, p) {
  color: inherit;
}

.nnvs-consult-panel .nnvs-section__eyebrow {
  color: #f3c869;
}

.nnvs-consult-panel .is-style-outline .wp-block-button__link {
  border-color: rgba(255, 248, 232, 0.55);
  color: #fff8e8;
}

.nnvs-footer {
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
}

.nnvs-footer__grid {
  gap: clamp(2rem, 4vw, 4rem);
}

.nnvs-footer__column h3 {
  color: #f3c869;
  font-size: 1.25rem;
}

.nnvs-contact-list {
  display: grid;
  gap: 0.75rem;
}

.nnvs-contact-link {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  gap: 0.85rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1rem;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  transition:
    border-color var(--nnvs-motion-fast) var(--nnvs-ease-standard),
    background-color var(--nnvs-motion-fast) var(--nnvs-ease-standard),
    transform var(--nnvs-motion-fast) var(--nnvs-ease-standard);
}

.nnvs-contact-link:hover {
  border-color: rgba(243, 200, 105, 0.72);
  color: #fff;
  background: rgba(255, 255, 255, 0.11);
  transform: translateY(-2px);
}

.nnvs-contact-link:focus-visible {
  outline: 3px solid #f3c869;
  outline-offset: 3px;
}

.nnvs-contact-link__icon {
  display: grid;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 0.8rem;
  color: var(--nnvs-color-dark);
  background: #fff;
}

.nnvs-contact-link--phone .nnvs-contact-link__icon {
  color: var(--nnvs-color-dark);
  background: #f3c869;
}

.nnvs-contact-link__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.nnvs-contact-link__text {
  display: grid;
  gap: 0.05rem;
}

.nnvs-contact-link__text small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nnvs-contact-link__text strong {
  color: #fff;
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  line-height: 1.25;
}

.nnvs-footer__note {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
}

@media (hover: hover) and (pointer: fine) {
  .nnvs-need-card:hover {
    border-color: transparent;
    color: #fff8e8;
    background: var(--nnvs-color-primary);
    box-shadow: 0 22px 48px rgba(21, 63, 44, 0.2);
    transform: translateY(-0.75rem);
  }

  .nnvs-need-card:hover :is(h3, p, a) {
    color: inherit;
  }

  .nnvs-need-card:hover .nnvs-card-index {
    color: var(--nnvs-color-dark);
    background: #f3c869;
    transform: rotate(8deg);
  }

  .nnvs-products-section .wc-block-product-template > li:hover .wc-block-components-product-image img {
    transform: scale(1.045);
  }

  .nnvs-garden-demo-card:hover {
    border-color: rgba(243, 200, 105, 0.72);
    box-shadow: 0 24px 54px rgba(5, 24, 15, 0.32);
    transform: translateY(-0.5rem);
  }
}

@media (min-width: 37.5rem) {
  .nnvs-needs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 37.499rem) {
  .nnvs-brand-story-section .wp-block-buttons {
    align-items: stretch;
    flex-direction: column;
  }

  .nnvs-brand-story-section :is(.wp-block-button, .wp-block-button__link) {
    width: 100%;
  }

  .nnvs-brand-story-section .wp-block-button__link {
    white-space: nowrap;
  }
}

@media (min-width: 48rem) {
  .nnvs-story-panel {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

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

@media (min-width: 64rem) {
  .nnvs-needs-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 63.999rem) {
  body:not(.wp-admin) .nnvs-header {
    right: max(0.75rem, env(safe-area-inset-right));
    left: max(0.75rem, env(safe-area-inset-left));
  }

  .nnvs-header .nnvs-header__inner {
    min-height: 3.75rem;
    padding: 0.35rem 0.5rem;
  }

  .nnvs-header .nnvs-brand__logo,
  .nnvs-header .nnvs-brand__logo img {
    max-width: 3.5rem;
    max-height: 3.5rem;
  }

  .nnvs-header .wp-block-navigation__responsive-container.is-menu-open {
    inset: 0;
    min-height: 100dvh;
    padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
    color: #fff8e8;
    background: rgba(21, 63, 44, 0.98);
  }

  .nnvs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    min-height: 2.75rem;
    font-size: 1.15rem;
  }
}

@media screen and (max-width: 600px) {
  body.admin-bar:not(.wp-admin) .nnvs-header {
    top: 1rem;
  }

  body:not(.home):not(.front-page):not(.wp-admin) .nnvs-header,
  body.admin-bar:not(.home):not(.front-page):not(.wp-admin) .nnvs-header {
    top: 0;
  }
}

@media (max-width: 29.999rem) {
  .nnvs-home-hero {
    min-height: 46rem;
  }

  .nnvs-home-hero__inner {
    width: min(calc(100% - 2rem), 72rem);
    align-items: end;
    padding-bottom: 5.5rem;
  }

  .nnvs-home-hero h1 {
    font-size: clamp(2.75rem, 13vw, 3.5rem);
  }

  .nnvs-home-hero__media img {
    object-position: 62% center;
  }

  .nnvs-home-hero__credit {
    max-width: calc(100% - 2rem);
  }

  .nnvs-home-hero__actions {
    align-items: stretch;
  }

  .nnvs-home-hero__actions .wp-block-button,
  .nnvs-home-hero__actions .wp-block-button__link {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .nnvs-home-hero__media img,
  .nnvs-hero-rise,
  .nnvs-home .nnvs-reveal-grid *,
  .nnvs-home .nnvs-reveal-pair > * {
    animation: none !important;
    transform: none !important;
  }

  .nnvs-home :is(*, *::before, *::after),
  .nnvs-footer :is(*, *::before, *::after) {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .nnvs-category-marquee__track {
    animation: none !important;
    transform: none !important;
  }

  .nnvs-category-marquee__set--duplicate,
  .nnvs-category-marquee__toggle {
    display: none !important;
  }
}