/* GREGO — site-wide chrome: design tokens, base typography, utility bar, nav, footer,
   reusable helpers, and WooCommerce overrides. Loaded on every page. */

:root {
  --bg:        #faf8f1;
  --paper:     #f1ece0;
  --ink:       #15140f;
  --ink-soft:  #3a3833;
  --muted:     #6b6960;
  --rule:      #e6dfcd;
  --olive:     #7a8132;
  --olive-dk:  #5b6224;
  --olive-lt:  #9aa252;
  --gold:      #c9b677;
  --white:     #ffffff;

  --serif:  "Cormorant Garamond", "Cormorant", Georgia, serif;
  --script: "Pinyon Script", "Allura", cursive;
  --sans:   "Karla", ui-sans-serif, system-ui, sans-serif;

  --maxw: 1280px;
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a  { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Container for page content (used by content-page.php). */
.grego-page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 60px 32px 80px;
}
.grego-page-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: 0.005em;
  margin: 0 0 32px;
}

/* ---------- Nav ---------- */
.nav {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 6px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
/* Centre links sit between the far-left brand logo and the right-hand actions. */
.nav-links {
  display: flex;
  justify-content: center;
  gap: 36px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav-links a {
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--olive-dk);
  border-bottom-color: var(--olive);
}
/* Language picker + cart, pinned to the right edge. */
.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  justify-self: start;
}
.brand-logo {
  display: block;
  height: 116px;
  width: auto;
  max-width: 100%;
}
.brand--footer .brand-logo {
  height: 68px;
}

/* Language picker — nav-integrated dropdown with flag + native name */
.nav-lang {
  position: relative;
  display: inline-block;
  margin-left: 18px;
}
.nav-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 10px;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.nav-lang-toggle:hover,
.nav-lang.is-open .nav-lang-toggle {
  color: var(--olive-dk);
  border-color: var(--rule);
}
/* Inline SVG flag (see grego_flag_svg). Fixed box so it renders identically on
   every OS — emoji flags do not work on Windows. */
.nav-lang-flag {
  display: inline-block;
  width: 22px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15,14,10,0.10);
  overflow: hidden;
}
.nav-lang-caret {
  width: 9px;
  height: 6px;
  transition: transform .2s;
  opacity: .7;
}
.nav-lang.is-open .nav-lang-caret { transform: rotate(180deg); }

.nav-lang-menu {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: 0 8px 24px rgba(15,14,10,0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 60;
}
.nav-lang.is-open .nav-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: background .15s, color .15s;
}
.nav-lang-menu a:hover { background: var(--paper); color: var(--ink); }
.nav-lang-menu a.is-active { color: var(--olive-dk); font-weight: 600; }
.nav-lang-menu a.no-xl { opacity: .45; }

/* Cart — borderless icon+label, olive on hover */
.nav-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
  padding: 8px 6px;
  color: var(--ink);
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color .2s;
  position: relative;
}
.nav-cart:hover { color: var(--olive-dk); }
.nav-cart:hover .nav-cart-icon { transform: scale(1.08); }
.nav-cart-icon { width: 22px; height: 22px; flex-shrink: 0; transition: transform .2s; }
.nav-cart-label { line-height: 1; }
.nav-cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--olive);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.nav-cart-count[data-count="0"] { display: none; }

/* WP admin bar — sticky offset */
#wpadminbar + .nav { top: 32px; }
@media (max-width: 782px) {
  #wpadminbar + .nav { top: 46px; }
}

/* ---------- Reusable helpers ---------- */
.eyebrow {
  font-family: var(--script);
  font-size: 32px;
  color: var(--olive-dk);
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}
.heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin: 0 0 18px;
}
.lede {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 56ch;
}
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 28px;
  color: var(--olive);
}
.divider span { width: 60px; height: 1px; background: currentColor; opacity: .5; }
.divider svg { width: 26px; height: 14px; }
.divider.left { justify-content: flex-start; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  transition: all .2s;
  text-decoration: none;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

.btn-olive {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--olive);
  color: #fff;
  border: 1px solid var(--olive);
  transition: all .2s;
  text-decoration: none;
  cursor: pointer;
}
.btn-olive:hover { background: var(--paper); color: var(--olive-dk); border-color: var(--olive); }

