/*
 * Specificity guard.
 *
 * The previous theme's companion plugin prints a large inline <style> block in
 * wp_head with element-level typography rules. Inline head styles win on source
 * order against a linked stylesheet at equal specificity, so the theme's own
 * type has to be declared one step stronger here.
 */

html body,
html body p,
html body li,
html body td,
html body th,
html body cite,
html body address,
html body input,
html body textarea,
html body select,
html body button,
html body a {
  font-family: var(--font-body);
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body h1 a,
html body h2 a,
html body h3 a,
html body .h-xl,
html body .h-lg,
html body .h-md,
html body .h-sm,
html body .brand__name,
html body .numeral,
html body .postcard__title,
html body .callout__title,
html body .footer__brand,
html body .pdp__title,
html body .ratingsum__score,
html body .feature__body h2,
html body .article__body h2,
html body .article__body h3,
html body .article__body blockquote,
html body ul.products li.product .woocommerce-loop-product__title,
html body .pdp__price .amount,
html body .pdp__price ins .amount,
html body .woo-page h1,
html body .woo-page h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

html body .brand__name,
html body .footer__brand {
  font-weight: 700;
  letter-spacing: 0.12em;
}

html body .card__title,
html body .trust__title,
html body .step__title,
html body .chain__title,
html body .spec__key,
html body .acc__btn,
html body .bundle__name,
html body .footer__head,
html body .eyebrow,
html body .postcard__kicker,
html body .chip,
html body .badge,
html body .btn,
html body .quote__name,
html body .article__body th,
html body #reviews .woocommerce-review__author {
  font-family: var(--font-body);
}

html body .eyebrow,
html body .footer__head,
html body .postcard__kicker,
html body .chain__step {
  text-transform: uppercase;
}

/* The old stack also restyled buttons and notices globally. */
html body .btn,
html body .woocommerce a.button,
html body .woocommerce button.button,
html body .woocommerce input.button,
html body .woocommerce .single_add_to_cart_button {
  text-transform: none;
  letter-spacing: normal;
  border-radius: var(--r-sm);
}

html body .woocommerce-info,
html body .woocommerce-message,
html body .woocommerce-error {
  font-family: var(--font-body);
  border-radius: var(--r-sm);
}

html body a {
  text-decoration: none;
}

html body .article__body a,
html body .article__sources a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Packshot frames ----------
 * The product photography is a jar shot on a white ground. Cropping it to fill
 * a frame cuts the jar and leaves white bands, so packshots get their own
 * treatment: a soft cream panel, the whole jar contained inside it.
 */

html body .frame--pack {
  background: radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, #F3EBE0 55%, #E4D7C6 100%);
}

html body .frame--pack img {
  object-fit: contain;
  padding: 9%;
  mix-blend-mode: multiply;
}

html body .pdp__main {
  background: radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, #F3EBE0 55%, #E4D7C6 100%);
}

html body .pdp__main img {
  object-fit: contain;
  padding: 8%;
  mix-blend-mode: multiply;
}

html body .pdp__thumb img {
  object-fit: contain;
  padding: 8%;
  background: #FFFFFF;
}

/* Keep the hero packshot from feeling like a floating cut-out. */
html body .hero__art .frame--pack {
  box-shadow: none;
  border: 1px solid rgba(198, 172, 143, 0.28);
}

/* ---------- Add-to-cart form, wherever it appears ----------
 * The buy box is rendered both on the product page and inside the front-page
 * product section, so these rules are scoped to the form rather than to .pdp.
 */

html body form.cart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

html body form.cart .quantity {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html body form.cart .single_add_to_cart_button,
html body form.cart button[type="submit"] {
  width: 100%;
  background: var(--accent);
  color: var(--ink);
  border: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  padding: 18px 24px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease;
}

html body form.cart .single_add_to_cart_button:hover,
html body form.cart button[type="submit"]:hover {
  background: var(--accent-dark);
  color: var(--ink);
}

html body form.cart .single_add_to_cart_button.disabled,
html body form.cart .single_add_to_cart_button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

html body p.stock {
  font-size: 14px;
  color: var(--earth);
  margin: 0;
  font-weight: 600;
}

html body p.stock.out-of-stock {
  color: var(--alert);
}

html body .bundles {
  margin-bottom: 2px;
}

/* WooCommerce prints its own "added to cart" link next to the button. */
html body .added_to_cart {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  color: var(--earth);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* WooCommerce marks the add-to-cart button as .alt, which the generic dark
 * button rule would otherwise claim. The buy button is the one gold thing.
 */
html body .woocommerce form.cart .single_add_to_cart_button,
html body .woocommerce form.cart button.button.alt,
html body form.cart .single_add_to_cart_button.alt {
  background: var(--accent);
  color: var(--ink);
}

html body .woocommerce form.cart .single_add_to_cart_button:hover,
html body .woocommerce form.cart button.button.alt:hover,
html body form.cart .single_add_to_cart_button.alt:hover {
  background: var(--accent-dark);
  color: var(--ink);
}

/* WooCommerce notices carry an ::before icon that collides with the text. */
html body .woocommerce-info,
html body .woocommerce-message,
html body .woocommerce-error {
  padding: 16px 20px 16px 46px;
  position: relative;
}

html body .woocommerce-info::before,
html body .woocommerce-message::before,
html body .woocommerce-error::before {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--earth);
}

html body .woocommerce-error::before {
  color: var(--alert);
}

html body .woocommerce-error {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* The lead benefit card spans two columns on wide screens. Once the grid
 * collapses to a single column that span would create a phantom second
 * column, so it has to be released explicitly.
 */
html body .card--wide {
  grid-column: span 2;
  background: var(--tint);
  border-color: var(--tint-line);
}

@media (max-width: 900px) {
  html body .card--wide {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  html body .grid-3 > *,
  html body .grid-4 > * {
    grid-column: auto;
  }
}

/* Long unbroken strings (order numbers, emails) must not widen the page. */
html body {
  overflow-wrap: break-word;
}

html body table {
  max-width: 100%;
}

/* ---------- Product factsheet ----------
 * A plain, scannable specification table. Search engines and answer engines
 * both read this shape well, so it stays a real table rather than a layout.
 */

html body .factsheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  border-top: 1px solid var(--line);
}

html body .factsheet th,
html body .factsheet td {
  text-align: left;
  vertical-align: top;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

html body .factsheet th {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
  width: 170px;
  padding-right: 18px;
}

html body .factsheet td {
  color: var(--earth);
}

@media (max-width: 600px) {
  html body .factsheet th,
  html body .factsheet td {
    display: block;
    width: auto;
    padding: 0;
  }
  html body .factsheet th {
    padding-top: 14px;
    border-bottom: 0;
  }
  html body .factsheet td {
    padding-bottom: 14px;
  }
}