/* ==========================================================================
   VARIABLES-GLOBAL.CSS
========================================================================== */

/*
*  This CSS file defines all variables for color, typography,
*  layout, framework, etc., shared by all companies (sites). For variables
*  specific to a company, please refer to "variables-company.css".
*
*  NOTE: The variables in this file should NOT be changed unless it a change
*  that is meant to affect all companies.
*/

:root {

	/* ======================================================================
	GRID LAYOUT

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=0%3A1&mode=dev

	These are essentially Bootstrap overrides, plus the addition of the
	480px and 1448px breakpoints.
	====================================================================== */

	--breakpoint-xxs:		0;
	--breakpoint-xs:		480px;
	--breakpoint-sm:		576px;
	--breakpoint-md:		768px;
	--breakpoint-lg:		992px;
	--breakpoint-xl:		1200px;
	--breakpoint-xxl:		1448px;


	/* ======================================================================
	PRIMITIVE COLOR VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=6134%3A24555&mode=dev
	====================================================================== */

	--white:				#ffffff;
	--black:				#000000;
	--black-transparent:	rgba(0,0,0,0.5);

	--gray-50:				#f4f4f4;
	--gray-100:				#e6e6e6;
	--gray-200:				#cccccc;
	--gray-300:				#b3b3b3;
	--gray-400:				#999999;
	--gray-500:				#757575;
	--gray-600:				#666666;
	--gray-700:				#4d4d4d;
	--gray-800:				#333333;
	--gray-900:				#1a1a1a;

	--red-100:				#fff5f6;
	--red-200:				#ffbdc2;
	--red-300:				#f57f87;
	--red-400:				#eb4650;
	--red-500:				#e0121f;
	--red-600:				#b21d26;
	--red-700:				#852026;
	--red-800:				#571c1f;
	--red-900:				#42171a;

	--green-100:			#f5fffd;
	--green-200:			#9ad6ca;
	--green-300:			#58b8a5;
	--green-400:			#2b9983;
	--green-500:			#007a62;
	--green-600:			#0a6150;
	--green-700:			#0e473c;
	--green-800:			#0e2e28;
	--green-900:			#081916;

	--blue-100:				#f5f8ff;
	--blue-200:				#bdd3ff;
	--blue-300:				#7fa6f5;
	--blue-400:				#467deb;
	--blue-500:				#215ad0;
	--blue-500-transparent:	rgba(33,90,208,0.05);
	--blue-600:				#1d4fb2;
	--blue-700:				#204185;
	--blue-800:				#1c2f57;
	--blue-900:				#172542;

	--yellow-100:			#fffdf5;
	--yellow-200:			#fff4bd;
	--yellow-300:			#f5e17f;
	--yellow-400:			#ebcf46;
	--yellow-500:			#e0bc00;
	--yellow-600:			#b29a1d;
	--yellow-700:			#857420;
	--yellow-800:			#574d1c;
	--yellow-900:			#423b17;

	--orange-100:			#fff9f5;
	--orange-200:			#ffd8bd;
	--orange-300:			#f5b07f;
	--orange-400:			#eb8b46;
	--orange-500:			#e06912;
	--orange-600:			#b25b1d;
	--orange-700:			#854a20;
	--orange-800:			#57341c;
	--orange-900:			#422917;

	--purple-100:			#f6f5ff;
	--purple-200:			#c4bdff;
	--purple-300:			#a780e5;
	--purple-400:			#844fdb;
	--purple-500:			#6421d1;
	--purple-600:			#5624a6;
	--purple-700:			#44227a;
	--purple-800:			#2f1b4f;
	--purple-900:			#24163b;


	/* ======================================================================
	UTILITY PRIMITIVE COLOR VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=6134%3A24555&mode=dev
	====================================================================== */

	/* Red
	====================================================================== */
	--color-critical:		#e0121f;
	--color-promo:			#b21d26;

	/* Orange
	====================================================================== */
	--color-backorder:		#c3541b;

	/* Green
	====================================================================== */
	--color-success:		var(--green-600);


	/* ======================================================================
	COLOR VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=6134%3A24555&mode=dev
	====================================================================== */

	/* Text
	====================================================================== */
	--color-text-primary-dark:					var(--black);				/* Primary text color on light background */
	--color-text-primary-light:					var(--white);				/* Primary text color on dark backgrounds */
	--color-text-secondary:						var(--gray-500);			/* Secondary text */
	--color-text-critical:						var(--color-critical);		/* Critical error text outside of a notification */
	--color-text-promo:							var(--color-promo);			/* Promotional text */

	/* Buttons */
	--color-text-button-on-critical:			var(--white);				/* Text on critical surface */
	--color-text-button-on-critical-hover:		var(--white);				/* Text on critical surface (hover) */
	--color-text-button-on-cart:				var(--white);				/* Text on cart surface */
	--color-text-button-on-cart-hover:			var(--white);				/* Text on cart surface (hover) */
	--color-text-button-on-ghost:				var(--black);				/* Text on ghost surface */
	--color-text-button-on-ghost-hover:			var(--white);				/* Text on ghost surface (hover) */

	/* Form Elements */
	--color-text-form-helper:					var(--gray-500);			/* Helper text color for inputs, selects and fields */
	--color-text-form-placeholder:				var(--gray-500);			/* Placeholder text color for inactive forms or lifted labels */
	--color-text-form-active:					var(--black);				/* Text color for text that has been input by a user */

	/* Links */
	--color-text-link-default:					var(--black);				/* Default link color */
	--color-text-link-hover:					var(--gray-700);			/* Link text color on hover */
	--color-text-link-visited:					var(--purple-500);			/* Visited link text color */

	/* Price */
	--color-text-price-primary:					var(--black);				/* Standard price text color */
	--color-text-price-msrp:					var(--gray-500);			/* MSRP price */
	--color-text-price-promo:					var(--color-promo);			/* Sale or promotional price display */

	/* Flags */
	--color-text-flag-promo:					var(--color-promo);			/* Clearance flag */
	--color-text-flag-new:						var(--green-600);			/* New flag */
	--color-text-flag-bestseller:				var(--blue-600);			/* Best Seller flag */
	--color-text-flag-preorder:					var(--purple-400);			/* Pre-Order / Coming Soon flag */

	/* Surface
	====================================================================== */
	--color-surface-primary:					var(--white);				/* The main surface color for most elements */
	--color-surface-primary-hover:				var(--gray-50);				/* Hover surface color for primary surfaces */
	--color-surface-primary-active:				var(--gray-50);				/* Active surface color for primary surfaces */
	--color-surface-primary-inverse:			var(--black);				/* Darker surface color */
	--color-surface-secondary:					var(--gray-50);				/* Lighter surface color */
	--color-surface-secondary-hover:			var(--gray-100);			/* Secondary surface hover color */
	--color-surface-promo:						var(--color-promo);			/* Surface color for promotional materials */

	/* Buttons */
	--color-surface-button-critical:			var(--color-critical);		/* Critical button background */
	--color-surface-button-critical-hover:		var(--red-600);				/* Critical button background hover */
	--color-surface-button-cart:				var(--green-500);			/* Cart button background */
	--color-surface-button-cart-hover:			var(--green-600);			/* Cart button background hover */
	--color-surface-button-ghost:				var(--white);				/* Ghost buttonbackground color */
	--color-surface-button-ghost-hover:			var(--black);				/* Ghost button hover color */

	/* Form Elements */
	--color-surface-form-default:				var(--white);				/* Default surface for all form elements */
	--color-surface-form-selected:				var(--blue-500);			/* Surface color for selected elements such as checkboxes and radios */
	--color-surface-form-selected-secondary:	var(--blue-500-transparent);/* Surface color for selected radio containers */
	--color-surface-form-critical:				var(--color-critical);		/* Surface color for critical errors within checkboxes and radios */

	/* Border
	====================================================================== */
	--color-border-primary:						var(--gray-200);			/* Standard border for non card elements */
	--color-border-primary-hover:				var(--black);				/* Hover border for non card elements */
	--color-border-primary-active:				var(--black);				/* Active border for non card elements */
	--color-border-secondary:					var(--gray-100);			/* Lighter border for more subtle separations */
	--color-border-light:						var(--white);				/* Border for use on darker backgrounds and surfaces */
	--color-border-dark:						var(--black);				/* Border for use on lighter backgrounds and surfaces */

	/* Buttons */
	--color-border-button-ghost:				var(--gray-500);			/* Border for ghost buttons */
	--color-border-button-ghost-hover:			var(--black);				/* Hover border for ghost buttons */

	/* Form Elements */
	--color-border-form-default:				var(--gray-500);			/* Standard border for form elements */
	--color-border-form-hover:					var(--black);				/* Hover border for radio container */
	--color-border-form-active:					var(--black);				/* Border color for active form elements */
	--color-border-form-selected:				var(--blue-500);			/* Border color for selected elements such as checkboxes and radios */
	--color-border-form-critical:				var(--color-critical);		/* Border color for critical errors within checkboxes and radios */

	/* Cards */
	--color-border-card-default:				var(--gray-200);			/* Standard border for card elements */
	--color-border-card-hover:					var(--black);				/* Hover border for card elements */

	/* Notifications
	====================================================================== */
	/* Info */
	--color-text-support-info:					var(--blue-500);			/* Info text & border */
	--color-border-support-info:				var(--blue-500);			/* Info text & border */
	--color-surface-support-info:				var(--blue-100);			/* Info notification background */

	/* Warnings */
	--color-text-support-warning:				var(--yellow-700);			/* Warning text & border */
	--color-border-support-warning:				var(--yellow-700);			/* Warning text & border */
	--color-surface-support-warning:			var(--yellow-100);			/* Warning notification background */

	/* Critical */
	--color-text-support-critical:				var(--color-critical);		/* Critical text & border */
	--color-border-support-critical:			var(--color-critical);		/* Critical text & border */
	--color-surface-support-critical:			var(--red-100);				/* Critical notification background */

	/* Success */
	--color-text-support-success:				var(--green-500);			/* Success text & border */
	--color-border-support-success:				var(--green-500);			/* Success text & border */
	--color-surface-support-success:			var(--green-100);			/* Success notification background */

	/* Backorder */
	--color-text-support-backorder:				var(--color-backorder);			/* Backorder text & border */
	--color-border-support-backorder:			var(--color-backorder);			/* Backorder text & border */
	--color-surface-support-backorder:			var(--orange-100);			/* Backorder notification background */

	/* Ordering
	====================================================================== */
	/* Available (When a product is available) */
	--color-surface-order-available:			var(--white);				/* Available surface */
	--color-surface-order-available-hover:		var(--white);				/* Available surface (hover) */
	--color-surface-order-available-active:		var(--black);				/* Available surface (active) */
	--color-border-order-available:				var(--white);				/* Available border (style images) */
	--color-border-order-box-available:			var(--gray-500);			/* Available border (box style & style dropdown) */
	--color-border-order-available-hover:		var(--black);				/* Available border (hover) */
	--color-border-order-available-active:		var(--black);				/* Available border (active) */
	--color-text-order-available:				var(--black);				/* Available text */
	--color-text-order-available-hover:			var(--black);				/* Available text (hover) */
	--color-text-order-available-active:		var(--white);				/* Available text (active) */

	/* Unavailable (When a product is unavailable) */
	--color-surface-order-unavailable:			var(--gray-50);				/* Unavailable surface */
	--color-surface-order-unavailable-hover:	var(--gray-50);				/* Unavailable surface (hover) */
	--color-surface-order-unavailable-active:	var(--gray-500);			/* Unavailable surface (active) */
	--color-border-order-unavailable:			var(--white);				/* Unavailable border (style images) */
	--color-border-order-unavailable-hover:		var(--gray-500);			/* Unavailable border (hover) */
	--color-border-order-unavailable-active:	var(--gray-500);			/* Unavailable border (active) */
	--color-text-order-unavailable:				var(--gray-500);			/* Unavailable text */
	--color-text-order-unavailable-hover:		var(--gray-500);			/* Unavailable text (hover) */
	--color-text-order-unavailable-active:		var(--white);				/* Unavailable text (active) */

	/* Backorder (When a product is backordered) */
	--color-surface-order-backorder:			var(--white);				/* Backorder surface */
	--color-surface-order-backorder-hover:		var(--white);				/* Backorder surface (hover) */
	--color-surface-order-backorder-active:		var(--color-backorder);			/* Backorder surface (active) */
	--color-border-order-backorder:				var(--color-backorder);			/* Backorder border (style images) */
	--color-border-order-backorder-hover:		var(--color-backorder);			/* Backorder border (hover) */
	--color-border-order-backorder-active:		var(--color-backorder);			/* Backorder border (active) */
	--color-text-order-backorder:				var(--color-backorder);			/* Backorder text */
	--color-text-order-backorder-hover:			var(--color-backorder);			/* Backorder text (hover) */
	--color-text-order-backorder-active:		var(--white);				/* Backorder text (active) */

	/* Background
	====================================================================== */
	--color-bg-primary:							var(--white);				/* Main color for page backgrounds */
	--color-bg-inverse:							var(--black);				/* Darker background color option */
	--color-bg-secondary:						var(--gray-50);				/* Lighter background color option */
	--color-bg-overlay:							var(--black-transparent);	/* Modal background */


	/* ======================================================================
	PRIMITIVE FONT VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=5321%3A3359&mode=dev

	All @font-face calls and font family variables can be found in
	"variables-company.css".
	====================================================================== */

	/* Style
	====================================================================== */
	--font-style-normal:						normal;
	--font-style-italic:						italic;

	/* Weight
	====================================================================== */
	--font-weight-reg:							400;
	--font-weight-med:							500;
	--font-weight-semi:							600;
	--font-weight-bold:							700;
	--font-weight-extra:						800;

	/* Size (Clamp)
	====================================================================== */
	--font-size-25:								0.75rem;
	--font-size-50:								clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
	--font-size-100:							clamp(0.875rem, 0.80rem + 0.35vw, 1.125rem);
	--font-size-200:							clamp(1rem, 0.93rem + 0.35vw, 1.25rem);
	--font-size-300:							clamp(1.125rem, 1.02rem + 0.53vw, 1.5rem);
	--font-size-400:							clamp(1.25rem, 1.12rem + 0.41vw, 1.5rem);
	--font-size-500:							clamp(1.5rem, 1.22rem + 1.42vw, 2.5rem);
	--font-size-600:							clamp(2rem, 1.72rem + 1.42vw, 3rem);
	--font-size-700:							clamp(2.5rem, 2.22rem + 1.42vw, 3.5rem);
	--font-size-800:							clamp(3rem, 2.72rem + 1.42vw, 4rem);
	--font-size-900:							clamp(3.5rem, 3.22rem + 1.42vw, 4.5rem);

	/* Size (No Clamp)
	====================================================================== */
	--font-size-25-NC:							0.75rem;
	--font-size-50-NC:							0.875rem;
	--font-size-100-NC:							1rem;
	--font-size-200-NC:							1.125rem;
	--font-size-300-NC:							1.25rem;
	--font-size-400-NC:							1.5rem;
	--font-size-500-NC:							2rem;
	--font-size-600-NC:							2.5rem;
	--font-size-700-NC:							3rem;
	--font-size-800-NC:							3.5rem;
	--font-size-900-NC:							4rem;

	/* Line Height
	====================================================================== */
	--font-line-height-01:						0.875;
	--font-line-height-02:						1;
	--font-line-height-03:						1.125;
	--font-line-height-04:						1.25;
	--font-line-height-05:						1.5;
	--font-line-height-06:						1.75;

	/* Letter Spacing
	====================================================================== */
	--font-letter-spacing-sm:					0.03125rem;					/* .5px */
	
	--letter-spacing-01-negative:				-0.03125rem;				/* -0.5px */
	--letter-spacing-02-negative:				-0.0625rem;					/* -1px   */
	--letter-spacing-00:						0;
	--letter-spacing-01:						0.03125rem;					/* 0.5px  */
	--letter-spacing-02:						0.0625rem;					/* 1px    */

	/* ======================================================================
	TYPOGRAPHY VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=2623%3A2795&mode=dev

	These variables are to be used like this each font variable having a corresponding letter-spacing variable:
	"font: var(--text-heading-01);"
	"letter-spacing: var(--letter-spacing-text-heading-01);"
	====================================================================== */

	/* Headings
	====================================================================== */
	--text-heading-01:							var(--font-style-normal) var(--font-weight-semi) var(--font-size-600)/var(--font-line-height-04) var(--font-family-01);		/* Page headings */
	--text-heading-02:							var(--font-style-normal) var(--font-weight-semi) var(--font-size-500)/var(--font-line-height-04) var(--font-family-01);		/* Section headings */
	--text-heading-03:							var(--font-style-normal) var(--font-weight-med) var(--font-size-400)/var(--font-line-height-04) var(--font-family-02);		/* Sub section headings/Modal titles */
	--text-heading-04:							var(--font-style-normal) var(--font-weight-med) var(--font-size-300)/var(--font-line-height-04) var(--font-family-02);		/* Sub sub section headings */
	
	--letter-spacing-text-heading-01:			var(--letter-spacing-font-family-01);
	--letter-spacing-text-heading-02:			var(--letter-spacing-font-family-01);
	--letter-spacing-text-heading-03:			var(--letter-spacing-font-family-02);
	--letter-spacing-text-heading-04:			var(--letter-spacing-font-family-02);

	--text-heading-01-NC:						var(--font-style-normal) var(--font-weight-semi) var(--font-size-600-NC)/var(--font-line-height-04) var(--font-family-01);	/* Page headings */
	--text-heading-02-NC:						var(--font-style-normal) var(--font-weight-semi) var(--font-size-500-NC)/var(--font-line-height-04) var(--font-family-01);	/* Section headings */
	--text-heading-03-NC:						var(--font-style-normal) var(--font-weight-med) var(--font-size-400-NC)/var(--font-line-height-04) var(--font-family-02);	/* Sub section headings/Modal titles */
	--text-heading-04-NC:						var(--font-style-normal) var(--font-weight-med) var(--font-size-300-NC)/var(--font-line-height-04) var(--font-family-02);	/* Sub sub section headings */

	--letter-spacing-text-heading-01-NC:		var(--letter-spacing-font-family-01);
	--letter-spacing-text-heading-02-NC:		var(--letter-spacing-font-family-01);
	--letter-spacing-text-heading-03-NC:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-heading-04-NC:		var(--letter-spacing-font-family-02);


	/* Titles
	====================================================================== */
	--text-title-sm:							var(--font-style-normal) var(--font-weight-med) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);
	--text-title-md:							var(--font-style-normal) var(--font-weight-med) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);
	--text-title-lg:							var(--font-style-normal) var(--font-weight-med) var(--font-size-200)/var(--font-line-height-05) var(--font-family-02);
	--text-title-xl:							var(--font-style-normal) var(--font-weight-med) var(--font-size-400)/var(--font-line-height-04) var(--font-family-02);

	--letter-spacing-text-title-sm:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-title-md:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-title-lg:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-title-xl:				var(--letter-spacing-font-family-02);

	/* Forms
	====================================================================== */
	--text-form-label:							var(--font-style-normal) var(--font-weight-bold) var(--font-size-25)/var(--font-line-height-05) var(--font-family-02);		/* Form UI labels */
	--text-form-field-label-raised:				var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-05) var(--font-family-02);		/* Raised label for active form inputs and text areas */
	--text-form-field-label:					var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Form field placeholder and user input text */
	--text-form-helper:							var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-05) var(--font-family-02);		/* Form helper text located below inputs, selects, etc. */
	--text-form-option:							var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Select menu values */

	--letter-spacing-text-form-label:				var(--letter-spacing-01); /* intentionally does not use standard --letter-spacing-font-family-02 */
	--letter-spacing-text-form-field-label-raised:	var(--letter-spacing-font-family-02);
	--letter-spacing-text-form-field-label:			var(--letter-spacing-font-family-02);
	--letter-spacing-text-form-helper:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-form-option:				var(--letter-spacing-font-family-02);

	/* Body
	====================================================================== */
	--text-body-xs:								var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-06) var(--font-family-02);		/* Extra small text display */
	--text-body-xs-compact:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-05) var(--font-family-02);		/* Extra small text display - smaller line height */
	--text-body-sm:								var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-06) var(--font-family-02);		/* Small text display */
	--text-body-sm-compact:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Small text display - smaller line height */
	--text-body-md:								var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-06) var(--font-family-02);		/* Medium text display */
	--text-body-md-compact:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Medium text display - smaller line height */
	--text-body-lg:								var(--font-style-normal) var(--font-weight-reg) var(--font-size-200)/var(--font-line-height-06) var(--font-family-02);		/* Large text display */
	--text-body-lg-compact:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-200)/var(--font-line-height-05) var(--font-family-02);		/* Large text display - smaller line height */

	--letter-spacing-text-body-xs:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-body-xs-compact:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-body-sm:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-body-sm-compact:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-body-md:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-body-md-compact:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-body-lg:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-body-lg-compact:		var(--letter-spacing-font-family-02);

	/* Links
	====================================================================== */
	--text-link-sm:								var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-05) var(--font-family-02);		/* Small text link */
	--text-link-sm-hover:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-05) var(--font-family-02);		/* Small text link (hover) */
	--text-link-sm-visited:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-05) var(--font-family-02);		/* Small text link (visited) */
	--text-link-md:								var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Medium text link */
	--text-link-md-hover:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Medium text link (hover) */
	--text-link-md-visited:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Medium text link (visited) */
	--text-link-lg:								var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Large text link */
	--text-link-lg-hover:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Large text link (hover) */
	--text-link-lg-visited:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Large text link (visited) */

	--letter-spacing-text-link-sm:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-link-sm-hover:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-link-sm-visited:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-link-md:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-link-md-hover:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-link-md-visited:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-link-lg:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-link-lg-hover:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-link-lg-visited:		var(--letter-spacing-font-family-02);

	/* Flags
	====================================================================== */
	--text-flag:								var(--font-style-normal) var(--font-weight-med) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Product flags */

	--letter-spacing-text-flag:					var(--letter-spacing-font-family-02);

	/* Product Name & Type
	====================================================================== */
	--text-product-name-lg:						var(--font-style-normal) var(--font-weight-bold) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Large display product name */
	--text-product-name-sm:						var(--font-style-normal) var(--font-weight-bold) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Small display product name */
	--text-product-type-lg:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Large display product type/model */
	--text-product-type-sm:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Small display product type/model */

	--letter-spacing-text-product-name-lg:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-product-name-sm:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-product-type-lg:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-product-type-sm:		var(--letter-spacing-font-family-02);

	/* Price
	====================================================================== */
	--text-price-sm:							var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Small product price displays */
	--text-price-sm-promo:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Small promotional price displays */
	--text-price-md:							var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Large product price displays */
	--text-price-md-promo:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Large promotional price displays */
	--text-price-lg:							var(--font-style-normal) var(--font-weight-med) var(--font-size-400)/var(--font-line-height-04) var(--font-family-02);		/* Promo cards */
	--text-price-lg-promo:						var(--font-style-normal) var(--font-weight-med) var(--font-size-400)/var(--font-line-height-04) var(--font-family-02);		/* Promo cards */
	--text-price-msrp-sm:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Product displays */
	--text-price-msrp-md:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Product displays */

	--letter-spacing-text-price-sm:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-price-sm-promo:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-price-md:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-price-md-promo:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-price-lg:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-price-lg-promo:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-price-msrp-sm:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-price-msrp-md:		var(--letter-spacing-font-family-02);

	/* Buttons
	====================================================================== */
	--text-button-lg:							var(--font-style-normal) var(--font-weight-med) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Button text large */
	--text-button-sm:							var(--font-style-normal) var(--font-weight-med) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Button text small */

	--letter-spacing-text-button-lg:			var(--letter-spacing-font-family-02);
	--letter-spacing-text-button-sm:			var(--letter-spacing-font-family-02);

	/* Menu
	====================================================================== */
	--text-menu-primary:						var(--font-style-normal) var(--font-weight-bold) var(--font-size-100-NC)/var(--font-line-height-06) var(--font-family-02);		/* Main menu links */
	--text-menu-secondary:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50-NC)/var(--font-line-height-05) var(--font-family-02);		/* Menu sub links under main menu section headings */
	--text-menu-sub:							var(--font-style-normal) var(--font-weight-reg) var(--font-size-50-NC)/var(--font-line-height-05) var(--font-family-02);		/* Menu secondary links */
	--text-menu-sub-active:						var(--font-style-normal) var(--font-weight-bold) var(--font-size-50-NC)/var(--font-line-height-05) var(--font-family-02);		/* Menu secondary links - hover state */

	--letter-spacing-text-menu-primary:			var(--letter-spacing-font-family-02);
	--letter-spacing-text-menu-secondary:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-menu-sub:				var(--letter-spacing-font-family-02);
	--letter-spacing-text-menu-sub-active:		var(--letter-spacing-font-family-02);

	/* Marketing Tiles
	====================================================================== */
	--text-marketing-headline-xs:				var(--font-style-normal) var(--font-weight-bold) var(--font-size-400)/var(--font-line-height-03) var(--font-family-02);		/* Headline - 320, 480, 768 */
	--text-marketing-headline-sm:				var(--font-style-normal) var(--font-weight-bold) var(--font-size-400)/var(--font-line-height-03) var(--font-family-02);		/* Headline - 576, 992, 1200, 1448 */
	--text-marketing-headline-md:				var(--font-style-normal) var(--font-weight-bold) var(--font-size-400)/var(--font-line-height-03) var(--font-family-02);		/* Headline - 768 */
	--text-marketing-headline-lg:				var(--font-style-normal) var(--font-weight-bold) var(--font-size-400)/var(--font-line-height-03) var(--font-family-02);		/* Headline - 992 */
	--text-marketing-headline-xl:				var(--font-style-normal) var(--font-weight-bold) var(--font-size-400)/var(--font-line-height-03) var(--font-family-02);		/* Headline - 1200 */
	--text-marketing-headline-xxl:				var(--font-style-normal) var(--font-weight-bold) var(--font-size-400)/var(--font-line-height-03) var(--font-family-02);		/* Headline - 1448 */
	--text-marketing-content-sm:				var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-04) var(--font-family-02);		/* Top Line - 320, 480/Sub Line - 320, 480 */
	--text-marketing-content-md:				var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-04) var(--font-family-02);		/* Top Line - 576, 768, 992, 1200, 1448
																																											   Sub Line - 576, 768, 992, 1200, 1448 */
	--text-marketing-content-lg:				var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-04) var(--font-family-02);		/* Top Line - 768, 992/Sub Line - 768, 992 */
	--text-marketing-content-xl:				var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-04) var(--font-family-02);		/* Top Line - 1200, 1448 */
	--text-marketing-content-disclaimer:		var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-03) var(--font-family-02);		/* Disclaimer text all sizes */

	--letter-spacing-text-marketing-headline-xs:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-marketing-headline-sm:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-marketing-headline-md:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-marketing-headline-lg:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-marketing-headline-xl:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-marketing-headline-xxl:		var(--letter-spacing-font-family-02);
	--letter-spacing-text-marketing-content-sm:			var(--letter-spacing-font-family-02);
	--letter-spacing-text-marketing-content-md:			var(--letter-spacing-font-family-02);
	--letter-spacing-text-marketing-content-lg:			var(--letter-spacing-font-family-02);
	--letter-spacing-text-marketing-content-xl:			var(--letter-spacing-font-family-02);
	--letter-spacing-text-marketing-content-disclaimer:	var(--letter-spacing-font-family-02);

	/* Marketing Tiles (Holiday)
	====================================================================== */
	--text-headline-holiday-sm:					var(--font-style-normal) var(--font-weight-holiday-01) var(--font-size-400)/var(--font-line-height-holiday-01) var(--font-family-holiday-01); /* Headline - 320, 480, 768 */
	--text-headline-holiday-md:					var(--font-style-normal) var(--font-weight-holiday-01) var(--font-size-400)/var(--font-line-height-holiday-01) var(--font-family-holiday-01); /* Headline - 576, 992, 1200, 1448 */
	--text-headline-holiday-lg:					var(--font-style-normal) var(--font-weight-holiday-01) var(--font-size-400)/var(--font-line-height-holiday-01) var(--font-family-holiday-01); /* Headline - 768 */
	--text-headline-holiday-xl:					var(--font-style-normal) var(--font-weight-holiday-01) var(--font-size-400)/var(--font-line-height-holiday-01) var(--font-family-holiday-01); /* Headline - 992 */
	--text-headline-holiday-xxl:				var(--font-style-normal) var(--font-weight-holiday-01) var(--font-size-400)/var(--font-line-height-holiday-01) var(--font-family-holiday-01); /* Headline - 1200, 1448 */
	--text-content-holiday-sm:					var(--font-style-normal) var(--font-weight-holiday-02) var(--font-size-50)/var(--font-line-height-holiday-02) var(--font-family-holiday-02);  /* Top Line - 320, 480
																																																 Sub Line - 320, 480 */
	--text-content-holiday-md:					var(--font-style-normal) var(--font-weight-holiday-02) var(--font-size-50)/var(--font-line-height-holiday-02) var(--font-family-holiday-02); /* Top Line - 576, 768, 992, 1200, 1448
																																																 Sub Line - 576, 768, 992, 1200, 1448 */
	--text-content-holiday-lg:					var(--font-style-normal) var(--font-weight-holiday-02) var(--font-size-50)/var(--font-line-height-holiday-02) var(--font-family-holiday-02); /* Top Line - 768, 992/Sub Line - 768, 992 */
	--text-content-holiday-xl:					var(--font-style-normal) var(--font-weight-holiday-02) var(--font-size-50)/var(--font-line-height-holiday-02) var(--font-family-holiday-02); /* Top Line - 1200, 1448 */

	/* ======================================================================
	SPACING VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=2901%3A9965&mode=dev
	====================================================================== */

	/* Positive
	====================================================================== */
	--spacing-01:								4px;
	--spacing-02:								8px;
	--spacing-03:								12px;
	--spacing-04:								16px;
	--spacing-05:								20px;
	--spacing-06:								24px;
	--spacing-07:								28px;
	--spacing-08:								32px;
	--spacing-09:								36px;
	--spacing-10:								40px;
	--spacing-11:								44px;
	--spacing-12:								48px;
	--spacing-13:								52px;
	--spacing-14:								56px;
	--spacing-15:								60px;
	--spacing-16:								64px;

	/* Negative
	====================================================================== */
	--spacing-01-negative:						-4px;
	--spacing-02-negative:						-8px;
	--spacing-03-negative:						-12px;
	--spacing-04-negative:						-16px;
	--spacing-05-negative:						-20px;
	--spacing-06-negative:						-24px;
	--spacing-07-negative:						-28px;
	--spacing-08-negative:						-32px;
	--spacing-09-negative:						-36px;
	--spacing-10-negative:						-40px;
	--spacing-11-negative:						-44px;
	--spacing-12-negative:						-48px;
	--spacing-13-negative:						-52px;
	--spacing-14-negative:						-56px;
	--spacing-15-negative:						-60px;
	--spacing-16-negative:						-64px;

	/* Negative + Border
	====================================================================== */
	--spacing-00-negative-border:				-1px;
	--spacing-01-negative-border:				-5px;
	--spacing-02-negative-border:				-9px;
	--spacing-03-negative-border:				-13px;
	--spacing-04-negative-border:				-17px;
	--spacing-05-negative-border:				-21px;
	--spacing-06-negative-border:				-25px;
	--spacing-07-negative-border:				-29px;
	--spacing-08-negative-border:				-33px;
	--spacing-09-negative-border:				-37px;
	--spacing-10-negative-border:				-41px;
	--spacing-11-negative-border:				-45px;
	--spacing-12-negative-border:				-49px;
	--spacing-13-negative-border:				-53px;
	--spacing-14-negative-border:				-57px;
	--spacing-15-negative-border:				-61px;
	--spacing-16-negative-border:				-65px;


	/* ======================================================================
	BORDER VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=7946%3A15842&mode=dev
	====================================================================== */
	--border-radius-sm:							4px;														/* Buttons, images, tags */
	--border-radius-md:							8px;														/* Cards, images, components */
	--border-radius-md-inner:					calc(var(--border-radius-md) - var(--border-weight-01));	/* For images contained within card Ex: 8px Border Radius - 1px Border = 7px */
	--border-radius-lg:							200px;														/* Tags, nav cats */
	--border-weight-01:							1px;														/* Standard border */
	--border-weight-02:							2px;														/* Hover border */

	/* Box Shadow
	====================================================================== */
	--box-shadow-black:							0 0 0 1px var(--black);		/* Hover border general */
	--box-shadow-gray:							0 0 0 1px var(--gray-500);	/* Hover border for unavailable ordering styles */
	--box-shadow-backorder:						0 0 0 1px var(--color-backorder);	/* Hover border for backorder ordering styles */


	/* ======================================================================
	ASPECT RATIO VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=8724%3A20903&mode=dev
	====================================================================== */

	/* Aspect Primitives
	====================================================================== */
	--aspect-1-1:								1/1;						/* Riding hard good */
	--aspect-3-4:								3/4;						/* Apparel, hard goods */
	--aspect-4-3:								4/3;						/* Shoes, baits, Tackle hard goods */
	--aspect-7-12:								7/12;						/* Racquet */
	--aspect-16-9:								16/9;						/* Video & article thumbs */
	--aspect-350-1532:							350/1532;					/* Rods */
	--aspect-517-1200:							517/1200;					/* Racquet thumbs */

	/* Universal Variables
	====================================================================== */
	--image-video:								var(--aspect-16-9);			/* Video thumb */
	--image-article:							var(--aspect-16-9);			/* Article thumb */
	--image-custom:								var(--aspect-1-1);			/* Custom image */


	/* ======================================================================
	OPACITY VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=8033%3A1446&mode=dev
	====================================================================== */
	--opacity-00:								0;
	--opacity-10:								0.1;
	--opacity-20:								0.2;
	--opacity-30:								0.3;
	--opacity-40:								0.4;
	--opacity-50:								0.5;
	--opacity-60:								0.6;
	--opacity-70:								0.7;
	--opacity-80:								0.8;
	--opacity-90:								0.9;
	--opacity-100:								1;
	--opacity-disabled:							var(--opacity-30);

	/* ======================================================================
	Z-INDEX VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=5322%3A47828&mode=dev
	====================================================================== */
	--z-index-10:								2050;						/* Modal header & footers (sticky) */
	--z-index-09:								1850;						/* Modals/panels */
	--z-index-08:								1650;
	--z-index-07:								1450;
	--z-index-06:								1250;
	--z-index-05:								1050;						/* Sticky headers drawer (active) */
	--z-index-04:								850;						/* Live chat widget & Back to top */
	--z-index-03:								650;						/* Drawer (inactive) */
	--z-index-02:								450;						/* Most content */
	--z-index-01:								250;						/* Backgrounds */


	/* ======================================================================
	PRIMITIVE ICON VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=4828%3A6816&mode=dev

	To use, set these values on the icon container:
	* width: var(--icon-size-?);						Example: width: var(--icon-size-md);
	* height: var(--icon-size-?);						Example: height: var(--icon-size-md);
	* padding: var(--icon-size-?) 0 0;					Example: padding: var(--icon-size-md) 0 0;
	* background-size: var(--icon-size-?);				Example: background-size: var(--icon-size-md);
	* background-position: var(--icon-position-?-?);	Example: background-position: var(--icon-position-md-black);
	====================================================================== */

	/* Size
	====================================================================== */
	--icon-size-xs:								12px;						/* Extra small */
	--icon-size-sm:								16px;						/* Small */
	--icon-size-md:								24px;						/* Medium */
	--icon-size-lg:								32px;						/* Large */
	--icon-size-xl:								40px;						/* Extra large */

	/* Position (Determines color of icon)
	====================================================================== */
	/* Extra Small */
	--icon-position-xs-black:					0 0;
	--icon-position-xs-gray:					0 -12px;
	--icon-position-xs-white:					0 -24px;
	--icon-position-xs-color:					0 -36px;

	/* Small */
	--icon-position-sm-black:					0 0;
	--icon-position-sm-gray:					0 -16px;
	--icon-position-sm-white:					0 -32px;
	--icon-position-sm-color:					0 -48px;

	/* Medium */
	--icon-position-md-black:					0 0;
	--icon-position-md-gray:					0 -24px;
	--icon-position-md-white:					0 -48px;
	--icon-position-md-color:					0 -72px;

	/* Large */
	--icon-position-lg-black:					0 0;
	--icon-position-lg-gray:					0 -32px;
	--icon-position-lg-white:					0 -64px;
	--icon-position-lg-color:					0 -96px;

	/* Extra Large */
	--icon-position-xl-black:					0 0;
	--icon-position-xl-gray:					0 -40px;
	--icon-position-xl-white:					0 -80px;
	--icon-position-xl-color:					0 -120px;


	/* ======================================================================
	MISC BOOTSTRAP VARIABLE OVERRIDES
	====================================================================== */
	--primary:									var(--color-brand-primary-01);
	--secondary:								var(--color-brand-secondary-01);
	--success:									var(--color-surface-support-success);
	--info:										var(--color-surface-support-info);
	--warning:									var(--color-surface-support-warning);
	--danger:									var(--color-surface-support-critical);
	--font-family-sans-serif:					var(--font-family-01);
}



