:root {
  --jtx-heading-font: "Fraunces", sans-serif; 
  --jtx-body-font: "Outfit", serif;
}

:root {
  --jtx-header-top-height: 40px;
  --jtx-header-main-height: 100px;
}
@media (max-width: 991px) {
  :root {
    --jtx-header-top-height: 30px;
  --jtx-header-main-height: 70px;
  }
}

:root {
  --jtx-header-combined-height: calc(var(--jtx-header-top-height) + var(--jtx-header-main-height));
}




/* Sticky main header; top bar scrolls away */
#brx-header {
  position: sticky;
  top: calc(var(--jtx-header-top-height) * -1);
  z-index: 100;
}

html {
  scroll-padding-top: var(--jtx-header-main-height);
}



@media (min-width: 767.001px) {
  .home-hero-bg-right {
    position: absolute;
    right: 0;
    height: 100%;
    bottom: 0;
    top: 0;
    width: auto;
    max-width: none !important;
  }
}

@media (min-width: 767.001px) and (max-width: 1750px) {
  .home-hero-bg-right {
    right: -50px;
  }
}

@media (min-width: 767.001px) and (max-width: 1600px) {
  .home-hero-bg-right {
    right: auto;
    left: 18%;
  }
}



.woocommerce-mini-cart__total {
	margin-top: auto !important;
	margin-bottom: 20px !important;
}
.woocommerce-mini-cart-item {
	margin-bottom: 10px !important;
}
.brxe-product-add-to-cart .input-text {
	line-height: 2;
}
.single_add_to_cart_button {
  background: var(--secondary);
  border-radius: 100px;
  color: white;
  font-weight: 500;
}
form.cart .quantity {
  background: rgba(255,255,255,0.5);
}



/* Framework */

/*
 * Custom design tokens for this theme's layout framework.
 * Any var() referencing values not defined here (e.g. --space-m, spacing/
 * color scales) is provided by Bricks Builder's own Variables generator.
 */

:root {
  --grid-gap: var(--space-m);
  --grid-gap-1-2x: calc(var(--grid-gap) * 1.2);
  --grid-gap-1-5x: calc(var(--grid-gap) * 1.5);
  --grid-gap-2x: calc(var(--grid-gap) * 2);
  --grid-gap-3x: calc(var(--grid-gap) * 3);
  --grid-gap-4x: calc(var(--grid-gap) * 4);
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --content-width: 1370px; /* To be used to set Bricks container width. This is the default width of any boxed content. */
  --radius: 10px;
  --radius-s: calc(var(--radius) * 0.5);
}

:root {
  /* --- gutter config --- */
  --gutter-min: 20;       /* px at small screens */
  --gutter-max: 60;       /* px at large screens */
  --gutter-vw-min: 320;   /* viewport where min applies */
  --gutter-vw-max: 1370;  /* viewport where max applies */

  --gutter: clamp(
    (var(--gutter-min) / 16) * 1rem,
    calc(
      (var(--gutter-min) / 16) * 1rem +
      (var(--gutter-max) - var(--gutter-min)) *
      (100vw - (var(--gutter-vw-min) / 16) * 1rem) /
      (var(--gutter-vw-max) - var(--gutter-vw-min))
    ),
    (var(--gutter-max) / 16) * 1rem
  );

  /* --- section padding config --- */
  --section-pad-min: 48;      /* px at small screens */
  --section-pad-max: 90;      /* px at large screens */
  --section-pad-vw-min: 320;  /* viewport where min applies */
  --section-pad-vw-max: 1370; /* viewport where max applies */

  --section-padding: clamp(
    (var(--section-pad-min) / 16) * 1rem,
    calc(
      (var(--section-pad-min) / 16) * 1rem +
      (var(--section-pad-max) - var(--section-pad-min)) *
      (100vw - (var(--section-pad-vw-min) / 16) * 1rem) /
      (var(--section-pad-vw-max) - var(--section-pad-vw-min))
    ),
    (var(--section-pad-max) / 16) * 1rem
  );

  /* --- gaps --- */
  --container-gap: var(--space-l);   /* gap between a section's children (matches ACSS) */
  --content-gap: var(--space-m);      /* gap between items inside a container */
}

