/* ==========================================================================
   P&J Prints — design system
   Dark chrome (header/footer) + light content.
   The black/green identity is kept, but at type and button scale rather than
   as a full-page background.
   ========================================================================== */

/* ---------- Fonts (self-hosted; no third-party CDN, keeps the privacy
     policy honest) ---------- */
@font-face {
  font-family: 'PJ Display';
  src: url('../fonts/archivo-latin.woff2') format('woff2-variations'),
       url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PJ Text';
  src: url('../fonts/inter-latin.woff2') format('woff2-variations'),
       url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Ink — near-black with a faint green cast so it sits with the logo */
  --pj-ink:        #0C0F0E;
  --pj-ink-soft:   #151A18;
  --pj-ink-line:   #272E2A;
  --pj-ink-muted:  #9AA7A0;

  /* Lime — brand energy. Reserved for dark surfaces and small accents. */
  --pj-lime:       #35E01F;
  --pj-lime-hi:    #57FF3D;

  /* Deep greens — legible on light surfaces */
  --pj-green:      #0B7A2B;
  --pj-green-deep: #06541D;
  --pj-green-tint: #EBF7EC;
  --pj-green-line: #C8E6CD;

  /* Neutrals */
  --pj-paper:  #FFFFFF;
  --pj-shell:  #F4F6F3;
  --pj-shell-2:#EAEEE8;
  --pj-line:   #E2E6E0;
  --pj-text:   #14181A;
  --pj-muted:  #5B6560;

  --pj-radius:    14px;
  --pj-radius-sm: 9px;
  --pj-radius-lg: 22px;

  --pj-shadow:    0 1px 2px rgba(12,15,14,.05), 0 8px 24px -12px rgba(12,15,14,.16);
  --pj-shadow-lg: 0 2px 4px rgba(12,15,14,.05), 0 24px 56px -20px rgba(12,15,14,.26);

  --pj-max: 1220px;
  --pj-gutter: clamp(18px, 4vw, 40px);

  --pj-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

/* Note: do NOT paint .ast-container — Astra reuses that class on the header
   and footer row wrappers, so a blanket rule washes the dark chrome out. */
body,
.site,
#content,
.site-content {
  background: var(--pj-shell);
}

body {
  font-family: 'PJ Text', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--pj-text);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: 'PJ Display', 'PJ Text', ui-sans-serif, system-ui, sans-serif;
  color: var(--pj-ink);
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.12;
  text-wrap: balance;
  /* Astra's global typography forces uppercase headings. Sentence case
     reads better at display sizes; uppercase is kept for eyebrows, buttons
     and labels where it does real work. */
  text-transform: none;
}

h1 { font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 1.15rem + 2.1vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); }

p { color: var(--pj-text); }

a { color: var(--pj-green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--pj-green-deep); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--pj-green);
  outline-offset: 2px;
  border-radius: 4px;
}

img { height: auto; }

/* Shared layout helpers ------------------------------------------------- */
.pj-wrap {
  width: 100%;
  max-width: var(--pj-max);
  margin-inline: auto;
  padding-inline: var(--pj-gutter);
}
.pj-section { padding-block: clamp(52px, 7vw, 104px); }
.pj-section--tight { padding-block: clamp(38px, 5vw, 68px); }
.pj-section--paper { background: var(--pj-paper); }
.pj-section--shell { background: var(--pj-shell); }
.pj-section--ink   { background: var(--pj-ink); color: #EFF3F0; }
.pj-section--ink :is(h1,h2,h3,h4,p,li) { color: inherit; }
.pj-section--ink h2 { color: #fff; }

/* Eyebrow ---------------------------------------------------------------- */
.pj-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: 'PJ Display', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pj-green);
  margin: 0 0 .85rem;
}
.pj-eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--pj-green);
  flex: none;
}
.pj-section--ink .pj-eyebrow { color: var(--pj-lime); }
.pj-section--ink .pj-eyebrow::before { background: var(--pj-lime); }

