: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: 1700px) {
  .home-hero-bg-right {
    right: auto;
    left: 40%;
    margin-left: -300px;
  }
}
@media (min-width: 767.001px) and (max-width: 1400px) {
  .home-hero-bg-right {
    right: auto;
    left: 45%;
    margin-left: -300px;
  }
}
@media (min-width: 767.001px) and (max-width: 900px) {
  .home-hero-bg-right {
    right: auto;
    left: 55%;
    margin-left: -300px;
  }
}



.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%;
}