/* ---------- Newsletter strip ---------- */
.newsletter {
  background: var(--ink);
  color: #efe9d5;
  padding: 80px 32px;
}
.newsletter-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.newsletter h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 38px;
  margin: 0 0 8px;
  color: #fff;
}
.newsletter p { color: #c5beae; margin: 0; }
.newsletter-form {
  display: flex;
  border-bottom: 1px solid #585546;
  align-items: center;
}
.newsletter-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 0;
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0.04em;
}
.newsletter-form input::placeholder { color: #88826f; }
.newsletter-form button {
  background: transparent;
  border: none;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 14px 0 14px 18px;
}

/* ---------- Footer ---------- */
.footer {
  background: #0f0e0a;
  color: #aea798;
  padding: 80px 32px 40px;
  font-size: 14px;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid #2a261d;
}
.footer h4 {
  font-family: var(--sans);
  color: #efe9d5;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 600;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 10px; }
.footer a:hover { color: var(--gold); }
.footer-brand p { color: #87806f; max-width: 30ch; margin: 16px 0 0; }
.footer-bottom {
  max-width: var(--maxw);
  margin: 30px auto 0;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6e6857;
  letter-spacing: 0.08em;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom-links { display: flex; gap: 24px; }
.footer-social {
  display: flex; gap: 14px; margin-top: 24px;
}
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid #3a342a;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: all .2s;
}
.footer-social a:hover { background: var(--olive); border-color: var(--olive); color: #fff; }
.footer-social svg { width: 14px; height: 14px; }

/* ────────────────────────────────────────────────────────────────────────
   WooCommerce — kill default blues, use brand palette site-wide
   ──────────────────────────────────────────────────────────────────────── */

/* Page background for WC + WP pages other than the homepage */
body.woocommerce,
body.woocommerce-page,
body.wp-singular { background: var(--bg); }

/* Organic certification block on the single product page */
.grego-cert {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 22px 0 6px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
}
.grego-cert-logos {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.grego-cert-logos img {
  height: 52px;
  width: auto;
  display: block;
}
.grego-cert-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--sans);
  line-height: 1.4;
}
.grego-cert-code {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.grego-cert-origin {
  font-size: 13px;
  color: var(--muted);
}

/* ── WC primary buttons (Proceed to checkout / Place order / Add to cart on shop)
   The cart page uses CLASSIC shortcode templates (.button.alt, .checkout-button),
   not the block-based selectors. Both are covered here. ── */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce input[type="submit"].button.alt,
.woocommerce a.checkout-button,
.wc-proceed-to-checkout a.checkout-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wp-block-button .wp-block-button__link,
.wc-block-components-button.wc-block-components-button:not(.wc-block-components-button--link),
/* Shop archive / category loop "Add to cart" — WC renders these without .alt,
   so the .alt selector above misses them and Blocksy's default blue shows. */
.woocommerce a.add_to_cart_button:not(.added_to_cart) {
  background: var(--olive) !important;
  background-color: var(--olive) !important;
  border-color: var(--olive) !important;
  color: #fff !important;
  border-radius: 0 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  padding: 16px 28px !important;
  text-decoration: none !important;
  transition: background .2s, border-color .2s !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce input[type="submit"].button.alt:hover,
.woocommerce a.checkout-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-button .wp-block-button__link:hover,
.wc-block-components-button.wc-block-components-button:not(.wc-block-components-button--link):hover,
.woocommerce a.add_to_cart_button:not(.added_to_cart):hover {
  /* Match the .btn-olive / .hero-cta hover treatment: cream invert. */
  background: var(--paper) !important;
  background-color: var(--paper) !important;
  border-color: var(--olive) !important;
  color: var(--olive-dk) !important;
}

/* ── WC secondary buttons (Apply coupon, Update cart) — lighter olive ── */
.woocommerce button.button:not(.alt):not(.checkout-button),
.woocommerce input.button:not(.alt),
.woocommerce input[type="submit"].button:not(.alt),
.woocommerce a.button:not(.alt):not(.checkout-button):not(.product_type_simple):not(.added_to_cart),
.wc-block-components-totals-coupon__button,
button.wc-block-cart__update-cart-button {
  background: var(--olive-lt) !important;
  background-color: var(--olive-lt) !important;
  border-color: var(--olive-lt) !important;
  color: #fff !important;
  border-radius: 0 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  padding: 14px 24px !important;
  text-decoration: none !important;
  transition: background .2s, border-color .2s !important;
}
.woocommerce button.button:not(.alt):not(.checkout-button):hover,
.woocommerce input.button:not(.alt):hover,
.woocommerce a.button:not(.alt):not(.checkout-button):not(.product_type_simple):not(.added_to_cart):hover,
.wc-block-components-totals-coupon__button:hover,
button.wc-block-cart__update-cart-button:hover {
  background: var(--olive) !important;
  background-color: var(--olive) !important;
  border-color: var(--olive) !important;
}

/* Disabled state for secondary buttons (e.g. Update cart before edits) */
.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.woocommerce input.button:disabled,
.woocommerce input.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Input fields in WC (quantity, coupon, checkout address) */
.wc-block-components-text-input input,
.wc-block-components-quantity-selector input,
.wc-block-components-totals-coupon__input,
input.wc-block-formatted-money-amount,
.woocommerce-cart-form input[type="text"],
.woocommerce-cart-form input[type="number"],
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce textarea,
.woocommerce select {
  border-color: var(--rule) !important;
  border-radius: 0 !important;
  font-family: var(--sans) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-quantity-selector input:focus,
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  border-color: var(--olive) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(122,129,50,0.18);
}

/* Page headings + WC block headings use the serif */
.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-checkout h1,
.woocommerce-cart h1,
.woocommerce-checkout h1,
.woocommerce-MyAccount-content h1,
.woocommerce-account h1,
.wc-block-components-title,
.wp-block-post-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0.005em;
}

/* Links in WC content default to olive (not WP blue) */
.woocommerce a:not(.button):not(.btn-ghost):not(.btn-olive):not(.wp-block-button__link),
.woocommerce-MyAccount-content a {
  color: var(--olive-dk);
}
.woocommerce a:not(.button):not(.btn-ghost):not(.btn-olive):not(.wp-block-button__link):hover {
  color: var(--ink);
}

/* WC notices (success, info, error) */
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
  background: var(--paper) !important;
  border-color: var(--olive) !important;
  color: var(--ink) !important;
}
.woocommerce-message::before,
.wc-block-components-notice-banner.is-success svg { color: var(--olive) !important; fill: var(--olive) !important; }

/* Quantity stepper buttons */
.wc-block-components-quantity-selector__button {
  border-color: var(--rule) !important;
  color: var(--ink) !important;
  background: var(--bg) !important;
}

/* ───── Single-product quantity stepper (Blocksy classic .quantity) ─────
   Blocksy paints the +/- glyphs white (invisible on our cream background at
   rest) and hovers them to the theme's blue button colour. Repaint to the
   olive brand and give the glyphs a visible rest colour. The block-cart
   stepper is handled by the rule above. */
.woocommerce div.product .quantity[data-type] {
  --quantity-arrows-initial-color: var(--olive-dk);
  --quantity-arrows-hover-color: #fff;
  --quantity-hover-color: var(--olive);
  --theme-form-field-border-focus-color: var(--olive);
}
.woocommerce div.product .quantity[data-type=type-2] .ct-increase,
.woocommerce div.product .quantity[data-type=type-2] .ct-decrease {
  --quantity-initial-color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.woocommerce div.product .quantity[data-type] input[type="number"]:focus {
  border-color: var(--olive) !important;
  box-shadow: 0 0 0 2px rgba(122, 129, 50, 0.18) !important;
  outline: none !important;
}

/* ───── Single product: shared "about our oil" intro (under category) ───── */
.grego-shop-intro {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
.grego-shop-intro p { margin: 0 0 12px; }
.grego-shop-intro-note {
  font-style: italic;
  color: var(--muted);
  font-size: 14px;
}

/* Merged Opis tab: heading that separates the technical spec table from the
   product description above it. */
.grego-details-heading {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 22px;
  margin: 28px 0 14px;
  color: var(--ink);
}
.grego-desc { margin-bottom: 8px; }

/* Block cart/checkout — kill default WC blue accent. The block UI exposes
   --wc-product-element-button-text-color / --wp--preset--color--vivid-cyan-blue
   for badges, prices, and link-style buttons; override site-wide. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-components-sidebar,
.wc-block-components-order-summary,
.wc-block-cart,
.wc-block-checkout {
  --wc-product-element-button-text-color: var(--olive-dk);
  --wp--preset--color--vivid-cyan-blue: var(--olive);
}

/* Order summary item qty badge (the circled "1/2/3" beside product images) */
.wc-block-components-order-summary-item__quantity {
  background: var(--olive) !important;
  color: #fff !important;
  border-color: var(--olive) !important;
  box-shadow: 0 0 0 2px var(--bg) !important;
}

/* Inline per-line prices in the order summary */
.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item .wc-block-components-product-price,
.wc-block-components-order-summary-item .wc-block-formatted-money-amount,
.wc-block-components-product-price__value,
.wc-block-components-product-price ins {
  color: var(--ink) !important;
}

/* "Add coupon" disclosure + similar link-style buttons in block cart/checkout */
.wc-block-components-totals-coupon a,
.wc-block-components-panel__button,
.wc-block-components-button.wc-block-components-button--link {
  color: var(--olive-dk) !important;
}
.wc-block-components-totals-coupon a:hover,
.wc-block-components-panel__button:hover,
.wc-block-components-button.wc-block-components-button--link:hover {
  color: var(--ink) !important;
}

/* Focus rings in block forms (inputs, radio, checkbox) */
.wc-block-components-text-input input:focus,
.wc-block-components-checkbox__input:focus,
.wc-block-components-radio-control__input:focus {
  border-color: var(--olive) !important;
  box-shadow: 0 0 0 2px rgba(122,129,50,0.22) !important;
  outline: none !important;
}
/* Checked radio/checkbox swatches */
.wc-block-components-checkbox__input:checked,
.wc-block-components-radio-control__input:checked {
  background-color: var(--olive) !important;
  border-color: var(--olive) !important;
}

/* Product detail page on the shop side gets a less-jarring container */
.woocommerce-page main, .wp-singular main {
  padding-top: 40px;
}

/* "View cart" link injected after AJAX add-to-cart on the loop —
   matches our olive button language */
.product-buy.added_to_cart,
a.added_to_cart,
.added_to_cart.wc-forward {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--olive) !important;
  color: #fff !important;
  border: 1px solid var(--olive) !important;
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  margin-left: 8px;
  transition: background .2s, border-color .2s;
  text-decoration: none !important;
}
.product-buy.added_to_cart::after,
a.added_to_cart::after {
  content: " →";
  margin-left: 2px;
}
.product-buy.added_to_cart:hover,
a.added_to_cart:hover {
  background: var(--olive-dk) !important;
  border-color: var(--olive-dk) !important;
  color: #fff !important;
}

/* The "added" originally-clicked button gets a subtle confirmed look */
.product-buy.added {
  border-color: var(--olive) !important;
  color: var(--olive-dk) !important;
}

/* WooCommerce cart "Coming soon" overlay had its own styling — none here */

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  /* Hide the centre text links on tablet/mobile, but keep the brand logo on the
     far left and the language picker + cart accessible on the right. */
  .nav-links { display: none; }
  .newsletter-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav-inner { padding: 14px 18px; gap: 12px; }
  .nav-cart { padding: 8px 12px; }
  .nav-cart-label { display: none; }
  .nav-lang { margin-left: 6px; }
  .nav-lang-toggle { padding: 6px 8px; }
  .newsletter-form { flex-direction: column; align-items: stretch; }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; }
  .grego-page { padding: 40px 20px 60px; }
}