.pj-section-head { max-width: 62ch; margin-bottom: clamp(28px, 3.5vw, 52px); }
.pj-section-head.is-centred { margin-inline: auto; text-align: center; }
.pj-section-head.is-centred .pj-eyebrow { justify-content: center; }
.pj-section-head p {
  font-size: 1.06rem;
  color: var(--pj-muted);
  margin: .8rem 0 0;
}
.pj-section--ink .pj-section-head p { color: var(--pj-ink-muted); }

/* ---------- Buttons ----------------------------------------------------
   Primary is ink with lime type — the logo's own combination, used at
   button scale where it reads as confident rather than shouty.
   -------------------------------------------------------------------- */
.pj-btn,
.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,
.wp-block-button__link,
.nf-form-cont input[type="button"],
.nf-form-cont input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: 'PJ Display', sans-serif;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1;
  padding: 1.02em 1.7em;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--pj-ink);
  color: var(--pj-lime);
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--pj-ease), background-color .18s var(--pj-ease),
              color .18s var(--pj-ease), border-color .18s var(--pj-ease),
              box-shadow .18s var(--pj-ease);
  box-shadow: var(--pj-shadow);
}
.pj-btn:hover, .pj-btn:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wp-block-button__link:hover,
.nf-form-cont input[type="button"]:hover,
.nf-form-cont input[type="submit"]:hover {
  background: var(--pj-ink-soft);
  color: var(--pj-lime-hi);
  transform: translateY(-2px);
  box-shadow: var(--pj-shadow-lg);
}

/* Secondary — outlined ink */
.pj-btn--ghost {
  background: transparent;
  color: var(--pj-ink);
  border-color: var(--pj-ink);
  box-shadow: none;
}
.pj-btn--ghost:hover, .pj-btn--ghost:focus {
  background: var(--pj-ink);
  color: var(--pj-lime);
}

/* Solid green — used where the ink button would clash (e.g. on ink bands) */
.pj-btn--lime {
  background: var(--pj-lime);
  color: var(--pj-ink);
  border-color: var(--pj-lime);
}
.pj-btn--lime:hover, .pj-btn--lime:focus {
  background: var(--pj-lime-hi);
  color: var(--pj-ink);
}

.pj-btn--light {
  background: var(--pj-paper);
  color: var(--pj-ink);
}
.pj-btn--light:hover, .pj-btn--light:focus {
  background: #fff;
  color: var(--pj-green-deep);
}

.pj-btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.32);
  box-shadow: none;
}
.pj-btn--outline-light:hover, .pj-btn--outline-light:focus {
  background: rgba(255,255,255,.08);
  border-color: #fff;
  color: #fff;
}

.pj-btn--sm { padding: .78em 1.25em; font-size: .84rem; }
.pj-btn--lg { padding: 1.15em 2.1em; font-size: 1rem; }
.pj-btn--block { width: 100%; }

/* Text link with arrow */
.pj-link {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: 'PJ Display', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  color: var(--pj-green);
  text-decoration: none;
}
.pj-link svg { transition: transform .18s var(--pj-ease); }
.pj-link:hover svg { transform: translateX(4px); }
.pj-section--ink .pj-link { color: var(--pj-lime); }

/* ==========================================================================
   HEADER — ink chrome so the lime logo keeps its punch
   ========================================================================== */

/* Announcement bar (WooCommerce store notice, restyled) */
.woocommerce-store-notice,
p.demo_store {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: .6rem var(--pj-gutter) !important;
  background: var(--pj-ink-soft) !important;
  color: #DCE6E0 !important;
  font-family: 'PJ Display', sans-serif !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  border-bottom: 1px solid var(--pj-ink-line) !important;
  box-shadow: none !important;
  z-index: 5 !important;
}
.woocommerce-store-notice a,
p.demo_store a { color: var(--pj-lime) !important; }
.woocommerce-store-notice__dismiss-link { color: var(--pj-ink-muted) !important; font-size: .72rem; }

