/* ------------------------------------------------------------------------------- 	search.scss: 		- Imports _core.scss, which contains all of the core styles for the site 		- Contains other individual components that are needed by the page from the 		  site or from Rich_CoreUI (e.g., layouts, modules, helpers, etc...) ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- 	site.scss: 		- Imports for all: Rich_UI core, Base, Utilities, States, Modules and Layouts 		- This is typically used for documentation of the Rich_UI Styles ------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------ 	core.scss: 		- Core Imports: Base, States, Utilities, and Shame  		Note: 			The purpose of this partial is to include only the core styles 			that all of the sites require. For any layout or module that 			is required by an individual site, the site is responsible for 			importing those in at the site level. ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ base.scss: - Define the styles for the HTML elements e.g., h2, a, table, li, etc... --------------------------------------------------------------------- */
/* ------------------------------------------------------------------------ index.scss: 	- Imports for all Rich_CoreUI's utilities --------------------------------------------------------------------- */
/* ------------------------------------------------------------------------ 	global.scss: 		- Global variables shared by all sites (e.g., media queries, etc...) ---------------------------------------------------------------------- */
/*
	COLOR PALETTE
*/
/*
	MEDIA QUERIES
*/
/*
	Z-INDEXES
*/
/* TYPOGRAPHY
*/
/*
	TEXT
*/
/* ----------------------------------- 	font.scss: 		- @font-face mixin usage --------------------------------- */
/* ---------------------------------------------------------- 	function.scss: 		- e.g., ems to rems conversion, etc... -------------------------------------------------------- */
/* ---------------------------------------------------------- 	mixins.scss: 		- Contains global mixins 		e.g., Media queries, CSS3, etc... -------------------------------------------------------- */
/** Defines the configuration of a style utilizing a background image within a sprite sheet. $spritemap-width    : px	width of sprite sheet. must be defined before this file is imported. $spritemap-height   : px	height of sprite sheet. must be defined before this file is imported. $left               : px	left coordinate of the sprite $top                : px	top coordinate of the sprite $width              : px	the width of the sprite $height             : px	the height of the sprite $scale              : int	the scale of the sprite, default 1 */
/* ------------------------------------------------------------------------ 	global.scss: 		- Global variables shared by all sites (e.g., media queries, etc...) ---------------------------------------------------------------------- */
/*
	COLOR PALETTE
*/
/*
	MEDIA QUERIES
*/
/*
	Z-INDEXES
*/
/* TYPOGRAPHY
*/
/*
	TEXT
*/
/* ================== 	vert-align 		- Vertically align an element inside its container */
/* =================== 	overlay-link 		- Make an overlay-link for a container using its inline child <a> element  		- NOTES: Use this on parent container with "relative" positioning */
/* =================== 	inline-background 		- Make an image background for a container using its inline child <img> element  		- NOTES: Use this on parent container with "relative" positioning */
/* ---------------------------------------------------------- 	helpers.scss: 		- Styles that add functionality that normally doesn't 			fit into its own component 		- e.g., hide-desktop, hide-tablet, visually-hidden , etc... -------------------------------------------------------- */
/* ------------------------------------------------------------------------ 	global.scss: 		- Global variables shared by all sites (e.g., media queries, etc...) ---------------------------------------------------------------------- */
/*
	COLOR PALETTE
*/
/*
	MEDIA QUERIES
*/
/*
	Z-INDEXES
*/
/* TYPOGRAPHY
*/
/*
	TEXT
*/
/*
.unavailable{ &:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../../images/slash.png);
	background-size: 100% 100%; }
}
*/
/** Redefine variables for COL */
/* ---------------------------------------------------------- 	states.scss: 		- Global states to be used by all sites -------------------------------------------------------- */
/* ------------------------------------------------------------------------ 	global.scss: 		- Global variables shared by all sites (e.g., media queries, etc...) ---------------------------------------------------------------------- */
/*
	COLOR PALETTE
*/
/*
	MEDIA QUERIES
*/
/*
	Z-INDEXES
*/
/* TYPOGRAPHY
*/
/*
	TEXT
*/
@media (max-width: 767px) { .is-hidden-mobile { display: none !important; visibility: hidden; } }

