/*
Theme Name: A1 Green Systems
Theme URI: https://a1greensystems.com
Author: Stellans Technosoft
Description: WooCommerce theme for A1 Green Systems — eco-friendly cleaning products and services. Converted from the original React design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: a1green
WC requires at least: 8.0
*/

/* ==========================================================================
   Design tokens
   Carried across verbatim from the original design (src/index.css). Colours
   are HSL triplets so they can be used with alpha: hsl(var(--forest) / 0.9).
   Change a value here and it changes everywhere.
   ========================================================================== */

:root {
  --background: 45 30% 97%;
  --foreground: 150 25% 15%;
  --card: 45 25% 95%;
  --muted: 45 20% 90%;
  --muted-foreground: 150 15% 40%;
  --border: 45 20% 85%;

  --forest: 142 45% 28%;
  --forest-dark: 142 50% 20%;
  --forest-light: 142 35% 45%;
  --cream: 45 30% 97%;
  --cream-dark: 45 25% 92%;
  --earth: 28 60% 55%;
  --earth-dark: 28 55% 40%;
  --bark: 25 35% 25%;
  --leaf: 95 40% 50%;
  --destructive: 0 84% 60%;

  --radius: 0.75rem;

  --gradient-hero: linear-gradient(135deg, hsl(142 45% 28%), hsl(142 50% 20%));
  --gradient-nature: linear-gradient(180deg, hsl(45 30% 97%) 0%, hsl(95 25% 90%) 100%);
  --gradient-earth: linear-gradient(135deg, hsl(28 60% 55%), hsl(25 35% 25%));

  --shadow-soft: 0 4px 20px -4px hsl(142 45% 28% / 0.15);
  --shadow-card: 0 8px 30px -8px hsl(142 45% 28% / 0.12);
  --shadow-elevated: 0 20px 50px -15px hsl(142 45% 28% / 0.2);

  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1400px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1rem; }
a { color: hsl(var(--forest)); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* Anything focusable must show where focus is — the original relied on
   Tailwind's ring utilities, which do not exist here. */
:focus-visible {
  outline: 2px solid hsl(var(--forest));
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ==========================================================================
   Layout
   ========================================================================== */

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

.section { padding-block: 3rem; }
.section--lg { padding-block: 5rem; }
.section--cream { background: hsl(var(--cream-dark)); }
.section--muted { background: hsl(var(--muted) / 0.3); }
.section--nature { background: var(--gradient-nature); }
.section--forest { background: hsl(var(--forest)); color: hsl(var(--cream)); }

.section__head { text-align: center; margin-bottom: 2.5rem; }
.section__head p { color: hsl(var(--muted-foreground)); max-width: 42rem; margin-inline: auto; }

.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  text-decoration: none;
}

.btn:hover { text-decoration: none; }

.btn--forest,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
  background: hsl(var(--forest));
  color: hsl(var(--cream));
}

.btn--forest:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: hsl(var(--forest-dark));
  color: hsl(var(--cream));
}

.btn--outline {
  background: hsl(var(--background) / 0.8);
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}
.btn--outline:hover { background: hsl(var(--muted)); }

.btn--xl { padding: 0.9rem 1.75rem; font-size: 1.05rem; box-shadow: var(--shadow-soft); }
.btn--block { width: 100%; }
.btn[disabled], .btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ==========================================================================
   Badges & cards
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}
.badge--forest { background: hsl(var(--forest) / 0.1); color: hsl(var(--forest)); }
.badge--earth  { background: hsl(var(--earth) / 0.1);  color: hsl(var(--earth-dark)); }
.badge--solid  { background: hsl(var(--forest)); color: hsl(var(--cream)); }

.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.card:hover { box-shadow: var(--shadow-elevated); border-color: hsl(var(--forest) / 0.5); }
.card__body { padding: 1.25rem; }

/* ==========================================================================
   Header
   ========================================================================== */

.topbar { background: hsl(var(--forest)); color: hsl(var(--cream)); font-size: 0.875rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 0.5rem; }
.topbar a { color: inherit; display: inline-flex; align-items: center; gap: 0.35rem; }
.topbar a:hover { opacity: 0.85; text-decoration: none; }
.topbar__phones { display: flex; align-items: center; gap: 0.75rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: hsl(var(--background) / 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid hsl(var(--border));
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }

.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 40px; height: 40px; border-radius: 999px; background: hsl(var(--background)); display: grid; place-items: center; overflow: hidden; }
.brand__mark img { width: 36px; height: 36px; object-fit: contain; }
.brand__text { display: block; }
/* The original renders these as an h1 and a p — both block, stacked. As inline
   spans they ran side by side on one line. */
