/**
 * Toboo layout primitives (Bootstrap-free replacements).
 * Visual intent matches legacy Toboo spacing/grid.
 */

:root {
  --toboo-o-pattern: url("../../images/brand/o-pattern.svg");
  --toboo-o-pattern-mask: radial-gradient(
    ellipse 82% 56% at 50% 50%,
    #000 0%,
    #000 28%,
    transparent 64%
  );
  --tw-primary: #849e14;
  --tw-primary-200: #b8c41f;
  --toboo-green-text: #586b08;
  --toboo-body-bg: #121a30;
  --tw-secondary: #1e1e21;
  --tw-white: #fff;
  --tw-danger: #ff3c17;
  --tw-cyan: #c4cbd6;
  --tw-light: #e9edf0;
  --tw-gray-200: #e3e3e3;
  --tw-gutter: 3rem;
  /* Horizontal page edge — % of containing block width. */
  --toboo-edge-x: 4%;
  --tw-radius: 0.75rem;
  --tw-radius-sm: 0.25rem;
  --tw-radius-md: var(--tw-radius);
  --tw-radius-lg: 0.5rem;
  --tw-radius-xl: 1rem;
  --tw-radius-xxl: 2rem;
  --tw-radius-2xl: var(--tw-radius-xxl);
  --tw-radius-pill: 50rem;
  /* Card radius — visible even without corner-shape support. */
  --tw-radius-card: 2.5rem;
  --toboo-cover-border: color-mix(in srgb, var(--tw-secondary, #1e1e21) 20%, transparent);
  --tw-font: Rubik, sans-serif;
  --tw-container: 1140px;
  --toboo-description-card-width: 48rem;
  --toboo-description-card-pad-x: clamp(2.5rem, 6.5vw, 4.5rem);
  /* Root size for rem (browser default 16px → 18px). */
  --toboo-root-font-size: 112.5%;
  --bs-body-font-size: 1rem;
  --tw-spinner-size: 1.25rem;
  --tw-spinner-size-max: 1.375rem;
  --tw-spinner-size-fullscreen: 2rem;
  /* Fluid headings (aligned with theme.json heading-fluid-* presets). */
  --toboo-heading-h1: clamp(2rem, 1rem + 4.2vw, 3.25rem);
  --toboo-heading-h2: clamp(1.55rem, 0.95rem + 2.6vw, 2.35rem);
  --toboo-heading-h3: clamp(1.25rem, 0.95rem + 1.4vw, 1.7rem);
  --toboo-heading-h4: clamp(1.1rem, 0.95rem + 0.7vw, 1.3rem);
  --toboo-heading-h5: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  --toboo-heading-h6: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --toboo-display-title-font-size: clamp(1.75rem, 1rem + 3.6vw, 3rem);
  --toboo-display-title-line-height: 1;
  /* Price / sale bubbles — one size system for PDP + cards. */
  --toboo-bubble-w: clamp(120px, 14vw + 3rem, 140px);
  --toboo-bubble-h: calc(var(--toboo-bubble-w) * 0.92857);
  --toboo-bubble-fs-price: calc(2.4rem * var(--toboo-bubble-w) / 140px);
  --toboo-bubble-fs-uvp: calc(0.85rem * var(--toboo-bubble-w) / 140px);
  --toboo-bubble-fs-legal: calc(0.7rem * var(--toboo-bubble-w) / 140px);
  --toboo-sale-reduces-w: clamp(50px, 5.5vw + 0.9rem, 60px);
  --toboo-sale-suffix-w: clamp(24px, 3vw + 0.45rem, 30px);
  --toboo-sale-fs-reduces: calc(1.35rem * var(--toboo-sale-reduces-w) / 60px);
  --toboo-sale-fs-suffix: calc(0.88rem * var(--toboo-sale-suffix-w) / 30px);
}

/**
 * Price bubble typography lock — same on detail + cards (beats WC/context inheritance).
 */
.price-bubble {
  --width: var(--toboo-bubble-w);
  --height: var(--toboo-bubble-h);
  font-size: var(--toboo-bubble-fs-price);
  letter-spacing: 0;
}

.price-bubble .price,
.price-bubble .price > .woocommerce-Price-amount,
.price-bubble .price > .woocommerce-Price-amount bdi,
.price-bubble .price > ins,
.price-bubble .price > ins .woocommerce-Price-amount,
.price-bubble .price > ins .woocommerce-Price-amount bdi {
  font-size: var(--toboo-bubble-fs-price) !important;
  line-height: 1;
}

.price-bubble .price {
  /* Gap between the wrapped UVP row and the sale price below it. */
  row-gap: 0.2em;
  margin-bottom: 0.2em;
}

.price-bubble .price > .woocommerce-Price-amount,
.price-bubble .price > .woocommerce-Price-amount bdi,
.price-bubble .price > ins,
.price-bubble .price > ins .woocommerce-Price-amount,
.price-bubble .price > ins .woocommerce-Price-amount bdi,
.price-bubble .price > del,
.price-bubble .price > del .woocommerce-Price-amount,
.price-bubble .price > del .woocommerce-Price-amount bdi,
.price-bubble .price > .wc-gzd-sale-price-label,
.price-bubble .price > span.wc-gzd-sale-price-label {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.price-bubble .price > del,
.price-bubble .price > del .woocommerce-Price-amount,
.price-bubble .price > del .woocommerce-Price-amount bdi,
.price-bubble .price > .wc-gzd-sale-price-label,
.price-bubble .price > span.wc-gzd-sale-price-label {
  font-size: var(--toboo-bubble-fs-uvp) !important;
  font-weight: 500 !important;
  line-height: 1.1;
  letter-spacing: 0;
  opacity: 1 !important;
  color: rgba(30, 30, 33, 0.75) !important;
}

.price-bubble .wc-gzd-additional-info,
.price-bubble .legal-price-info {
  font-size: var(--toboo-bubble-fs-legal) !important;
  line-height: 1.15;
  letter-spacing: 0;
}

/* Numbers keep slight tracking; labels / copy stay at 0. */
.price-bubble .price > .woocommerce-Price-amount,
.price-bubble .price > .woocommerce-Price-amount bdi,
.price-bubble .price > ins .woocommerce-Price-amount,
.price-bubble .price > ins .woocommerce-Price-amount bdi,
.price-bubble .price > del .woocommerce-Price-amount,
.price-bubble .price > del .woocommerce-Price-amount bdi,
.sale-badge .reduces,
.sale-badge .suffix {
  letter-spacing: -0.03em;
}

.sale-badge .reduces {
  --width: var(--toboo-sale-reduces-w);
  --height: calc(var(--width) * 0.9375);
  width: var(--width);
  height: var(--height);
  min-width: 0;
  padding-inline: 0;
  font-size: var(--toboo-sale-fs-reduces) !important;
}

.sale-badge .suffix {
  --width: var(--toboo-sale-suffix-w);
  --height: calc(var(--width) * 0.925);
  width: var(--width);
  height: var(--height);
  min-width: 0;
  padding-inline: 0;
  font-size: var(--toboo-sale-fs-suffix) !important;
}

@media (max-width: 781px) {
  :root {
    --toboo-edge-x: 10%;
  }

  .tw-container {
    padding-inline: var(--toboo-edge-x);
  }
}

/**
 * Card / panel surfaces + primary buttons.
 * corner-shape must be a literal (not a custom property) or Chromium drops it.
 * Safari/Firefox ignore corner-shape and keep the large border-radius.
 */
.toboo-panel,
.toboo-cart-panel,
.toboo-page-card,
.tw-card,
.toboo-product-description .toboo-product-meta__group,
.toboo-product-faq .wp-block-accordion-item,
.modal-cart .toboo-cart-shipping,
.modal-cart .toboo-cart-coupon,
.modal-cart #apply-coupon,
.toboo-product-addon,
.toboo-product-addon__toggle,
.woocommerce-checkout #shop-cart-review .products,
.woocommerce-checkout #shop-cart-review .toboo-cart-panel,
.woocommerce-checkout #shop-cart-review .toboo-cart-shipping,
.wp-element-button,
.wp-block-button__link,
.tw-btn,
.toboo-product-atc__button,
.btn:not(.btn-close):not(.btn-link) {
  border-radius: var(--tw-radius-card, 2.5rem);
}

/* Product / cover artwork images — not the physical Cover Box. */
.toboo-product-card__media img,
.toboo-shop-hero__cover,
.toboo-shop-hero__cover img,
.toboo-product-hero__cover,
.toboo-product-hero__cover img,
.toboo-product-gallery__thumb,
.toboo-product-gallery__thumb img,
.slider-main.slider-product-gallery .toboo-product-gallery__thumb,
.slider-main.slider-product-gallery .toboo-product-gallery__thumb img,
.toboo-product-addon__image,
.toboo-product-preview__image,
.modal-cart .toboo-cart-product__image,
.product-menu-thumbnail,
.product-thumbnail {
  border-radius: var(--tw-radius-card, 2.5rem);
}

/* 2px semi-transparent dark edge on cover artwork (not the physical Cover Box). */
.toboo-product-card__media img,
.toboo-shop-hero__cover,
.toboo-product-hero__cover,
.toboo-product-gallery__thumb.wp-block-image,
.slider-main.slider-product-gallery .toboo-product-gallery__thumb,
.toboo-product-addon__image,
.toboo-product-preview__image,
.modal-cart .toboo-cart-product__image,
.product-menu-thumbnail,
.product-thumbnail {
  border: 2px solid var(--toboo-cover-border);
  box-sizing: border-box;
}

@supports (corner-shape: squircle) {
  .toboo-panel,
  .toboo-cart-panel,
  .toboo-page-card,
  .tw-card,
  .toboo-product-description .toboo-product-meta__group,
  .toboo-product-faq .wp-block-accordion-item,
  .modal-cart .toboo-cart-shipping,
  .modal-cart .toboo-cart-coupon,
  .modal-cart #apply-coupon,
  .toboo-product-addon,
  .toboo-product-addon__toggle,
  .woocommerce-checkout #shop-cart-review .products,
  .woocommerce-checkout #shop-cart-review .toboo-cart-panel,
  .woocommerce-checkout #shop-cart-review .toboo-cart-shipping,
  .toboo-product-card__media img,
  .toboo-shop-hero__cover,
  .toboo-shop-hero__cover img,
  .toboo-product-hero__cover,
  .toboo-product-hero__cover img,
  .toboo-shop-hero__card,
  .toboo-product-description__card,
  .toboo-product-gallery__thumb,
  .toboo-product-gallery__thumb img,
  .slider-main.slider-product-gallery .toboo-product-gallery__thumb,
  .slider-main.slider-product-gallery .toboo-product-gallery__thumb img,
  .toboo-product-addon__image,
  .toboo-product-preview__image,
  .modal-cart .toboo-cart-product__image,
  .product-menu-thumbnail,
  .product-thumbnail,
  .wp-element-button,
  .wp-block-button__link,
  .tw-btn,
  .toboo-product-atc__button,
  .btn:not(.btn-close):not(.btn-link) {
    /* Literal value — do not wrap in var(). */
    corner-shape: squircle;
  }
}

html {
  font-size: var(--toboo-root-font-size);
  background: var(--toboo-body-bg, #121a30);
  min-height: 100%;
}

/* Decorative O’s / price bubbles may paint past the content box — clip X only
 * (overflow-x: clip keeps overflow-y visible, so sticky stacks still work). */
@media (max-width: 781px) {
  html {
    overflow-x: clip;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--tw-font);
  font-weight: 200;
  background: var(--toboo-body-bg, #121a30);
  color: #fff;
  line-height: 1.5;
}

/* Soft O-pattern — fixed viewport backdrop (homepage, pages, account, product). */
body.page-template-default::before,
body.toboo-account-page::before,
body.single-product::before,
body.toboo-shop-stream-page::before,
body.toboo-shop-grid-page::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: var(--toboo-o-pattern);
  background-repeat: repeat;
  background-size: clamp(180px, 22vw, 260px) auto;
  background-position: center top;
  -webkit-mask-image: var(--toboo-o-pattern-mask);
  mask-image: var(--toboo-o-pattern-mask);
}

body.page-template-default .toboo-footer,
body.toboo-account-page .toboo-footer,
body.single-product .toboo-footer,
body.toboo-shop-stream-page .toboo-footer,
body.toboo-shop-grid-page .toboo-footer {
  background: transparent;
}

b,
strong {
  font-weight: 600;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--tw-primary);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 2rem;
}

h1,
.wp-block-heading:is(h1) {
  font-size: var(--toboo-heading-h1);
  font-weight: 700;
  line-height: 1.1;
}

h2,
.wp-block-heading:is(h2) {
  font-size: var(--toboo-heading-h2);
  font-weight: 650;
}

h3,
.wp-block-heading:is(h3) {
  font-size: var(--toboo-heading-h3);
  font-weight: 600;
}

h4,
.wp-block-heading:is(h4) {
  font-size: var(--toboo-heading-h4);
}

h5,
.wp-block-heading:is(h5) {
  font-size: var(--toboo-heading-h5);
}

h6,
.wp-block-heading:is(h6) {
  font-size: var(--toboo-heading-h6);
}

.tw-container {
  width: 100%;
  max-width: var(--tw-container);
  margin-inline: auto;
  padding-inline: calc(var(--tw-gutter) * 0.5);
}

.tw-container--fluid {
  max-width: none;
}

.tw-row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--tw-gutter) * -0.5);
}