.brxe-section {
  gap: var(--container-gap);
  padding-block: var(--section-padding);
  padding-inline: var(--gutter);
}

.brxe-container {
  gap: var(--content-gap);
}
.brxe-block {
  gap: var(--content-gap);
}
.brxe-div {
	gap: var(--content-gap);
}
.brxe-text-basic a,
.brxe-text a,
.brxe-post-content p a {
	text-decoration: underline;
}

h1, .h1 { font-size: var(--h1); }
h2, .h2 { font-size: var(--h2); }
h3, .h3 { font-size: var(--h3); }
h4, .h4 { font-size: var(--h4); }
h5, .h5 { font-size: var(--h5); }
h6, .h6 { font-size: var(--h6); }

.h1--larger { font-size: calc(var(--h1) * 1.2); }
.h2--larger { font-size: calc(var(--h2) * 1.2); }
.h3--larger { font-size: calc(var(--h3) * 1.2); }
.h4--larger { font-size: calc(var(--h4) * 1.2); }


/* 
Emulate content width. To be used inside 100vw sections for an element that needs to
match width of Bricks container. Bricks containers use --content-width but will shrink
to accommodate parent section gutters. This variable needs to account for those gutters.
*/
:root {
	--emulate-content-width: min(var(--content-width), 100% - (2 * var(--gutter)));
}

/*
Link overlay ("stretched link"): makes a whole element one big click target.
Add .link-overlay to the <a> (or any ancestor that contains a single <a>). An
invisible ::after on the anchor stretches to fill the NEAREST ancestor that has
position: relative, so clicking anywhere in that ancestor follows the link.
IMPORTANT: set position: relative on the element you actually want clickable
(e.g. the card) — that element, NOT the one holding the class, defines how far
the overlay stretches. This is why the class does not position anything itself.
Give other links/buttons inside a higher z-index + position so they stay
clickable above the overlay. If the container holds more than one <a>, target
the specific link instead of the generic descendant selector.
*/
a.link-overlay::after,
.link-overlay a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bricks-button {
  border-radius: 100px;
  padding: 0.7em 2em;
  line-height: 1.2;
}

.bricks-button.btn--s {
  font-size: 80%;
}







/* =========================================================================
   Gutenberg content defaults — Bricks
   Scope: the "Post Content" element. Add/replace selectors in the :where()
   lists if you output content elsewhere (e.g. a Basic Text element).
   :where() keeps specificity at 0, so anything you write later overrides it.
   ========================================================================= */

:where(.brxe-post-content) {
  --flow:            1rem;   /* gap between blocks — the base unit       */
  --flow-tight:      0.4rem; /* list items, nested lists, captions       */
  /* Fallbacks only — Bricks' typography settings override these (they win
     on specificity over :where()). Check the computed value before assuming
     these are what's actually rendering. */
  --lh-body:         1.6;
  --lh-heading:      1.2;

  /* space ABOVE a heading: 1.75x the block gap, scaling up for big ones */
  --flow-heading:    max(calc(var(--flow) * 1.75), 1em);

  /* Optical correction, because margins are mathematical but eyes aren't.
     Body text carries half-leading of (lh - 1) / 2 * font-size above and
     below, so two paragraphs 1rem apart LOOK further apart than a heading
     and its paragraph — headings usually run a much tighter line-height.

       correction = ((lh_body - 1) / 2 * fs_body)
                  - ((lh_heading - 1) / 2 * fs_heading)

     Default below assumes body ~1.6 and headings ~1.0-1.2, which is the
     common builder setup. MUST carry a unit even when zero — a bare 0 makes
     the calc() below invalid and silently zeroes the margin. */
  --optical-heading: 0.35rem;
  --flow-after-head: calc(var(--flow) + var(--optical-heading));
  --rule:            1px solid rgb(0 0 0 / 0.12);
  --muted:           rgb(0 0 0 / 0.65);
}

/* -------------------------------------------------------------------------
   1. Vertical rhythm — top margins only, so it behaves the same in normal
      flow, flex and grid (no collapsing surprises).
   ---------------------------------------------------------------------- */
:where(.brxe-post-content) > *            { margin-block: 0; }
:where(.brxe-post-content) > * + *        { margin-block-start: var(--flow); }
:where(.brxe-post-content) > :first-child { margin-block-start: 0; }
:where(.brxe-post-content) > :last-child  { margin-block-end: 0; }