.brand__name { display: block; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: hsl(var(--foreground)); line-height: 1.1; margin: 0; }
.brand__tag { display: block; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav ul { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav a { font-size: 0.95rem; font-weight: 500; color: hsl(var(--foreground)); }
.nav a:hover, .nav .current-menu-item > a { color: hsl(var(--forest)); text-decoration: none; }

.cart-link { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); }
.cart-link__count {
  position: absolute; top: -8px; right: -8px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  background: hsl(var(--forest)); color: hsl(var(--cream));
  border-radius: 999px; font-size: 0.7rem; font-weight: 700;
}

.nav-toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; color: hsl(var(--foreground)); }
.nav-mobile { display: none; border-top: 1px solid hsl(var(--border)); padding-block: 1rem; }
.nav-mobile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.nav-mobile.is-open { display: block; }

@media (max-width: 880px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__mobile { display: flex; align-items: center; gap: 0.5rem; }
}
@media (min-width: 881px) { .site-header__mobile { display: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; min-height: 90vh; overflow: hidden; display: flex; align-items: center; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, hsl(var(--background)) 0%, hsl(var(--background) / 0.95) 45%, transparent 100%),
    linear-gradient(0deg, hsl(var(--background)) 0%, transparent 50%, hsl(var(--background) / 0.3) 100%);
}
.hero .container { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 5rem; }
.hero__copy { max-width: 36rem; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: hsl(var(--forest) / 0.9); color: hsl(var(--cream));
  padding: 0.5rem 1rem; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; margin-bottom: 1.5rem;
}
.hero h1 { margin-bottom: 1.5rem; }
.hero h1 span { display: block; color: hsl(var(--forest)); }
.hero__lead { font-size: 1.125rem; color: hsl(var(--foreground) / 0.8); margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }

.hero__features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 26rem; }
.hero__feature { text-align: center; }
.hero__feature-icon {
  width: 48px; height: 48px; margin: 0 auto 0.5rem;
  background: hsl(var(--forest) / 0.9); border-radius: 999px;
  display: grid; place-items: center; box-shadow: var(--shadow-soft);
  color: hsl(var(--cream));
}
.hero__feature span { font-size: 0.875rem; font-weight: 500; }

.hero__figure { position: relative; width: 400px; height: 450px; border-radius: 1rem; overflow: hidden; border: 4px solid hsl(0 0% 100% / 0.2); box-shadow: var(--shadow-elevated); flex-shrink: 0; }
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }
.hero__figure figcaption {
  position: absolute; inset-inline: 0; bottom: 0; padding: 1rem;
  background: linear-gradient(0deg, hsl(0 0% 0% / 0.6), transparent);
  color: #fff; font-size: 0.875rem; font-weight: 500;
}
@media (max-width: 1100px) { .hero__figure { display: none; } }