/* ==========================================================================
   VARIABLES-COMPANY.CSS -- PICKLEBALLWAREHOUSE.COM
========================================================================== */

/*
*  This CSS file defines all company-specific variables for color, typography,
*  layout, framework, etc.
*
*  NOTE: For global variables that affect all companies, please refer to
*  "variables-global.css".
*/

:root {

	/* ======================================================================
	COMPANY COLOR VARIABLES

	Figma file: https://www.figma.com/file/sJfgoXSIUEMS31RLBhsZ77/Tackle-Design-System?node-id=0%3A1&mode=dev
	====================================================================== */

	/* Branding Colors
	====================================================================== */
	--color-brand-primary-01:					#d1f244;				   /* Primary brand color */
	--color-brand-primary-02:					#c2d83f;				   /* Primary brand color (hover) */
	--color-brand-secondary-01:					#000000;				   /* Secondary brand color */
	--color-brand-secondary-02:					#333333;				   /* Secondary brand color (hover) */
	--color-brand-tertiary-01:					#757575;				   /* Tertiary brand color */
	--color-brand-tertiary-02:					#999999;				   /* Tertiary brand color (hover) */
	--color-brand-text-on-primary:				#000000;				   /* Text color on primary */
	--color-brand-text-on-secondary:			#ffffff;				   /* Text color on secondary */
	--color-brand-text-on-tertiary:				#000000;				   /* Text color on tertiary */

	--color-brand-primary-01-d01:				#d1f244;				   /* Primary brand color */
	--color-brand-primary-02-d01:				#c2d83f;				   /* Primary brand color (hover) */
	--color-brand-secondary-01-d01:				#000000;				   /* Secondary brand color */
	--color-brand-secondary-02-d01:				#333333;				   /* Secondary brand color (hover) */
	--color-brand-tertiary-01-d01:				#757575;				   /* Tertiary brand color */
	--color-brand-tertiary-02-d01:				#999999;				   /* Tertiary brand color (hover) */
	--color-brand-text-on-primary-d01:			#000000;				   /* Text color on primary */
	--color-brand-text-on-secondary-d01:		#ffffff;				   /* Text color on secondary */
	--color-brand-text-on-tertiary-d01:			#000000;				   /* Text color on tertiary */

	/* Brand Logo
	====================================================================== */
	--logo-header-checkout-bg-image: url("https://img.tennis-warehouse.com/graphics-resizer/logos/PAD-logo-icon.svg");

	/* Holiday Colors
	====================================================================== */
	--color-holiday-01-d01:							#f9f4f0;				   /* Holiday color option #1 ("white" replacement option - primarily for text) */
	--color-holiday-02-d01:							#122c0f;				   /* Holiday color option #2 ("black" replacement option - primarily for text) */
	--color-holiday-03-d01:							#b62525;				   /* Holiday color option #3 (primarily for button background) */
	--color-holiday-04-d01:							#4a4c20;				   /* Holiday color option #4 (primarily for button background) */
	--color-text-holiday-on-01-d01:					var(--color-holiday-01);	/* Button text color on "color-holiday-01" background */
	--color-text-holiday-on-02-d01:					var(--color-holiday-02);	/* Button text color on "color-holiday-02" background */
	--color-text-holiday-on-03-d01:					var(--color-holiday-03);	/* Button text color on "color-holiday-03" background */
	--color-text-holiday-on-04-d01:					var(--color-holiday-04);	/* Button text color on "color-holiday-04" background */


	/* ======================================================================
	COMPANY TYPOGRAPHY VARIABLES

	Figma file: https://www.figma.com/file/sJfgoXSIUEMS31RLBhsZ77/Tackle-Design-System?node-id=17%3A833&mode=dev

	Make sure that all @font-face calls are included at the bottom of this
	file to account for all of the font families, styles, and weights
	defined in the variables below.
	====================================================================== */

	/* Font Families

	Note:	The first font name in each variable is the only one that
			needs to be updated on each site (ex: "Roboto"). All other
			font names are "fallbacks".
	====================================================================== */
	--font-family-01:							"Poppins","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";	/* Used for headings */
	--font-family-02:							"Roboto","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";	/* Used for body copy */
	--font-family-holiday-01:					"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";	/* Used for holiday headings */
	--font-family-holiday-02:					"Roboto","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";	/* Used for holiday body copy */
	--font-family-holiday-secondary-01:			"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	--font-family-holiday-secondary-02:			"Roboto","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

	/* Letter Spacing
	====================================================================== */
	--letter-spacing-font-family-01:			var(--letter-spacing-00);
	--letter-spacing-font-family-02:			var(--letter-spacing-00);

	/* Font Weight (Holiday)
	====================================================================== */
	--font-weight-holiday-01:					700;
	--font-weight-holiday-02:					400;
	--font-weight-holiday-secondary-01:			800;
	--font-weight-holiday-secondary-02:			500;

	/* Line Height (Holiday)
	====================================================================== */
	--font-line-height-holiday-01:				1.125;
	--font-line-height-holiday-02:				1.25;
	--font-line-height-holiday-secondary-01:	1;
	--font-line-height-holiday-secondary-02:	1;


	/* ======================================================================
	COMPANY ASPECT RATIO VARIABLES

	Figma file: https://www.figma.com/file/sJfgoXSIUEMS31RLBhsZ77/Tackle-Design-System?node-id=319%3A1031&mode=dev
	====================================================================== */
	--image-shoe:								var(--aspect-4-3);			/* Shoes */
	--image-racquet:							var(--aspect-7-12);
	--image-racquet-thumb:						var(--aspect-517-1200);
	--image-mixed:								var(--aspect-1-1);			/* Mixed products (applies only to image wrapper) */
	--image-undefined:							var(--aspect-3-4);			/* Undefined products */
}