.tw-row > [class*="tw-col"] {
  padding-inline: calc(var(--tw-gutter) * 0.5);
  width: 100%;
}

.tw-col { flex: 1 0 0%; }
.tw-col-auto { flex: 0 0 auto; width: auto; }
.tw-col-12 { flex: 0 0 auto; width: 100%; }
.tw-col-6 { flex: 0 0 auto; width: 50%; }
.tw-col-4 { flex: 0 0 auto; width: 33.3333%; }
.tw-col-3 { flex: 0 0 auto; width: 25%; }
.tw-col-8 { flex: 0 0 auto; width: 66.6667%; }
.tw-col-9 { flex: 0 0 auto; width: 75%; }

@media (min-width: 768px) {
  .tw-col-md-auto { flex: 0 0 auto; width: auto; }
  .tw-col-md-12 { flex: 0 0 auto; width: 100%; }
  .tw-col-md-6 { flex: 0 0 auto; width: 50%; }
  .tw-col-md-4 { flex: 0 0 auto; width: 33.3333%; }
  .tw-col-md-3 { flex: 0 0 auto; width: 25%; }
  .tw-col-md-8 { flex: 0 0 auto; width: 66.6667%; }
  .tw-col-md-9 { flex: 0 0 auto; width: 75%; }
  .tw-col-md-5 { flex: 0 0 auto; width: 41.6667%; }
  .tw-col-md-7 { flex: 0 0 auto; width: 58.3333%; }
}