/* ==========================================================================
   Gallery
   ========================================================================== */

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gallery__item { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: hsl(var(--muted)); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item figcaption {
  position: absolute; inset-inline: 0; bottom: 0; padding: 0.75rem;
  background: linear-gradient(0deg, hsl(0 0% 0% / 0.7), transparent);
  color: #fff; font-size: 0.85rem; font-weight: 600;
}
@media (max-width: 1024px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Feature cards (Why Choose Us)
   ========================================================================== */

.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 60rem; margin-inline: auto; }
.feature-card { text-align: center; padding: 1.5rem; background: hsl(0 0% 100% / 0.1); border-radius: var(--radius); }
.feature-card__icon { width: 48px; height: 48px; margin: 0 auto 1rem; background: hsl(0 0% 100% / 0.2); border-radius: 999px; display: grid; place-items: center; }
.feature-card h3 { margin-bottom: 0.5rem; font-family: var(--font-sans); font-size: 1rem; }
.feature-card p { font-size: 0.875rem; opacity: 0.85; margin: 0; }
@media (max-width: 760px) { .feature-cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   Notice / exclusions block
   ========================================================================== */

.notice-card { max-width: 42rem; margin-inline: auto; border: 1px solid hsl(var(--destructive) / 0.3); background: hsl(var(--destructive) / 0.05); border-radius: var(--radius); padding: 1.5rem; }
.notice-card h2 { color: hsl(var(--destructive)); font-size: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.notice-card ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.notice-card li { display: flex; gap: 0.75rem; padding: 0.75rem; background: hsl(var(--background)); border-radius: calc(var(--radius) - 4px); }
.notice-card__foot { font-size: 0.875rem; color: hsl(var(--muted-foreground)); padding-top: 0.75rem; margin-top: 1rem; border-top: 1px solid hsl(var(--border)); }

/* ==========================================================================
   Contact cards (Services page)
   ========================================================================== */

.contact-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: var(--radius); background: hsl(var(--muted)); margin-bottom: 1rem; }
.contact-card:hover { background: hsl(var(--muted) / 0.7); text-decoration: none; }
.contact-card--primary { background: hsl(var(--forest)); color: hsl(var(--cream)); }
.contact-card--primary:hover { background: hsl(var(--forest-dark)); }
.contact-card strong { display: block; }
.contact-card span { font-size: 0.875rem; opacity: 0.9; }

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

.site-footer { background: hsl(var(--forest-dark)); color: hsl(var(--cream)); padding-block: 3rem 1.5rem; }
.site-footer a { color: hsl(var(--cream) / 0.85); }
.site-footer a:hover { color: hsl(var(--cream)); }
.site-footer h3 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.site-footer h4 { font-family: var(--font-sans); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.9rem; }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 2rem; }
.site-footer__bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--cream) / 0.15); font-size: 0.85rem; opacity: 0.8; text-align: center; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.35rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 4px);
  background: hsl(var(--background));
  font-family: inherit;
  font-size: 0.95rem;
  color: inherit;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid hsl(var(--forest)); outline-offset: 0; border-color: transparent; }

/* ==========================================================================
   WooCommerce product cards
   ========================================================================== */

ul.products { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
ul.products.columns-1 { grid-template-columns: 1fr; }

@media (max-width: 1024px) { ul.products.columns-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .woocommerce ul.products.columns-4,
  ul.products.columns-2 { grid-template-columns: 1fr; }
}

/* WooCommerce lays products out with floats and percentage widths. Inside a
   grid that makes each card 22% of its own track — about 72px — which is the
   squeezed, clipped card you get on the single product page. Undo it. */
.woocommerce ul.products li.product,
ul.products li.product {
  float: none;
  clear: none;
  width: auto;
  margin: 0;
}

ul.products li.product {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 0 0 1.25rem;
  transition: box-shadow 0.3s, border-color 0.3s;
  text-align: left;
}
ul.products li.product:hover { box-shadow: var(--shadow-elevated); border-color: hsl(var(--forest) / 0.5); }

ul.products li.product a img { aspect-ratio: 1; object-fit: cover; background: hsl(var(--cream-dark)); margin: 0 0 1rem; }

/* Scent as the heading, product type beneath — as the original card did. */
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  padding: 0 1.25rem;
  margin: 0 0 0.15rem;
}
ul.products li.product .woocommerce-loop-product__type {
  padding: 0 1.25rem;
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}
ul.products li.product .price {
  display: block;
  padding: 0 1.25rem;
  margin-bottom: 0.75rem;
  color: hsl(var(--forest));
  font-weight: 700;
  font-size: 1.05rem;
}
ul.products li.product .price del { color: hsl(var(--muted-foreground)); font-weight: 400; margin-right: 0.35rem; }
ul.products li.product .button { margin: 0 1.25rem; width: calc(100% - 2.5rem); }
ul.products li.product .badge { margin: 0 1.25rem 0.5rem; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: 1rem; }

/* ==========================================================================
   Mr. Green chatbot
   ========================================================================== */

.chatbot { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; }

.chatbot__toggle {
  width: 56px; height: 56px; border: 0; border-radius: 999px; cursor: pointer;
  background: hsl(var(--forest)); color: hsl(var(--cream));
  box-shadow: var(--shadow-elevated);
  display: grid; place-items: center;
}
.chatbot__toggle:hover { background: hsl(var(--forest-dark)); }