/* ==========================================================================
  FONT STACK

  Generally, fonts are specific to each site although most sites will share
  the same fonts. Make sure that all families, styles, and weights are
  accounted for below. Also, each site will have specific holiday fonts
  and you will need to make sure that those are accounted for below.
========================================================================== */

/* Poppins (300) */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	src: url('https://img.tennis-warehouse.com/fonts/poppins-v20-latin-300.woff2') format('woff2'); /* Super Modern Browsers */

}

/* Poppins (400) */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	src: url('https://img.tennis-warehouse.com/fonts/poppins-v20-latin-regular.woff2') format('woff2'); /* Super Modern Browsers */

}

/* Poppins (500) */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	src: url('https://img.tennis-warehouse.com/fonts/poppins-v20-latin-500.woff2') format('woff2'); /* Super Modern Browsers */

}

/* Poppins (600) */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	src: url('https://img.tennis-warehouse.com/fonts/poppins-v20-latin-600.woff2') format('woff2'); /* Super Modern Browsers */

}

/* Poppins (700) */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	src: url('https://img.tennis-warehouse.com/fonts/poppins-v20-latin-700.woff2') format('woff2'); /* Super Modern Browsers */

}

/* Poppins (800) */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 800;
	src:url('https://img.tennis-warehouse.com/fonts/poppins-v20-latin-800.woff2') format('woff2'); /* Super Modern Browsers */

}