/* -------------------------------------------------------------------------
   2. Headings
      Above: 1.75rem floor, scaling to the heading's own size (h2 at 2rem
      gets 2rem, h1 at 2.5rem gets 2.5rem).
      Below: --flow plus an optical correction (see --optical-heading).
      NOTE this margin sits on the *following* element, so em here would
      resolve against that element, not the heading — keep it in rem.
   ---------------------------------------------------------------------- */
:where(.brxe-post-content) :is(h1, h2, h3, h4, h5, h6) {
  line-height: var(--lh-heading);
  text-wrap: balance;
}
:where(.brxe-post-content) > * + :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: var(--flow-heading);
}
:where(.brxe-post-content) > :is(h1, h2, h3, h4, h5, h6) + * {
  margin-block-start: var(--flow-after-head);
}
/* stacked headings (h2 straight into h3) shouldn't get the big gap */
:where(.brxe-post-content) > :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: var(--flow-after-head);
}

/* -------------------------------------------------------------------------
   2b. Heading sizes — shifted down one step
       The page title is the real h1, so an h1 inside post content should
       read as an h2, an h2 as an h3, and so on. Maps onto your existing
       --h1..--h6 scale.

       Deliberately NOT inside :where(): the theme's own `h2, .h2 { font-size:
       var(--h2) }` rules sit at element specificity, so a 0-specificity rule
       would win on source order alone. The .brxe-post-content prefix is
       stable regardless of load order.

       Second value in each var() is a fallback, so a site without the scale
       defined degrades instead of collapsing every heading to body size.

       Spacing follows automatically — --flow-heading is max(1.75x flow, 1em)
       and that em resolves against whatever size lands here.
   ---------------------------------------------------------------------- */
.brxe-post-content h1 { font-size: var(--h2, 2rem);    }
.brxe-post-content h2 { font-size: var(--h3, 1.6rem);  }
.brxe-post-content h3 { font-size: var(--h4, 1.3rem);  }
.brxe-post-content h4 { font-size: var(--h5, 1.15rem); }
.brxe-post-content h5 { font-size: var(--h6, 1rem);    }
.brxe-post-content h6 { font-size: var(--h6, 1rem);    }

/* HEADS UP on this site's scale: --h5 is 0.94rem and --h6 is 0.78rem, both
   SMALLER than body copy (--text-m, ~1.13rem). After the shift that makes an
   h4 render smaller than the paragraph beneath it. If you use h4-h6 in
   content, uncomment this floor. Trade-off: h4/h5/h6 then all land on the
   same size and separate by weight alone. */
/*
.brxe-post-content { --h-min: var(--text-m, 1rem); }
.brxe-post-content h4 { font-size: max(var(--h5, 1.15rem), var(--h-min)); }
.brxe-post-content h5 { font-size: max(var(--h6, 1rem),    var(--h-min)); }
.brxe-post-content h6 { font-size: var(--h-min); }
*/

/* -------------------------------------------------------------------------
   3. Paragraphs
   ---------------------------------------------------------------------- */