.chatbot__panel {
  position: absolute; right: 0; bottom: 68px;
  width: min(360px, calc(100vw - 2.5rem)); height: min(460px, calc(100vh - 10rem));
  display: flex; flex-direction: column;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  box-shadow: var(--shadow-elevated); overflow: hidden;
}

.chatbot__head { position: relative; padding: 0.9rem 1rem; background: hsl(var(--forest)); color: hsl(var(--cream)); }
.chatbot__head strong { display: block; font-family: var(--font-serif); font-size: 1.05rem; }
.chatbot__head span { font-size: 0.8rem; opacity: 0.85; }
.chatbot__close {
  position: absolute; top: 0.5rem; right: 0.6rem;
  background: none; border: 0; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
}

.chatbot__log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }

.chatbot__msg { max-width: 85%; padding: 0.55rem 0.8rem; border-radius: var(--radius); font-size: 0.9rem; white-space: pre-wrap; }
.chatbot__msg--user { align-self: flex-end; background: hsl(var(--forest)); color: hsl(var(--cream)); }
.chatbot__msg--assistant { align-self: flex-start; background: hsl(var(--muted)); }

.chatbot__form { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid hsl(var(--border)); }
.chatbot__form input { flex: 1; }

/* ==========================================================================
   Single product
   ========================================================================== */

.single-product div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.single-product div.product .woocommerce-product-gallery { width: auto; margin: 0; float: none; }
.single-product div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.single-product div.product .woocommerce-product-gallery img { border-radius: var(--radius); width: 100%; }

/* The zoom trigger is a decorative emoji link; without flexslider it is noise. */
.single-product .woocommerce-product-gallery__trigger { display: none; }

.single-product div.product .summary { width: auto; float: none; margin: 0; }
.single-product div.product .price { color: hsl(var(--forest)); font-size: 1.4rem; font-weight: 700; }
.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .up-sells { grid-column: 1 / -1; }

.single-product .woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: .25rem; padding: 0; margin: 0 0 1.5rem; border-bottom: 1px solid hsl(var(--border)); }
.single-product .woocommerce-tabs ul.tabs li { margin: 0; }
.single-product .woocommerce-tabs ul.tabs li a { display: block; padding: .6rem 1rem; color: hsl(var(--muted-foreground)); font-weight: 600; }
.single-product .woocommerce-tabs ul.tabs li.active a { color: hsl(var(--forest)); border-bottom: 2px solid hsl(var(--forest)); }

table.variations { width: 100%; margin-bottom: 1rem; }
table.variations th { text-align: left; padding: .4rem .75rem .4rem 0; font-weight: 600; white-space: nowrap; }
table.variations td { padding: .4rem 0; }

@media (max-width: 860px) { .single-product div.product { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ==========================================================================
   WooCommerce buttons — override the default purple everywhere
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
ul.products a.button {
  background: hsl(var(--forest));
  color: hsl(var(--cream));
  border-radius: calc(var(--radius) - 2px);
  font-weight: 600;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
ul.products a.button:hover {
  background: hsl(var(--forest-dark));
  color: hsl(var(--cream));
}

/* Disabled means "choose your options first", not "broken". */
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce a.button.disabled {
  background: hsl(var(--forest) / 0.45);
  color: hsl(var(--cream));
  cursor: not-allowed;
  opacity: 1;
}

/* ==========================================================================
   Chatbot: the hidden attribute must beat display:flex
   ========================================================================== */

.chatbot__panel[hidden] { display: none; }

/* WooCommerce floats the gallery and summary at 48% each. Inside our grid that
   makes them 48% of their own track — half the width they should be. Matched
   at WooCommerce's own specificity so it is a clean override, not a hack. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .woocommerce-product-gallery {
  width: auto;
  float: none;
  margin: 0;
}

/* WooCommerce's 48% float widths survive inside our grid and halve both
   columns. Overridden at higher specificity (body + child combinator) rather
   than with !important, so a later stylesheet can still win if it needs to. */
/* !important is deliberate and unusual here: WooCommerce declares these widths
   with !important of its own, so specificity alone cannot win. Scoped tightly
   to the single product grid so it affects nothing else. */
body.single-product div.product > .woocommerce-product-gallery,
body.single-product div.product > div.images,
body.single-product div.product > div.summary {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}

/* WooCommerce adds clearfix pseudo-elements for its float layout. In a grid
   they become grid items and silently eat the first and last cells, which is
   why related products started one column in. */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}

/* ==========================================================================
   Cart drawer
   Replaces WooCommerce's full cart page as the primary path, restoring the
   slide-out sheet the original site used.
   ========================================================================== */

.mini-cart { position: fixed; inset: 0; z-index: 70; }
.mini-cart[hidden] { display: none; }
.mini-cart.is-busy { pointer-events: none; opacity: 0.7; }

.mini-cart__backdrop { position: absolute; inset: 0; background: hsl(0 0% 0% / 0.4); }

.mini-cart__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 28rem;
  background: hsl(var(--background));
  border-left: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-elevated);
  display: flex; flex-direction: column;
}

