/* ============================================================================
   AGO Design System — Design Tokens
   ----------------------------------------------------------------------------
   Source of truth: Figma file 'AGO-Design' (PUVBVncQRcUyhYtJBgok4O)
   Generated: 2026-08-16
   Supersedes previous ago-tokens.css

   STRUCTURE
     1. Font imports
     2. Primitive tokens (raw values)
     3. Semantic tokens (component-facing aliases)
     4. Typography utility classes (one per Figma text style)
     5. Responsive overrides (Laptop, Mobile)
     6. Button motion (shared hover/press transition, Figma 1828:4702)

   NAMING
     Figma 'Category/Token'  →  '--category-token'
     'IconButton/x'          →  '--icon-button-x'
     'Grid/16'               →  '--space-16'
     'Border radius/8'       →  '--radius-8'
     'Font size/16'          →  '--font-size-16'
============================================================================ */


/* ============================================================================
   1. FONT IMPORTS
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Special+Gothic+Expanded+One&display=swap');


/* ============================================================================
   2. PRIMITIVE TOKENS
   ----------------------------------------------------------------------------
   Raw, context-free values. Don't reference these directly in component code;
   use the semantic tokens in section 3.
============================================================================ */
:root {

  /* --- Color · Gray ramp -------------------------------------------------- */
  --gray-0: #FFFFFF;
  --gray-25: #FCFCFC;
  --gray-50: #F7F7F7;
  --gray-100: #F0F0F0;
  --gray-200: #E4E4E4;
  --gray-300: #D4D4D4;
  --gray-400: #A3A3A3;
  --gray-500: #787878;
  --gray-600: #5C5C5C;
  --gray-700: #454545;
  --gray-800: #333333;
  --gray-900: #262626;
  --gray-950: #191919;
  --gray-1000: #0A0A0A;

  /* --- Color · Basic ------------------------------------------------------ */
  --basic-white: #FFFFFF;
  --basic-black: #000000;

  /* --- Color · Alpha ------------------------------------------------------ */
  --gray-0-a50: rgba(255, 255, 255, 0.5);  /* translucent white 50% */
  --gray-0-a80: rgba(255, 255, 255, 0.8);  /* translucent white 80% */
  --gray-1000-a30: rgba(10, 10, 10, 0.3);  /* light scrim/veil */
  --gray-1000-a80: rgba(10, 10, 10, 0.8);  /* backdrop scrim */

  /* --- Color · Red ramp --------------------------------------------------- */
  --red-50: #FFE5E7;
  --red-500: #FF0014;
  --red-700: #B8000E;

  /* --- Color · Green ramp (15 steps, low # = light) ----------------------- */
  --green-1: #EDFFE8;  /* lightest (anchor) */
  --green-2: #D1F5C7;
  --green-3: #B5EBA6;
  --green-4: #99E185;
  --green-5: #7ED863;
  --green-6: #62CE42;
  --green-7: #46C421;
  --green-8: #2ABA00;  /* pure (anchor) */
  --green-9: #24A100;
  --green-10: #1F8900;
  --green-11: #197000;
  --green-12: #145700;
  --green-13: #0E3E00;
  --green-14: #092600;
  --green-15: #030D00;  /* darkest (anchor) */

  /* Standalone Green/500 (separate token, NOT part of the 1-15 ramp) */
  --green-500: #37EB00;

  /* --- Spacing · Grid scale (px) ------------------------------------------ *
   * Canonical from Desktop LG mode. Responsive overrides in section 5.        */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-96: 96px;
  --space-128: 128px;
  --space-192: 192px;
  --space-256: 256px;

  /* --- Border radius (px) ------------------------------------------------- */
  --radius-4: 6px;  /* NOTE: Figma token named 'Border radius/4' but holds 6px (pending cleanup) */
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-15: 15px;
  --radius-999: 999px;

  /* --- Font size (px) — Desktop LG canonical values ----------------------- */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-32: 32px;
  --font-size-44: 44px;
  --font-size-58: 58px;

  /* --- Font family -------------------------------------------------------- */
  --font-family-display: 'Special Gothic Expanded One', sans-serif;
  --font-family-ui:      'Outfit', sans-serif;

  /* --- Font weight -------------------------------------------------------- */
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
}


