/* ==========================================================================
   GREENLYTES — COMPONENTS
   File: /assets/css/components.css

   Purpose
   -------
   Shared, site-wide presentation primitives and interactive components.
   Page-specific styling belongs in the corresponding page stylesheet.

   Contents
   --------
   01. Header and navigation
   02. Mini cart
   03. Shared page helpers
   04. Shared layout and utilities
   05. Buttons and section headings
   06. Trust bar
   07. Buying guides
   08. FAQ
   09. Final call to action
   10. Footer
   11. Reveal animations
   12. Shared related guide cards
   13. Accessibility
   14. Responsive behavior
   15. Reduced motion

   Dependency order
   ----------------
   1. base.css
   2. components.css
   3. page-specific stylesheet
   ========================================================================== */


/* ==========================================================================
   01. HEADER AND NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid transparent;
  background: rgba(247, 249, 245, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.site-header.is-scrolled {
  border-color: var(--color-border);
  box-shadow: 0 8px 28px rgba(16, 23, 19, 0.05);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 50px;
  width: min(
    calc(100% - (var(--page-gutter) * 2)),
    var(--container-width)
  );
  min-height: 76px;
  margin-inline: auto;
}


/* Brand
   ========================================================================== */

.brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.brand img {
  display: block;
  width: 190px;
  height: auto;
}


/* Desktop navigation
   ========================================================================== */

.site-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(20px, 3vw, 42px);
}

.site-navigation > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--color-ink-soft);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.site-navigation > a:not(.site-cart-link)::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: -8px;
  left: 0;
  height: 2px;
  background: var(--color-green);
  transition: right var(--transition-fast);
}

/* Active and interactive navigation states
   ========================================================================== */

.site-navigation > a:not(.site-cart-link):hover,
.site-navigation > a:not(.site-cart-link):focus-visible,
.site-navigation > a:not(.site-cart-link).is-active,
.site-navigation > a:not(.site-cart-link)[aria-current="page"] {
  color: var(--color-green-dark);
}

.site-navigation > a:not(.site-cart-link):hover::after,
.site-navigation > a:not(.site-cart-link):focus-visible::after,
.site-navigation > a:not(.site-cart-link).is-active::after,
.site-navigation > a:not(.site-cart-link)[aria-current="page"]::after {
  right: 0;
}


/* Header cart link
   ========================================================================== */

.site-navigation > .site-cart-link {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  padding: 7px 10px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  color: var(--color-ink-soft);
  background: transparent;
  white-space: nowrap;
  text-decoration: none;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.site-navigation > .site-cart-link:hover,
.site-navigation > .site-cart-link:focus-visible,
.site-navigation > .site-cart-link[aria-expanded="true"] {
  color: var(--color-green-dark);
  background: #edf3ea;
}

.site-navigation > .site-cart-link svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-cart-count {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  color: #ffffff;
  background: #315b3a;
  font-size: 0.61rem;
  font-weight: 850;
  line-height: 1;
}


/* Mobile navigation button
   ========================================================================== */

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-lines,
.menu-lines::before {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: auto;
  background: var(--color-ink);
  content: "";
  transition: transform var(--transition-fast);
}

.menu-lines::before {
  transform: translateY(-7px);
}


/* ==========================================================================
   02. MINI CART
   ========================================================================== */

/* Prevent background scrolling while the drawer is open. */
body.mini-cart-open {
  overflow: hidden;
}

.mini-cart {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;

  /*
     On closing, keep the component visible for 620ms so the drawer
     can complete its sliding animation before becoming hidden.
  */
  transition: visibility 0s linear 620ms;
}

.mini-cart.is-open {
  visibility: visible;
  pointer-events: auto;

  /*
     On opening, make the component visible immediately.
  */
  transition-delay: 0s;
}

.mini-cart__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 14, 0.5);
  opacity: 0;
  transition: opacity 520ms ease;
}

.mini-cart.is-open .mini-cart__backdrop {
  opacity: 1;
}