.mini-cart__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem 0.75rem; }
.mini-cart__head h2 { font-family: var(--font-serif); font-size: 1.25rem; margin: 0; }
.mini-cart__close { background: none; border: 0; cursor: pointer; color: hsl(var(--muted-foreground)); padding: 0.25rem; }
.mini-cart__close:hover { color: hsl(var(--foreground)); }

.mini-cart__contents { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 1.5rem 1.5rem; }
.mini-cart__empty { flex: 1; display: grid; place-items: center; color: hsl(var(--muted-foreground)); }
.mini-cart__items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding-top: 0.75rem; }

.mini-cart__item {
  display: flex; gap: 1rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}
.mini-cart__item-main { flex: 1; min-width: 0; }
.mini-cart__item-main h4 { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; margin: 0 0 0.15rem; }
.mini-cart__meta { font-size: 0.85rem; color: hsl(var(--muted-foreground)); margin: 0; }
.mini-cart__unit { font-size: 0.85rem; font-weight: 600; color: hsl(var(--forest)); margin: 0.25rem 0 0; }

.mini-cart__item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.mini-cart__remove { background: none; border: 0; cursor: pointer; color: hsl(var(--destructive)); padding: 0; }

.mini-cart__qty { display: flex; align-items: center; gap: 0.5rem; }
.mini-cart__step {
  width: 28px; height: 28px;
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 6px);
  background: hsl(var(--background)); cursor: pointer; font-size: 1rem; line-height: 1;
}
.mini-cart__step:hover { background: hsl(var(--muted)); }
.mini-cart__qty span { min-width: 2rem; text-align: center; font-weight: 600; }
.mini-cart__line { font-size: 0.9rem; font-weight: 600; margin: 0; }

.mini-cart__foot { border-top: 1px solid hsl(var(--border)); padding-top: 1rem; margin-top: 1rem; display: grid; gap: 1rem; }
.mini-cart__total { display: flex; align-items: center; justify-content: space-between; }
.mini-cart__total span { font-size: 1.05rem; font-weight: 500; }
.mini-cart__total strong { font-size: 1.25rem; color: hsl(var(--forest)); }

@media (max-width: 520px) { .mini-cart__panel { max-width: none; } }

/* ==========================================================================
   WooCommerce Blocks — cart and checkout
   These are React-rendered with their own class names and CSS variables, so
   none of the classic WooCommerce rules above reach them. Without this the
   Place Order button renders in the block default dark grey.
   ========================================================================== */

.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
  --wc-blocks-color-primary: hsl(var(--forest));
  --wp--preset--color--primary: hsl(var(--forest));
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Section headings pick up the serif face used everywhere else. */
.wc-block-components-title,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-cart h2 {
  font-family: var(--font-serif);
  color: hsl(var(--foreground));
}

/* Primary actions: Place Order, Proceed to Checkout. */
.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
  background-color: hsl(var(--forest)) !important;
  color: hsl(var(--cream)) !important;
  border-radius: calc(var(--radius) - 2px) !important;
  font-family: var(--font-sans);
  font-weight: 600;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
  background-color: hsl(var(--forest-dark)) !important;
  color: hsl(var(--cream)) !important;
}

/* Text links inside the blocks. */
.wc-block-components-button.is-link,
.wp-block-woocommerce-checkout a,
.wp-block-woocommerce-cart a { color: hsl(var(--forest)); }

/* Inputs, matched to the theme's form styling. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-blocks-components-select__container,
.wc-block-components-textarea {
  border-radius: calc(var(--radius) - 4px);
  border-color: hsl(var(--border));
  background: hsl(var(--background));
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
  outline-color: hsl(var(--forest));
}

/* The chosen shipping and payment options. */
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  border-color: hsl(var(--forest));
  box-shadow: 0 0 0 1px hsl(var(--forest));
}
.wc-block-components-radio-control__input:checked { border-color: hsl(var(--forest)); }
.wc-block-components-radio-control__input:checked::before { background: hsl(var(--forest)); }