/* Roboto (300) */
@font-face {
	font-family:	'Roboto';
	font-style:		normal;
	font-weight:	300;
	src:			url('https://img.tennis-warehouse.com/fonts/roboto-v30-latin-300.woff2') format('woff2');
}

/* Roboto (400) */
@font-face {
	font-family:	'Roboto';
	font-style:		normal;
	font-weight:	400;
	src:			url('https://img.tennis-warehouse.com/fonts/roboto-v30-latin-regular.woff2') format('woff2');
}

/* Roboto (400) Italic */
@font-face {
	font-family:	'Roboto';
	font-style:		italic;
	font-weight:	400;
	src:			url('https://img.tennis-warehouse.com/fonts/roboto-v30-latin-italic.woff2') format('woff2');
}

/* Roboto (500) */
@font-face {
	font-family:	'Roboto';
	font-style:		normal;
	font-weight:	500;
	src:			url('https://img.tennis-warehouse.com/fonts/roboto-v30-latin-500.woff2') format('woff2');
}

/* Roboto (700) */
@font-face {
	font-family:	'Roboto';
	font-style:		normal;
	font-weight:	700;
	src:			url('https://img.tennis-warehouse.com/fonts/roboto-v30-latin-700.woff2') format('woff2');
}

/* HOLIDAY FONTS */

/* Bricolage Grotesque (800) */
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 800;
	src: url('https://img.tennis-warehouse.com/fonts/bricolage-grotesque-v2-latin-800.woff2') format('woff2'); /* Super Modern Browsers */
}




/*==================================
	Overrides to temporarily accomodate old css version
 ==================================*/

:root {
	--critical:	var(--color-critical);
} 
 

.l-content {
    padding: var(--spacing-06) 0 80px 0;
}

.button-brand {
	background-color: var(--color-brand-secondary-01);
	color: var(--color-brand-text-on-secondary);
	font: var(--text-button-lg);
	padding: var(--spacing-03) var(--spacing-06);
}

.button-brand:visited {
	color: var(--color-brand-text-on-secondary);
}

a {
	color: var(--color-text-link-default);
}

button {
	background-color: var(--color-surface-primary);
}

.button-cart {
	background-color: var(--color-surface-button-cart);
	color: var(--color-text-button-on-cart);
	font: var(--text-button-lg);
	padding: var(--spacing-03) var(--spacing-06);
}

.button-cart__small {
	font: var(--text-button-sm);
	padding: var(--spacing-01) var(--spacing-02);
}

.button-cart:visited {
	color: var(--color-text-button-on-cart);
}

.button-cart:focus,
.button-cart:active,
.button-cart.active,
.button-cart:hover {
	background-color: var(--color-surface-button-cart-hover);
	color: var(--color-text-button-on-cart-hover);
}

.button-cart.disabled,
.button-cart.disabled:hover {
	opacity: var(--opacity-disabled);
}


/* Alert CSS */
.alert.alert-with-icon {
	display: flex;
	align-items: flex-start;
	width: 100%;
	margin: auto;
	margin-bottom: var(--spacing-06);
}

/* Temporary until all alerts are new format. */
.style_ordering-area .alert {
	margin-bottom: var(--spacing-06);
	display: flex;
	align-items: flex-start;
	width: 100%;
	margin: auto;
}

.alert .icon {
	margin-right: var(--spacing-02);
	flex-shrink: 0;
}

.alert-warning .alert-link {
    color: var(--color-text-support-backorder);
    font-weight: var(--font-weight-reg);
    text-decoration: underline;
}

.alert-warning .alert-link:hover,
.alert-warning .alert-link:focus,
.alert-warning .alert-link:active {
    text-decoration: none;
}

.alert.alert-danger.order-error-js {
    background-color: var(--color-surface-support-critical);
    border: var(--border-weight-01) solid var(--color-border-support-critical);
    color: var(--color-text-support-critical);
    font: var(--text-body-md-compact);
}

.alert.is-invalid {
    display: flex;
    background-color: var(--color-surface-support-critical);
    border: var(--border-weight-01) solid var(--color-border-support-critical);
    color: var(--color-text-support-critical);
    font: var(--text-body-md-compact);
}

.alert.is-invalid .icon {
    background-position: var(--icon-position-md-color);
    min-width: var(--icon-size-md);
    margin-right: var(--spacing-02);
}

.alert.is-backordered {
    background-color: var(--color-surface-support-backorder);
    border: var(--border-weight-01) solid var(--color-border-support-backorder);
    color: var(--color-text-support-backorder);
    font: var(--text-body-md-compact);
}

.alert.is-low-stock {
    background-color: var(--color-surface-support-warning);
    border: var(--border-weight-01) solid var(--color-border-support-warning);
    color: var(--color-text-support-warning);
    font: var(--text-body-md-compact);
}

.alert.alert-info {
	background-color: var(--color-surface-support-info);
    border: var(--border-weight-01) solid var(--color-border-support-info);
    color: var(--color-text-support-info);
    font: var(--text-body-md-compact);
    padding: var(--spacing-03);
}



/*=============================================================================
  ICONS CSS

  * CSS for all site icons
  * Contains legacy icon CSS that still needs to be updated/removed
=============================================================================*/

/* BASE ICON STYLE */
.icon {
    display: block;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    padding: var(--icon-size-md) 0 0;
    background-size: var(--icon-size-md);
    background-position: var(--icon-position-md-black);
    overflow: hidden;
    text-indent: -9999px;
}

/* Legacy Icon States (Remove When CSS Cleanup Is Finished) */
.icon.is-black {
    background-position: 0 0;
}

.icon.is-grey {
    background-position-y: -24px;
}

.icon.is-white {
    background-position-y: -48px;
}

.icon.is-sm {
    width: 16px;
    padding-top: 16px;
    background-size: 16px 48px;
}

.icon.is-sm.is-grey {
    background-position: 0 -16px;
}

.icon.is-sm.is-white {
    background-position: 0 -32px;
}

.icon.is-lg {
    width: 32px;
    padding-top: 32px;
    background-size: 32px;
}

.icon.is-list {
    width: 36px;
    margin: 6px 0;
    padding: 36px 0 0;
    background-size: 36px 108px;
}
/* END Legacy Icon States --------------------------------- */

/* SITE LOGO */
.icon-logo {
    /*background-image: url('https://img.tennis-warehouse.com/graphics-resizer/logos/TW-logo-horizontal.svg ');*/
    background-size: 32px 32px;
    background-position: 0 0;
    width: 32px;
    padding: 32px 0 0;
}

/* (Sticky Header Logo) */
.sticky-header-logo .icon-logo,
.l-footer-copy-inner .icon-logo {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/logos/PAD-logo-horizontal.svg');
    background-size: 40px 40px;
    background-position: 0 0;
    width: 40px;
    padding-top: 40px;
}

/* (Inline Logo For Checkout Pages) */
.icon-inline {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/logos/PAD-logo-horizontal.svg');
    background-size: 187px 64px;
    background-position: 0 0;
    width: 187px;
    padding: 64px 0 0;
}

@media screen and (min-width: 320px) {

    .icon-inline {
        background-image: url('https://img.tennis-warehouse.com/graphics-resizer/logos/PAD-logo-horizontal.svg');
        background-size: 190px 32px;
        width: 190px;
        padding-top: 32px;
    }
}

