/*
 * Brickwork for FluentCart: structural defaults.
 *
 * Two tiers, so your own styling always wins without !important:
 *
 *  - Anything on an element's root (the classes that sit next to your own
 *    global / ACSS / BEM classes) is wrapped in :where() and has zero
 *    specificity.
 *  - Inner parts that are real form controls (quantity input and buttons,
 *    variant options, the dropdown, gallery thumbnails) use two classes.
 *    That is just enough to hold their shape against Bricks' base resets for
 *    button / input / select when Bricks' cascade layers are switched off,
 *    and still loses to every style control, which is scoped by element ID.
 *
 * This file is loaded before Bricks' own styles, so on a tie yours win.
 */

/* ---------------------------------------------------------------- shared */

.bwfc-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bwfc-atc.is-hidden,
.bwfc-buy.is-hidden,
.bwfc-qty.is-hidden,
.bwfc-price__variant[hidden],
.bwfc-cart__count[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------- buttons */

:where(.bwfc-atc, .bwfc-buy) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}

:where(.bwfc-atc, .bwfc-buy).bwfc-full {
  display: flex;
  width: 100%;
}

:where(.bwfc-atc):where(:disabled, .is-unavailable),
:where(.bwfc-buy):where(.is-unavailable) {
  cursor: not-allowed;
  opacity: 0.55;
}

:where(.bwfc-btn__icon) {
  flex-shrink: 0;
  line-height: 1;
}

:where(.bwfc-btn__icon) svg {
  width: 1em;
  height: 1em;
}

.bwfc-btn__spinner {
  display: none;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bwfc-spin 0.7s linear infinite;
}

.bwfc-atc.is-loading {
  pointer-events: none;
}

.bwfc-atc.is-loading .bwfc-btn__spinner {
  display: inline-block;
}

/* While loading, the spinner takes the icon's place. */
.bwfc-atc.is-loading .bwfc-btn__icon {
  display: none;
}

/* "Hide text while loading": keep the button's width, show only the spinner. */
.bwfc-atc--spinner-only.is-loading .bwfc-btn__text {
  visibility: hidden;
}

.bwfc-atc--spinner-only.is-loading .bwfc-btn__spinner {
  position: absolute;
  inset: 0;
  margin: auto;
}

@keyframes bwfc-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bwfc-btn__spinner {
    animation-duration: 1.6s;
  }
}

/* -------------------------------------------------------------- quantity */

:where(.bwfc-qty) {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4em;
}

:where(.bwfc-qty__control) {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid currentColor;
  border-radius: 4px;
  overflow: hidden;
}

.bwfc-qty .bwfc-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5em;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

:where(.bwfc-qty.is-unavailable .bwfc-qty__control) {
  opacity: 0.55;
}