/* Order summary panel. */
.wc-block-components-sidebar .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: hsl(var(--forest));
  font-weight: 700;
}

/* Line-item thumbnails: a missing image should not leave a broken-icon box. */
.wc-block-components-order-summary-item__image img { border-radius: calc(var(--radius) - 6px); background: hsl(var(--cream-dark)); }

/* ---------------------------------------------------------------------------
   Card buy controls — size selector, quantity, live total

   The original card let the customer pick a size and quantity without leaving
   the grid, showing one price that changed rather than a "$9.99 – $22.99"
   range. Everything here sits inside the card's 1.25rem gutter, matching the
   title and price above it.
   ------------------------------------------------------------------------ */

.card-buy { padding: 0 1.25rem; margin: 0; text-align: left; }

.card-buy__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 0.35rem;
}

.card-buy__select {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 4px);
  /* Own arrow: the native one differs per platform and sat badly against the
     card's cream background. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.card-buy__select:focus-visible { outline: 2px solid hsl(var(--forest)); outline-offset: 1px; }

/* Bottle note on the left, the selected price on the right. */
.card-buy__detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.6rem 0;
  padding: 0.5rem 0.65rem;
  background: hsl(var(--muted));
  border-radius: calc(var(--radius) - 4px);
  min-height: 2.4rem;
}
.card-buy__note { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.card-buy__price { font-size: 1.05rem; font-weight: 700; color: hsl(var(--forest)); white-space: nowrap; }
.card-buy__price .woocommerce-Price-amount { color: inherit; font-weight: inherit; }

.card-buy__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.card-buy__row .card-buy__label { margin-bottom: 0; }

.qty { display: flex; align-items: center; gap: 0.4rem; }
.qty__btn {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 4px);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.qty__btn:hover { background: hsl(var(--muted)); border-color: hsl(var(--forest) / 0.5); }
.qty__value {
  width: 2.5rem;
  height: 2rem;
  padding: 0;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: inherit;
  color: hsl(var(--foreground));
  background: transparent;
  border: 0;
}
.qty__value:focus-visible { outline: 2px solid hsl(var(--forest)); outline-offset: 1px; }

.card-buy__add { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.card-buy__add svg { flex-shrink: 0; }
.card-buy__total { font-variant-numeric: tabular-nums; }
.card-buy__total .woocommerce-Price-amount { color: inherit; }

/* The simple-product form has no dropdown, so it needs the gap the selector
   would otherwise have provided. */
.card-buy--simple { margin-top: 0.25rem; }

.card-buy.is-busy { opacity: 0.6; pointer-events: none; }

/* WooCommerce's own loop button is gone from these cards; this keeps any that
   fall back to it (grouped or unbuyable products) aligned with the forms. */
ul.products li.product .card-buy + .button { margin-top: 0.5rem; }

/* Badge floated on the card photograph, as the original card had it. */
.card-media { position: relative; line-height: 0; }
.badge--overlay {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  line-height: 1;
  box-shadow: var(--shadow-soft);
}
.badge--overlay-right { left: auto; right: 1rem; }

/* The card's other badge rule indents by the 1.25rem gutter, which pushed this
   one off its intended corner once it became absolutely positioned. */
ul.products li.product .badge--overlay { margin: 0; }

/* WooCommerce sizes loop images with `.woocommerce ul.products li.product a
   img { width:100% }`, and the home page sections have no `.woocommerce`
   ancestor to match that — so images sat at their natural width and a card
   wider than the photo (the two-column bundles) showed a bare gap beside it. */
ul.products li.product .card-media,
ul.products li.product .card-media a { display: block; }
ul.products li.product .card-media img { width: 100%; height: auto; }

/* On a photograph the badge needs the solid fill the original used — the tinted
   variants above are for section headings on a flat background, and green text
   on a 10% wash disappears over the bottles. */
.badge--overlay.badge--forest { background: hsl(var(--forest)); color: hsl(var(--cream)); }
.badge--overlay.badge--earth  { background: hsl(var(--earth-dark)); color: hsl(var(--cream)); }