@media (min-width: 992px) {
  .tw-col-lg-6 { flex: 0 0 auto; width: 50%; }
  .tw-col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
  .tw-col-lg-3 { flex: 0 0 auto; width: 25%; }
  .tw-col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
  .tw-col-lg-9 { flex: 0 0 auto; width: 75%; }
}

.tw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--tw-radius-card, 2.5rem);
  corner-shape: squircle;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  background: var(--tw-secondary);
  color: var(--tw-white);
}

.tw-btn--primary,
.tw-btn.primary {
  background: var(--tw-primary);
  border-color: var(--tw-primary);
  color: var(--tw-white);
}

.tw-btn--outline {
  background: transparent;
  border-color: var(--tw-secondary);
  color: var(--tw-secondary);
}

.tw-btn:disabled,
.tw-btn.is-disabled {
  opacity: 0.65;
  pointer-events: none;
}

.tw-input,
.tw-select,
.tw-textarea,
.toboo-field,
.toboo-field--select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--tw-cyan);
  border-radius: var(--tw-radius-card, 2.5rem);
  corner-shape: squircle;
  background: #fff;
  font: inherit;
  color: inherit;
}

/* Number/qty inputs stay compact — opt into form look via .tw-input. */
input[type="number"].tw-input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--tw-cyan);
  border-radius: var(--tw-radius-card, 2.5rem);
  corner-shape: squircle;
  background: #fff;
  font: inherit;
  color: inherit;
}