/* Astra header shell — the builder nests several wrappers, and each one
   paints its own background, so they all have to be named. */
.site-header,
#masthead,
.main-header-bar,
.ast-header-break-point .main-header-bar,
.ast-primary-header-bar,
.ast-above-header-bar,
.ast-below-header-bar,
.site-above-header-wrap,
.site-primary-header-wrap,
.site-below-header-wrap,
.ast-mobile-header-wrap,
.site-header .ast-builder-grid-row-container,
.site-header .ast-container {
  background: var(--pj-ink) !important;
  box-shadow: none !important;
}
.site-header { border-bottom: 1px solid var(--pj-ink-line) !important; }
.site-above-header-wrap { border-bottom: 1px solid var(--pj-ink-line) !important; }
.ast-primary-header-bar { padding-block: .35rem; }

/* Above-header strip reads as a thin utility bar */
.site-above-header-wrap :is(.ast-header-html, .ast-header-html *) {
  font-size: .8rem;
  color: var(--pj-ink-muted);
}
.site-above-header-wrap a { color: var(--pj-lime) !important; }

/* Header text + nav */
.site-header :is(a, .menu-link, .ast-header-html, .ast-builder-menu a) { color: #E8EEEA; }

.main-header-menu .menu-link,
.ast-builder-menu .main-header-menu .menu-link,
.site-header .main-navigation a {
  font-family: 'PJ Display', sans-serif;
  font-weight: 600;
  font-size: .93rem;
  letter-spacing: .01em;
  color: #E8EEEA;
  position: relative;
}
.main-header-menu .menu-item > .menu-link::after {
  content: '';
  position: absolute;
  left: 1rem; right: 1rem; bottom: .55rem;
  height: 2px;
  background: var(--pj-lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--pj-ease);
}
.main-header-menu .menu-item:hover > .menu-link::after,
.main-header-menu .current-menu-item > .menu-link::after,
.main-header-menu .current-menu-ancestor > .menu-link::after { transform: scaleX(1); }
.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link { color: #fff; }

/* Submenus stay light for readability */
.main-header-menu .sub-menu,
.ast-desktop .main-header-menu .sub-menu {
  background: var(--pj-paper);
  border: 1px solid var(--pj-line);
  border-radius: var(--pj-radius-sm);
  box-shadow: var(--pj-shadow-lg);
  padding: .4rem;
  overflow: hidden;
}
.main-header-menu .sub-menu .menu-link {
  color: var(--pj-text);
  border-radius: 6px;
  padding: .6rem .8rem;
}
.main-header-menu .sub-menu .menu-link::after { display: none; }
.main-header-menu .sub-menu .menu-link:hover {
  background: var(--pj-green-tint);
  color: var(--pj-green-deep);
}

/* Logo sizing */
.site-header .custom-logo-link img,
.ast-site-identity img { max-height: 62px; width: auto; }

/* Header icons (cart / account / search) */
.site-header .ast-icon svg,
.site-header .ast-header-account-wrap svg,
.site-header .ast-cart-menu-wrap svg { fill: #E8EEEA; color: #E8EEEA; }
.site-header .ast-cart-menu-wrap:hover svg { fill: var(--pj-lime); }
.ast-site-header-cart .ast-cart-menu-wrap .count,
.ast-cart-menu-wrap .ast-count {
  background: var(--pj-lime) !important;
  color: var(--pj-ink) !important;
  border-color: var(--pj-lime) !important;
  font-weight: 700;
}

/* Mobile toggle */
.ast-mobile-menu-trigger-minimal,
.menu-toggle.ast-mobile-menu-trigger-minimal { color: #E8EEEA !important; background: transparent !important; }
.ast-header-break-point .main-navigation .sub-menu,
.ast-header-break-point .main-header-menu {
  background: var(--pj-ink-soft) !important;
}
.ast-header-break-point .main-header-menu .menu-link {
  color: #E8EEEA !important;
  border-bottom: 1px solid var(--pj-ink-line);
}

/* Header quote CTA (added via functions.php) */
.pj-header-cta {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: 'PJ Display', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  padding: .72em 1.25em;
  border-radius: 999px;
  background: var(--pj-lime);
  color: var(--pj-ink) !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s var(--pj-ease), transform .18s var(--pj-ease);
}
.pj-header-cta:hover { background: var(--pj-lime-hi); transform: translateY(-1px); color: var(--pj-ink) !important; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer,
.ast-small-footer,
.site-below-footer-wrap,
.site-above-footer-wrap,
.site-primary-footer-wrap,
.site-footer .ast-builder-grid-row-container,
.site-footer .ast-container {
  background: var(--pj-ink) !important;
  color: #C7D2CC !important;
  border: 0 !important;
}
.site-footer :is(a, p, li, span, h2, h3, h4) { color: #C7D2CC; }
.site-footer :is(h2, h3, h4) { color: #fff; }
.site-footer a:hover { color: var(--pj-lime); }

.pj-footer { background: var(--pj-ink); color: #C7D2CC; }
.pj-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(48px, 6vw, 80px);
}
.pj-footer__logo img { max-width: 168px; height: auto; }
.pj-footer__blurb { color: var(--pj-ink-muted); font-size: .94rem; margin: 1rem 0 1.4rem; max-width: 34ch; }
.pj-footer h4 {
  font-family: 'PJ Display', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.1rem;
}
.pj-footer ul { list-style: none; margin: 0; padding: 0; }
.pj-footer li + li { margin-top: .62rem; }
.pj-footer a { color: #C7D2CC; text-decoration: none; font-size: .95rem; }
.pj-footer a:hover { color: var(--pj-lime); }
.pj-footer__contact li { display: flex; gap: .7rem; font-size: .95rem; color: #C7D2CC; align-items: flex-start; }
.pj-footer__contact svg { flex: none; margin-top: .22rem; color: var(--pj-lime); }
.pj-footer__bar {
  border-top: 1px solid var(--pj-ink-line);
  padding-block: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: .84rem;
  color: var(--pj-ink-muted);
}
.pj-footer__bar a { font-size: .84rem; color: var(--pj-ink-muted); }
.pj-pay { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; }
.pj-pay span {
  font-size: .66rem;
  font-family: 'PJ Display', sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .38em .6em;
  border: 1px solid var(--pj-ink-line);
  border-radius: 5px;
  color: var(--pj-ink-muted);
}
@media (max-width: 900px) { .pj-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pj-footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   PAGE HEADER (interior pages)
   ========================================================================== */
.pj-pagehead {
  background: var(--pj-ink);
  color: #fff;
  padding-block: clamp(48px, 6vw, 88px);
  position: relative;
  overflow: hidden;
}
.pj-pagehead::after {
  content: '';
  position: absolute;
  inset: auto -10% -60% 55%;
  height: 220px;
  background: radial-gradient(closest-side, rgba(53,224,31,.22), transparent 70%);
  pointer-events: none;
}
.pj-pagehead h1 { color: #fff; margin: 0; position: relative; }
.pj-pagehead p { color: var(--pj-ink-muted); max-width: 60ch; margin: 1rem 0 0; position: relative; font-size: 1.05rem; }
.pj-crumbs { position: relative; font-size: .82rem; color: var(--pj-ink-muted); margin-bottom: .9rem; }
.pj-crumbs a { color: var(--pj-ink-muted); text-decoration: none; }
.pj-crumbs a:hover { color: var(--pj-lime); }

/* ==========================================================================
   CARDS
   ========================================================================== */
.pj-card {
  background: var(--pj-paper);
  border: 1px solid var(--pj-line);
  border-radius: var(--pj-radius);
  padding: clamp(20px, 2.4vw, 30px);
  transition: transform .2s var(--pj-ease), box-shadow .2s var(--pj-ease), border-color .2s var(--pj-ease);
}
.pj-card:hover { transform: translateY(-3px); box-shadow: var(--pj-shadow-lg); border-color: var(--pj-green-line); }
.pj-card h3 { margin: 0 0 .5rem; }
.pj-card p { margin: 0; color: var(--pj-muted); font-size: .95rem; }

.pj-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--pj-green-tint);
  color: var(--pj-green-deep);
  margin-bottom: 1.05rem;
}
.pj-section--ink .pj-icon { background: rgba(53,224,31,.12); color: var(--pj-lime); }

.pj-grid { display: grid; gap: clamp(14px, 1.8vw, 24px); }
.pj-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pj-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pj-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .pj-grid--4 { grid-template-columns: repeat(2, 1fr); } .pj-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pj-grid--2, .pj-grid--3, .pj-grid--4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   WOOCOMMERCE
   ========================================================================== */
.woocommerce-page .site-content,
.woocommerce .site-content { background: var(--pj-shell); }

/* Product cards */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--pj-paper);
  border: 1px solid var(--pj-line);
  border-radius: var(--pj-radius);
  overflow: hidden;
  padding: 0 0 1.05rem;
  transition: transform .2s var(--pj-ease), box-shadow .2s var(--pj-ease), border-color .2s var(--pj-ease);
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--pj-shadow-lg);
  border-color: var(--pj-green-line);
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  margin: 0;
  border-radius: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--pj-shell-2);
}

/* Astra nests the card contents in .astra-shop-summary-wrap, so padding has
   to go on that wrapper once — padding individual elements (as price and
   button had) leaves the title, category and rating flush and the card edges
   ragged. Making the wrapper the flex column is also what lets margin-top:auto
   on the button actually work, so prices and buttons line up across a row. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap { margin: 0; }

.woocommerce ul.products li.product .astra-shop-summary-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1rem 1.05rem 1.1rem;
  /* No flex `gap` here: a gap also applies *after* the button, and Astra
     appends a screen-reader <span> as the final child — between them the
     button ended up floating a few pixels off the bottom of the card, by a
     different amount depending on whether the product had a rating row.
     Explicit margins instead, and the sr-only span taken out of flow. */
}
/* Two things stop `margin-top:auto` from pinning the button:
   a clearfix ::after on the wrapper counts as a flex item and sits *below*
   the button, and any inherited flex-grow on a child eats the free space
   before auto margins get it. Neutralise both. */
.woocommerce ul.products li.product .astra-shop-summary-wrap::before,
.woocommerce ul.products li.product .astra-shop-summary-wrap::after {
  content: none !important;
  display: none !important;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap > * {
  flex: 0 0 auto;
}

/* Astra assigns flex `order` to the card parts, which pushed the star rating
   *below* the add-to-cart button — so the rating floated at the card's
   bottom edge and the button never reached it. Pin an explicit reading
   order: category, title, rating, price, then the button last so its
   margin-top:auto can hold it against the bottom of every card. */
.woocommerce ul.products li.product .astra-shop-summary-wrap > .ast-woo-product-category { order: 1; }
.woocommerce ul.products li.product .astra-shop-summary-wrap > .ast-loop-product__link,
.woocommerce ul.products li.product .astra-shop-summary-wrap > .woocommerce-loop-product__title,
.woocommerce ul.products li.product .astra-shop-summary-wrap > h2 { order: 2; }
.woocommerce ul.products li.product .astra-shop-summary-wrap > .review-rating,
.woocommerce ul.products li.product .astra-shop-summary-wrap > .star-rating { order: 3; }
.woocommerce ul.products li.product .astra-shop-summary-wrap > .price { order: 4; }
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button,
.woocommerce ul.products li.product .astra-shop-summary-wrap > .ast-loop-product-cart-wrap { order: 5; }

.woocommerce ul.products li.product .astra-shop-summary-wrap > .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Astra sets alignment per breakpoint (desktop-align-center /
   mobile-align-left), which is why the cards looked different on a phone.
   One alignment everywhere — long product titles read far better ranged
   left, especially in a narrow two-up mobile grid. */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce ul.products li.product.desktop-align-center,
.woocommerce ul.products li.product.tablet-align-center,
.woocommerce ul.products li.product.mobile-align-center,
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .review-rating { text-align: left !important; }

.woocommerce ul.products li.product .ast-woo-product-category {
  margin-bottom: .3rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pj-muted);
  margin: 0;
  line-height: 1.35;
}

.woocommerce ul.products li.product .ast-loop-product__link,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-family: 'PJ Display', sans-serif;
  font-size: .95rem !important;
  font-weight: 700;
  line-height: 1.34;
  color: var(--pj-ink);
  padding: 0;
  margin: 0;
  display: block;
  text-decoration: none;
}

.woocommerce ul.products li.product .review-rating { margin: .3rem 0 0; min-height: 0; }
.woocommerce ul.products li.product .star-rating {
  margin: 0;
  font-size: .76rem;
  color: var(--pj-green);
}

.woocommerce ul.products li.product .price {
  padding: 0;
  margin: .15rem 0 .85rem;
  color: var(--pj-green-deep) !important;
  font-family: 'PJ Display', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
}
.woocommerce ul.products li.product .price del { color: var(--pj-muted) !important; font-weight: 500; opacity: .7; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Pinned to the bottom so every button in a row sits on the same line */
.woocommerce ul.products li.product .button {
  margin: auto 0 0;
  width: 100%;
  font-size: .8rem;
  padding: .9em 1em;
}

/* Shop-page subcategory tiles reuse li.product but have no summary wrap */
.woocommerce ul.products li.product-category > a { display: block; }
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  font-family: 'PJ Display', sans-serif;
  font-size: .95rem !important;
  padding: 1rem 1.05rem 1.1rem;
  margin: 0;
  text-align: left;
}
.woocommerce ul.products li.product-category .count {
  display: block;
  background: none;
  color: var(--pj-muted);
  font-family: 'PJ Text', sans-serif;
  font-size: .78rem;
  font-weight: 400;
  padding: .2rem 0 0;
}

/* Sale badge */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background: var(--pj-lime) !important;
  color: var(--pj-ink) !important;
  font-family: 'PJ Display', sans-serif;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .42em .95em;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  top: 12px;
  left: 12px;
  right: auto;
  margin: 0;
}


/* Shop toolbar */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-size: .9rem;
  color: var(--pj-muted);
}
.woocommerce .woocommerce-ordering select,
.woocommerce-page select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont textarea,
.nf-form-cont select {
  border: 1px solid var(--pj-line);
  border-radius: var(--pj-radius-sm);
  background: var(--pj-paper);
  padding: .8em .95em;
  font-family: inherit;
  font-size: .96rem;
  color: var(--pj-text);
}
.woocommerce form .form-row input.input-text:focus,
.nf-form-cont input:focus,
.nf-form-cont textarea:focus {
  border-color: var(--pj-green);
  box-shadow: 0 0 0 3px rgba(11,122,43,.14);
  outline: none;
}

/* Single product */
.woocommerce div.product .product_title { margin-bottom: .5rem; }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--pj-green-deep);
  font-family: 'PJ Display', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--pj-line);
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 1.6rem 0 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: 'PJ Display', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  color: var(--pj-muted);
  padding: .9rem 0;
  display: block;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--pj-ink);
  border-bottom-color: var(--pj-lime);
}
.woocommerce div.product form.cart .variations label {
  font-family: 'PJ Display', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  color: var(--pj-ink);
}