.mini-cart__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: min(460px, 100%);
  height: 100dvh;
  overflow: hidden;
  flex-direction: column;
  color: #172219;
  background:
    radial-gradient(circle at 100% 0%, rgba(119, 160, 102, 0.11), transparent 20rem),
    #ffffff;
  box-shadow: -34px 0 90px rgba(9, 20, 13, 0.2);
  transform: translateX(100%);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mini-cart.is-open .mini-cart__panel {
  transform: translateX(0);
}

.mini-cart__header {
  display: flex;
  min-height: 122px;
  padding: 32px 32px 27px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(38, 62, 47, 0.1);
}

.mini-cart__header .eyebrow {
  display: block;
}

.mini-cart__header h2 {
  margin: 11px 0 0;
  color: #172219;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.mini-cart__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid rgba(38, 62, 47, 0.11);
  border-radius: 50%;
  color: #315b3a;
  background: #f7f9f5;
  cursor: pointer;
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.mini-cart__close:hover,
.mini-cart__close:focus-visible {
  color: #ffffff;
  border-color: #315b3a;
  background: #315b3a;
  transform: rotate(4deg);
}

.mini-cart__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.mini-cart__items {
  display: grid;
  min-height: 0;
  padding: 20px 32px 26px;
  overflow-y: auto;
  align-content: start;
  gap: 16px;
  overscroll-behavior: contain;
}

.mini-cart__item {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 16px;
  row-gap: 8px;
  padding: 20px;
  border: 1px solid rgba(38, 62, 47, 0.09);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(247, 249, 245, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.mini-cart__item:hover,
.mini-cart__item:focus-within {
  border-color: rgba(49, 91, 58, 0.16);
  box-shadow: 0 14px 32px rgba(22, 39, 27, 0.07);
  transform: translateY(-2px);
}

.mini-cart__item-image {
  position: relative;
  display: block;
  width: 84px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(38, 62, 47, 0.08);
  border-radius: 16px;
  background: linear-gradient(145deg, #edf1eb 0%, #f7f8f5 100%);
}

.mini-cart__item-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-cart__item-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.mini-cart__item-title {
  max-width: 180px;
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.mini-cart__item-title a {
  color: #172219;
  text-decoration: none;
}
.mini-cart__item-title a:hover,
.mini-cart__item-title a:focus-visible {
  color: #315b3a;
}

.mini-cart__item-meta {
  margin: 9px 0 0;
  color: rgba(27, 40, 29, 0.58);
  font-size: 0.69rem;
  line-height: 1.5;
}

.mini-cart__item-price {
  align-self: start;
  margin-top: 3px;
  color: #315b3a;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.mini-cart__empty {
  display: grid;
  min-height: 0;
  padding: 72px 34px;
  flex: 1;
  place-items: center;
  align-content: center;
  text-align: center;
}

.mini-cart__empty[hidden] {
  display: none;
}

.mini-cart__empty::before {
  content: "";
  width: 74px;
  height: 74px;
  margin-bottom: 24px;
  border: 1px solid rgba(49, 91, 58, 0.12);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #edf4e9 0%, #edf4e9 52%, transparent 53%);
}

.mini-cart__empty p {
  max-width: 300px;
  margin: 0;
  color: #172219;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.72rem;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.mini-cart__empty a {
  display: inline-flex;
  min-height: 50px;
  margin-top: 24px;
  padding: 12px 19px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(49, 91, 58, 0.14);
  border-radius: 14px;
  color: #315b3a;
  background: #f7f9f5;
  font-size: 0.73rem;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.mini-cart__empty a:hover,
.mini-cart__empty a:focus-visible {
  border-color: rgba(49, 91, 58, 0.24);
  background: #edf4e9;
  transform: translateY(-1px);
}

.mini-cart__footer {
  margin-top: auto;
  padding: 28px 32px 32px;
  border-top: 1px solid rgba(38, 62, 47, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, #ffffff 100%);
  box-shadow: 0 -18px 42px rgba(22, 39, 27, 0.045);
}

.mini-cart__footer[hidden] {
  display: none;
}

.mini-cart__subtotal {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px;
}

.mini-cart__subtotal::after {
  content: "Free U.S. shipping";
  grid-column: 1 / -1;
  margin-top: 8px;
  color: #426749;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mini-cart__subtotal span {
  color: rgba(27, 40, 29, 0.58);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mini-cart__subtotal strong {
  color: #172219;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.mini-cart__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
  margin-top: 24px;
}

.mini-cart__view-cart,
.mini-cart__checkout {
  display: inline-flex;
  min-height: 56px;
  padding: 14px 18px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.mini-cart__checkout {
  order: 1;
  border: 1px solid #315b3a;
  color: #ffffff;
  background: linear-gradient(135deg, #315b3a 0%, #4c774f 100%);
  box-shadow: 0 14px 32px rgba(39, 82, 47, 0.18);
}

.mini-cart__checkout:hover,
.mini-cart__checkout:focus-visible {
  box-shadow: 0 18px 38px rgba(39, 82, 47, 0.24);
  transform: translateY(-1px);
}

.mini-cart__view-cart {
  order: 2;
  border: 1px solid rgba(49, 91, 58, 0.16);
  color: #315b3a;
  background: #f7f9f5;
}

.mini-cart__view-cart:hover,
.mini-cart__view-cart:focus-visible {
  border-color: rgba(49, 91, 58, 0.26);
  background: #edf4e9;
  transform: translateY(-1px);
}

.mini-cart__footer > p {
  margin: 18px 0 0;
  color: rgba(27, 40, 29, 0.5);
  font-size: 0.65rem;
  line-height: 1.5;
  text-align: center;
}


/* ==========================================================================
   03. SHARED PAGE HELPERS
   ========================================================================== */

.product-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 29px;
  color: #223127;
  text-decoration: none;
  font-size: 0.82rem;
}

.product-rating__stars {
  color: #4e7a4d;
  font-size: 0.9rem;
  letter-spacing: 0.055em;
}

.product-rating > span:last-child {
  color: rgba(34, 49, 39, 0.58);
}

.breadcrumb {
  margin-bottom: clamp(22px, 3vw, 36px);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  color: rgba(28, 42, 31, 0.52);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.5;
}

.breadcrumb li:not(:last-child)::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 12px;
  border-top: 1.5px solid rgba(28, 42, 31, 0.4);
  border-right: 1.5px solid rgba(28, 42, 31, 0.4);
  transform: rotate(45deg);
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: #315b3a;
}

.breadcrumb li[aria-current="page"] {
  color: #426749;
}


/* ==========================================================================
   04. SHARED LAYOUT AND UTILITIES
   ========================================================================== */

.container {
  width: min(
    calc(100% - (var(--page-gutter) * 2)),
    var(--container-width)
  );
  margin-inline: auto;
}

.container-wide {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}

.card-base {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.section {
  width: min(
    calc(100% - (var(--page-gutter) * 2)),
    var(--container-width)
  );
  margin-inline: auto;
  padding-block: 124px;
}

.eyebrow {
  display: inline-block;
  color: var(--color-green-dark);
  font-size: 0.71rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Shared supporting copy
   ========================================================================== */

/*
   Use beside major section headings when the layout pairs a large editorial
   heading with a short explanatory paragraph. Positioning remains the
   responsibility of the page or section layout; this class standardizes only
   typography and readable measure.
*/

.section-summary {
  width: 100%;
  max-width: 430px;
  margin: 0;
  color: var(--color-section-summary);
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.7;
  text-wrap: pretty;
}


/* ==========================================================================
   05. BUTTONS AND SECTION HEADINGS
   ========================================================================== */

.button {
  display: inline-flex;
  min-height: 51px;
  padding-inline: 23px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 820;
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--color-white);
  background: var(--color-green-dark);
  box-shadow: 0 14px 30px rgba(63, 113, 55, 0.21);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--color-green-deep);
}

.button-secondary {
  color: var(--color-ink);
  border-color: var(--color-border);
  background: rgba(255, 255, 255, 0.78);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: var(--color-border-strong);
  background: var(--color-white);
  box-shadow: 0 10px 26px rgba(16, 23, 19, 0.08);
}

.button-light {
  color: var(--color-ink);
  background: var(--color-white);
}

.button-light:hover,
.button-light:focus-visible {
  background: #f1f4ef;
}

.section-heading {
  max-width: 900px;
  margin-bottom: 54px;
}

.section-heading h2,
.selection-heading h2,
.contact-section h2 {
  margin: 18px 0 24px;
  font-size: clamp(2.7rem, 5vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.section-heading p {
  max-width: 650px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1.02rem;
  line-height: 1.74;
}


/* ==========================================================================
   06. TRUST BAR
   ========================================================================== */

.trust-bar {
  border-top: 1px solid rgba(38, 62, 47, 0.08);
  border-bottom: 1px solid rgba(38, 62, 47, 0.08);
  background: #f7f9f5;
}

.trust-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}

.trust-bar__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding: 25px 24px;
  transition:
    background-color 250ms ease,
    transform 250ms ease;
}

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

.trust-bar__item:last-child {
  padding-right: 0;
}

.trust-bar__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24%;
  right: 0;
  width: 1px;
  height: 52%;
  background: rgba(38, 62, 47, 0.11);
}

.trust-bar__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  color: #426749;
  background: #e9f0e5;
  transition:
    color 220ms ease,
    background-color 220ms ease;
}

.trust-bar__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-bar__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.trust-bar__copy strong {
  color: #213226;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
}

.trust-bar__copy small {
  max-width: 220px;
  color: rgba(33, 50, 38, 0.6);
  font-size: 0.7rem;
  line-height: 1.45;
}


/* ==========================================================================
   07. BUYING GUIDES
   ========================================================================== */

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.guide-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 350px;
  padding: 31px;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-white);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.guide-card:hover,
.guide-card:focus-within {
  border-color: rgba(101, 150, 79, 0.34);
  box-shadow: var(--shadow-large);
  transform: translateY(-5px);
}

.guide-card__number {
  position: absolute;
  top: 24px;
  right: 26px;
  margin: 0;
  color: rgba(63, 113, 55, 0.11);
  font-size: clamp(2.6rem, 4vw, 4.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.07em;
  pointer-events: none;
  transition:
    color var(--transition-medium),
    transform var(--transition-medium);
}

.guide-card:hover .guide-card__number,
.guide-card:focus-within .guide-card__number {
  color: rgba(63, 113, 55, 0.2);
  transform: translateY(-3px);
}

.guide-card > span:not(.guide-card__number) {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 90px);
  color: var(--color-green-dark);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guide-card h3 {
  position: relative;
  z-index: 1;
  max-width: 260px;
  margin: 14px 0;
  color: var(--color-ink);
  font-size: 1.7rem;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.guide-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.68;
}

.guide-card a {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin-top: auto;
  color: var(--color-green-dark);
  font-size: 0.78rem;
  font-weight: 820;
  text-decoration: none;
  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.guide-card:hover a,
.guide-card:focus-within a {
  color: var(--color-green-deep);
  transform: translateX(4px);
}


/* ==========================================================================
   08. FAQ
   ========================================================================== */

.section-soft {
  width: 100%;
  max-width: none;
  padding-right: max(
    var(--page-gutter),
    calc((100% - var(--container-width)) / 2)
  );
  padding-left: max(
    var(--page-gutter),
    calc((100% - var(--container-width)) / 2)
  );
  background: var(--color-surface-soft);
}

.faq-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 80px;
  width: min(100%, var(--container-width));
  margin-inline: auto;
}

.faq-list {
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  position: relative;
  padding: 25px 48px 25px 0;
  cursor: pointer;
  color: var(--color-ink);
  font-size: 1.06rem;
  font-weight: 790;
  list-style: none;
  transition: color var(--transition-fast);
}

.faq-item summary:hover,
.faq-item summary:focus-visible {
  color: var(--color-green-dark);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  top: 17px;
  right: 3px;
  color: var(--color-green-dark);
  font-size: 1.8rem;
  font-weight: 300;
  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.faq-item summary:hover::after,
.faq-item summary:focus-visible::after {
  color: var(--color-green-deep);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item[open] p {
  animation: faq-reveal 220ms ease;
}

.faq-item p {
  max-width: 720px;
  margin: 0;
  padding: 0 0 27px;
  color: rgba(13, 23, 17, 0.68);
  font-size: 0.96rem;
  line-height: 1.75;
}

@keyframes faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

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


/* ==========================================================================
   09. FINAL CALL TO ACTION
   ========================================================================== */

.contact-section {
  position: relative;
  padding: 145px var(--page-gutter) 120px;
  overflow: hidden;
  color: var(--color-white);
  text-align: center;
  background:
    radial-gradient(
      ellipse at 50% 38%,
      rgba(101, 150, 79, 0.3),
      transparent 50%
    ),
    var(--color-dark);
}

.contact-inner {
  width: min(100%, 930px);
  margin-inline: auto;
}

.contact-section .eyebrow {
  color: var(--color-green-light);
}

.contact-section h2 {
  max-width: 930px;
  margin: 18px auto 24px;
  color: var(--color-white);
  text-wrap: balance;
}

.contact-section .contact-inner > p {
  max-width: 650px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.72;
}

.contact-trust {
  display: flex;
  margin: 26px 0 18px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.contact-trust span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.contact-trust span:not(:last-child)::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-left: 18px;
  border-radius: 50%;
  background: var(--color-green-light);
}

.contact-section .button-light {
  min-width: 220px;
  min-height: 56px;
  padding-inline: 28px;
  color: var(--color-green-deep);
  background: var(--color-white);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
  font-size: 0.86rem;
}

.contact-section .button-light:hover,
.contact-section .button-light:focus-visible {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
  box-shadow: none;
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.site-footer {
  padding: 82px 0 30px;
  color: #dfe7e0;
  background: var(--color-footer);
}

.footer-inner,
.footer-bottom {
  width: min(
    calc(100% - (var(--page-gutter) * 2)),
    var(--container-width)
  );
  margin-inline: auto;
}


/* Footer layout
   ========================================================================== */

.footer-inner {
  display: grid;
  grid-template-columns:
    minmax(280px, 1.45fr)
    minmax(150px, 0.7fr)
    minmax(170px, 0.8fr)
    minmax(190px, 0.9fr);
  align-items: start;
  gap: clamp(42px, 5vw, 82px);
}


/* Footer brand
   ========================================================================== */

.footer-brand {
  min-width: 0;
}

.footer-brand > p {
  max-width: 320px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.94rem;
  line-height: 1.72;
  text-wrap: pretty;
}


/* Footer navigation
   ========================================================================== */

.footer-nav {
  display: grid;
  align-content: start;
  gap: 13px;
}

.footer-nav__title {
  margin: 0 0 8px;
  color: var(--color-green-light);
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-nav a {
  width: fit-content;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--color-green-light);
}


/* Footer bottom
   ========================================================================== */

.footer-bottom {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  margin-top: 68px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.44);
  font-size: 0.72rem;
}

.footer-bottom > span:first-child {
  justify-self: start;
}

.footer-credit {
  justify-self: end;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: var(--color-green-light);
}


/* Legal navigation
   ========================================================================== */

.footer-legal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
}

.footer-legal a {
  display: inline-flex;
  align-items: center;
}

.footer-legal a:not(:last-child)::after {
  content: "";
  width: 3px;
  height: 3px;
  margin-inline: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}


/* Responsive footer
   ========================================================================== */

/*
   Large tablets keep the desktop information architecture:
   one brand column plus three navigation columns.

   Only the proportions and spacing become more compact.
*/
@media (max-width: 1050px) {
  .footer-inner {
    grid-template-columns:
      minmax(220px, 1.35fr)
      minmax(120px, 0.72fr)
      minmax(135px, 0.82fr)
      minmax(150px, 0.9fr);
    gap: clamp(24px, 3.5vw, 42px);
  }

  .footer-bottom {
    gap: 20px;
  }
}


/*
   Narrow tablets move to a balanced two-column footer.
   The legal links move beneath the copyright and credit.
*/
@media (max-width: 800px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 36px;
  }

  .footer-bottom {
    grid-template-columns: 1fr auto;
    row-gap: 16px;
  }

  .footer-credit {
    justify-self: end;
  }

  .footer-legal {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }
}


/*
   Mobile stacks the footer navigation into one column while
   preserving the readable brand measure.
*/
@media (max-width: 680px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .footer-brand > p {
    max-width: 420px;
  }
}


@media (max-width: 540px) {
  .site-footer {
    padding: 66px 0 26px;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 52px;
    padding-top: 22px;
  }

  .footer-bottom > span:first-child,
  .footer-credit,
  .footer-legal {
    justify-self: start;
  }

  .footer-legal {
    grid-column: auto;
    grid-row: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 8px;
    white-space: normal;
  }
}


/* ==========================================================================
   11. REVEAL ANIMATIONS
   ========================================================================== */

.reveal,
.reveal-section {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 650ms ease,
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible,
.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   12. SHARED RELATED GUIDE CARDS
   Reusable editorial cards for Guides, Categories, Home and other hub pages.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Related Guides section
   -------------------------------------------------------------------------- */

.guide-related {
  position: relative;
  padding: 78px 0 84px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(121, 166, 100, 0.11),
      transparent 29rem
    ),
    #f6f8f4;
}


.guide-related__inner {
  width: min(100% - 40px, 1240px);
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   Section header
   -------------------------------------------------------------------------- */

.guide-related__header {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(300px, 0.85fr);
  align-items: end;
  gap: clamp(44px, 7vw, 105px);
  margin-bottom: 42px;
}


.guide-related__header h2 {
  max-width: 820px;
  margin: 15px 0 0;
  color: var(--color-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.65rem, 4.5vw, 4.8rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.052em;
  text-wrap: balance;
}


/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.guide-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}


/* --------------------------------------------------------------------------
   Guide card
   -------------------------------------------------------------------------- */

.guide-related-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(39, 72, 43, 0.12);
  border-radius: 20px;
  background: #ffffff;
  box-shadow:
    0 16px 42px rgba(28, 52, 31, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}


.guide-related-card:hover,
.guide-related-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(53, 100, 56, 0.23);
  box-shadow:
    0 24px 52px rgba(28, 52, 31, 0.095),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}


.guide-related-card__link {
  display: grid;
  height: 100%;
  color: inherit;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   Guide image
   -------------------------------------------------------------------------- */

.guide-related-card__image {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #dce5d7;
}


.guide-related-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}


.guide-related-card:hover .guide-related-card__image img,
.guide-related-card:focus-within .guide-related-card__image img {
  transform: scale(1.04);
}


.guide-related-card__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(7, 20, 11, 0.02) 35%,
      rgba(7, 20, 11, 0.52) 100%
    );
}


.guide-related-card__type {
  position: absolute;
  left: 17px;
  bottom: 16px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(11, 42, 19, 0.58);
  backdrop-filter: blur(8px);
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Guide content
   -------------------------------------------------------------------------- */

.guide-related-card__content {
  display: flex;
  min-height: 285px;
  flex-direction: column;
  padding: 23px 23px 21px;
}


.guide-related-card__number {
  color: var(--color-green-dark);
  font-size: 0.59rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}


.guide-related-card h3 {
  margin: 16px 0 0;
  color: var(--color-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.42rem, 2.1vw, 1.95rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.035em;
}


.guide-related-card p {
  margin: 17px 0 0;
  color: var(--color-text-muted);
  font-size: 0.73rem;
  line-height: 1.65;
}


.guide-related-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 19px;
  border-top: 1px solid rgba(39, 72, 43, 0.1);
  color: var(--color-green-dark);
  font-size: 0.69rem;
  font-weight: 800;
}


.guide-related-card__cta > span {
  font-size: 1rem;
  transition: transform 180ms ease;
}


.guide-related-card:hover .guide-related-card__cta > span,
.guide-related-card:focus-within .guide-related-card__cta > span {
  transform: translateX(4px);
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {

  .guide-related {
    padding: 62px 0 68px;
  }


  .guide-related__header {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
  }


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


@media (max-width: 680px) {

  .guide-related {
    padding: 50px 0 56px;
  }


  .guide-related__inner {
    width: min(100% - 24px, 600px);
  }


  .guide-related__header {
    margin-bottom: 32px;
  }


  .guide-related__header h2 {
    font-size: clamp(2.3rem, 11vw, 3.35rem);
  }


  .guide-related__grid {
    grid-template-columns: 1fr;
  }


  .guide-related-card__content {
    min-height: 0;
    padding: 21px 20px 20px;
  }
}


/* ==========================================================================
   13. ACCESSIBILITY
   ========================================================================== */

/*
   Focus rings are intentionally defined once in base.css via :focus-visible.
   Components should preserve that global indicator instead of weakening or
   replacing it locally. The rules below only mirror hover affordances for
   keyboard users where the visual state lives on a parent container.
*/


/* ==========================================================================
   14. RESPONSIVE BEHAVIOR
   ========================================================================== */

@media (max-width: 820px) {
  .section-summary {
    max-width: 620px;
  }
}


@media (hover: hover) and (pointer: fine) {
  .trust-bar__item:hover {
    background: rgba(79, 126, 89, 0.025);
    transform: translateY(-2px);
  }

  .trust-bar__item:hover .trust-bar__icon {
    color: var(--color-white);
    background: var(--color-green-dark);
  }
}

@media (max-width: 1020px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .guide-grid {
    grid-template-columns: 1fr;
  }

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

  .trust-bar__item:nth-child(2)::after {
    display: none;
  }

  .trust-bar__item:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(38, 62, 47, 0.1);
  }
}

@media (max-width: 800px) {
  .header-inner {
    grid-template-columns: 1fr auto;
    min-height: 68px;
  }

  .menu-toggle {
    display: block;
  }

  .site-navigation {
    position: absolute;
    top: 68px;
    right: 18px;
    left: 18px;
    display: none;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-large);
  }

  .site-navigation.is-open {
    display: grid;
    gap: 16px;
  }

  .site-navigation > a {
    width: 100%;
  }

  .site-navigation > a:not(.site-cart-link)::after {
    display: none;
  }

  .site-navigation > .site-cart-link {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }

  .site-navigation > .site-cart-link .site-cart-count {
    margin-left: auto;
  }

  .menu-toggle[aria-expanded="true"] .menu-lines {
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-lines::before {
    transform: rotate(90deg);
  }

}

@media (max-width: 680px) {
  .container-wide {
    width: min(100% - 30px, 1240px);
  }

  .mini-cart__panel {
    width: min(430px, 100%);
  }

  .mini-cart__header {
    min-height: 112px;
    padding: 28px 24px 24px;
  }

  .mini-cart__header h2 {
    font-size: 2.05rem;
  }

  .mini-cart__items {
    padding: 18px 24px 24px;
  }

  .mini-cart__item {
    grid-template-columns: 80px minmax(0, 1fr) auto;
    column-gap: 14px;
    padding: 18px;
    border-radius: 18px;
  }

  .mini-cart__item-image {
    width: 80px;
    border-radius: 15px;
  }

  .mini-cart__item-title {
    max-width: 160px;
    font-size: 0.98rem;
  }

  .mini-cart__item-price {
    font-size: 1.12rem;
  }

  .mini-cart__footer {
    padding: 26px 24px 28px;
  }
}

@media (max-width: 620px) {
  .trust-bar__inner {
    grid-template-columns: 1fr;
    width: min(100% - 30px, 1240px);
  }

  .trust-bar__item,
  .trust-bar__item:first-child,
  .trust-bar__item:last-child {
    padding: 18px 0;
  }

  .trust-bar__item:not(:last-child) {
    border-bottom: 1px solid rgba(38, 62, 47, 0.1);
  }

  .trust-bar__item::after {
    display: none;
  }

  .trust-bar__icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 13px;
  }

  .trust-bar__copy small {
    max-width: none;
  }
}

@media (max-width: 540px) {
  .section {
    padding-block: 90px;
  }

  .section-soft {
    padding-right: var(--page-gutter);
    padding-left: var(--page-gutter);
  }

  .button {
    width: 100%;
  }

  .guide-card {
    min-height: 320px;
    padding: 26px;
  }

  .guide-card__number {
    top: 20px;
    right: 22px;
    font-size: clamp(2.3rem, 10vw, 3.5rem);
  }

  .contact-section {
    padding: 88px var(--page-gutter);
  }

  .contact-section h2 {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }

  .contact-trust {
    margin: 28px 0 32px;
    flex-direction: column;
    gap: 10px;
  }

  .contact-trust span:not(:last-child)::after {
    display: none;
  }

  .contact-section .button-light {
    width: 100%;
  }
.mini-cart__panel {
    width: 100%;
  }

  .mini-cart__header {
    min-height: 104px;
    padding: 24px 20px 21px;
  }

  .mini-cart__header h2 {
    font-size: 1.95rem;
  }

  .mini-cart__items {
    padding: 16px 20px 20px;
  }

  .mini-cart__item {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 17px;
  }

  .mini-cart__item-image {
    width: 74px;
    border-radius: 14px;
  }

  .mini-cart__item-title {
    max-width: none;
    font-size: 0.98rem;
  }

  .mini-cart__item-price {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
    font-size: 1.08rem;
  }

  .mini-cart__footer {
    padding: 24px 20px 26px;
  }

  .mini-cart__subtotal strong {
    font-size: 1.55rem;
  }
}


/* ==========================================================================
   15. REDUCED MOTION
   ========================================================================== */

/*
   base.css already provides the site-wide reduced-motion safety net. These
   component rules additionally neutralize stateful transforms and reveal
   effects so interactive elements remain visually stable.
*/

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-section {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .trust-bar__item,
  .trust-bar__icon,
  .button,
  .guide-card,
  .guide-card__number,
  .guide-card a,
  .site-navigation > .site-cart-link,
  .mini-cart__backdrop,
  .mini-cart__panel,
  .mini-cart__close,
  .mini-cart__item,
  .mini-cart__empty a,
  .mini-cart__view-cart,
  .mini-cart__checkout,
  .guide-related-card,
  .guide-related-card__image img,
  .guide-related-card__cta > span {
    transition: none;
  }

  .button:hover,
  .trust-bar__item:hover,
  .guide-card:hover,
  .guide-card:hover .guide-card__number,
  .guide-card:hover a,
  .mini-cart__close:hover,
  .mini-cart__item:hover,
  .mini-cart__empty a:hover,
  .mini-cart__view-cart:hover,
  .mini-cart__checkout:hover,
  .guide-related-card:hover,
  .guide-related-card:focus-within,
  .guide-related-card:hover .guide-related-card__image img,
  .guide-related-card:focus-within .guide-related-card__image img,
  .guide-related-card:hover .guide-related-card__cta > span,
  .guide-related-card:focus-within .guide-related-card__cta > span {
    transform: none;
  }

  .faq-item[open] p {
    animation: none;
  }
}