/* Just theme styles. Palette, type and buttons come from theme.json; this file handles layout and the few custom components. */

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--wp--preset--color--navy); color: #fff; }
:focus-visible { outline: 2px solid var(--wp--preset--color--navy); outline-offset: 3px; }
img { height: auto; display: block; }
*, *::before, *::after { box-sizing: border-box; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > main { flex: 1 0 auto; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.just-main > * + * { margin-block-start: 0; }

/* Header */
.just-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.just-header .wp-block-group { margin: 0; }
.just-header__nav { gap: 1.5rem; align-items: center; }
.just-header__buy a, .just-cart {
  text-decoration: none; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.just-header__buy a { font-weight: 700; color: var(--wp--preset--color--navy); }
.just-cart { font-weight: 500; color: var(--wp--preset--color--muted); }
.just-header__buy a:hover, .just-cart:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.just-cart__count {
  display: inline-block; min-width: 1.35em; margin-left: 0.15em; padding: 0.1em 0.35em;
  background: var(--wp--preset--color--navy); color: #fff; font-weight: 700; text-align: center;
}

/* Once the hero buy box scrolls away the header link becomes the button, from tablet up.
   On phones the sticky bar below does that job instead. */
@media (min-width: 782px) {
  .just-header__buy a {
    display: inline-block; padding: 0.55rem 1.1rem;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  body.is-buy-hidden .just-header__buy a {
    background: var(--wp--preset--color--navy); color: #fff; text-decoration: none;
  }
  body.is-buy-hidden .just-header__buy a:hover { background: var(--wp--preset--color--navy-dark); text-decoration: none; }
}

/* Sticky buy bar: phones only, and only once the hero buy box has gone. */
.just-sticky-buy { display: none; }
@media (max-width: 781px) {
  body.is-buy-hidden .just-sticky-buy {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 0.85rem 1.25rem;
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px);
    border-top: 1px solid var(--wp--preset--color--line);
  }
  body.is-buy-hidden .just-main { padding-bottom: 5rem; }
  .just-sticky-buy form { margin: 0; }
  .just-sticky-buy__price { font-size: 1.125rem; font-weight: 800; color: var(--wp--preset--color--navy); white-space: nowrap; }
  .just-sticky-buy__button { border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .just-header__buy a { transition: none; }
}

/* Section rhythm */
.just-section { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.just-section--sand { background: var(--wp--preset--color--sand); }
.just-eyebrow {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); margin-bottom: 1rem;
}
.just-lead { max-width: 38ch; }
/* The hero lead is written as two lines and should break exactly there, so it is sized to fit
   the longer of them rather than left to wrap wherever the column ends. */
.just-hero .just-lead {
  max-width: 48ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.5;
  text-wrap: pretty;
}
/* Headings and eyebrows stay flush left inside wide sections. The extra selectors outrank the
   constrained-layout rule WordPress prints inline, which would otherwise centre them. */
/* Section children keep WordPress's centred content column, so nothing here touches max-width:
   a narrower element inside that column would be centred within it and drift away from the text
   beside it. `text-wrap: balance` shapes the heading lines instead. */
.just-main .just-section > h2 { text-wrap: balance; }
.just-hero h1, .just-section h2 { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* Hero */
.just-hero { padding-top: clamp(2rem, 6vw, 5rem); padding-bottom: clamp(2rem, 6vw, 5rem); }
.just-hero h1 { margin-bottom: 1.25rem; max-width: 12ch; }
/* The packshot sits level with the eyebrow rather than centred against a much taller column.
   It is never scaled beyond its own pixels, so it stays sharp. */
.just-hero__img { margin-top: 0; }
.just-hero__img img { width: 100%; max-width: 431px; max-height: min(70vh, 548px); object-fit: contain; object-position: top; }
@media (max-width: 781px) {
  /* Promise, price and button come first on a phone; the packshot follows. */
  .just-hero h1 { max-width: none; }
  .just-hero__img img { max-height: 34vh; }
  .just-buy { margin-top: 1.5rem; }
}
/* Between a large phone and a portrait tablet there is room to let the packshot breathe. */
@media (min-width: 560px) and (max-width: 781px) {
  .just-hero__img img { max-height: 46vh; }
}

/* Buy box */
.just-buy { box-sizing: border-box; margin-top: 2rem; padding: 1.75rem; background: var(--wp--preset--color--sand); max-width: 28rem; }
.just-buy__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--wp--preset--color--navy); }
.just-buy__unit { font-size: 0.8125rem; font-weight: 600; color: var(--wp--preset--color--muted); }
.just-buy__delivery { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--wp--preset--color--muted); }
.just-buy__price del { color: var(--wp--preset--color--muted); font-weight: 500; }
.just-buy__vat { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.just-buy__form { margin-top: 0; }
/* Price and quantity share one line, so the button below can take the full width. */
.just-buy__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }

/* Quantity stepper. The number input alone works if the script does not run. */
.just-qty { display: flex; align-items: center; border: 1px solid var(--wp--preset--color--line); background: #fff; flex: 0 0 auto; }
.just-qty__input {
  width: 2.75rem; padding: 0.4rem 0; border: 0; background: transparent; text-align: center;
  font: inherit; font-size: 0.9375rem; font-weight: 700; color: var(--wp--preset--color--ink);
  -moz-appearance: textfield; appearance: textfield;
}
.just-qty__input::-webkit-outer-spin-button,
.just-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.just-qty.is-enhanced .just-qty__input { width: 1.9rem; }
.just-qty__step {
  width: 2rem; padding: 0.4rem 0; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 1rem; line-height: 1; color: var(--wp--preset--color--muted);
}
.just-qty__step:hover:not([disabled]) { color: var(--wp--preset--color--navy); }
.just-qty__step[disabled] { opacity: 0.3; cursor: not-allowed; }
.just-qty__step:hover { background: var(--wp--preset--color--line); }
.just-buy__button { width: 100%; white-space: nowrap; }
/* Shown only when the typed quantity was trimmed, so it has to be noticed the moment it appears. */
.just-buy__in-cart {
  margin: -0.25rem 0 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wp--preset--color--navy);
}
.just-qty__hint {
  margin: -0.25rem 0 0.85rem;
  padding: 0.6rem 0.75rem;
  background: #fff;
  border-left: 2px solid var(--wp--preset--color--navy);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--wp--preset--color--ink);
  animation: just-hint-in 0.25s ease-out;
}
@keyframes just-hint-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .just-buy__in-cart {
  margin: -0.25rem 0 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wp--preset--color--navy);
}
.just-qty__hint { animation: none; }
}
.just-buy__button { width: 100%; cursor: pointer; border: 0; font-family: inherit; }
.just-buy__trust { display: flex; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--line); font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.just-buy__trust span + span::before { content: "·"; margin: 0 0.5rem; }
.just-buy__soldout { font-weight: 700; color: var(--wp--preset--color--navy); }