.tw-input:focus,
.tw-select:focus,
.tw-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"].tw-input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--toboo-green-text, #586b08);
  box-shadow: 0 0 0 0.25rem rgba(146, 181, 17, 0.25);
}

.tw-nav {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem 1rem;
  align-items: center;
}

.tw-nav__item { position: relative; list-style: none; }
.tw-nav__link {
  display: inline-block;
  padding: 0 1rem;
  color: inherit;
  font-weight: 500;
}
.tw-nav__item.is-active > .tw-nav__link { color: var(--tw-primary); }
.tw-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  min-width: 12rem;
}

.tw-d-none { display: none !important; }
.tw-d-flex { display: flex !important; }
.tw-d-block { display: block !important; }
.tw-align-items-center { align-items: center; }
.tw-justify-content-between { justify-content: space-between; }
.tw-justify-content-center { justify-content: center; }
.tw-text-center { text-align: center; }
.tw-text-end { text-align: right; }
.tw-w-100 { width: 100%; }
.tw-mb-0 { margin-bottom: 0 !important; }
.tw-mb-3 { margin-bottom: 1.5rem !important; }
.tw-mb-4 { margin-bottom: 4rem !important; }
.tw-mt-3 { margin-top: 1.5rem !important; }
.tw-g-3 { gap: 1.5rem; }
.tw-vstack { display: flex; flex-direction: column; gap: 1rem; }
.tw-hstack { display: flex; flex-direction: row; align-items: center; gap: 1rem; }