@media screen and (min-width: 768px) {

    .icon-inline {
        background-image: url('https://img.tennis-warehouse.com/graphics-resizer/logos/PAD-logo-horizontal.svg');
        background-size: 200px 48px;
        width: 200px;
        padding-top: 48px;
    }
}

@media screen and (min-width: 992px) {

    .icon-inline {
    	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/logos/PAD-logo-horizontal.svg');
        width: auto;
        padding-top: 64px;
        padding-left: 187px;
        background-size: 187px 64px;
    }
}

/* ICON SIZES */
.icon-xs {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    padding: var(--icon-size-xs) 0 0;
    background-size: var(--icon-size-xs);
}

.icon-sm {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    padding: var(--icon-size-sm) 0 0;
    background-size: var(--icon-size-sm);
}

.icon-md {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    padding: var(--icon-size-md) 0 0;
    background-size: var(--icon-size-md);
}

.icon-lg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    padding: var(--icon-size-lg) 0 0;
    background-size: var(--icon-size-lg);
}

.icon-xl {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    padding: var(--icon-size-xl) 0 0;
    background-size: var(--icon-size-xl);
}

/* ICON POSITIONS (COLOR) */
.icon-xs-black {
    background-position: var(--icon-position-xs-black);
}

.icon-sm-black {
    background-position: var(--icon-position-sm-black);
}

.icon-md-black {
    background-position: var(--icon-position-md-black);
}

.icon-lg-black {
    background-position: var(--icon-position-lg-black);
}

.icon-xl-black {
    background-position: var(--icon-position-xl-black);
}

.icon-xs-white {
    background-position: var(--icon-position-xs-white);
}

.icon-sm-white {
    background-position: var(--icon-position-sm-white);
}

.icon-md-white {
    background-position: var(--icon-position-md-white);
}

.icon-lg-white {
    background-position: var(--icon-position-lg-white);
}

.icon-xl-white {
    background-position: var(--icon-position-xl-white);
}

.icon-xs-gray {
    background-position: var(--icon-position-xs-gray);
}

.icon-sm-gray {
    background-position: var(--icon-position-sm-gray);
}

.icon-md-gray {
    background-position: var(--icon-position-md-gray);
}

.icon-lg-gray {
    background-position: var(--icon-position-lg-gray);
}

.icon-xl-gray {
    background-position: var(--icon-position-xl-gray);
}

.icon-xs-color {
    background-position: var(--icon-position-xs-color);
}

.icon-sm-color {
    background-position: var(--icon-position-sm-color);
}

.icon-md-color {
    background-position: var(--icon-position-md-color);
}

.icon-lg-color {
    background-position: var(--icon-position-lg-color);
}

.icon-xl-color {
    background-position: var(--icon-position-xl-color);
}

/* ARROW ICONS */
/* LEGACY ARROW ICON AND STATES - REMOVE WHEN SITE IS COMPLETELY FINISHED */
.icon-arrow {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/arrows.svg');
    background-size: 12px 144px;
    width: 12px;
    padding: 12px 0 0;
}

.icon-social.is-black {
    background-position-y: -40px;
}

.icon-social.is-grey {
    background-position-y: -80px;
}

.icon-social.is-white {
    background-position-y: -120px;
}

.icon-arrow-up.is-grey {
    background-position: 0 -48px;
}

.icon-arrow-down.is-grey {
    background-position: 0 -60px;
}

.icon-arrow-left.is-grey {
    background-position: 0 -72px;
}

.icon-arrow-right.is-grey {
    background-position: 0 -84px;
}

.icon-arrow-up.is-white {
    background-position: 0 -96px;
}

.icon-arrow-down.is-white {
    background-position: 0 -108px;
}

.icon-arrow-left.is-white {
    background-position: 0 -120px;
}

.icon-arrow-right.is-white {
    background-position: 0 -132px;
}

.collapsed:not(.custom-icon) .icon-arrow-up.is-white {
    background-position: 0 -108px;
}

.icon-arrow.is-lg {
    width: 16px;
    padding-top: 16px;
    background-size: 16px 192px;
}

.icon-arrow-down.is-lg {
    background-position: 0 -16px;
}

.icon-arrow-left.is-lg {
    background-position: 0 -32px;
}

.icon-arrow-right.is-lg {
    background-position: 0 -48px;
}

.icon-arrow-up.is-lg.is-grey {
    background-position: 0 -76px;
}

.icon-arrow-down.is-lg.is-grey {
    background-position: 0 -80px;
}

.icon-arrow-left.is-lg.is-grey {
    background-position: 0 -96px;
}

.icon-arrow-right.is-lg.is-grey {
    background-position: 0 -112px;
}

.icon-arrow-up.is-lg.is-white {
    background-position: 0 -92px;
}

.icon-arrow-down.is-lg.is-white {
    background-position: 0 -144px;
}

.icon-arrow-left.is-lg.is-white {
    background-position: 0 -160px;
}

.icon-arrow-right.is-lg.is-white {
    background-position: 0 -176px;
}

.collapsed:not(.custom-icon) .icon-arrow-up.is-lg.is-white {
    background-position: 0 -144px;
}

.icon-afterpay.is-lg {
    width: 100px;
    padding-top: 19px;
    background-size: 100px 39px;
}

.icon-arrow.is-xl {
    width: 24px;
    padding-top: 24px;
    background-size: 24px 288px;
}

.icon-arrow-down.is-xl {
    background-position: 0 -24px;
}

.icon-arrow-left.is-xl {
    background-position: 0 -48px;
}

.icon-arrow-right.is-xl {
    background-position: 0 -72px;
}
/* END LEGACY ARROW ICON */

.icon-arrow-up {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/ui-arrow-up.svg');
}


.icon-arrow-down,
.collapsed .icon-arrow-up {
    background-image: url('https://img.runningwarehouse.com/graphics-resizer/icons/ui-arrow-down.svg');
}


.icon-arrow-down {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/ui-arrow-down.svg');
}

.icon-arrow-left {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/ui-arrow-left.svg');
}

.icon-arrow-right {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/ui-arrow-right.svg');
}

/* ACCOUNT ICON */
.icon-account {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/menu-account-inactive.svg');
}

.icon-account.is-active {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/menu-account-active.svg');
}

/* SOCIAL ICONS */
/* LEGACY SOCIAL ICONS - REMOVE WHEN SITE IS COMPLETED */
.icon-social {
    background-size: 360px 160px;
    width: 40px;
    padding: 40px 0 0;
}

.icon-social.is-black {
    background-position-y: -40px;
}

.icon-social.is-grey {
    background-position-y: -80px;
}

.icon-social.is-white {
    background-position-y: -120px;
}
/* END LEGACY SOCIAL ICONS */

.icon-social-facebook {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/social-facebook.svg");
}

.icon-social-twitter {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/social-x.svg");
}

.icon-social-instagram {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/social-instagram.svg");
}

.icon-social-youtube {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/social-youtube.svg");
}

.icon-social-blog {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/social-blog.svg");
}

.icon-social-pod {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/social-podcast.svg");
}

.icon-social-pinterest {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/social-pintrest.svg");
}

.icon-social-tiktok {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/social-tiktok.svg");
}

.icon-social-message {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/social-message.svg");
}

.icon-social-strave {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/social-strave.svg");
}

/* SITE ICONS */
.icon-360 {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-360.svg");
}

.icon-airplane {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/airplane.svg");
}

.icon-bonus {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/bonus.svg");
}

.icon-email {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/email-back.svg");
}


/*RED TEXT ICONS */
/* Sustainability Icon */
.icon-sustain { background-image:url("https://img.tennis-warehouse.com/graphics-resizer/icons/sustainability.svg"); }

/* Top Pick Icon */
.icon-top-pick { background-image:url("https://img.tennis-warehouse.com/graphics-resizer/icons/top-pick.svg"); }


/* Temporary until we determine whether we need this icon or not */
.icon-preview {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/calendar.svg");
}

.icon-career {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/briefcase.svg");
}

.icon-cart {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/ui-cart.svg');
}

.icon-cash,
.icon-price {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/cash.svg");
}

.icon-check {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-check.svg");
}

/* Color Wheel Icon */
.icon-color {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/ui-colors.svg'); background-size: 24px 24px;
}

/* Temporary until .is-sm can be replaced in markup and JS by icon-sm */
.icon-check.is-sm {
    background-size: 16px 16px;
}

.icon-check_success {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-success.svg");
}

.icon-overnight {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/overnight.svg");
}

.icon-compare {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-compare.svg");
}

.icon-copy {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-copy.svg");
}

/* Temporary until the icon can be updated by Webb */
.icon-currency {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/currency-dollar.svg');
}

.icon-custom {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/custom.svg");
}

/* Temporary until .is-xl can be replaced in markup and JS by icon-xl */
.icon-custom.is-xl {
    width: 64px;
    padding-top: 64px;
    background-size: 64px 192px;
}

.icon-demo-pic {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/demo-pic.svg");
}

.icon-edit {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-edit.svg");
}

.icon-exclusive {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/site/icons/exclusive.svg');
}

.icon-filter {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-filter.svg");
}

.icon-guarantee {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/shield-check.svg");
}

.icon-gift {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/gift-box.svg");
}

/* Temporary until .is-xs can be replaced in markup and JS by icon-xs */
.icon-gift.is-xl {
    width: 80px;
    padding-top: 80px;
    background-size: 80px 240px;
}

.icon-gift-box {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/gift-box.svg");
}

.icon-globe {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer//icons/globe.svg");
}

.icon-grid {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/ui-view-grid.svg');
    background-position: 0 -24px;
}

.icon-guides {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-guides.svg");
}

.icon-help {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-help.svg");
}

.icon-home {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-home.svg");
}

.icon-howto {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/how-to.svg");
}

.icon-kitchen {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/kitchen.svg");
}

.icon-list {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-view-list.svg");
}

.icon-live_chat {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/livechat.svg");
}

.icon-location {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/location.svg");
}

.icon-logout {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-logout.svg");
}

.icon-menu {
    background-image: url('https://img.tacklewarehouse.com/graphics-resizer/icons/ui-menu.svg');
}

.icon-message {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-message-board.svg");
}

.icon-minus {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-minus.svg");
}

/* Temporary until .is-xs can be replaced in markup and JS by icon-xs */
.icon-minus.is-xs {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    padding: var(--icon-size-xs) 0 0;
    background-size: var(--icon-size-xs);
    background-position: var(--icon-position-xs-black);
}

.icon-model {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/measurements.svg");
}

.icon-more {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-more.svg");
}

.icon-new {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/plus.svg");
}

.icon-notify {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-notify.svg");
}

.icon-orders {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/doc-orders.svg");
}

.icon-pause {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-pause.svg");
}

.icon-pdf {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/doc-pdf.svg");
}

.icon-phone {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/phone.svg');
}

/* Temporary until .is-xs can be replaced in markup and JS by icon-xs */
.icon-phone.is-xs {
    width: 19px;
    padding-top: 19px;
    background-size: 19px 57px;
}

/* Temporary until .is-xs and is-grey can be replaced in markup and JS by icon-xs and icon-xs-gray */
.icon-phone.is-xs.is-grey {
    background-position: 0 -19px;
}

/* Temporary until .is-xs and is-white can be replaced in markup and JS by icon-xs and icon-xs-white */
.icon-phone.is-xs.is-white {
    background-position: 0 -38px;
}

.icon-picklecourt {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/picklecourt.svg");
}

.icon-play {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/play.svg");
}

.icon-plus {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-plus.svg");
}

/* Temporary until .is-xs can be replaced in markup and JS by icon-xs */
.icon-plus.is-xs {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    padding: var(--icon-size-xs) 0 0;
    background-size: var(--icon-size-xs);
    background-position: var(--icon-position-xs-black);
}

.icon-podcast {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-podcast.svg");
}

.icon-podium {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-podium.svg");
}

.icon-privacy {
    background-image: url('https://img.tennis-warehouse.com/framework/privacy.svg');
}

.icon-pro {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/spotlight.svg");
}

.icon-prospot {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/pro-spot.svg");
}

.icon-promo {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/percent.svg");
}

/* Temporary until .is-xl can be replaced in markup and JS by icon-xl */
.icon-promo.is-xl {
    width: 48px;
    padding-top: 48px;
    background-size: 48px 144px;
}

.icon-refresh {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-refresh.svg");
}

.icon-returns {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/returns.svg");
}

.icon-review {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/clipboard.svg");
}

.icon-demo {
	background-image:url("https://img.tennis-warehouse.com/graphics-resizer/site/icons/demo.svg");
}

.icon-search {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/ui-search.svg');
}

.icon-service {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/service.svg");
}

/* Temporary until .is-xl can be replaced in markup and JS by icon-xl */
.icon-service.is-xl {
    width: 48px;
    padding-top: 48px;
    background-size: 48px 144px;
}

.icon-settings {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-gear.svg");
}

.icon-share {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-share.svg");
}

.icon-shipping {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/truck.svg");
}

.icon-shoe {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/shoe.svg");
}