/* ============================================================================
   3. SEMANTIC TOKENS
   ----------------------------------------------------------------------------
   Component-facing aliases pointing at primitives from section 2. These are
   what UI code references. Change a primitive, every semantic here updates.
============================================================================ */
:root {

  /* --- Text -------------------------------------------------------------- */
  --text-primary:   var(--gray-950);  /* → gray-950 */
  --text-secondary: var(--gray-600);  /* → gray-600 */
  --text-tertiary:  var(--gray-500);  /* → gray-500 */
  --text-muted:     var(--gray-300);  /* → gray-300 */
  --text-white:     var(--gray-0);  /* → gray-0 */

  /* --- Icon -------------------------------------------------------------- */
  --icon-primary:   var(--gray-950);  /* → gray-950 */
  --icon-secondary: var(--gray-600);  /* → gray-600 */
  --icon-tertiary:  var(--gray-400);  /* → gray-400 */
  --icon-muted:     var(--gray-300);  /* → gray-300 */
  --icon-white:     var(--gray-0);  /* → gray-0 */

  /* --- Navigation -------------------------------------------------------- */
  --navigation-background:        var(--gray-950);  /* → gray-950 */
  --navigation-menu-item-enabled: var(--gray-0);  /* → gray-0 */

  /* --- Footer ------------------------------------------------------------ */
  --footer-background: var(--basic-black);  /* → basic-black */

  /* --- Surfaces — drawer, backdrop, divider, thumbnails ------------------ */
  --drawer-background:         var(--basic-white);  /* → basic-white */
  --backdrop-background-dark:  var(--gray-1000-a80);  /* → gray-1000-a80 */
  --backdrop-background-light: var(--gray-1000-a30);  /* → gray-1000-a30 */
  --divider-background-light:  var(--gray-200);  /* → gray-200 */
  --thumbnails-background:     var(--gray-500);  /* → gray-500 */
  /* Minimum side gutter a modal panel must keep on any edge hosting an
     absolutely-anchored close pill: 32px inset + 48px pill (14px pad ×2
     + 20px icon) + 16px breathing room to the content column. Panels
     whose gutter comes from a %-based grid token must floor it with
     max(<grid token>, var(--modal-close-clearance)) — %-gutters shrink
     with the viewport and the pill otherwise lands on the content
     (search modal, 769–1120px). Prefer an in-flow header row (cart-added,
     filter/address modals) for new overlays; use the anchored pill +
     this floor only when the design pins the pill into a gutter. */
  --modal-close-clearance: 96px;

  /* --- Button ------------------------------------------------------------ */
  --button-primary-background-enabled:    var(--gray-950);  /* → gray-950 */
  --button-primary-background-hover:      var(--gray-900);  /* → gray-900 */
  --button-primary-background-disabled:   var(--gray-100);  /* → gray-100 */
  --button-secondary-background-enabled:  var(--gray-100);  /* → gray-100 */
  --button-secondary-background-hover:    var(--gray-200);  /* → gray-200 */
  --button-secondary-background-disabled: var(--gray-100);  /* → gray-100 */
  --button-secondary-outline-enabled:     var(--gray-100);  /* → gray-100 */
  --button-secondary-outline-hover:       var(--gray-100);  /* → gray-100 */
  --button-tertiary-background-enabled:   var(--gray-0);  /* → gray-0 */
  --button-tertiary-background-hover:     var(--gray-50);  /* → gray-50 */
  --button-tertiary-background-disabled:  var(--gray-100);  /* → gray-100 */
  --button-text-disabled:                 var(--gray-300);  /* → gray-300 */
  --button-icon-disabled:                 var(--gray-300);  /* → gray-300 */
  /* Button motion (Figma 1828:4702 — "Button — hover preview"):
     hover scales the whole button 7%, Smart Animate ≙ every animatable
     property tweens on the same curve. Consumed by the shared rule in
     §6 below. */
  --button-hover-scale:     1.07;
  --button-motion-duration: 350ms;
  --button-motion-ease:     cubic-bezier(0.4, 0, 0.2, 1);

  /* --- IconButton -------------------------------------------------------- */
  --icon-button-primary-background-enabled:   var(--gray-950);  /* → gray-950 */
  --icon-button-primary-background-hover:     var(--gray-900);  /* → gray-900 */
  --icon-button-primary-ondark:               var(--gray-0);  /* → gray-0 */
  --icon-button-primary-onlight:              var(--gray-900);  /* → gray-900 */
  --icon-button-secondary-background-enabled: var(--gray-100);  /* → gray-100 */
  --icon-button-secondary-background-hover:   var(--gray-200);  /* → gray-200 */
  --icon-button-secondary-outline-enabled:    var(--gray-100);  /* → gray-100 */
  --icon-button-secondary-outline-hover:      var(--gray-100);  /* → gray-100 */
  --icon-button-tertiary-background-enabled:  var(--gray-0-a50);  /* → gray-0-a50 */
  --icon-button-tertiary-background-hovered:  var(--gray-0);  /* → gray-0 */

  /* --- ColorSelector · SizeSelector -------------------------------------- */
  --color-selector-outline:         var(--gray-950);  /* → gray-950 */
  --size-selector-outline-enabled:  var(--gray-200);  /* → gray-200 */
  --size-selector-outline-hover:    var(--gray-400);  /* → gray-400 */
  --size-selector-outline-selected: var(--gray-950);  /* → gray-950 */

  /* --- Slider ------------------------------------------------------------ */
  --slider-background:     var(--gray-100);  /* → gray-100 */
  --slider-pin-background: var(--gray-950);  /* → gray-950 */

  /* --- Checkbox ---------------------------------------------------------- */
  --checkbox-background-enabled:  var(--gray-0);  /* → gray-0 */
  --checkbox-background-hover:    var(--gray-900);  /* → gray-900 */
  --checkbox-background-checked:  var(--gray-950);  /* → gray-950 */
  --checkbox-background-disabled: var(--gray-100);  /* → gray-100 */
  --checkbox-border-enabled:      var(--gray-200);  /* → gray-200 */
  --checkbox-border-hover:        var(--gray-400);  /* → gray-400 */
  --checkbox-border-disabled:     var(--gray-200);  /* → gray-200 */
  --checkbox-check:               var(--gray-0);  /* → gray-0 */
  --checkbox-check-disabled:      var(--gray-300);  /* → gray-300 */

  /* --- Radio ------------------------------------------------------------- */
  --radio-background-enabled:  var(--gray-0);  /* → gray-0 */
  --radio-background-hover:    var(--gray-900);  /* → gray-900 */
  --radio-background-selected: var(--gray-950);  /* → gray-950 */
  --radio-background-disabled: var(--gray-100);  /* → gray-100 */
  --radio-border-enabled:      var(--gray-200);  /* → gray-200 */
  --radio-border-hover:        var(--gray-400);  /* → gray-400 */
  --radio-border-disabled:     var(--gray-200);  /* → gray-200 */
  --radio-dot:                 var(--gray-0);  /* → gray-0 */
  --radio-dot-disabled:        var(--gray-300);  /* → gray-300 */

  /* --- Input Field ------------------------------------------------------- */
  --input-background-enabled:  var(--gray-0);  /* → gray-0 */
  --input-background-disabled: var(--gray-100);  /* → gray-100 */
  --input-border-enabled:      var(--gray-200);  /* → gray-200 */
  --input-border-hover:        var(--gray-400);  /* → gray-400 */
  --input-border-focus:        var(--gray-950);  /* → gray-950 */
  --input-border-error:        var(--red-500);  /* → red-500 */
  --input-border-disabled:     var(--gray-200);  /* → gray-200 */
  --input-text-filled:         var(--gray-950);  /* → gray-950 */
  --input-text-placeholder:    var(--gray-400);  /* → gray-400 */
  --input-text-disabled:       var(--gray-300);  /* → gray-300 */
  --input-label:               var(--gray-950);  /* → gray-950 */
  --input-helper-default:      var(--gray-500);  /* → gray-500 */
  --input-helper-error:        var(--red-700);  /* → red-700 */
  --input-icon-enabled:        var(--gray-900);  /* → gray-900 */
  --input-icon-disabled:       var(--gray-300);  /* → gray-300 */
  --input-suffix:              var(--gray-500);  /* → gray-500 */

  /* --- Dropdown (floating select menu, Figma 1815:4659) ------------------- */
  --dropdown-background:              var(--gray-0);  /* → gray-0 */
  --dropdown-border:                  var(--gray-200);  /* → gray-200 */
  --dropdown-item-background-enabled: var(--gray-0);  /* → gray-0 */
  --dropdown-item-background-hover:   var(--gray-50);  /* → gray-50 */
  --dropdown-item-text-enabled:       var(--gray-950);  /* → gray-950 */
  --dropdown-item-icon-enabled:       var(--gray-900);  /* → gray-900 */
  --elevation-dropdown: 0 2px 4px rgba(25, 25, 25, 0.06), 0 8px 24px rgba(25, 25, 25, 0.1);  /* Elevation/Dropdown */

  /* --- Stepper ----------------------------------------------------------- */
  --stepper-indicator-active:          var(--gray-950);  /* → gray-950 */
  --stepper-indicator-inactive:        var(--gray-0);  /* → gray-0 */
  --stepper-indicator-border-inactive: var(--gray-200);  /* → gray-200 */
  --stepper-content-active:            var(--gray-0);  /* → gray-0 */
  --stepper-content-inactive:          var(--gray-400);  /* → gray-400 */
  --stepper-label-active:              var(--gray-950);  /* → gray-950 */
  --stepper-label-inactive:            var(--gray-400);  /* → gray-400 */
  --stepper-connector:                 var(--gray-200);  /* → gray-200 */

  /* --- Badge ------------------------------------------------------------- */
  --badge-primary-background: var(--gray-950);  /* → gray-950 */
  --badge-primary-text:       var(--gray-0);  /* → gray-0 */
  --badge-accent-background:  var(--green-8);  /* → green-8 */
  --badge-accent-text:        var(--gray-950);  /* → gray-950 */
  --badge-inverse-background: var(--gray-0);  /* → gray-0 */
  --badge-inverse-text:       var(--gray-950);  /* → gray-950 */
  --badge-muted-background:   var(--gray-100);  /* → gray-100 */
  --badge-muted-text:         var(--gray-600);  /* → gray-600 */
}