@media (max-width: 767.98px) {
  .tw-d-md-none { display: none !important; }
}

.toboo-footer {
  position: relative;
  z-index: 1;
  background: var(--toboo-body-bg, #121a30);
  /* Soft white on dark footer chrome. */
  color: rgba(255, 255, 255, 0.55);
  padding: 0.65rem 0 clamp(1.5rem, 3vw, 2.25rem);
}

.toboo-footer .navbar {
  justify-content: center;
  padding: 0;
}

.toboo-footer .navbar-nav {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 1.25rem;
  width: 100%;
  margin: 0;
  text-align: center;
}

.toboo-footer .nav-item {
  margin: 0;
  padding: 0;
}

.toboo-footer .navbar-nav .nav-link,
.toboo-footer a.nav-link {
  padding: 0;
  padding-inline: 0;
  text-align: center;
  color: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  opacity: 1;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.toboo-footer a {
  color: inherit;
  opacity: 1;
  padding-inline: 0;
}

.toboo-footer .navbar-nav .nav-link:hover,
.toboo-footer .navbar-nav .nav-link:focus-visible,
.toboo-footer a.nav-link:hover,
.toboo-footer a.nav-link:focus-visible,
.toboo-footer a:hover,
.toboo-footer a:focus-visible {
  color: #fff;
  opacity: 1;
}

/*
 * Checkout: full-bleed light shell (body/html/footer share --toboo-body-bg).
 */
.toboo-checkout-body .toboo-checkout-shell {
  margin: 0;
  border-radius: 0;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* Parent spinner.js overlay (.loading) + legacy .spin wrapper. */
.loading,
.spin {
	position: absolute;
	inset: 0;
	z-index: 999;
	opacity: 1;
	pointer-events: none;
	border-radius: inherit;
	background-color: transparent;
	background-image: none;
}

.loading .loading__center,
.spin .loading__center {
	opacity: 0;
	transition: opacity 0.16s ease;
	background: transparent;
}

.loading.is-visible,
.spin.is-visible {
	pointer-events: auto;
}

.loading.is-visible .loading__center,
.spin.is-visible .loading__center {
	opacity: 1;
}

.loading.is-leaving,
.spin.is-leaving {
	pointer-events: none;
}

.loading.is-leaving .loading__center,
.spin.is-leaving .loading__center {
	opacity: 0;
}

/* Loading spinner — theme option “Ladesymbol HTML”, rotate like backend. */
/* Legacy style.css: .loading { font-size: 3rem; height: 20vh } — compact overlays here. */
.dynamic-content-placeholder > .loading {
	position: absolute;
	inset: 0;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: inherit;
	height: auto;
	min-height: 0;
	opacity: 1;
	pointer-events: none;
}

/* Dynamic Content never adds .is-visible — keep spinner visible on placeholders. */
.dynamic-content-placeholder > .loading .loading__center {
	position: static;
	width: auto;
	height: auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 1;
}

.toboo-product-gallery__lazy > .loading .toboo-o-spinner,
.toboo-product-gallery__lazy > .loading svg.toboo-o-spinner__svg {
	--tw-spinner-size: 1.375rem;
	--tw-spinner-size-max: 1.5rem;
}

/* PageSpeed fade-in for lazy Dynamic Content (dynamic-content.js). */
.twtheme-dynamic-content-height-shell--fade {
	opacity: 0;
	transition: opacity var(--tw-dc-fade-duration, 400ms) ease;
}

.twtheme-dynamic-content-height-shell--fade.twtheme-dynamic-content-height-shell--faded-in {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.twtheme-dynamic-content-height-shell--fade {
		opacity: 1;
		transition: none;
	}
}

.modal-cart {
	position: relative;
}

form.cart .toboo-product-buy,
.toboo-product-preview__body {
	position: relative;
}

form.cart .toboo-product-buy > .loading,
.toboo-product-preview__body > .loading {
	position: absolute;
	inset: 0;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: inherit;
	height: auto;
	min-height: 0;
	border-radius: inherit;
}

form.cart .toboo-product-buy > .loading .loading__center,
.toboo-product-preview__body > .loading .loading__center {
	position: static;
	width: auto;
	height: auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

form.cart .toboo-product-buy > .loading .toboo-o-spinner,
form.cart .toboo-product-buy > .loading svg.toboo-o-spinner__svg,
.toboo-product-preview__body > .loading .toboo-o-spinner,
.toboo-product-preview__body > .loading svg.toboo-o-spinner__svg {
	--tw-spinner-size: 1.375rem;
	--tw-spinner-size-max: 1.5rem;
}

body > .loading,
body > .spin {
	position: fixed;
	z-index: 1400;
	display: flex;
	align-items: center;
	justify-content: center;
}

body > .loading .loading__center,
body > .spin .loading__center {
	position: static;
	width: auto;
	height: auto;
	min-height: 0;
}

@keyframes twtheme-spinner-rotating {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes toboo-o-spinner-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes toboo-o-spinner-color {
	0%,
	100% {
		fill: #7a3cff;
	}
	20% {
		fill: #9a4fe0;
	}
	40% {
		fill: #b86bc0;
	}
	60% {
		fill: #c4c038;
	}
	80% {
		fill: #b5d91f;
	}
}

.toboo-o-spinner {
	display: inline-block;
	position: relative;
	width: var(--tw-spinner-size, 1.25rem);
	height: var(--tw-spinner-size, 1.25rem);
	max-width: var(--tw-spinner-size-max, 1.375rem);
	max-height: var(--tw-spinner-size-max, 1.375rem);
	flex: 0 0 var(--tw-spinner-size, 1.25rem);
	line-height: 0;
	animation: toboo-o-spinner-spin 1.1s linear infinite;
	transform-origin: center center;
}

.toboo-o-spinner__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.toboo-o-spinner__svg path {
	animation: toboo-o-spinner-color 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.toboo-o-spinner {
		animation: none;
	}

	.toboo-o-spinner__svg path {
		animation: none;
		fill: var(--wp--preset--color--o-lila, #7a3cff);
	}
}

.loading__center > .toboo-o-spinner,
.loading__center > svg.toboo-o-spinner__svg,
.infinite-loop-load > .toboo-o-spinner,
.infinite-loop-load > svg.toboo-o-spinner__svg,
body > .loading > .toboo-o-spinner,
body > .loading > svg.toboo-o-spinner__svg,
body > .loading .loading__center > .toboo-o-spinner,
body > .loading .loading__center > svg.toboo-o-spinner__svg {
	width: var(--tw-spinner-size, 1.25rem);
	height: var(--tw-spinner-size, 1.25rem);
	max-width: var(--tw-spinner-size-max, 1.375rem);
	max-height: var(--tw-spinner-size-max, 1.375rem);
	flex: 0 0 var(--tw-spinner-size, 1.25rem);
}

body > .loading .loading__center > .toboo-o-spinner,
body > .loading .loading__center > svg.toboo-o-spinner__svg,
body > .loading > .toboo-o-spinner,
body > .loading > svg.toboo-o-spinner__svg {
	width: var(--tw-spinner-size-fullscreen, 2rem);
	height: var(--tw-spinner-size-fullscreen, 2rem);
	max-width: var(--tw-spinner-size-fullscreen, 2rem);
	max-height: var(--tw-spinner-size-fullscreen, 2rem);
	flex-basis: var(--tw-spinner-size-fullscreen, 2rem);
}

.loading__center > .icon-svg,
.loading__center > svg:not(.toboo-o-spinner__svg),
.loading__center > img,
.loading__center > i,
.loading__center > .spin,
.spin > .icon-svg,
.spin > svg:not(.toboo-o-spinner__svg),
.spin > img,
.spin > i {
	animation: twtheme-spinner-rotating 1s linear infinite;
	transform-origin: center center;
}