.icon-size {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ruler.svg");
}

.icon-sort {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-sort.svg");
}

/* Used for performance chart - Not needed for tennis- */
.icon-stability {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/stability.svg');
}

.icon-tagline {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/ui-view-list.svg');
}

.icon-tagline {
    background-position: 0 -24px;
}

.icon-team {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/team.svg");
}

.icon-tip {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/tip.svg");
}

.icon-tp-academy {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/tp-academy.svg");
}

.icon-track {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-track.svg");
}

.icon-tracking {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/tracking.svg");
}

.icon-trash {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/ui-trash.svg');
}

.icon-trophy {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/trophy.svg");
}

.icon-typti {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/typti.svg");
}

.icon-used {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/used.svg");
}

.icon-UV {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/uv.svg");
}

.icon-vip {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/VIP.svg");
}

.icon-tip {
	background-image:url("https://img.tennis-warehouse.com/graphics-resizer/icons/lightbulb.svg");
}

/* Temporary until .is-xl can be replaced in markup and JS by icon-xl */
.icon-vip.is-xl {
    width: 48px;
    padding-top: 48px;
    background-size: 48px 144px;
}

.icon-visibility {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-visible-false.svg");
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    padding: var(--icon-size-md) 0 0;
    background-size: var(--icon-size-md);
    background-position: var(--icon-position-md-gray);
}

.icon-visibility.is-visible {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-visible-true.svg");
    background-position: var(--icon-position-md-black);
}

.icon-video {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-video.svg");
}

.icon-vlog {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/folder-video.svg");
}

.icon-warning {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-warning.svg");
}

/* Temporary until .is-xl can be replaced in markup and JS by icon-xl */
.icon-warning.is-xl {
    width: 64px;
    padding-top: 64px;
    background-size: 64px 192px;
}

/* Temporary until icon-xl class can be placed in the markup, PHP, and JS files */
.icon-wish_success {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-wishlist.svg");
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    padding: var(--icon-size-xl) 0 0;
    background-size: var(--icon-size-xl);
    background-position: var(--icon-position-xl-black);
    /* Old Setitngs: background-size: 66px 66px; width: 66px; padding-top: 66px; */
}

.icon-x {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/ui-close.svg');
}

/* Temporary until .is-xs can be replaced in markup and JS by icon-xs */
.icon-x.is-xs {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    padding: var(--icon-size-xs) 0 0;
    background-size: var(--icon-size-xs);
}

.icon-zoom {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-zoom-in.svg");
}

/* Menu Icons */
/* Culture Icon */
.icon-culture {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/menu-culture.svg');
}

 /* Athlete Stories Icon */
.icon-stories {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/stories.svg');
}

/* Training Icon */
.icon-training {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/menu-training.svg');
}

/* Best Icon */
.icon-best {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/best.svg');
}

/* Designer Icon */
.icon-designer {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/designer.svg');
}

/* First Looks Icon */
.icon-firstlooks {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/firstlooks.svg');
}

/* Sparkles Icon */
.icon-sparkles {
	background-image:url("https://img.tennis-warehouse.com/graphics-resizer/icons/sparkles.svg");
}

/* Specials Icon */
.icon-specials {
	background-image:url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-specials.svg");
}

/* Clearance Icon */
.icon-clearance {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-clearance.svg");
}

/* Brands Icon */
.icon-brands {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-brands.svg");
}

/* Learning Center Icon */
.icon-learning {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-learning.svg");
}

/* Racquet Finder Icon */
.icon-racquet {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-racquet.svg");
}

/* Tennis University Icon */
.icon-university {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-university.svg");
}

/* Message Board Icon */
.icon-messageboard {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-message-board.svg");
}

/* Podcast Icon */
.icon-podcast {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-podcast.svg");
}

/* Wishlist Icon */
.icon-wish_list {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/menu-wishlist.svg');
}

/* Support Icon */
.icon-support {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-support.svg");
}

/* Players Lounge Icon */
.icon-mailing {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/menu-mailing.svg");
}

/* Features Icons */
/* Cushion Icon */
.icon-cushion {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-cushion.svg');
}

/* Stability Icon */
.icon-stability {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-stability.svg');
}

/* Speed Icon */
.icon-speed {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-speed.svg');
}

/* Durability Icon */
.icon-durability {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-durability.svg');
}

/* Durability Icon */
.icon-durable {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-durability.svg');
}

/* Breathability Icon */
.icon-breathability {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-breathability.svg');
}

/* Value Icon */
.icon-value {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-value.svg');
}

/* Comfort Icon */
.icon-comfort {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-comfort.svg');
}

/* Spin Icon */
.icon-spin {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-spin.svg');
}

/* Control Icon */
.icon-control {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-spin.svg');
}

/* Beginner Icon */
.icon-beginner {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-beginner.svg');
}

/* Intermediate Icon */
.icon-intermediate {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-intermediate.svg');
}

/* Advanced Icon */
.icon-advanced {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-advanced.svg');
}

/* 2in1 Icon */
.icon-2in1 {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-2in1.svg');
}

/* Cotton Icon */
.icon-cotton {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-cotton.svg');
}

/* USA Icon */
.icon-USA {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-USA.svg');
}

/* UPF Icon */
.icon-UPF {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-UPF.svg');
}

/* Antiodor Icon */
.icon-antiodor {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-antiodor.svg');
}

/* Wicking Icon */
.icon-wicking {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-wicking.svg');
}

/* Bra Icon */
.icon-bra {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-bra.svg');
}

/* Sustainable Icon */
.icon-sustainable {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/feature-sustainable.svg');
}

/* Start Best Use & Performance Section */

.icon-1PDRESSES, .icon-2IN1WOMEN { background-image:url("https://img.tennis-warehouse.com/graphics-resizer/site/icons/2IN1WOMEN.svg"); }
.icon-MA2IN1 { background-image:url("https://img.tennis-warehouse.com/graphics-resizer/site/icons/MA2IN1.svg"); }
.icon-WAUSA { background-image:url("https://img.tennis-warehouse.com/graphics-resizer/site/icons/WAUSA.svg"); }
.icon-MAUSA { background-image:url("https://img.tennis-warehouse.com/graphics-resizer/site/icons/MAUSA.svg"); }
.icon-WAUV { background-image:url("https://img.tennis-warehouse.com/graphics-resizer/site/icons/WAUV.svg"); }
.icon-MAUV { background-image:url("https://img.tennis-warehouse.com/graphics-resizer/site/icons/MAUV.svg"); }
.icon-APPSUSTAIN { background-image:url("https://img.tennis-warehouse.com/graphics-resizer/site/icons/APPSUSTAIN.svg"); }
.icon-MACOTTON { background-image:url("https://img.tennis-warehouse.com/graphics-resizer/site/icons/MACOTTON.svg"); }
.icon-WICKING { background-image:url("https://img.tennis-warehouse.com/graphics-resizer/site/icons/WICKING.svg"); }
.icon-ANTIODOR { background-image:url("https://img.tennis-warehouse.com/graphics-resizer/site/icons/ANTIODOR.svg"); }
.icon-HASBRA { background-image:url("https://img.tennis-warehouse.com/graphics-resizer/site/icons/HASBRA.svg"); }
.icon-WACOTTON { background-image:url("https://img.tennis-warehouse.com/graphics-resizer/site/icons/WACOTTON.svg"); }

/* End Best Use & Performance Section */





/* Surfaces Icons */
/* All Court Icon */
.icon-allcourt {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/surface-all-court.svg');
}

/* Clay Icon */
.icon-clay {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/surface-clay.svg');
}

/* Omni Icon */
.icon-omni {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/surface-omni.svg');
}

/* Grass Icon */
.icon-grass {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/surface-grass.svg');
}

/* Carpet Icon */
.icon-carpet {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/surface-carpet.svg');
}

/* Padel Icon */
.icon-padel {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/surface-padel.svg');
}


/* Other Icons */
/* Teams Icon */
.icon-teams {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/teams.svg');
}

/* Padel Icon */
.icon-padel {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/padel.svg');
}

/* Improve Icon */
.icon-improve {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/improve.svg');
}

/* USPTA Icon */
.icon-uspta {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/uspta.svg');
}

/* Tw-exclusive Icon */
.icon-tw-exclusive {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/tw-exclusive.svg');
}

/* Shoe Icon */
.icon-shoe {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/shoe.svg');
}

/* String Icon */
.icon-string {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/string.svg');
}

/* Academy Icon */
.icon-academy {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/academy.svg');
}

/* Partner Icon */
.icon-partner {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/partner.svg');
}

/* Bonus Icon */
.icon-bonus {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/bonus.svg');
}

/* Powermap Icon */
.icon-powermap {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/powermap.svg');
}

/* Racquet Icon */
.icon-racquet {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/racquet.svg');
}

/* 2-pack Icon */
.icon-2-pack {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/2-pack.svg');
}

/* Pre-strung Icon */
.icon-pre-strung {
	background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/pre-strung.svg');
}

/* Afterpay Logo */
.icon-afterpay {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/logos/afterpay-text-update.svg");
    background-size: 73px 38px;
    width: 73px;
    /*padding-top: 14px;*/
}

/* Temporary until .is-lg can be replaced in markup and JS by icon-lg */
.icon-afterpay.is-lg {
    width: 100px;
    padding-top: 19px;
    background-size: 100px 39px;
}

/* Afterpay Icon */
.icon-ap_icon {
    background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/payment-afterpay.svg");
}

/* Venmo Icon */
/* Settings may be temporary based on Webb's recommendation */
.venmo_icon {
    background-image: url('https://img.tennis-warehouse.com/graphics-resizer/icons/venmo-logo-blue.svg');
    background-size: 80px 20px;
    width: 80px;
    margin: 2px 0;
    padding: 20px 0 0;
}

/* STAR REVIEW ICONS */
.stars-container>.star-rating {
    width: 80px;
    height: 16px;
    background-size: 80px 16px;
}

.stars-container.is-med>.star-rating {
    width: 120px;
    height: 24px;
    background-size: 120px 24px;
}

.stars-container.is-large>.star-rating {
    width: 160px;
    height: 32px;
    background-size: 160px 32px;
}

.stars-container.is-xlarge>.star-rating {
    width: 200px;
    height: 40px;
    background-size: 200px 40px;
}

.five-stars {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/pad-5star.svg");
}

.four-half-stars {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/pad-4.5star.svg");
}

.four-stars {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/pad-4star.svg");
}

.three-half-stars {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/pad-3.5star.svg");
}

.three-stars {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/pad-3star.svg");
}

.two-half-stars {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/pad-2.5star.svg");
}

.two-stars {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/pad-2star.svg");
}

.one-half-stars {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/pad-1.5star.svg");
}

.one-stars {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/pad-1star.svg");
}

.half-stars {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/pad-.5star.svg");
}

.nostars {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/pad-nostar.svg");
}

/* Alert Icons */
.alert .icon-info {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-info.svg");
	background-position: var(--icon-position-md-color);
}

.alert .icon-success {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-success.svg");
	background-position: var(--icon-position-md-color);
}

.alert .icon-warning {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-warning.svg");
	background-position: var(--icon-position-md-color);
}

.alert .icon-error {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/ui-error.svg");
	background-position: var(--icon-position-md-color);
}

.alert .icon-backorder {
	background-image: url("https://img.tennis-warehouse.com/graphics-resizer/icons/calendar.svg");
	background-position: var(--icon-position-md-color);
}

/*=============================================================================
  NEW CSS

  DO NOT DELETE THIS FILE!
=============================================================================*/

/* New button classes */
.button-brand {
	background-color: var(--color-brand-secondary-01);
	color: var(--color-brand-text-on-secondary);
	font: var(--text-button-lg);
	padding: var(--spacing-03) var(--spacing-06);
}

.button-brand__small {
	font: var(--text-button-sm);
	padding: var(--spacing-01) var(--spacing-02);
}

.button-brand:visited {
	background-color: var(--color-brand-secondary-01);
	color: var(--color-brand-text-on-secondary);
}

.button-brand:focus,
.button-brand:active,
.button-brand.active,
.button-brand:hover {
	background-color: var(--color-brand-secondary-02);
	color: var(--color-brand-text-on-secondary);
}

.button-brand.disabled,
.button-brand.disabled:hover {
	opacity: var(--opacity-disabled);
}

.button-ghost {
	background-color: var(--color-surface-button-ghost);
	color: var(--color-text-button-on-ghost);
	border: var(--border-weight-01) solid var(--color-border-button-ghost);
	font: var(--text-button-lg);
	padding: var(--spacing-03) var(--spacing-06);
}

.button-ghost__small {
	font: var(--text-button-sm);
	padding: var(--spacing-01) var(--spacing-03);
}

.button-ghost:visited {
	background-color: var(--color-surface-button-ghost);
	color: var(--color-text-button-on-ghost);
}

.button-ghost:focus,
.button-ghost:active,
.button-ghost.active,
.button-ghost:hover {
	background-color: var(--color-surface-button-ghost-hover);
	color: var(--color-text-button-on-ghost-hover);
	border: var(--border-weight-01) solid var(--color-border-button-ghost-hover);
}