@media (min-width: 768px) and (max-width: 1023px) { .is-hidden-tablet { display: none !important; visibility: hidden; } }

@media (min-width: 1024px) { .is-hidden-desktop { display: none !important; visibility: hidden; } }

@media (min-width: 1332px) { .is-hidden-lg-desktop { display: none !important; visibility: hidden; } }

/* ---------------------------------------------------------- 	touch.scss: 		- Touch specific styles -------------------------------------------------------- */
/* ---------------------------------------------------------- 	touch.scss: 		- Print specific styles -------------------------------------------------------- */
/* ------------------------------------------------------------------------ index.scss: 	- Imports for all Mhw's utilities --------------------------------------------------------------------- */
/* ------------------------------------------------------------------------ global.scss: 	- Global variables for Mhw --------------------------------------------------------------------- */
/*
	COLOR PALETTE
*/
/*
	TYPOGRAPHY
*/
/*
	This is due to how Mhw Category Refinement Group is designed
	where this wrapper has to be an element inside of the group
*/
.cwrapper-expandBanner, #category-banner { clear: left; }

@media (max-width: 1023px) { .refinement-container .cwrapper-expandBanner { display: none; } }

/* ---------------------------------------------------------------- 	cwrapper-expandBanner: 		- Container wrapper for Expandable Category Banners for MHW 		- Extended from Core-UI -------------------------------------------------------------- */
/* ---------------------------------------------------------------- 	cwrapper-expandBanner: 		- Container wrapper for Expandable Category Banners 		- Hooks (3) are used to control behaviors of the expandable 			banner from this container wrapper 		- Currently hides banner for Mobile view  		Hooks: 		- copyDesc1: Hook for the first paragraph of the banner 		- copyDesc2: Hook for the second paragraph of the banner 		- copyTrigger: Hook for the icon buttons of the banner -------------------------------------------------------------- */
/* ------------------------------------------------------------------------ 	global.scss: 		- Global variables shared by all sites (e.g., media queries, etc...) ---------------------------------------------------------------------- */
/*
	COLOR PALETTE
*/
/*
	MEDIA QUERIES
*/
/*
	Z-INDEXES
*/
/* TYPOGRAPHY
*/
/*
	TEXT
*/
/* Module Specific Mixin Parameters
*/
.cwrapper-expandBanner { width: 100%; position: relative; /* States */ }
.cwrapper-expandBanner .inner { position: relative; height: inherit; width: inherit; overflow: hidden; }
.cwrapper-expandBanner .copyDesc1 .copyTrigger { display: none; }
.cwrapper-expandBanner .copyDesc2 { visibility: visible; }
.cwrapper-expandBanner.is-collapsed-half { height: 127px; }
@media screen and (max-width: 1024px) { .cwrapper-expandBanner.is-collapsed-half { height: 131px; } }
.cwrapper-expandBanner.is-collapsed-half .copyDesc1 .copyTrigger { display: inline-block; }
.cwrapper-expandBanner.is-collapsed-half .copyDesc2 { visibility: hidden; }
@media screen and (max-width: 767px) { .cwrapper-expandBanner { display: none; } }