/* Benefits */
.just-benefits h3 { margin-bottom: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--navy); color: var(--wp--preset--color--navy); }

/* Benefits: photograph on the left, claims on the right. The image keeps its own proportions,
   so the bottle is never cropped the way the old full-width band cropped it. */
.just-benefits__img { margin: 0; }
.just-benefits__img img { width: auto; max-width: 100%; max-height: 76vh; margin-inline: auto; }
.just-benefits h2 { margin-bottom: 2.25rem; max-width: 16ch; }
.just-claims { margin: 0; display: grid; gap: 1.75rem; }
.just-claims > div { padding-top: 1.1rem; border-top: 1px solid var(--wp--preset--color--navy); }
.just-claims dt {
  margin-bottom: 0.4rem;
  font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--wp--preset--color--navy);
}
.just-claims dd { margin: 0; max-width: 46ch; }
@media (max-width: 781px) {
  .just-benefits__img img { max-height: 54vh; }
  .just-claims { gap: 1.5rem; }
}

/* Ingredients */
.just-ingredients h2 { margin-bottom: 2.5rem; }
/* The certification figures read as one line of facts rather than three large numbers. */
.just-facts-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0;
  margin: 0 0 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--wp--preset--color--line);
  font-size: 1.0625rem;
  color: var(--wp--preset--color--navy);
}
.just-facts-line span + span::before {
  content: "\00b7";
  margin: 0 0.75rem;
  color: var(--wp--preset--color--muted);
}
.just-ingredients__list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 3rem;
}
.just-ingredients__list dt {
  margin-bottom: 0.35rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--wp--preset--color--navy);
}
.just-ingredients__list dd { margin: 0; max-width: 42ch; }
.just-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 3rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.just-inci { margin-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--line); }
.just-inci summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.15rem 0;
  font-weight: 600;
  color: var(--wp--preset--color--navy);
}
.just-inci summary::-webkit-details-marker { display: none; }
.just-inci summary::after {
  content: "+";
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--wp--preset--color--muted);
}
.just-inci[open] summary::after { content: "\2013"; }
.just-inci__body { padding-bottom: 1.75rem; }
.just-inci__note { max-width: 62ch; margin-bottom: 1rem; }
.just-inci__list { max-width: 74ch; font-size: 0.875rem; line-height: 1.7; color: var(--wp--preset--color--muted); }
.just-inci__key { margin-top: 0.85rem; font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
/* The ingredient pairs are short enough to hold two columns well below the layout breakpoint;
   only a phone needs them stacked. */
@media (max-width: 559px) {
  .just-ingredients__list { grid-template-columns: 1fr; gap: 1.5rem; }
  .just-facts-line { font-size: 1rem; }
  .just-facts-line span + span::before { margin: 0 0.5rem; }
}

/* Steps: three points strung along one rule, so the routine reads as a sequence rather than
   three paragraphs that happen to be side by side. */
.just-steps { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.just-steps h2 { margin-bottom: 3.5rem; }
.just-steps__track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}
/* The rule the numbers sit on. */
.just-steps__track::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--wp--preset--color--line);
}
.just-steps__step { position: relative; padding-top: 2.25rem; }
.just-steps__num {
  position: absolute;
  top: 0;
  left: 0;
  padding-right: 0.85rem;
  background: var(--wp--preset--color--ground);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.15;
  color: var(--wp--preset--color--navy);
}
.just-steps__title {
  margin: 0 0 0.4rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--navy);
}
.just-steps__step p { margin: 0; max-width: 34ch; }
.just-steps__payoff {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wp--preset--color--navy);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--navy);
}
@media (max-width: 781px) {
  .just-steps__track { grid-template-columns: 1fr; gap: 2rem; }
  /* A vertical rule reads better than a horizontal one when the steps stack. */
  .just-steps__track::before { top: 0; bottom: 0; left: 0.75rem; right: auto; width: 1px; height: auto; }
  .just-steps__step { padding-top: 0; padding-left: 2.75rem; }
  .just-steps__num { top: 0.1rem; padding: 0.15rem 0.5rem 0.15rem 0; }
  .just-steps__payoff { margin-top: 2.5rem; }
}