.button-ghost.disabled,
.button-ghost.disabled:hover {
	background-color: var(--color-surface-button-ghost);
	color: var(--color-text-button-on-ghost);
	opacity: var(--opacity-disabled);
}

.button-critical {
	background-color: var(--color-surface-button-critical);
	color: var(--color-text-button-on-critical);
	font: var(--text-button-lg);
	padding: var(--spacing-03) var(--spacing-06);
}

.button-critical__small {
	font: var(--text-button-sm);
	padding: var(--spacing-01) var(--spacing-02);
}

.button-critical:visited {
	color: var(--color-text-button-on-critical);
}

.button-critical:focus,
.button-critical:active,
.button-critical.active,
.button-critical:hover {
	background-color: var(--color-surface-button-critical-hover);
	color: var(--color-text-button-on-critical-hover);
}

.button-cart {
	background-color: var(--color-surface-button-cart);
	color: var(--color-text-button-on-cart);
	font: var(--text-button-lg);
	padding: var(--spacing-03) var(--spacing-06);
}

.button-cart__small {
	font: var(--text-button-sm);
	padding: var(--spacing-01) var(--spacing-02);
}

.button-cart:visited {
	color: var(--color-text-button-on-cart);
}

.button-cart:focus,
.button-cart:active,
.button-cart.active,
.button-cart:hover {
	background-color: var(--color-surface-button-cart-hover);
	color: var(--color-text-button-on-cart-hover);
}

.button-cart.disabled,
.button-cart.disabled:hover {
	opacity: var(--opacity-disabled);
}

.button-icon {
	background-color: var(--color-surface-button-ghost);
	padding: var(--spacing-03);
}

.button-icon:focus,
.button-icon:active,
.button-icon.active,
.button-icon:hover {
	background-color: var(--color-surface-button-ghost-hover);
}

.button-large {
	font: var(--text-button-lg);
	padding: var(--spacing-03) var(--spacing-06);
}

.button-small {
	font: var(--text-button-sm);
	padding: var(--spacing-01) var(--spacing-02);
}

/* Sitewide and Component Images */
.image__container {
    position: relative;
    display: block;
    height: auto;
    width: auto;
}

.image__container-rod {
    aspect-ratio: var(--image-apparel);
}

.image__container-reel {
    aspect-ratio: var(--image-reel);
}

.image__container-bait {
    aspect-ratio: var(--image-bait);
}

.image__container-hardgood {
    aspect-ratio: var(--image-hard-good);
}

.image__container-apparel {
    aspect-ratio: var(--image-apparel);
}

.image__container-shoe {
    aspect-ratio: var(--image-shoe);
}

.image__container-racquet {
	aspect-ratio: var(--image-racquet);
}

.image__container-misc {
    aspect-ratio: var(--image-undefined);
}

.image__container-article {
    aspect-ratio: var(--image-article);
}

.image__container-pro {
    aspect-ratio: var(--image-pro);
}

.image__container-custom {
    aspect-ratio: var(--image-custom);
}

.image__container-undefined {
    aspect-ratio: var(--image-undefined);
}

.image__container-mixed {
    aspect-ratio: var(--image-mixed);
    width: auto;
    height: auto;
}

/* Image Types */
.image__base {
    position: absolute;
}

.image__rod {
    width: auto;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    aspect-ratio: var(--image-rod);
}

.image__racquet {
    width: 100%;
    height: auto;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    aspect-ratio: var(--image-racquet);
}

.image__racquet-thumb {
    width: auto;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    aspect-ratio: var(--image-racquet-thumb);
}

.image__bait {
    width: 100%;
    height: auto;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    aspect-ratio: var(--image-bait);
}

.image__hardgood {
    width: 100%;
    height: auto;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    aspect-ratio: var(--image-hard-good);
}

.image__apparel {
    width: auto;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    aspect-ratio: var(--image-apparel);
}

.image__shoe {
    width: 100%;
    height: auto;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    aspect-ratio: var(--image-shoe);
}

.image__misc {
    width: 100%;
    height: auto;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    aspect-ratio: var(--image-undefined);
}

.image__article {
    position: relative;
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    aspect-ratio: var(--image-article);
}

.image__pro {
    position: relative;
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    aspect-ratio: var(--image-article);
}

.image__custom {
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: var(--image-custom);
}

.image__undefined {
    width: auto;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    aspect-ratio: var(--image-undefined);
}

/* Alert CSS */
.alert.alert-with-icon {
	display: flex;
	align-items: flex-start;
	width: 100%;
	margin: auto;
	margin-bottom: var(--spacing-06);
}

/* Temporary until all alerts are new format. */
.style_ordering-area .alert {
	margin-bottom: var(--spacing-06);
	display: flex;
	align-items: flex-start;
	width: 100%;
	margin: auto;
}

.alert .icon {
	margin-right: var(--spacing-02);
	flex-shrink: 0;
}

.alert-warning .alert-link {
    color: var(--color-text-support-backorder);
    font-weight: var(--font-weight-reg);
    text-decoration: underline;
}

.alert-warning .alert-link:hover,
.alert-warning .alert-link:focus,
.alert-warning .alert-link:active {
    text-decoration: none;
}

.alert.alert-danger.order-error-js {
    background-color: var(--color-surface-support-critical);
    border: var(--border-weight-01) solid var(--color-border-support-critical);
    color: var(--color-text-support-critical);
    font: var(--text-body-md-compact);
}

.alert.is-invalid {
    display: flex;
    background-color: var(--color-surface-support-critical);
    border: var(--border-weight-01) solid var(--color-border-support-critical);
    color: var(--color-text-support-critical);
    font: var(--text-body-md-compact);
}

.alert.is-invalid .icon {
    background-position: var(--icon-position-md-color);
    min-width: var(--icon-size-md);
    margin-right: var(--spacing-02);
}

.alert.is-backordered {
    background-color: var(--color-surface-support-backorder);
    border: var(--border-weight-01) solid var(--color-border-support-backorder);
    color: var(--color-text-support-backorder);
    font: var(--text-body-md-compact);
}

.alert.is-low-stock {
    background-color: var(--color-surface-support-warning);
    border: var(--border-weight-01) solid var(--color-border-support-warning);
    color: var(--color-text-support-warning);
    font: var(--text-body-md-compact);
}

.alert.alert-info {
	background-color: var(--color-surface-support-info);
    border: var(--border-weight-01) solid var(--color-border-support-info);
    color: var(--color-text-support-info);
    font: var(--text-body-md-compact);
    padding: var(--spacing-03);
}

/* Standard Links */
.text-link {
    color: var(--color-text-link-default);
    text-decoration: underline;
}

.text-link:hover,
.text-link:focus,
.text-link:active {
    color: var(--color-text-link-hover);
    text-decoration: none;
}

.text-link:visited {
    color: var(--color-text-link-visited);
}

.text-link.has-icon {
	display: inline-flex;
	align-items: center;
}

.text-link.has-icon .icon {
	margin: var(--spacing-02);
}

/* Images (Border Radius on All Site Images) */
img {
    border-radius: var(--border-radius-md);
}

/* Scroll to Show */
.scroll_to_show {
    visibility: visible;
    opacity: 1;
    transition: visibility .2s, opacity .2s;
}

.scroll_to_show.is-invisible {
    visibility: hidden;
    opacity: 0;
}

/* Front Page */
.front_page {
    padding: 0;
}

@media (min-width: 1200px) {

    .front_page {
        padding: 0 var(--spacing-03);
    }
}

.body_scroll {
    position: relative;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: -60px;
    right: 20px;
    background-color: var(--black);
    border: var(--border-weight-01) solid var(--color-border-secondary);
    width: 40px;
    height: 0;
    padding-top: var(--spacing-10);
    text-indent: -9999px;
    z-index: 3;
    border-radius: 50%;
    cursor: pointer;
    opacity: var(--opacity-50);
    transition: opacity .2s ease-in;
}

.back-to-top:hover {
    opacity: var(--opacity-100);
}

.back-to-top:after {
    content: '';
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    position: absolute;
    top: 7px;
    left: 7px;
    background-image: url('https://img.tacklewarehouse.com/graphics-resizer/icons/ui-arrow-up.svg');
    background-size: var(--icon-size-md);
    background-position: var(--icon-position-md-white);
    cursor: pointer;
}

/* Read more */
.read_more {
    position: relative;
    overflow: hidden;
    transition: height .3s ease-out;
}

.read_more::after {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: '';
    pointer-events: none;
}

.shown {
    margin-bottom: var(--spacing-02);
}

.shown:after {
    height: 0%;
    transition: height .3s ease-out;
}

.read_more-btn {
    padding: 0;
    border: none;
    font: var(--text-link-lg);
    color: var(--color-text-primary-dark);
    background-color: var(--color-surface-primary);
    text-decoration: underline;
}

.read_more-btn:focus,
.read_more-btn:hover {
    text-decoration: none;
    color: var(--color-text-link-hover);
}

.read_more .check_read-inner p {
    margin: 0;
}

.read_more .check_read-inner img {
    max-width: 100%;
}

/* Lazy loading */
.catpage .lz-img {
    display: none;
    background-image: url("/img/loading2.gif");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin: 0 auto 10px;
}

/* Privacy Policy/Cookie Overlay */
.cookie_agree {
    position: fixed;
    bottom: var(--spacing-10);
    left: 0;
    max-width: 1200px;
    font-size: var(--font-size-100);
    color: var(--black);
    z-index: 2000;
}

.cookie_agree .row {
    margin: 0;
    padding: var(--spacing-06) var(--spacing-03);
    border-radius: var(--border-radius-md);
    background: var(--white);
    box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.2);
}

.cookie_agree-btn {
    margin-top: var(--spacing-04);
}

@media (min-width: 480px) {

    .cookie_agree .row div:first-child {
        padding-right: var(--spacing-04);
        align-self: center;
    }

    .cookie_agree-btn {
        margin-top: 0;
    }
}

@media (min-width: 576px) {

    .cookie_agree .row div:first-child {
        padding-right: var(--spacing-03);
    }
}

@media (min-width: 1200px) {

    .cookie_agree {
        left: 50%;
        margin-left: -600px;
    }
}

/* Padding/Margin Bottom Classes for Misc Use */
.pb-40 {
    padding-bottom: var(--spacing-10) !important;
}

.mb-40 {
    margin-bottom: var(--spacing-10) !important;
}

/* 404 and no search results page */
@media screen and (min-width: 1200px) {
	.notfound_link-container { padding: 0 var(--spacing-06);}
}

/* ==========================================================================
   MISC SITE & BOOTSTRAP CLASS OVERRIDES

   - Miscellaneous overrides for Bootstrap classes.
   - Not all overrides will be needed in the final rollout. Some of these
     can be eliminated as certain sections are finalized. This will be an
	 ongoing work-in-progress.
========================================================================== */

:root {
	/* ======================================================================
	SWIPER CAROUSEL OVERRIDES
	====================================================================== */
    --swiper-navigation-size:			12px;
    --swiper-navigation-color:			#000;
    --swiper-navigation-sides-offset:	0;
    --swiper-scrollbar-size:			8px;
    --swiper-scrollbar-left:			0;
    --swiper-scrollbar-right:			12px;
    --swiper-scrollbar-top:				10px;
    --swiper-scrollbar-bottom:			0;
    --swiper-scrollbar-bg-color:	    var(--color-surface-secondary);
    --swiper-scrollbar-drag-bg-color:	var(--color-brand-secondary-01);
    --swiper-scrollbar-border-radius:	200px;
    --swiper-scrollbar-sides-offset:	0;
}

/* Framework Overrides
========================================================================== */
@media (min-width: 576px) {

	.container-fluid {
		padding-left: var(--spacing-03);
		padding-right: var(--spacing-03);
	}
}

@media (min-width: 768px) {

	.container-fluid {
		padding-left:	var(--spacing-06);
		padding-right:	var(--spacing-06);
	}
}

@media (min-width: 1200px) {

	.container-fluid {
		padding-left: 0;
		padding-right: 0;
	}
}

.cf::after { display: block; clear: both; content: ""; }

/* Legacy - Remove when CSS work is complete */
small, .small {
	line-height: 1.5;
}

/* Form Overrides
========================================================================== */
.form-control {
	background-color: var(--color-surface-form-default);
	color: var(--color-text-form-active);
	border: var(--border-weight-01) solid var(--color-border-form-default);
	border-radius: var(--border-radius-sm);
	height: calc(2.875rem + 2px);
}

.form-control:focus {
	color: var(--color-text-form-active);
}

select {
	color: var(--color-text-form-active);
}

.custom-select {
	border: var(--border-weight-01) solid var(--color-border-form-default);
	color: var(--color-text-form-active);
	appearance: none;
}

.list-group-item {
	border: var(--border-weight-01) solid var(--color-border-primary);
}

.form-row {
	margin-right: var(--spacing-03-negative);
	margin-left: var(--spacing-03-negative);
}