/* Messages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top: 0;
  border-left: 3px solid var(--pj-green);
  background: var(--pj-green-tint);
  border-radius: var(--pj-radius-sm);
  color: var(--pj-ink);
  font-size: .95rem;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--pj-green); }
.woocommerce-error { border-left-color: #C0392B; background: #FDECEA; }
.woocommerce-error::before { color: #C0392B; }

/* Cart / checkout tables */
.woocommerce table.shop_table {
  border: 1px solid var(--pj-line);
  border-radius: var(--pj-radius);
  overflow: hidden;
  background: var(--pj-paper);
}
.woocommerce table.shop_table th {
  font-family: 'PJ Display', sans-serif;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pj-ink);
}
.woocommerce-checkout #payment { background: var(--pj-shell-2); border-radius: var(--pj-radius); }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: .4rem; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 9px;
  min-width: 42px;
  padding: .6rem .5rem;
  font-family: 'PJ Display', sans-serif;
  font-weight: 700;
  background: var(--pj-paper);
  border: 1px solid var(--pj-line);
  color: var(--pj-ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--pj-ink);
  color: var(--pj-lime);
  border-color: var(--pj-ink);
}

/* Wide tables must scroll inside their own box, never push the page */
.woocommerce table.shop_table_responsive,
.pj-scroll-x { overflow-x: auto; min-width: 0; }