/* FAQ */
.just-faq .wp-block-group { margin-inline: 0; }
.just-faq .wp-block-details { margin: 0; padding: 0; }
.just-faq .wp-block-details:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.just-faq .wp-block-details { border-top: 1px solid var(--wp--preset--color--line); }
.just-faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.15rem 0;
  font-weight: 600; font-size: 1.0625rem; color: var(--wp--preset--color--navy);
}
.just-faq summary:hover { color: var(--wp--preset--color--navy-dark); }
.just-faq summary::-webkit-details-marker { display: none; }
.just-faq summary::after { content: "+"; flex: 0 0 auto; font-weight: 400; font-size: 1.375rem; line-height: 1; color: var(--wp--preset--color--muted); }
.just-faq details[open] summary::after { content: "–"; }
.just-faq details > *:not(summary) { margin-top: 0; margin-bottom: 1.25rem; max-width: 62ch; color: var(--wp--preset--color--ink); }

/* CTA */
.just-cta img { width: auto; max-width: min(100%, 896px); max-height: 70vh; margin-inline: auto; }

/* Footer */
.just-footer { border-top: 1px solid var(--wp--preset--color--line); padding-top: 3rem; padding-bottom: 3rem; }
.just-footer__row { gap: 1.5rem 3rem; }
.just-footer__brand { font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; color: var(--wp--preset--color--navy); }
.just-footer__links a { text-decoration: none; margin-right: 1.5rem; font-size: 0.9375rem; }
.just-footer__links a:last-child { margin-right: 0; }
.just-footer__links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.just-footer__legal { margin-top: 1.5rem; font-size: 0.8125rem; color: var(--wp--preset--color--muted); }

/* Inner pages (legal, cart, checkout) */
.just-page { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--60); }
.just-page h1 { margin-bottom: 1.5rem; }
.just-page h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.5rem; margin-bottom: 0.75rem; }
.just-page .entry-content > * + * { margin-block-start: 1rem; }

/* WooCommerce: notices and block components, kept square and navy */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-error, .woocommerce-info {
  list-style: none; margin: 0 0 1.5rem; padding: 1rem 1.25rem;
  border: 1px solid var(--wp--preset--color--line); border-left: 3px solid var(--wp--preset--color--navy);
  background: var(--wp--preset--color--sand); border-radius: 0; font-size: 0.9375rem;
}
/* The stock success tick is a rounded green circle; square it and bring it into the palette. */
.wc-block-components-notice-banner { border-radius: 0 !important; background: var(--wp--preset--color--sand) !important; border-color: var(--wp--preset--color--line) !important; border-left: 3px solid var(--wp--preset--color--navy) !important; }
.wc-block-components-notice-banner > svg { border-radius: 0 !important; background: var(--wp--preset--color--navy) !important; fill: #fff !important; }
.woocommerce-order h1, .woocommerce-order-received h1 { font-size: var(--wp--preset--font-size--xx-large); }
.woocommerce-order table, .woocommerce-order-details table, .woocommerce-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.woocommerce-order table th, .woocommerce-order table td, .woocommerce-table th, .woocommerce-table td {
  text-align: left; padding: 0.85rem 0; border-top: 1px solid var(--wp--preset--color--line);
}
.woocommerce-order ul.woocommerce-order-overview { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 1.5rem 0; padding: 0; }
.woocommerce-order ul.woocommerce-order-overview li { font-size: 0.9375rem; }
.woocommerce-error { border-color: #b42318; color: #b42318; }
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  border-radius: 0 !important; background: var(--wp--preset--color--navy) !important; color: #fff !important;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
}
.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: var(--wp--preset--color--navy-dark) !important; }
.wc-block-components-checkout-step__title, .wc-block-cart__totals-title { color: var(--wp--preset--color--navy); }
.wc-block-components-product-name { font-weight: 700; }
.wc-block-components-text-input input, .wc-block-components-select select, .wc-block-components-radio-control__option {
  border-radius: 0 !important;
}
.wc-block-components-sidebar-layout .wc-block-components-panel { border-color: var(--wp--preset--color--line); }