.form-row .col {
	padding-right: var(--spacing-03);
	padding-left: var(--spacing-03);
}

.form-check-input[disabled]~.form-check-label, .form-check-input:disabled~.form-check-label {
	color: var(--color-text-primary-dark);
	opacity: var(--opacity-30);
}

label.has-placeholder {
	color: var(--color-text-form-placeholder);
}

/* Table Overrides
========================================================================== */
table, .table {
	border: var(--border-weight-01) solid var(--color-border-primary);
	background-color: var(--color-surface-primary);
}

table thead, table .thead-light, table tr:first-child {
	background-color: var(--color-surface-secondary);
	border-color: var(--color-border-primary);
}

table td, .table td, table th, .table th  {
	border-top: var(--border-weight-01) solid var(--color-border-primary);
	font: var(--text-body-md-compact);
}

table tr:first-child td, .table tr:first-child td {
	color: var(--color-text-primary-dark);
}

/* Header Overrides
========================================================================== */
h1, .h1 {
	font: var(--text-heading-01);
    color: var(--color-text-primary-dark);
	padding: 0;
	margin: 0;
}

h2, .h2 {
	font: var(--text-heading-02);
    color: var(--color-text-primary-dark);
	padding: 0;
	margin: 0;
}

h3, .h3 {
	font: var(--text-heading-03);
    color: var(--color-text-primary-dark);
	padding: 0;
	margin: 0;
}

h4, .h4 {
	font: var(--text-heading-04);
    color: var(--color-text-primary-dark);
	padding: 0;
	margin: 0;
}

/* Menu Overrides
========================================================================== */
/* Added for left menu discipline dropdown */
.l-content-menu .left-menu__discipline-select-label {
	font: var(--text-form-label);
}
.l-content-menu .left-menu__nav .left-menu__accordion-label {
	font-family: var(--font-family-02);
	font-size: var(--font-size-25);
	font-style: normal;
	font-weight: 400;
	line-height: 18px
}
.left-menu__accordion .left-menu__accordion-heading-title {
	display: flex;
	position: relative;
	overflow: hidden;
	color: var(--color-text-form-active);
	font-family: var(--font-family-02);
	font-style: normal;
	font-weight: var(--font-weight-reg);
	line-height: 24px;
	font-size: var(--font-size-100);
	align-items: center;
}
.left-menu__accordion .left-menu__accordion-heading-title .icon {
	width: 12px;
	height: 12px;
	padding: 12px 0 0;
	background-size: 12px;
	background-position: 0 0;
	position: absolute;
	right: 0px;
	margin-top: 0;
}

.left-menu__accordion .left-menu__accordion-option a {
	overflow: hidden;
	color: var(--color-text-primary-dark);
	font-family: var(--font-family-02);
	font-style: normal;
	font-weight: var(--font-weight-reg);
	line-height: 24px;
	font-size: var(--font-size-100);
}

/* updated menu dropdown */
.left-menu__navitem-wrapper .left-menu__discipline-select {
 	height: inherit;
 	color: var(--color-text-form-placeholder);
 	padding: var(--spacing-03);
 	font-family: var(--font-family-02);
 	font-size: var(--font-size-100);
 	font-style: normal;
 	font-weight: var(--font-weight-reg);
 	line-height: 24px;
}

/* Anchor Overrides
========================================================================== */
a {
	color: var(--color-text-link-default);
}

a:hover {
	color: var(--color-text-link-hover);
	text-decoration: none;
}

a:visited {
	color: var(--color-text-link-visited);
}

/* Pagination Overrides
========================================================================== */
.search_nav-wrap {
	display: flex;
	justify-content: center;
}
.search_nav {
	display: flex;
	height: 48px;
	min-width: 296px;
	max-width: 480px;
	justify-content: center;
	align-items: center;
}

.page-link {
	padding: var(--spacing-04);
	border: var(--border-weight-01) solid var(--color-border-form-default);
}


.page-link:hover,
.page-link:active {
	border-color: var(--color-border-form-default);
	background-color: var(--color-surface-primary-hover);
}

.page-item .custom-select {
	height: 100%;
	padding: var(--spacing-03) var(--spacing-12);
	border-left: none;
    border-right: none;
    border-radius: 0;
	text-align: center;
/*
	background-position: 151px;
 */
}

.search_nav-arrow.icon-arrow-left {
    background-position: 0 -84px;
    padding-top: 0;
    height: 12px;
}

.search_nav-arrow.icon-arrow-right {
    background-position: 0 62px;
    padding-top: 0;
    height: 16px;
}

.disabled .search_nav-arrow.icon-arrow-left {
    background-position: 0 -60px;
}

.disabled .page-link {
 	padding: 16px var(--spacing-04);
	border: var(--border-weight-01) solid var(--color-border-form-default);
}

/*
.page-item.disabled .page-link {
    border-color: var(--color-brand-text-on-secondary);
}
 */


/* Button Overrides
========================================================================== */
button {
	background-color: var(--color-surface-primary);
}

.btn {
	border-radius: var(--border-radius-sm);
	white-space: nowrap;
}

.btn-primary::placeholder {
	color: var(--color-text-form-placeholder);
}

.btn-primary:active::placeholder,
.btn-primary:focus::placeholder {
	color: var(--color-text-form-active);
}

.btn-block {
	padding:	var(--spacing-03) var(--spacing-06);
}

.btn-link {
	text-decoration: none;
}

.close {
	opacity: var(--opacity-100);
}

.btn-primary {
	background-color: var(--color-brand-primary-01);
	border-color: var(--color-brand-primary-01);

}

.btn-primary:hover {
	background-color: var(--color-brand-primary-02);
	border-color: var(--color-brand-primary-02);
}



/* Chat Widget Overrides
========================================================================== */
#chat-widget-container {
    z-index: var(--z-index-04) !important;
}

#chat-widget-container .css-1yzzujv:hover {
    opacity: var(--opacity-70);
}

/* OneTrust Cookie Area Overrides
========================================================================== */
#onetrust-banner-sdk .ot-sdk-container,
#onetrust-pc-sdk .ot-sdk-container,
#ot-sdk-cookie-policy .ot-sdk-container {
	width: 100% !important;
	padding: 0 !important;
}

#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy #cookie-policy-title,
#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy h4,
#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy h5,
#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy h6 {
	font: var(--text-heading-04);
	color: var(--color-text-primary-dark);
	margin: 0 0 var(--spacing-06);
}

#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy li,
#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy p,
#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy a,
#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy span,
#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy td,
#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy #cookie-policy-description,
#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-sdk-cookie-policy-group-desc {
	font: var(--text-body-md-compact);
	color: var(--color-text-primary-dark);
	margin-bottom: var(--spacing-10);
}

#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-table-header {
	font: var(--text-body-md-compact);
	color: var(--color-text-primary-dark);
	padding: var(--spacing-03);
	border-right: 0;
	border-top: 0;
}

#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy a {
	font: var(--text-link-lg);
	color: var(--color-text-link);
}

#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy a:hover {
	font: var(--text-link-lg-hover);
	color: var(--color-text-link-hover);
}

#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy td {
	font: var(--text-body-md-compact);
	color: var(--color-text-primary-dark);
	border-right: 0;
}

#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-sdk-subgroup {
	margin-left: 0;
}

#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-sdk-subgroup ul {
	list-style: none;
}

#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-sdk-subgroup li {
	list-style: none;
	margin-left: 0;
}

#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-sdk-subgroup .ot-sdk-cookie-policy-group-desc {
	margin-top: 0.5rem;
}

#ot-sdk-cookie-policy #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table {
	margin: 0;
	border-radius: var(--border-radius-md);
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy section {
	margin-bottom: var(--spacing-10) !important;
}

.support_section #ot-sdk-btn.ot-sdk-show-settings,
.support_section #ot-sdk-btn.optanon-show-settings {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	border: var(--border-weight-01) solid var(--color-brand-primary-01);
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	border-radius: var(--border-radius-sm);
	white-space: nowrap;
	background-color: var(--color-brand-primary-01);
	color: var(--color-brand-text-on-primary);
	font: var(--text-button-lg);
	padding: var(--spacing-03) var(--spacing-06);
}

.support_section #ot-sdk-btn.ot-sdk-show-settings:hover,
.support_section #ot-sdk-btn.optanon-show-settings:hover {
	background-color: var(--color-brand-primary-02);
	color: var(--color-brand-text-on-primary);
}

#ot-sdk-btn.ot-sdk-show-settings,
#ot-sdk-btn.optanon-show-settings {
	background-color: var(--color-surface-button-ghost) !important;
	color: var(--color-text-button-on-ghost) !important;
	font: var(--text-button-lg) !important;
	padding: var(--spacing-03) var(--spacing-06) !important;
	border: var(--border-weight-01) solid var(--color-border-button-ghost) !important;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
	user-select: none !important;
	display: inline-block !important;
	text-align: center !important;
	vertical-align: middle !important;
	border-radius: var(--border-radius-sm) !important;
}

#ot-sdk-btn.ot-sdk-show-settings:hover,
#ot-sdk-btn.optanon-show-settings:hover {
	background-color: var(--color-brand-primary-02) !important;
}

/* Descpage */

.style_ordering .list-group.accordion .list-group-item:first-of-type .list-group-item:last-of-type,
.style_ordering .list-group.accordion .list-group-item:first-of-type .list-group-item:last-of-type .btn {
    border-bottom-left-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md);
	border-top-left-radius: var(--border-radius-md);
    border-top-right-radius: var(--border-radius-md);
}
.desc_top-head-info-sub {
    font: var(--text-product-type-lg);
    color: var(--color-text-secondary);
    word-break: break-word;
    padding-bottom: var(--spacing-01);
}

/* Support Center */
.support-center__location .support-center__location-details .support-center__location-name{
	padding-bottom: var(--spacing-02);
}

.support-center__location-subname {
	color: var(--color-text-secondary);
	font: var(--text-title-sm);
	line-height: 21px;
	padding-bottom: var(--spacing-06);
}

.support-center__location-link {
	color: var(--color-text-primary-dark);
	padding-bottom: var(--spacing-06);
}

#sizing_accordion .list-group-item.list-group-collapse {
	padding: 0;
	font-family: var(--font-family-02);
	font-size: var(--font-size-100);
	font-style: normal;
}

/* catpage */
/* video block */

.video_wrap .small-vid {
	padding-bottom: var(--spacing-06);
}


.video_wrap .small-vid:last-child {
	padding-bottom: 0;
}

/*
@media (min-width: 768px) {
	.video_wrap .small-vid {
		padding-bottom: 0;
	}
}
 */

/* Review Page */
.catheader_info-review:hover {
	color: var(--color-text-primary-light);
	background-color: var(--color-surface-button-ghost-hover);
}

.review_summary.container-fluid {
	padding-left: var(--spacing-06);
	padding-right: var(--spacing-06);
}

.review_container p {
	font: var(--text-body-lg);
}

/* Leagacy Breadcrumbs */
.breadcrumbs-list {
	display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 0;
    padding-right: var(--spacing-03);
    padding-left: var(--spacing-03);
    font-size: var(--font-size-50);
    overflow-x: auto;
    list-style: none;
}

.breadcrumbs-list .breadcrumb-item:last-child {
    padding-right: var(--spacing-03);
}

@media (min-width: 576px) {
    .breadcrumbs-list {
        padding-right: 18px;
        padding-left: 18px;
    }

    .breadcrumbs-list .breadcrumb-item:last-child {
        padding-right: 18px;
    }
}

@media (min-width: 768px) {
    .breadcrumbs-list {
        padding-right: var(--spacing-06);
        padding-left: var(--spacing-06);
    }

    .breadcrumbs-list .breadcrumb-item:last-child {
        padding-right: var(--spacing-06);
    }
}

@media (min-width: 1200px) {
    .breadcrumbs-list {
        padding-top: 0;
    }
}

/* Bootstrap Alert Overrides */
.alert-danger {
	background-color: var(--color-surface-support-critical);
	color: var(--color-text-support-critical);
	border-color: var(--color-border-support-critical);
	border-radius: var(--border-radius-sm);
	padding: var(--spacing-03);
}

.alert-warning {
	background-color: var(--color-surface-support-warning);
	color: var(--color-text-support-warning);
	border-color: var(--color-border-support-warning);
	border-radius: var(--border-radius-sm);
	padding: var(--spacing-03);
}

.alert-success {
	background-color: var(--color-surface-support-success);
	color: var(--color-text-support-success);
	border-color: var(--color-border-support-success);
	border-radius: var(--border-radius-sm);
	padding: var(--spacing-03);
}

.alert-primary {
	background-color: var(--color-surface-support-info);
	color: var(--color-text-support-info);
	border-color: var(--color-border-support-info);
	border-radius: var(--border-radius-sm);
	padding: var(--spacing-03);
}

.alert.alert-info {
	background-color: var(--color-surface-support-info);
	color: var(--color-text-support-info);
	border-color: var(--color-border-support-info);
	border-radius: var(--border-radius-sm);
	padding: var(--spacing-03);
}