:where(.brxe-post-content) p {
  line-height: var(--lh-body);
  text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   4. Lists
   ---------------------------------------------------------------------- */
:where(.brxe-post-content) :is(ul, ol) {
  padding-inline-start: 1.5em;
  line-height: var(--lh-body);
}
:where(.brxe-post-content) :is(ul, ol) li + li { margin-block-start: var(--flow-tight); }
:where(.brxe-post-content) li > :is(ul, ol)    { margin-block-start: var(--flow-tight); }
:where(.brxe-post-content) li > p              { margin-block: 0; }
:where(.brxe-post-content) li::marker          { color: var(--muted); }

/* -------------------------------------------------------------------------
   5. Images
   ---------------------------------------------------------------------- */
:where(.brxe-post-content) img {
  max-width: 100%;
  height: auto;
}
:where(.brxe-post-content) :is(figure, .wp-block-image) img {
  display: block;
  width: 100%;
}

/* -------------------------------------------------------------------------
   6. Figures & captions (images, embeds, tables — all use figure)
   ---------------------------------------------------------------------- */
:where(.brxe-post-content) figure { margin: 0; }
:where(.brxe-post-content) :is(figcaption, .wp-element-caption) {
  margin-block-start: var(--flow-tight);
  font-size: 0.875em;
  line-height: 1.4;
  color: var(--muted);
}
:where(.brxe-post-content) .aligncenter { margin-inline: auto; }
:where(.brxe-post-content) .alignleft   { float: left;  margin: 0 var(--flow) var(--flow) 0; }
:where(.brxe-post-content) .alignright  { float: right; margin: 0 0 var(--flow) var(--flow); }

/* -------------------------------------------------------------------------
   7. Tables — the figure wrapper handles horizontal scroll on mobile
   ---------------------------------------------------------------------- */
:where(.brxe-post-content) .wp-block-table { overflow-x: auto; }
:where(.brxe-post-content) table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.95em;
  line-height: 1.4;
}
:where(.brxe-post-content) :is(th, td) {
  padding: 0.6em 0.8em;
  border-block-end: var(--rule);
  vertical-align: top;
}
:where(.brxe-post-content) th {
  font-weight: 600;
  border-block-end-width: 2px;
}
:where(.brxe-post-content) tbody tr:last-child :is(th, td) { border-block-end: 0; }
:where(.brxe-post-content) table caption {
  caption-side: bottom;
  margin-block-start: var(--flow-tight);
  font-size: 0.875em;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   OPTIONAL: a bit more air around media if plain --flow feels tight.
   Uncomment and it applies above figures, galleries, tables and embeds.
   ---------------------------------------------------------------------- */
/*
:where(.brxe-post-content) {
  --flow-media: 1.75rem;
}
:where(.brxe-post-content) > :is(figure, .wp-block-image, .wp-block-gallery, .wp-block-table, .wp-block-embed) {
  margin-block-start: var(--flow-media);
}
*/
















/* =========================================================
   Arty Possum: WooCommerce My Account styling
   v6. Replaces the previous version. Delete the old block first.

   Every rule is scoped to .woocommerce-account #brx-content.
   The #brx-content is there for specificity: Bricks ships
   woocommerce-layer.min.css with rules at the same weight as
   plain class selectors, and it loads after the child theme.
   Nothing here can reach cart, checkout, shop or products.

   Uses the token scale already on the site.
   ========================================================= */

/* --- 1. Wrapper --- */
.woocommerce-account #brx-content {
  padding-block: var(--space-xl);
  padding-inline: var(--space-m);
}

.woocommerce-account #brx-content > h1 {
  margin-block-end: var(--space-m);
}

/* --- 2. Sidebar + panel --- */
.woocommerce-account #brx-content > .woocommerce {
  display: flex;
  flex-direction: row;   /* Bricks switches this to column under 768px */
  flex-wrap: wrap;
  gap: var(--space-l);
  align-items: flex-start;
}

.woocommerce-account #brx-content .woocommerce-MyAccount-navigation {
  flex: 1 1 15rem;
  min-width: 0;
  --line: color-mix(in srgb, currentColor 12%, transparent);
}

.woocommerce-account #brx-content .woocommerce-MyAccount-content {
  flex: 999 1 24rem;
  min-width: 0;
}

/* --- 3. Account nav, as one bordered panel with dividers --- */
.woocommerce-account #brx-content .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  overflow: hidden;
}

.woocommerce-account #brx-content .woocommerce-MyAccount-navigation li + li {
  border-block-start: 1px solid var(--line);
}

.woocommerce-account #brx-content .woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--space-2xs) var(--space-xs);
  line-height: 1.35;      /* Bricks sets this to 60px */
  font-size: var(--text-s);
  color: inherit;
  text-decoration: none;
}

.woocommerce-account #brx-content .woocommerce-MyAccount-navigation a:hover {
  background: color-mix(in srgb, currentColor 5%, transparent);
}

.woocommerce-account #brx-content .woocommerce-MyAccount-navigation-link.is-active a {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--primary);
  color: var(--primary);
  font-weight: 600;
}

/* --- 3b. Below the sidebar breakpoint the nav takes the full
   width and the links stay stacked. --- */
@media (max-width: 50rem) {
  .woocommerce-account #brx-content .woocommerce-MyAccount-navigation {
    flex-basis: 100%;
  }
}