/* ==========================================================================
   NINJA FORMS
   ========================================================================== */
.nf-form-cont .nf-form-title h3 {
  font-family: 'PJ Display', sans-serif;
  font-size: 1.3rem;
}
.nf-form-cont .nf-field-label label {
  font-family: 'PJ Display', sans-serif;
  font-weight: 600;
  font-size: .88rem;
  color: var(--pj-ink);
}
.nf-form-cont .nf-error-msg { color: #C0392B; font-size: .84rem; }

/* ==========================================================================
   Motion
   ========================================================================== */
.pj-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--pj-ease), transform .6s var(--pj-ease);
}
.pj-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .pj-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Third-party trims
   ========================================================================== */
/* WhatsApp bubble — tone it into the palette */
.qlwapp .qlwapp-toggle { box-shadow: var(--pj-shadow-lg); }

/* Astra bits we don't want */
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post { border-radius: var(--pj-radius); }

/* The Astra header builder already carries an "Explore The Range" button.
   Two pill CTAs side by side in a dark bar just compete — the contextual
   "Get a quote" is the one that earns its place, so hide the builder's. */
.site-header .ast-builder-button-wrap,
.site-header .ast-custom-button-link { display: none !important; }
.ast-header-break-point .site-header .ast-builder-button-wrap { display: none !important; }