/* ============================================================================
   4. TYPOGRAPHY UTILITY CLASSES
   ----------------------------------------------------------------------------
   One class per Figma text style. Apply directly on any element, e.g.:
     <h1 class="type-heading-xl">FA Gintaras Apranga</h1>
     <p  class="type-body-md-regular">Lorem ipsum</p>
     <span class="type-price-lg">€109.99</span>
============================================================================ */

.type-heading-xl {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-58);
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.type-heading-lg {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-44);
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.type-heading-md {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-32);
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.type-heading-sm-light {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-20);
  line-height: 1.1;
  letter-spacing: 0;
}

.type-heading-sm-regular {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-20);
  line-height: 1.1;
  letter-spacing: 0;
}

.type-heading-sm-medium {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-20);
  line-height: 1.1;
  letter-spacing: 0;
}

.type-heading-sm-bold {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-20);
  line-height: 1.1;
  letter-spacing: 0;
}

.type-body-md-light {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-16);
  line-height: 1.5;
  letter-spacing: 0;
}

.type-body-md-regular {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-16);
  line-height: 1.5;
  letter-spacing: 0;
}

.type-body-md-medium {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-16);
  line-height: 1.5;
  letter-spacing: 0;
}

.type-body-md-bold {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-16);
  line-height: 1.5;
  letter-spacing: 0;
}