/* ---------------------------------------------------------------------------------------------------------------- iconButtonCombo.scss: - Content module for an icon button-label combo element - Components: - icon: A span element on which a font-awesome class (e.g., fa-plus-circle) is applied. Other style for the icon can be specified in this module file  (e.g., Width, height, color, etc...) - label: A text label (e.g., more, less) that describes the button and is specific to the context it is used. ------------------------------------------------------------------------------------------------------------- */
.iconButtonCombo { display: inline-block; cursor: pointer; /* COMPONENTS
*/ }
.iconButtonCombo_icon { color: #009c9a; }
.iconButtonCombo_label { color: #009c9a; }

/* ------------------------------------------------------------------------ title.scss: 	- Title content module definition --------------------------------------------------------------------- */
.title-banner { margin-top: 0; font-size: 16px; }
.title-giftCard { font-size: 16px; }

/* ------------------------------------------------------------------------ text.scss: 	- Text content module definition --------------------------------------------------------------------- */
.text-banner { font-size: 12px; }
.text-giftCard { font-size: 12px; }

/* -------------------------------------------------------------------------------------- 	categoryBanner.scss: 		- A template for category banner for MHW (An extension from richUI's categoryBanner) 		- This banner is CURRENTLY designed to be responsive only for Desktop and Tablet 		- The copy section is fixed for small and large desktop while the images' width 		  change when the window size changes 		- The right image will be hidden and the copy component is slighter wider for tablet  		Components: 		- categoryBanner_leftImage: The left image 		- categoryBanner_copy: The copy component 		- categoryBanner_rightImage: The right image ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------ 	categoryBanner.scss: 		- A core template for SEO category banner (i.e. expandable banner) 		- This banner is CURRENTLY designed to be responsive only for Desktop and Tablet 		  and is designed to be extended by each of the 4 brands.  		Components: 		- categoryBanner_copy: The copy component whose width can be override 		- categoryBanner_rightImage: The right crop-able image whose width can be override by an extension  		Extension Notes: 		- A left crop-able image (i.e. categoryBanner_leftImage) can be added to an extension. 		  Its width and how it is cropped are specific to the extension ----------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------ 	global.scss: 		- Global variables shared by all sites (e.g., media queries, etc...) ---------------------------------------------------------------------- */
/*
	COLOR PALETTE
*/
/*
	MEDIA QUERIES
*/
/*
	Z-INDEXES
*/
/* TYPOGRAPHY
*/
/*
	TEXT
*/
.categoryBanner { /*
	 Extensible Components: [categoryBannerName]_copy & [categoryBannerName]_rightImage
*/ }
.categoryBanner_copy { float: left; padding: 15px; height: 230px; width: 426px; background-color: #000; color: #fff; }
.categoryBanner_rightImage { float: left; display: block; height: 230px; overflow: hidden; }
@media screen and (max-width: 1023px) { .categoryBanner_rightImage { display: none; } }

.categoryBanner { /* Components */ }
.categoryBanner_leftImage { float: left; display: block; height: 230px; overflow: hidden; }
@media (min-width: 768px) and (max-width: 1331px) { .categoryBanner_leftImage { width: 288px; }
  .categoryBanner_leftImage > img { margin-left: -100px; } }
@media screen and (max-width: 1023px) { .categoryBanner_copy { width: 460px; } }
@media screen and (min-width: 1332px) { .categoryBanner_copy { width: 447px; } }
@media (min-width: 768px) and (max-width: 1331px) { .categoryBanner_rightImage { width: 288px; } }

/* ---------------------------------------------------------------------------------------------------------------- iconButtonCombo.scss: - Content module for an icon button-label combo element - Components: - icon: A span element on which a font-awesome class (e.g., fa-plus-circle) is applied. Other style for the icon can be specified in this module file  (e.g., Width, height, color, etc...) - label: A text label (e.g., more, less) that describes the button and is specific to the context it is used. ------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------- iconButtonCombo.scss: - Content module for an icon button-label combo element - Components: - icon: A span element on which a font-awesome class (e.g., fa-plus-circle) is applied. Other style for the icon can be specified in this module file  (e.g., Width, height, color, etc...) - label: A text label (e.g., more, less) that describes the button and is specific to the context it is used. ------------------------------------------------------------------------------------------------------------- */
.iconButtonCombo { display: inline-block; cursor: pointer; /* COMPONENTS
*/ }
.iconButtonCombo_icon { color: #009c9a; }
.iconButtonCombo_label { color: #009c9a; }

/* ------------------------------------------------------------------------ global.scss: 	- Global variables for Mhw --------------------------------------------------------------------- */
/*
	COLOR PALETTE
*/
/*
	TYPOGRAPHY
*/
/* Module Specific Mixin Parameters
*/
/* Extension Properties
*/
.iconButtonCombo { /* COMPONENTS
*/ }
.iconButtonCombo_icon { color: #e13212; }
.iconButtonCombo_label { color: #e13212; text-decoration: underline; font-size: 12px; font-weight: bold; }