/*
 * store-tokens.css - the store's brand settings, in one place.
 *
 * COLORS: every color below points to Elementor > Site Settings > Global Colors
 * (the --e-global-color-* variables). The hex after each comma is only a fallback
 * for when Elementor's styles are missing. To rebrand, change the colors in
 * Site Settings, not here.
 *
 * SHADES with transparency (tints, shadows, focus rings) are worked out from those
 * colors with color-mix() where they are used, so they follow the brand too.
 *
 * NEUTRAL ONE-OFFS: a few greys used by single parts of the theme are fixed here.
 *
 * FONTS: the brand font is the Site Settings "Text" font (Inter). The shop UI font,
 * used by the product page, cart, checkout and side cart, is the device's own font.
 *
 * Declared on body: Elementor defines its global colors on the body element
 * (class elementor-kit-*), so they are only available from there down.
 */
body {
	/* Brand: Site Settings > Global Colors */
	--store-primary:          var(--e-global-color-primary, #233A77);
	--store-primary-dark:     var(--e-global-color-prmdark, #16233F);
	--store-primary-light:    var(--e-global-color-ae9e149, #3A5296);
	--store-accent:           var(--e-global-color-accent, #FCCA06);
	--store-accent-dark:      var(--e-global-color-accdark, #E3B200);
	--store-accent-soft:      var(--e-global-color-accsoft, #FFF6D6);
	--store-accent-line:      var(--e-global-color-accline, #F2DE95);

	/* Text */
	--store-text:             var(--e-global-color-text, #161616);
	--store-ink:              var(--e-global-color-inkdark, #14181F);
	--store-body-text:        var(--e-global-color-bodytxt, #333333);
	--store-text-muted:       var(--e-global-color-txtmute, #566072);
	--store-text-subtle:      var(--e-global-color-txtfain, #8A93A3);
	--store-text-secondary:   var(--e-global-color-secondary, #54595F);
	--store-near-black:       var(--e-global-color-de4b121, #0D0D0D);

	/* Backgrounds and lines */
	--store-white:            var(--e-global-color-30bedec, #FFFFFF);
	--store-surface:          var(--e-global-color-surface, #F4F6FA);
	--store-surface-grey:     var(--e-global-color-bff9d30, #F1F1F1);
	--store-line:             var(--e-global-color-lineclr, #E6E9EF);
	--store-line-soft:        var(--e-global-color-linesft, #EEF1F6);
	--store-line-strong:      var(--e-global-color-linestr, #CBD2DE);
	--store-line-grey:        var(--e-global-color-7db184c, #D4D4D4);

	/* Status colors: messages only */
	--store-success:          var(--e-global-color-c69d1c8, #1E7A46);
	--store-danger:           var(--e-global-color-danger0, #C0392B);
	--store-info:             var(--store-primary);

	/* Roles built from the colors above */
	--store-on-primary:       var(--store-white);
	--store-on-accent:        var(--store-primary-dark);
	--store-sale-bg:          var(--store-accent);
	--store-sale-text:        var(--store-primary-dark);
	/* Normal links are colored by Site Settings > Typography > Link, which points at the
	   Primary and Primary Light globals, so they need no token here. */
	--store-link-on-dark:     var(--store-white);
	--store-link-on-dark-hover: var(--store-accent);

	/* Neutral one-offs used by single parts of the theme (not in Site Settings) */
	--store-danger-soft:      #FDECEA;  /* remove button hover in the side cart */
	--store-image-bg:         #FAFBFD;  /* product image stage */
	--store-card-line:        #E2E6EE;  /* product card border */
	--store-card-line-2:      #D7DCE7;  /* product card border, hover */
	--store-swatch-line:      #D5DAE3;  /* swatch and quantity borders */
	--store-field-line:       #BCC3CF;  /* checkout field border */
	--store-field-line-2:     #B4BCCB;  /* checkout field border, alternate */
	--store-grey-a9:          #A9B2C2;  /* unavailable swatch */
	--store-grey-9a:          #9AA3B2;  /* side cart small text */
	--store-grey-8a:          #8A93A6;  /* side cart small text, alternate */
	--store-card-subtle:      #7B8494;  /* product card small text */
	--store-grey-73:          #737373;  /* swatch label */
	--store-grey-4a:          #4A5265;  /* checkout summary title */
	--store-grey-3a:          #3A424E;  /* product page small heading */
	--store-grey-dd:          #DDDDDD;  /* swatch border */
	--store-account-bg:       #EBEBEB;  /* account menu background and content border */
	--store-backdrop:         #101626;  /* dark layer behind the side cart */

	/* Fonts */
	--store-font-brand:       var(--e-global-typography-text-font-family, "Inter"), system-ui, sans-serif;
	--store-font-ui:          system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Corners. Roundness scales every rounded corner on the site at once: 0 gives square
	   corners, 1 is today's look, 1.5 is rounder. Pills and circles always stay fully round.
	   The named corners below can also be changed one family at a time. Corners that are
	   not named here (tiles, thumbnails, chips, small icon buttons) keep their own size in
	   the theme files and follow Roundness too. */
	--store-roundness:        1;
	--store-radius-button:    calc(12px * var(--store-roundness)); /* main shop buttons: Add to cart, Buy now, cart and checkout buttons, phone sticky bars */
	--store-radius-button-sm: calc(11px * var(--store-roundness)); /* small buttons: product cards, side cart, coupon Apply */
	--store-radius-button-site: calc(3px * var(--store-roundness)); /* standard Elementor, WordPress and WooCommerce buttons: home hero, 404 page, contact form, My Account */
	--store-radius-header:    calc(16px * var(--store-roundness)); /* header buttons, cart button and search bar */
	--store-radius-field:     calc(10px * var(--store-roundness)); /* checkout and review form fields, product quantity box */
	--store-radius-field-site: calc(4px * var(--store-roundness)); /* contact form and account form fields */
	--store-radius-card:      calc(16px * var(--store-roundness)); /* product cards, cart and product page panels, pop-up sheets */
	--store-radius-image:     calc(12px * var(--store-roundness)); /* product images and gallery thumbnails */
	--store-radius-media:     calc(8px * var(--store-roundness));  /* images, social icons and boxes placed in Elementor pages */
	--store-radius-pill:      100px; /* badges, counters, progress bars */
	--store-radius-round:     50%;   /* dots and round color swatches */

	/* Shadows, tinted with the brand colors so they follow a rebrand */
	--store-shadow-panel:       0 1px 2px color-mix(in srgb, var(--store-ink) 5%, transparent), 0 4px 14px color-mix(in srgb, var(--store-primary-dark) 6%, transparent); /* cart and product page panels */
	--store-shadow-panel-hover: 0 6px 24px color-mix(in srgb, var(--store-primary-dark) 10%, transparent); /* related product cards, hover */
	--store-shadow-card:        0 1px 2px color-mix(in srgb, var(--store-primary-dark) 4%, transparent), 0 6px 18px color-mix(in srgb, var(--store-primary-dark) 5%, transparent); /* product cards */
	--store-shadow-card-hover:  0 10px 30px color-mix(in srgb, var(--store-primary-dark) 14%, transparent); /* product cards, hover */
	--store-shadow-tile-hover:  0 14px 30px color-mix(in srgb, var(--store-primary) 16%, transparent); /* home category tiles, hover */
	--store-shadow-item:        0 1px 2px color-mix(in srgb, var(--store-ink) 4%, transparent), 0 2px 8px color-mix(in srgb, var(--store-primary-dark) 5%, transparent); /* side cart items */
	--store-shadow-badge:       0 3px 10px color-mix(in srgb, var(--store-primary-dark) 18%, transparent); /* sale badge on product cards */
	--store-shadow-tag:         0 4px 12px color-mix(in srgb, var(--store-primary) 20%, transparent); /* product page image tag */
	--store-shadow-drawer:      -16px 0 50px color-mix(in srgb, var(--store-primary-dark) 24%, transparent); /* side cart */
	--store-shadow-sheet:       0 18px 50px color-mix(in srgb, var(--store-primary-dark) 25%, transparent); /* cart option picker */
	--store-shadow-sticky:      0 -6px 24px color-mix(in srgb, var(--store-primary-dark) 13%, transparent); /* phone sticky bars */

	/* Button glows */
	--store-glow-checkout:          0 4px 14px color-mix(in srgb, var(--store-accent) 28%, transparent); /* cart and checkout main button */
	--store-glow-checkout-hover:    0 6px 18px color-mix(in srgb, var(--store-accent) 34%, transparent); /* the same, hover */
	--store-glow-accent-hover:      0 8px 22px color-mix(in srgb, var(--store-accent) 40%, transparent); /* Buy now and cart page checkout, hover */
	--store-glow-primary-hover:     0 8px 22px color-mix(in srgb, var(--store-primary) 30%, transparent); /* product page Add to cart, hover */
	--store-glow-sidecart-hover:    0 8px 20px color-mix(in srgb, var(--store-accent) 40%, transparent); /* side cart checkout, hover */
	--store-glow-card-accent-hover: 0 6px 16px color-mix(in srgb, var(--store-accent) 40%, transparent); /* product card Buy now, hover */
	--store-glow-card-primary-hover: 0 6px 16px color-mix(in srgb, var(--store-primary) 28%, transparent); /* product card Add to cart, hover */

	/* Focus and selection rings */
	--store-ring-focus:          0 0 0 3px color-mix(in srgb, var(--store-primary) 12%, transparent); /* fields in focus, selected checkout option */
	--store-ring-focus-checkout: 0 0 0 3px color-mix(in srgb, var(--store-primary) 14%, transparent); /* checkout fields in focus */
	--store-ring-button:         0 0 0 1px var(--store-white) inset, 0 0 0 2px var(--store-primary); /* checkout buttons, keyboard focus */
	--store-ring-swatch:         0 0 0 2px color-mix(in srgb, var(--store-primary) 25%, transparent); /* chosen product option */
	--store-ring-swatch-selected: 0 0 0 2px var(--store-white), 0 0 0 4px var(--store-primary); /* chosen color swatch */
	--store-ring-option:         0 0 0 3px color-mix(in srgb, var(--store-primary) 18%, transparent); /* chosen option in the side cart */
	--store-ring-option-cart:    0 0 0 3px color-mix(in srgb, var(--store-primary) 20%, transparent); /* chosen option in the cart picker */
	--store-ring-thumb:          0 0 0 3px color-mix(in srgb, var(--store-accent) 16%, transparent); /* chosen gallery thumbnail */
	--store-ring-progress:       0 0 0 3px color-mix(in srgb, var(--store-accent) 28%, transparent); /* reached step on the free shipping bar */
	--store-edge-swatch:         inset 0 0 0 1px rgba(0, 0, 0, .12); /* thin edge inside color swatches */
	--store-focus-outline:       2px solid var(--store-accent); /* checkout header cart link, keyboard focus */

	/* WooCommerce's own default colors, pointed at the brand (only shows where the
	   theme does not style something itself) */
	--wc-primary:             var(--store-primary);
	--wc-primary-text:        var(--store-on-primary);
	--wc-highlight:           var(--store-primary);
	--wc-green:               var(--store-success);
	--wc-red:                 var(--store-danger);
	--wc-form-border-radius:  var(--store-radius-field-site); /* WooCommerce form fields: login, order tracking */
}

/* Elementor buttons that set no text color of their own keep Elementor's default white
   text instead of taking the site link color (the 404 page button relied on this). */
body a.elementor-button,
body a.elementor-button:hover,
body a.elementor-button:focus { color: var(--store-on-primary); }

/* Buttons and fields that take their corners from Elementor, WooCommerce or the parent
   theme, pointed at the named corners (same sizes as before). Buttons with their own
   corner setting in Elementor keep it. */
body .elementor-button { border-radius: var(--store-radius-button-site); }
body .woocommerce-form-login button.woocommerce-form-login__submit,
body .woocommerce-form-register button.woocommerce-form-register__submit,
body .woocommerce-form-track-order button.button[name="track"] { border-radius: var(--store-radius-button-site); }
body .woocommerce-ordering select.orderby { border-radius: calc(3px * var(--store-roundness)); }

/* Links on the dark header and footer: white, gold on hover. Widgets that set their own
   link color are more specific and keep it. */
body .elementor-location-header a:not(.elementor-button),
body .elementor-location-footer a:not(.elementor-button) { color: var(--store-link-on-dark); }
body .elementor-location-header a:not(.elementor-button):hover,
body .elementor-location-footer a:not(.elementor-button):hover { color: var(--store-link-on-dark-hover); }

/* Checkout buttons: keyboard focus ring in the brand color (WooCommerce default is blue). */
html body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):focus {
	box-shadow: var(--store-ring-button);
}