.type-body-sm-regular {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-14);
  line-height: 1.5;
  letter-spacing: 0;
}

.type-body-sm-medium {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-14);
  line-height: 1.5;
  letter-spacing: 0;
}

.type-body-sm-bold {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-14);
  line-height: 1.5;
  letter-spacing: 0;
}

.type-body-xs-regular {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-12);
  line-height: 1.5;
  letter-spacing: 0;
}

.type-body-xs-semibold {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-12);
  line-height: 1.5;
  letter-spacing: 0;
}

.type-label-lg-regular {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-16);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.type-label-lg-semibold {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-16);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.type-label-md-regular {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-14);
  line-height: 1.15;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.type-label-md-medium {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-14);
  line-height: 1.15;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.type-label-md-bold {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-14);
  line-height: 1.15;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.type-label-sm-regular {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-12);
  line-height: 1.15;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.type-label-sm-bold {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-12);
  line-height: 1.15;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.type-price-lg {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-58);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.type-price-md {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-32);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.type-price-sm {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-22);
  line-height: 1.1;
  letter-spacing: 0;
}


/* ============================================================================
   5. RESPONSIVE OVERRIDES
   ----------------------------------------------------------------------------
   Figma 'Numbers' collection has 3 modes: Desktop LG (default) / Laptop /
   Mobile. Only real overrides emitted below. Breakpoints are recommended
   defaults — tune to your layout.
============================================================================ */