.bwfc-qty .bwfc-qty__btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.bwfc-qty .bwfc-qty__input {
  width: 3.5em;
  min-height: 2.5em;
  line-height: 1.2;
  box-shadow: none;
  padding: 0 0.25em;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.bwfc-qty__input::-webkit-outer-spin-button,
.bwfc-qty__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* -------------------------------------------------------------- variants */

:where(.bwfc-variants) {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

:where(.bwfc-variants__list) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

:where(.bwfc-variants--list .bwfc-variants__list) {
  flex-direction: column;
  flex-wrap: nowrap;
}

:where(.bwfc-variants--attributes) {
  gap: 1em;
}

:where(.bwfc-variants__group) {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

:where(.bwfc-variants__swatch) {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
}

.bwfc-variants .bwfc-variants__item.is-unavailable {
  opacity: 0.4;
  border-style: dashed;
}

.bwfc-variants--grid .bwfc-variants__list {
  display: grid;
  grid-template-columns: repeat(var(--bwfc-columns, 2), minmax(0, 1fr));
}

.bwfc-variants .bwfc-variants__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.5em 0.9em;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.bwfc-variants--list .bwfc-variants__item {
  justify-content: space-between;
}

.bwfc-variants .bwfc-variants__item.is-selected {
  box-shadow: 0 0 0 1px currentColor;
}

.bwfc-variants .bwfc-variants__item.is-out-of-stock {
  opacity: 0.55;
}

.bwfc-variants .bwfc-variants__item:disabled {
  cursor: not-allowed;
}

.bwfc-variants--strike .bwfc-variants__item.is-out-of-stock .bwfc-variants__title {
  text-decoration: line-through;
}

:where(.bwfc-variants__image) {
  width: 2em;
  height: 2em;
  flex-shrink: 0;
  border-radius: 3px;
  object-fit: cover;
}

:where(.bwfc-variants__compare) {
  opacity: 0.6;
}

:where(.bwfc-variants__flag) {
  font-size: 0.75em;
  opacity: 0.8;
}

.bwfc-variants .bwfc-variants__select {
  width: auto;
  max-width: 100%;
  padding-right: 2.5em;
}

/* ----------------------------------------------------------------- price */

:where(.bwfc-price),
:where(.bwfc-price__variant) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em;
}

.bwfc-price--compare-after .bwfc-price__compare {
  order: 2;
}

.bwfc-price--compare-after .bwfc-price__badge {
  order: 3;
}

:where(.bwfc-price__compare) {
  opacity: 0.6;
}

:where(.bwfc-price__badge) {
  align-self: center;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 0.75em;
  line-height: 1.4;
}

/* ----------------------------------------------------------------- stock */

:where(.bwfc-stock) {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.bwfc-stock--hide-in.is-in-stock {
  display: none;
}

:where(.bwfc-stock__dot) {
  width: 0.55em;
  height: 0.55em;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}

/* ----------------------------------------------------------------- image */

:where(.bwfc-image) {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

:where(.bwfc-image__img) {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.bwfc-image:hover .bwfc-image__img {
  transform: scale(var(--bwfc-zoom, 1));
}

.bwfc-image__img--hover {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
}

.bwfc-image:hover .bwfc-image__img--hover {
  opacity: 1;
}

.bwfc-image__badge {
  position: absolute;
  z-index: 1;
}

:where(.bwfc-image__badge) {
  padding: 0.3em 0.7em;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.4;
}

.bwfc-image--badge-top-left .bwfc-image__badge {
  top: var(--bwfc-badge-offset, 0.75rem);
  left: var(--bwfc-badge-offset, 0.75rem);
}

.bwfc-image--badge-top-right .bwfc-image__badge {
  top: var(--bwfc-badge-offset, 0.75rem);
  right: var(--bwfc-badge-offset, 0.75rem);
}

.bwfc-image--badge-bottom-left .bwfc-image__badge {
  bottom: var(--bwfc-badge-offset, 0.75rem);
  left: var(--bwfc-badge-offset, 0.75rem);
}

.bwfc-image--badge-bottom-right .bwfc-image__badge {
  right: var(--bwfc-badge-offset, 0.75rem);
  bottom: var(--bwfc-badge-offset, 0.75rem);
}

/* --------------------------------------------------------------- gallery */

:where(.bwfc-gallery) {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.bwfc-gallery--thumbs-top {
  flex-direction: column-reverse;
}

.bwfc-gallery--thumbs-left {
  flex-direction: row-reverse;
}

.bwfc-gallery--thumbs-right {
  flex-direction: row;
}

:where(.bwfc-gallery__stage) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  line-height: 0;
}

:where(.bwfc-gallery__main) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

:where(.bwfc-gallery__thumbs) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bwfc-gallery--thumbs-left .bwfc-gallery__thumbs,
.bwfc-gallery--thumbs-right .bwfc-gallery__thumbs {
  flex: 0 0 var(--bwfc-thumb, 72px);
  flex-direction: column;
  flex-wrap: nowrap;
  max-height: 100%;
  overflow-y: auto;
}

.bwfc-gallery--thumbs-top .bwfc-gallery__thumbs,
.bwfc-gallery--thumbs-bottom .bwfc-gallery__thumbs {
  overflow-x: auto;
}

.bwfc-gallery .bwfc-gallery__thumb {
  flex: 0 0 var(--bwfc-thumb, 72px);
  width: var(--bwfc-thumb, 72px);
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  overflow: hidden;
  line-height: 0;
  cursor: pointer;
  transition: border-color 0.2s, opacity 0.2s;
}

.bwfc-gallery .bwfc-gallery__thumb.is-active {
  border-color: currentColor;
}

.bwfc-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------ cart button */

:where(.bwfc-cart) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

:where(.bwfc-cart__icon) {
  display: inline-flex;
  font-size: 1.4em;
  line-height: 1;
}

.bwfc-cart__icon svg {
  width: 1em;
  height: 1em;
}

:where(.bwfc-cart__count) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.4em;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 0.7em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Corner badge unless "Count inline" is on. */
.bwfc-cart:not(.bwfc-cart--inline-count) .bwfc-cart__count {
  position: absolute;
}

:where(.bwfc-cart:not(.bwfc-cart--inline-count) .bwfc-cart__count) {
  top: -0.6em;
  right: -0.8em;
}

/* --------------------------------------------------------- event trigger */

.bwfc-event {
  display: none;
}

/* Visible in the builder canvas only, so it can be selected. */
.bwfc-event:has(.bwfc-event__note) {
  display: inline-block;
  padding: 0.3em 0.7em;
  border: 1px dashed currentColor;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0.7;
}

/* ---------------------------------------------------------------- checkout
 *
 * The checkout elements print FluentCart's own markup, styled by
 * FluentCart's own stylesheet. The rules below only:
 *  - undo the two FluentCart defaults that assume its fixed two-column
 *    layout (side padding on the page wrapper, margins meant for it),
 *  - implement the options FluentCart has no setting for (separate fields,
 *    separate shipping cards, hidden and reordered summary rows),
 *  - pass a few colours through variables so one control can reach parts
 *    FluentCart styles with long selectors.
 *
 * They are scoped to .bwfc-checkout / .bwfc-co, so FluentCart's stock
 * checkout elsewhere on the site is untouched.
 */

/* You lay the page out; FluentCart's wrapper padding would fight your columns. */
.bwfc-checkout.fluent-cart-checkout-page {
  padding-left: 0;
  padding-right: 0;
}

:where(.bwfc-checkout) {
  width: 100%;
}

:where(.bwfc-co) {
  width: 100%;
}

/* A section whose FluentCart part is absent takes no space. */
.bwfc-co-shipping-methods:not(:has([data-fluent-cart-checkout-page-shipping-methods-wrapper])),
.bwfc-co-extras:empty {
  display: none;
}

/* FluentCart puts a bottom margin on each of its blocks. Between your
   sections the spacing is yours (the row gap of the parent block), so the
   last FluentCart block in a section drops that margin. Blocks inside one
   section keep it; "Space inside sections" in the Checkout's Theme sets it. */
.bwfc-checkout .bwfc-co > :is(.fct_checkout_form_section, .fct_checkout_agree_terms, .fct_allow_create_account_wrapper, .fct_b2b_toggle_wrapper):last-child,
.bwfc-checkout .bwfc-co > :last-child > :is(.fct_checkout_form_section, .fct_checkout_agree_terms, .fct_allow_create_account_wrapper, .fct_b2b_toggle_wrapper):last-child,
.bwfc-checkout .bwfc-co > :last-child > :last-child > :is(.fct_checkout_form_section, .fct_checkout_agree_terms, .fct_allow_create_account_wrapper, .fct_b2b_toggle_wrapper):last-child {
  margin-bottom: 0;
}

/* The same, for the regions FluentCart re-inserts (their nesting depth
   changes after a refresh), and for the tick box that ends the Shipping
   Address section while its fields are hidden. */
.bwfc-checkout .bwfc-co-shipping-methods .fct_checkout_form_section,
.bwfc-checkout .bwfc-co-payment [data-fluent-cart-checkout-payment-methods]:last-child .fct_checkout_form_section,
.bwfc-checkout .bwfc-co-summary .fct_summary_box .fct_checkout_form_section,
.bwfc-checkout .bwfc-co-shipping-address .fct_ship_to_different_wrapper:has(+ [style*="none"]) #fct_wrapper_ship_to_different {
  margin-bottom: 0;
}

.bwfc-checkout .bwfc-co-notes .fct_order_note {
  margin-top: 0;
}

/* Heading added by the Contact element, in FluentCart's own header markup. */
.bwfc-checkout .bwfc-co .bwfc-co-header.fct_checkout_form_section {
  margin-bottom: 0;
}

/* "Hide heading" */
.bwfc-co.bwfc-co--no-heading .fct_form_section_header {
  display: none;
}

/* Place Order: "Fit the text" */
.bwfc-co.bwfc-co--btn-auto .fct_place_order_btn {
  width: auto;
}

/* ---- Fields: the country / state dropdown follows the text inputs ----
   FluentCart gives it a fixed 38px height and its own font size, so padding
   and typography set for inputs would leave it out of step. */

.bwfc-checkout .fct_checkout .fct-nice-select {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 40px;
  padding-top: var(--fct-input-padding-y, 10px);
  padding-bottom: var(--fct-input-padding-y, 10px);
  font-size: 15px;
  /* Browsers never let a text input's line box go below "normal"; match it. */
  line-height: normal;
}

/* ---- Fields: focus and error colours through variables ---- */

.bwfc-checkout .fct_checkout .fct-input:not(.fct-input-checkbox):focus,
.bwfc-checkout .fct_checkout .fct-nice-select.open,
.bwfc-checkout .fct_checkout .fct-nice-select:focus,
.bwfc-checkout .fct_checkout .fct_coupon_input:focus {
  border-color: var(--bwfc-co-input-focus-border, var(--fct-checkout-active-border-color));
}

.bwfc-checkout .fct_checkout .has-error .fct-input,
.bwfc-checkout .fct_checkout .has-error .fct-nice-select {
  border-color: var(--bwfc-co-error, rgb(240, 68, 56));
}

.bwfc-checkout .fct_checkout .fct_form_error {
  color: var(--bwfc-co-error, rgb(240, 68, 56));
}

/* ---- Fields: "Separate, with a gap" ----
   FluentCart joins a section's fields into one bordered block, with
   per-position border widths and radii. This mode gives every field its own
   full border and radius instead. The selectors carry IDs in FluentCart's
   stylesheet, hence !important here; the values stay yours through variables. */

.bwfc-co-fields-separate .fct_checkout_input_group {
  display: grid;
  gap: var(--bwfc-co-field-gap, 12px);
}

.bwfc-co-fields-separate .fct_checkout_input_group .fct_form_sub_section_wrapper,
.bwfc-co-fields-separate .fct_checkout_input_group .fct_checkout_city_postcode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bwfc-co-field-gap, 12px);
}

.bwfc-co-fields-separate .fct_checkout_input_group .fct_input_wrapper input:not([type="checkbox"]):not([type="radio"]):not(.fct-nice-select-search),
.bwfc-co-fields-separate .fct_checkout_input_group .fct_input_wrapper textarea,
.bwfc-co-fields-separate .fct_checkout_input_group .fct_input_wrapper .fct-nice-select {
  border-width: var(--bwfc-co-field-border-width, 1px) !important;
  border-radius: var(--fct-input-radius, 8px) !important;
}

/* ---- Shipping methods: "Separate cards" ---- */

.bwfc-co--ship-cards .fct_shipping_methods_list {
  display: grid;
  gap: var(--bwfc-co-ship-gap, 10px);
  border: 0;
  background: none;
  border-radius: 0;
}

.bwfc-co--ship-cards .fct_shipping_methods_list .fct_shipping_methods_item label {
  border-width: 1px;
  border-radius: var(--fct-container-radius, 8px);
  background-color: var(--fct-checkout-shipping-methods-bg, #fff);
}

.bwfc-co--ship-cards .fct_shipping_methods_list .fct_shipping_methods_item input:checked + label {
  border-color: var(--fct-checkout-active-border-color);
}

/* ---- Order summary: hide, reorder, open coupon ---- */

.bwfc-co--no-items .fct_items_wrapper,
.bwfc-co--no-images .fct_line_item .fct_item_image,
.bwfc-co--no-subtotal ul.fct_summary_items_list > li:has(> [data-fluent-cart-checkout-subtotal]),
.bwfc-co--no-shipping ul.fct_summary_items_list > li[data-fluent-cart-checkout-shipping-amount-wrapper],
.bwfc-co--no-coupon ul.fct_summary_items_list > li:has(> .fct_coupon) {
  display: none !important;
}

/* With no item list above it, the totals list needs no divider. */
.bwfc-co--no-items ul.fct_summary_items_list {
  margin-top: 0;
  border-top-width: 0;
}

.bwfc-co--coupon-open .fct_coupon .fct_coupon_toggle {
  display: none;
}

.bwfc-co--coupon-open .fct_coupon .fct_coupon_field,
.bwfc-co--coupon-open .fct_coupon .fct_coupon_field[hidden] {
  display: block !important;
  margin: 0;
}

/* ---- Notes for editors (builder, or misplaced sections on the live page) ---- */

.bwfc-co-note {
  padding: 0.6em 0.8em;
  border: 1px dashed currentColor;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.75;
}

.bwfc-co-note--warn {
  border-color: #b45309;
  color: #b45309;
  opacity: 1;
}

/* ------------------------------------------------------ free shipping meter */

:where(.bwfc-freeship) {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

:where(.bwfc-freeship__track) {
  display: block;
  height: 0.4em;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 15%, transparent);
  overflow: hidden;
}

:where(.bwfc-freeship__fill) {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transform: scaleX(var(--bwfc-freeship-fill, 0));
  transform-origin: left center;
  transition: transform 0.4s ease;
}

[dir="rtl"] :where(.bwfc-freeship__fill) {
  transform-origin: right center;
}

@media (prefers-reduced-motion: reduce) {
  :where(.bwfc-freeship__fill) {
    transition: none;
  }
}

:where(.bwfc-freeship) {
  --bwfc-freeship-slide: 0.55s;
  --bwfc-freeship-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Marker, dot and end labels. The bar wrapper is the positioning box; the
   marker reserves its own height above the track so nothing overlaps the text.
   Both are clamped so they stay inside the bar at 0% and 100%. */
:where(.bwfc-freeship__bar) {
  position: relative;
  display: block;
}

.bwfc-freeship--has-marker .bwfc-freeship__bar {
  margin-top: calc(var(--bwfc-freeship-marker-size, 2.5em) * 0.73 + var(--bwfc-freeship-marker-gap, 0.6em));
}

:where(.bwfc-freeship__marker) {
  position: absolute;
  bottom: calc(100% + var(--bwfc-freeship-marker-gap, 0.6em));
  inset-inline-start: clamp(
    calc(var(--bwfc-freeship-marker-size, 2.5em) / 2),
    calc(var(--bwfc-freeship-fill, 0) * 100%),
    calc(100% - var(--bwfc-freeship-marker-size, 2.5em) / 2)
  );
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: var(--bwfc-freeship-marker-size, 2.5em);
  height: calc(var(--bwfc-freeship-marker-size, 2.5em) * 0.73);
  line-height: 1;
  translate: -50% 0;
  transition: inset-inline-start var(--bwfc-freeship-slide) var(--bwfc-freeship-ease);
}

[dir="rtl"] :where(.bwfc-freeship__marker) {
  translate: 50% 0;
}

:where(.bwfc-freeship__marker) svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Font icons are sized on the icon, not the marker: an em size on the marker
   itself would make its own width and height scale with it. */
:where(.bwfc-freeship__marker) :where(i) {
  display: block;
  font-size: calc(var(--bwfc-freeship-marker-size, 2.5em) * 0.73);
}

:where(.bwfc-freeship__dot) {
  position: absolute;
  top: 50%;
  inset-inline-start: clamp(
    calc(var(--bwfc-freeship-dot-size, 13px) / 2),
    calc(var(--bwfc-freeship-fill, 0) * 100%),
    calc(100% - var(--bwfc-freeship-dot-size, 13px) / 2)
  );
  width: var(--bwfc-freeship-dot-size, 13px);
  height: var(--bwfc-freeship-dot-size, 13px);
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid transparent;
  background: currentColor;
  translate: -50% -50%;
  transition: inset-inline-start var(--bwfc-freeship-slide) var(--bwfc-freeship-ease);
}

[dir="rtl"] :where(.bwfc-freeship__dot) {
  translate: 50% -50%;
}

:where(.bwfc-freeship__labels) {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font-size: 0.8em;
}

/* With a marker or dot, the fill moves on the same timing so they arrive together. */
.bwfc-freeship .bwfc-freeship__bar .bwfc-freeship__fill {
  transition-duration: var(--bwfc-freeship-slide);
  transition-timing-function: var(--bwfc-freeship-ease);
}

@media (prefers-reduced-motion: reduce) {
  :where(.bwfc-freeship__marker, .bwfc-freeship__dot),
  .bwfc-freeship .bwfc-freeship__bar .bwfc-freeship__fill {
    transition: none;
  }
}

/* Striped fill: the fill keeps its full width and is clipped to the progress,
   so the stripes never stretch as the bar grows. */
.bwfc-freeship--stripes .bwfc-freeship__fill {
  transform: none;
  clip-path: inset(0 calc((1 - var(--bwfc-freeship-fill, 0)) * 100%) 0 0 round 999px);
  transition: clip-path 0.4s ease;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--bwfc-freeship-stripe, rgba(255, 255, 255, 0.35)) 0 var(--bwfc-freeship-stripe-size, 8px),
    transparent var(--bwfc-freeship-stripe-size, 8px) calc(var(--bwfc-freeship-stripe-size, 8px) * 2)
  );
}

[dir="rtl"] .bwfc-freeship--stripes .bwfc-freeship__fill {
  clip-path: inset(0 0 0 calc((1 - var(--bwfc-freeship-fill, 0)) * 100%) round 999px);
}

.bwfc-freeship--animated .bwfc-freeship__fill {
  /* one stripe period measured along the bar: 2 × width × √2 */
  --bwfc-freeship-period: calc(var(--bwfc-freeship-stripe-size, 8px) * 2.8284);
  background-size: var(--bwfc-freeship-period) 100%;
  animation: bwfc-freeship-stripes var(--bwfc-freeship-speed, 0.8s) linear infinite;
}

@keyframes bwfc-freeship-stripes {
  from { background-position: 0 0; }
  to { background-position: var(--bwfc-freeship-period) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bwfc-freeship--animated .bwfc-freeship__fill {
    animation: none;
  }
  .bwfc-freeship--stripes .bwfc-freeship__fill {
    transition: none;
  }
}