/* Mobile: the CTA needs to survive the collapsed menu */
@media (max-width: 921px) {
  .pj-menu-cta { padding: .8rem 1rem; }
  .pj-menu-cta .pj-header-cta { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Astra global palette override
   Astra's accent (--ast-global-color-0) is set to pure #00FF00 in the
   Customizer, and it feeds links, active nav items, Woo accents and block
   colours. Overriding the tokens here retunes everything Astra draws at
   once, instead of chasing individual selectors — and stops the neon
   reappearing on pages this theme doesn't template.
   ========================================================================== */
:root,
body {
  --ast-global-color-0: #0B7A2B;  /* accent / links */
  --ast-global-color-1: #06541D;  /* accent hover */
  --ast-global-color-2: #14181A;  /* headings */
  --ast-global-color-3: #14181A;  /* body text */
  --ast-global-color-4: #FFFFFF;  /* primary bg */
  --ast-global-color-5: #F4F6F3;  /* secondary bg */
  --ast-global-color-8: #0C0F0E;
}

/* Active / hovered nav items: white type with a lime underline reads far
   better on the dark bar than Astra's neon-green text. */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link,
.main-header-menu .current_page_item > .menu-link,
.ast-builder-menu .main-header-menu .menu-item.current-menu-item > .menu-link,
.main-header-menu .menu-link:hover,
.main-header-menu .menu-item:hover > .menu-link {
  color: #FFFFFF !important;
}
.site-header .main-header-menu .sub-menu .current-menu-item > .menu-link {
  color: var(--pj-green-deep) !important;
  background: var(--pj-green-tint);
}

/* ==========================================================================
   Mobile chrome
   On a 375×812 screen the promo bar, the "email us" strip and the header
   were together eating ~170px before any content — the headline never made
   the first screen. Tighten the bars, shrink the toggle, and let the copy
   lead.
   ========================================================================== */
@media (max-width: 921px) {

  .woocommerce-store-notice,
  p.demo_store {
    padding: .45rem .8rem !important;
    font-size: .66rem !important;
    letter-spacing: .04em !important;
    line-height: 1.35 !important;
  }

  /* The email strip duplicates the footer and contact page — it costs more
     than it earns on a phone. */
  .site-above-header-wrap { display: none !important; }

  .site-header .custom-logo-link img,
  .ast-site-identity img { max-height: 44px; }

  .ast-primary-header-bar { padding-block: .15rem; }

  /* Astra's mobile toggle: match the palette instead of the old neon */
  .ast-header-break-point .menu-toggle,
  .ast-mobile-menu-trigger-fill,
  .ast-mobile-menu-trigger-outline {
    background: transparent !important;
    border-color: var(--pj-ink-line) !important;
    color: #E8EEEA !important;
    padding: .5em .8em !important;
  }
  .ast-header-break-point .menu-toggle .ast-mobile-svg { fill: #E8EEEA !important; }
  .ast-header-break-point .menu-toggle-icon,
  .ast-mobile-menu-buttons .menu-toggle span { color: #E8EEEA !important; }

  .site-header .ast-cart-menu-wrap,
  .site-header .ast-addon-cart-wrap { color: #E8EEEA !important; border-color: var(--pj-ink-line) !important; }
  .site-header .ast-addon-cart-wrap svg,
  .site-header .ast-cart-menu-wrap svg { fill: #E8EEEA !important; }
}



/* ==========================================================================
   Content container
   Astra sets `.site-content .ast-container { display:flex }` at every width
   and only switches it to `flex-direction:column` below 921px. Templates in
   this theme output a page header plus a <main> as siblings, so on desktop
   those two became side-by-side flex columns. These pages lay out their own
   full-bleed sections, so the container is reverted to a plain block.
   ========================================================================== */
.pjp-tpl #content > .ast-container,
.pjp-tpl .site-content > .ast-container {
  display: block !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}
.pjp-tpl #primary,
.pjp-tpl .entry-content > *:not(.pj-wrap) { max-width: none; }

/* Cart / checkout / account keep Astra's own template (see
   pjp_keep_woo_templates) so the transaction path is untouched — they only
   take the new palette and typography. */
.woocommerce-cart .site-content,
.woocommerce-checkout .site-content,
.woocommerce-account .site-content { background: var(--pj-shell); }

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content { padding-block: clamp(24px, 3vw, 48px); }

/* WooCommerce Cart/Checkout blocks */
.wc-block-components-button:not(.is-link) {
  background: var(--pj-ink) !important;
  color: var(--pj-lime) !important;
  border-radius: 999px !important;
  font-family: 'PJ Display', sans-serif !important;
  font-weight: 700 !important;
}
.wc-block-components-button:not(.is-link):hover { background: var(--pj-ink-soft) !important; }
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount { color: var(--pj-green-deep); font-weight: 700; }
.wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-text-input input {
  border-radius: var(--pj-radius-sm) !important;
  border-color: var(--pj-line) !important;
}
.wc-block-components-panel,
.wc-block-components-order-summary {
  border-radius: var(--pj-radius);
}

/* The quote CTA inside Astra's off-canvas mobile menu */
#ast-mobile-popup .pj-menu-cta {
  padding: 1rem 0 0;
  border-top: 1px solid var(--pj-ink-line);
  margin-top: .5rem;
}
#ast-mobile-popup .pj-menu-cta .pj-header-cta {
  width: 100%;
  justify-content: center;
  padding: .95em 1.25em;
  font-size: .95rem;
}
#ast-mobile-popup .pj-menu-cta .menu-link,
#ast-mobile-popup .pj-menu-cta::after { border: 0; }