/* --- Laptop --- */
@media (max-width: 1279px) {
  :root {
    --space-16: 12px;
    --space-32: 24px;
    --space-48: 40px;
    --font-size-20: 16px;
    --font-size-22: 20px;
    --font-size-32: 25px;
    --font-size-44: 35px;
    --font-size-58: 46px;
  }
}

/* --- Mobile --- */
@media (max-width: 767px) {
  :root {
    --space-16: 12px;
    --space-32: 24px;
    --space-48: 40px;
    --font-size-20: 16px;
    --font-size-22: 20px;
    --font-size-32: 27px;
    --font-size-44: 34px;
    --font-size-58: 34px;
  }
}


/* ============================================================================
   6. BUTTON MOTION (Figma 1828:4702 — "Button — hover preview")
   ----------------------------------------------------------------------------
   The Button component's interaction motion: hover scales the button
   over 350ms on cubic-bezier(0.4, 0, 0.2, 1); Smart Animate in the frame
   means background/border/text tween on the same curve. Applied here as
   one grouped rule (this file loads on every modern surface, before the
   per-page stylesheets) so button CTAs across PDP / checkout / account /
   landing / PLP pick it up without markup churn.

   Scale is two-tier. The frame demos 7% on intrinsic-width buttons
   (127–159px → ~10px of growth). Most of our CTAs are stretch/full-width
   (add-to-cart ~480px in the buy row, checkout/auth/profile submits,
   cart-added pair): 7% there is 30+px, enough to overlap the 16px gap to
   the wishlist button. So the default is 3% (matches the frame's absolute
   growth on a wide CTA) and the intrinsic-width CTAs opt up to the
   frame's 7% via `--button-hover-scale` below.

   Scope: text-CTA instances of the Button component ONLY. IconButtons,
   qty steppers, filter chips, size chips, nav arrows and swatches are
   NOT covered by the frame — don't add them here.

   Hover scale is gated to hover-capable fine pointers so touch devices
   never get a stuck scaled button (and full-width mobile CTAs can't
   overflow the viewport). The frame defines no press state: :active
   holds the hover scale minus 1% in 150ms — a press dip, not a snap back
   to rest (the earlier 7%→100% collapse read as a jolt). Tweak here if
   the design later specifies one.
   ============================================================================ */