/* --- 4. Panel content flow.
   Gap after a heading stays tighter than the gap between blocks. --- */
.woocommerce-account #brx-content .woocommerce-MyAccount-content > * + * {
  margin-block-start: var(--space-s);
}

.woocommerce-account #brx-content .woocommerce-MyAccount-content > :is(h2, h3, h4) {
  margin-block-end: 0;
}

.woocommerce-account #brx-content .woocommerce-MyAccount-content > :is(h2, h3, h4) + * {
  margin-block-start: var(--space-2xs);
}

/* Woo prints an empty .woocommerce-notices-wrapper as the first child of
   every endpoint. Without this, the flow rule above indents whatever
   follows it and the panel no longer lines up with the top of the nav. */
.woocommerce-account #brx-content .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty + * {
  margin-block-start: 0;
}

/* --- 5. Addresses --- */
.woocommerce-account #brx-content .woocommerce-Addresses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.woocommerce-account #brx-content .woocommerce-Address {
  flex: 1 1 16rem;
  padding: var(--space-s);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--radius);
}

.woocommerce-account #brx-content .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-block-end: var(--space-2xs);
}

.woocommerce-account #brx-content .woocommerce-Address-title h2 {
  margin: 0;
  font-size: var(--h4);
}

.woocommerce-account #brx-content .woocommerce-Address-title a.edit {
  font-size: var(--text-s);
  white-space: nowrap;
}

.woocommerce-account #brx-content address {
  margin: 0;
  font-style: normal;
  line-height: 1.6;
}

/* --- 6. Tables: orders, downloads, order details --- */
.woocommerce-account #brx-content .woocommerce table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s);
}

.woocommerce-account #brx-content .woocommerce table th,
.woocommerce-account #brx-content .woocommerce table td {
  padding: var(--space-2xs) var(--space-xs);
  text-align: left;
  vertical-align: middle;
  border-block-end: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.woocommerce-account #brx-content .woocommerce table th {
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .woocommerce-account #brx-content .woocommerce table.shop_table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* --- 7. Notices --- */
.woocommerce-account #brx-content .woocommerce-message,
.woocommerce-account #brx-content .woocommerce-info,
.woocommerce-account #brx-content .woocommerce-error {
  margin-block-end: var(--space-m);
  padding: var(--space-xs) var(--space-s);
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  list-style: none;
  font-size: var(--text-s);
  flex-wrap: wrap;            /* Bricks makes these flex rows with nowrap */
  gap: var(--space-xs);
}

.woocommerce-account #brx-content .woocommerce-error {
  --primary: #c0392b;
}

/* --- 8. Forms: edit account, edit address, login --- */
.woocommerce-account #brx-content .woocommerce form .form-row {
  margin-block-end: var(--space-xs);
}

.woocommerce-account #brx-content .woocommerce form label {
  display: block;
  margin-block-end: 0.25rem;
  font-size: var(--text-s);
}

.woocommerce-account #brx-content .woocommerce form .form-row input,
.woocommerce-account #brx-content .woocommerce form .form-row select,
.woocommerce-account #brx-content .woocommerce form .form-row textarea {
  width: 100%;
}

.woocommerce-account #brx-content .woocommerce fieldset {
  margin-block-start: var(--space-m);
  padding: 0;
  border: 0;
}

.woocommerce-account #brx-content .woocommerce fieldset legend {
  margin-block-end: var(--space-2xs);
  padding: 0;
  font-size: var(--h4);
  font-weight: 600;
}

/* --- 9. Buttons --- */
.woocommerce-account #brx-content .woocommerce a.button,
.woocommerce-account #brx-content .woocommerce button.button,
.woocommerce-account #brx-content .woocommerce input.button {
  display: inline-block;
  padding: var(--space-2xs) var(--space-s);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--primary);
  color: #fff;
  font-size: var(--text-s);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  flex: 0 0 auto;   /* Woo notices are flex rows; stops the button being squeezed */
}

.woocommerce-account #brx-content .woocommerce a.button:hover,
.woocommerce-account #brx-content .woocommerce button.button:hover,
.woocommerce-account #brx-content .woocommerce input.button:hover {
  background: color-mix(in srgb, var(--primary) 85%, black);
  color: #fff;
}