:root {
	--button-hover-scale: 1.03;
	--button-hover-scale-compact: 1.07;
}
/* Intrinsic-width CTAs: the frame's 7% applies as-is. */
.ap-pp__footer .ap-pp__footer__cta,
.ap-co__empty__cta,
.ap-profile__empty__cta,
.ap-profile__order-btn,
.ap-lp__btn,
.ap-lp__club__cta,
.ap-button--secondary {
	--button-hover-scale: var(--button-hover-scale-compact, 1.07);
}
.ap-pp__personalize__cta,
.wcd-design-button,
.ap-pp__cart-added__btn--primary,
.ap-pp__cart-added__btn--secondary,
.ap-pp__combo-item__cta,
.ap-pp__footer .ap-pp__footer__cta, /* chained to beat the footer chrome's (0,2,0) base rules */
.single_add_to_cart_button,
.ap-co__summary__cta,
.ap-co__empty__cta,
.ap-co__delivery-submit,
.ap-auth__submit,
.ap-profile__submit,
.ap-profile__order-btn,
.ap-profile__empty__cta,
.ap-lp__btn,
.ap-lp__club__cta,
.ap-button--secondary {
	transition:
		transform var(--button-motion-duration, 350ms) var(--button-motion-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		background-color var(--button-motion-duration, 350ms) var(--button-motion-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		border-color var(--button-motion-duration, 350ms) var(--button-motion-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		color var(--button-motion-duration, 350ms) var(--button-motion-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
@media (hover: hover) and (pointer: fine) {
	.ap-pp__personalize__cta:hover,
	.wcd-design-button:hover,
	.ap-pp__cart-added__btn--primary:hover,
	.ap-pp__cart-added__btn--secondary:hover,
	.ap-pp__combo-item__cta:hover,
	.ap-pp__footer .ap-pp__footer__cta:hover,
	.single_add_to_cart_button:hover,
	.ap-co__summary__cta:hover,
	.ap-co__empty__cta:hover,
	.ap-co__delivery-submit:hover,
	.ap-auth__submit:hover,
	.ap-profile__submit:hover,
	.ap-profile__order-btn:hover,
	.ap-profile__empty__cta:hover,
	.ap-lp__btn:hover,
	.ap-lp__club__cta:hover,
	.ap-button--secondary:hover {
		transform: scale(var(--button-hover-scale, 1.03));
	}
	.ap-pp__personalize__cta:hover:disabled,
	.ap-pp__cart-added__btn--primary:hover:disabled,
	.ap-pp__cart-added__btn--secondary:hover:disabled,
	.ap-pp__combo-item__cta:hover:disabled,
	.ap-pp__footer .ap-pp__footer__cta:hover:disabled,
	.single_add_to_cart_button:hover:disabled,
	.ap-co__summary__cta:hover:disabled,
	.ap-co__delivery-submit:hover:disabled,
	.ap-auth__submit:hover:disabled,
	.ap-profile__submit:hover:disabled,
	.ap-pp__personalize__cta:hover[aria-disabled="true"],
	.single_add_to_cart_button:hover[aria-disabled="true"],
	.ap-co__summary__cta:hover[aria-disabled="true"] {
		transform: none;
	}
	.ap-pp__personalize__cta:active:not(:disabled),
	.wcd-design-button:active,
	.ap-pp__cart-added__btn--primary:active:not(:disabled),
	.ap-pp__cart-added__btn--secondary:active:not(:disabled),
	.ap-pp__combo-item__cta:active:not(:disabled),
	.ap-pp__footer .ap-pp__footer__cta:active:not(:disabled),
	.single_add_to_cart_button:active:not(:disabled),
	.ap-co__summary__cta:active:not(:disabled),
	.ap-co__empty__cta:active:not(:disabled),
	.ap-co__delivery-submit:active:not(:disabled),
	.ap-auth__submit:active:not(:disabled),
	.ap-profile__submit:active:not(:disabled),
	.ap-profile__order-btn:active:not(:disabled),
	.ap-profile__empty__cta:active:not(:disabled),
	.ap-lp__btn:active:not(:disabled),
	.ap-lp__club__cta:active:not(:disabled),
	.ap-button--secondary:active:not(:disabled) {
		transform: scale(calc(var(--button-hover-scale, 1.03) - 0.01));
		transition-duration: 150ms;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ap-pp__personalize__cta,
	.wcd-design-button,
	.ap-pp__cart-added__btn--primary,
	.ap-pp__cart-added__btn--secondary,
	.ap-pp__combo-item__cta,
	.ap-pp__footer .ap-pp__footer__cta,
	.single_add_to_cart_button,
	.ap-co__summary__cta,
	.ap-co__empty__cta,
	.ap-co__delivery-submit,
	.ap-auth__submit,
	.ap-profile__submit,
	.ap-profile__order-btn,
	.ap-profile__empty__cta,
	.ap-lp__btn,
	.ap-lp__club__cta,
	.ap-button--secondary {
		transition: none;
		transform: none !important;
	}
}