@font-face {
	font-family: 'flexslider-icon';
	src:url('../fonts/webfonts/flexslider-icon.eot');
	src:url('../fonts/webfonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/webfonts/flexslider-icon.woff') format('woff'),
		url('../fonts/webfonts/flexslider-icon.ttf') format('truetype'),
		url('../fonts/webfonts/flexslider-icon.svg#flexslider-icon') format('svg');
	font-weight: normal;
	font-style: normal;
}

.mill_wrapper {
	position: relative;
	width: 100%;
	height: 100%; /* Adjust height as needed */
	padding: 10px;
}
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(255 255 255 / 95%); /* Semi-transparent white background */
	display: none; /* Initially hidden */
	z-index: 95; /* Ensure it's on top */
}
.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 40px; /* Adjust spinner size */
	color: #333; /* Spinner color */
}

.millwest_attrs {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.millwest_attrs_list,
.m_attr_list {
    border-radius: 5px;
    flex: 1 0 40%;
}

.m_inside_header:has(.m_lists) {
    flex: 1 0 40%;
}

.mg_lists.m_attr_list {
    flex: none;
}

.millwest_attrs_list button,
.m_attr_list button {
    width: 100%;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #c4d2db;
    background: #fefefe;
    font-family: "Work Sans", Sans-serif;
    font-size: 16px;
    font-weight: 500;
}


.millwest_attrs_list button:hover,
.m_attr_list button:hover,
.m_ajax.active {
    border: 1px solid var( --e-global-color-accent );
}


/* Updated by Keith - 2026.09 - wood-group label in the swatch picker was an h5, now div.m_attr_group */
.millwest_attrs .m_attr_group,
.m_attr_list .m_attr_group {
    font-family: "Work Sans", Sans-serif;
    font-size: 17px;
    font-weight: 500;
	flex: 1 0 100%;
	margin-bottom: 0;
}

.m_ajax_atts, 
.m_inside_header,
.mg_lists {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.m_ajax_atts img,
.mg_lists img {	
	border: 2px solid #c4d2db !important;
	padding: 0px;
	border-radius: 5px !important;
	min-width: 80px;
    min-height: 70px;
	max-height: 70px;
	width: 80px;
}

a.m_check_price {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	text-decoration: none !important;
	align-items: center;
	gap: 7px;
	flex: 1 0 25%;
	line-height: 1.2em;
	max-width: 80px;
	color: #606060;
}
.mill_attributes_container,
.m_attr_container{
	position: relative;
}
.mill_attributes_container:hover a.mill_zoom,
.m_attr_container:hover a.mill_zoom {
    display: block;
}
a.mill_zoom {
    position: absolute;
    color: #ccc;
    padding: 5px;
    right: 0;
    cursor: zoom-in;
}

a.mill_zoom:hover {
    color: #000;
}

.m_check_price:hover img, .m_check_price.active img {
	border-color: #AA0812  !important;
	border-width: 4px !important;
}

/* "Discontinued" tag on a swatch that is still shown because it is the
   product's default (photo) fabric or the current selection.
   Added by Jadon - 2026.09 */
.m_check_price p .m_discontinued {
	display: block;
	color: #AA0812;
	font-size: 0.85em;
	line-height: 1.2em;
}

/* Same tag beside the selected value in the accordion header (the box that
   shows e.g. "482011GR10"). Sits next to .m_selected inside the flex row,
   never inside it, because the JS reads .m_selected's text as the value.
   Added by Jadon - 2026.09 */
.m_selected_parent .m_selected_discontinued {
	align-self: center;
	color: #AA0812;
	font-family: "Work Sans", Sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 2em;
	white-space: nowrap;
}

/* Dash between the fabric number and the word, in the same red. Drawn by CSS
   inside the tag so the value box itself still holds only the plain name.
   The header row has a 10px flex gap, so the tag pulls itself back 5px and
   the dash gets 5px on its right: the number, dash and word sit evenly.
   Added by Jadon - 2026.09 */
.m_selected_parent .m_selected_discontinued {
	margin-left: -5px;
}
.m_selected_parent .m_selected_discontinued::before {
	content: "-";
	margin-right: 5px;
}


p.stock.out-of-stock {
    display: none;
}

.m_accordion {
	width: 100%;
	height: 60px;
	border-radius: 3px;
	overflow: hidden;
	transition: height 0.05s ease; /* Added by Jadon - 2026.09: was 0.3s; keeps pace with the 200ms open/close in millwest-public.js (MILL_ACCORDION_MS) */
	margin-bottom: 0px;
	border-top-color: transparent;
	border-width: 1px;
	border-style: solid;
	border-left-color: transparent;
	border-right-color: transparent;
}

.m_accordion .m_accordion_tab, .m_accordion .m_collection_tab {
	padding: 20px;
	cursor: pointer;
	user-select: none;
	position: relative;
	display: flex;
	justify-content: space-between;
	font-family: "Work Sans", Sans-serif;
	font-size: 17px;
	font-weight: 500;
	color: var( --e-global-color-primary );
	padding-left: 0;
	z-index: 98;
}

.m_accordion:hover .m_selected{
	color : var( --e-global-color-primary );
}

.mill_collection_acc .m_accordion .m_accordion_content .m_accordion_item a {
    text-decoration: underline;
}

.m_accordion .m_collection_tab {
	font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
    font-size: var(--e-global-typography-secondary-font-size);
    font-weight: var(--e-global-typography-secondary-font-weight);
    line-height: var(--e-global-typography-secondary-line-height);
    letter-spacing: var(--e-global-typography-secondary-letter-spacing);
}

.m_accordion .m_accordion_tab .m_accordion_arrow , .m_accordion .m_collection_tab .m_accordion_arrow {
	position: absolute;
	top: 53%;
	transform: translateY(-50%) rotate(90deg);
	right: 15px;
	width: 30px;
	height: 30px;
	transition: all 0.3s ease;
	font-size: 24px;
}

.m_accordion .m_accordion_tab .m_accordion_arrow img, .m_accordion .m_collection_tab .m_accordion_arrow img {
	width: 100%;
	height: 100%;
}

.m_accordion .m_accordion_tab.active .m_accordion_arrow , .m_accordion .m_collection_tab.active .m_accordion_arrow {
	transform: translateY(-50%) rotate(-90deg);
	top:43%;
}

.m_accordion.active {
	height: auto;
	overflow-y: auto;
	overflow-x: hidden;
}

.m_accordion::-webkit-scrollbar {
	width: 12px;
	/* Width of the scrollbar */
}

.m_accordion::-webkit-scrollbar-thumb {
	background-color: #888;
	/* Color of the thumb */
	border-radius: 6px;
	/* Round corners of the thumb */
}

/* Firefox */
.m_accordion {
	scrollbar-width: thin;
	/* Width of the scrollbar */
	position: relative;
}

.m_accordion::-webkit-scrollbar-track {
	background: transparent;
	/* Background of the scrollbar track */
}

.m_accordion .m_accordion_content {
	padding: 10px;
	border-top: 1px solid #e9e9e9;
}

.m_accordion .m_accordion_content .m_accordion_item {
	margin-top: 20px;
    margin-bottom: 20px;
}

.m_accordion .m_accordion_content .m_accordion_item p.item_title {
	font-weight: 600;
	margin-bottom: 10px;
	font-size: 18px;
	color: #6adda2;
}

.m_accordion .m_accordion_content .m_accordion_item p:last-child {
	font-size: 13px;
	line-height: 1.2em;
	font-family: "Work Sans", Sans-serif;
	color: var( --e-global-color-primary );
	text-align: center;
	margin-bottom: 0px;
}

.m_accordion_tab.disabled {
    color: #E9E9E9;
}

.m_accordion_tab.active, .m_collection_tab.active {
    font-weight: 700;
	color: var( --e-global-color-primary ) !important;
}

.m_accordion_collections{
	background: #ECE9E3;
    border-left-color: #ECE9E3;
    border-right-color: #ECE9E3;
    border-top-color: #ECE9E3;
}

.m_accordion_collections .m_accordion_content{
	padding: 0;
}

.m_accordion_collections .m_accordion_item{
	color: var(--e-global-color-text);
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-weight: var(--e-global-typography-text-font-weight);
}

.m_selected_parent {
	z-index: 90;
	display: flex; 
	margin-right: 60px;
	padding: 1px 15px;
	position: absolute;
	right: 0;
	top: 15px;
	gap: 10px;
	border-radius: 5px;
	min-width: 150px;
	justify-content: end;
	align-items: center;
}

.m_selected_parent a {
	color:  #223651b8;
}

.m_selected {
    line-height: 2em;
    font-family: "Work Sans", Sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #505153;
}

.m_unselect i{
	display: none;
    position: absolute;
    top: 5px;
    color: #8B8D94;
    font-style: normal;
    font-weight: 600;
}
.m_selected_parent:hover i{
	display:block;
}

.m_unselect:hover i {
    color: #AA0812;
}

.mill_cart_message, 
td.woocommerce-table__product-name.product-name div, 
td.woocommerce-table__product-name.product-name div strong,
.m_order_meta li {
	font-size: 12px;
    line-height: 1.5em;
    width: 100%;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    color: var( --e-global-color-primary ) !important;
    font-weight: 500 !important;
}

a.woocommerce-Button.wc-forward.button,
.woocommerce-info {
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-weight: var(--e-global-typography-accent-font-weight);
    letter-spacing : 0;
    padding : 10px 0;
}


ul.mill_cart_message {
    padding: 0 10px;
}

.m_order_meta li {
    margin: 2px !important;
	text-align:left;
}

.m_addcart:hover {
    background: var( --e-global-color-accent ) !important;
}

.m_addcart[disabled]{
	opacity: 0.7;
}

.milladdtocart{
	margin-top: 15px;
    margin-bottom: 15px;
}

.woocommerce-message-text {
    font-family: "Work Sans", Sans-serif !important;
    font-size: 16px;
}

#form-field-mill_zipcode{
	max-width: 200px !important;
    display: flex;
    right: 0;
    position: absolute;
}

.millwest_recently .rp-heading:after, .millwest_recently .rp-heading:before {
    content: "";
    width: 15%;
    border-bottom: 1px solid var( --e-global-color-primary );
    position: absolute;
    top: 70px;
    margin-left: 20px;
}

.millwest_recently .rp-heading:before {
	left: 0;
	margin-left: 21%;
}

.millwest_related .rp-heading:after,.millwest_related .rp-heading:before{
	top: 20px;
}
.millwest_related .rp-heading:before{
	margin-left: 20%;
}

select.mill_quantity {
    width: 70px;
    top: -1px;
    position: relative;
    height: 35px;
}

.mill_discount_container {
    display: flex;
    flex-direction: column;
    padding: 0px 10px;
}

.mill_discount_container div {
    padding: 0 15px;
}

.mill_discount {
    display: flex;
    gap: 30px;
    justify-content: end;
    font-family: "Work Sans", Sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--e-global-color-primary);
}

.mill_discount.mill_discount_type {
    color: #AA0812;
}

.mill_discount.mill_discount_total {
    border-top: 1px solid var( --e-global-color-primary );
    padding-top: 10px;
	color: #2E6F40;
	font-weight: 600;
}

/* Styling for the mill_popup container */
.mill_popup {
	display: none; /* Hidden by default */
	position: fixed; /* Positioning context */
	z-index: 9999; /* Ensure it stays on top */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto; /* Enable scrolling if needed */
	background-color: rgb(250 250 250 / 99%); /* Semi-transparent background */
}
  
/* Popup content */
.mill_popup-content {
	background-color: #fefefe;
	margin: 1% auto; /* Centered position */
	padding: 20px 20px 15px 20px;
	border: 1px solid var(--e-global-color-primary);
	 /* 80% of parent container */
	max-width: 60vh; /* Maximum width */
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	position: relative;
	border-radius: 10px;
	text-align: center;
}

.mill_popup-content img {
    max-width: 100%;
}
  
/* Close button */
.mill_close {
	color: #8b8d94;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	position: absolute;
	right: 5px;
	top: 0px;
}
  
.mill_close:hover,
.mill_close:focus {
	color: #FF0000;
	text-decoration: none;
}
.shop_table  thead, .woocommerce .cart_totals h2 {
    background: var(--e-global-color-primary);
    height:40px;
	color: #FFFFFF !important;
	text-align: center !important;
}

.woocommerce-billing-fields h3, .e-checkout__order_review h3{
	background: var(--e-global-color-primary);
    height: 50px;
    color: #FFFFFF !important;
    text-align: center !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.woocommerce .cart_totals h2{
	padding: 9px 20px 8px 10px !important;
}
.shop_table thead th{
	padding : 10px !important;
	border-right: 1px solid #FFF !important;
	text-align: center;
}

.shop_table th.product-name {
    text-align: left !important;
    padding-left: 5px !important;
}

.shop_table td.product-thumbnail {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.woocommerce table.cart td{
	padding-left: 10px !important;
    padding-right: 5px !important;
}

td.product-subtotal {
    text-align: right;
    padding-right: 15px !important;
}

.shop_table th.product-remove, .shop_table th.product-thumbnail {
    border: 0 !important;
}

.woocommerce .input-text.qty{
	text-align: center;
}

td.product-quantity select.mill_quantity {
    margin-bottom: 0;
    width: 60px;
    height: 30px !important;
    background-color: #fefefe;
    border: 1px solid #ddd;
    padding: 7px !important;
    margin-left: 10px;
	padding-left: 15px !important;
}

.lb-data {
    display: flex;
	margin: 10px 5px;
	align-items: center;
}

.lb-data .lb-details {
    flex: 1 0 70%;
}

.lb-closeContainer {
    flex: 1 0 20%;
}

.lb-data .lb-close:hover{
	background: url(../images/close-hover-new.png) top right no-repeat;
}

a.mill_select {
    background: #fefefe;
    padding: 10px;
    text-decoration: none;
    top: 15px;
    position: relative;
    border-radius: 5px;
	cursor: pointer;
	font-family: "Work Sans", Sans-serif;
    font-weight: 500;
}
a.mill_select:hover {
    background:  #b6b6b6;
    color: #fefefe;
}

a.mill_select:focus {
    background:  var(--e-global-color-primary);;
    color: #fefefe;
}


.mill_product_desc {
    z-index: 999 !important;
}

.mflexslider{
	position: relative;
}
/* Added by Jadon - 2026.09: magnifying glass moved from the bottom-right to the
   top-right corner of the main photo (the child theme's 600px block matches). */
.mflexslider .mzoom_flash{
	position: absolute;
    top: 4px;      /* Added by Jadon - 2026.09: inset 4px from the corner */
    bottom: auto;
    right: 4px;
    z-index: 85;
    font-size: 20px;
}

.mflexslider ul.slides {
    margin:0;
}

.mflexthumbs ul{
	margin:0 !important;
	list-style:none !important;
    display: flex;
}
.mflexthumbs ol.flex-control-nav.flex-control-paging {
    display: none;
}
.mflexthumbs ul img{
	cursor: pointer;
	min-height: 100px;
    min-width: 100px;
}
.mflexthumbs .flex-direction-nav a {
    opacity: 1 !important;
    padding-top: 7px;
    z-index: 999 !important;
}

.mflexthumbs .flex-direction-nav a:before {
    font-size: 24px !important;
    color: var(--e-global-color-primary) !important;
    font-family: icomoon-the7-font !important;    
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.mflexthumbs .flex-direction-nav a.flex-next:before {
    content: '\f015';
}

.mflexthumbs .flex-direction-nav a.flex-prev:before {
    content: '\f014';
}

/* Added by Jadon - 2026.09: thumbnail strip arrows.
   The arrows were always rendered by FlexSlider, but they sat 60px OUTSIDE the strip
   and the strip is overflow:hidden (child theme style.css, "clip pre-init overflow"),
   so on desktop they were clipped away and never showed. They are now anchored to the
   inside edges of the strip, vertically centered, using the same plain icomoon chevrons
   that already show on the mobile layout (no background, primary color). */
.mflexthumbs {
    position: relative;
    box-sizing: border-box;
    margin-top: 10px; /* Added by Jadon - 2026.09: breathing room between the main photo and the strip */
}

/* Added by Jadon - 2026.09: photo-count rules (classes set in initialize_slider).
   - Strip stays invisible until its layout is decided, then shows in one piece.
   - One photo: no strip at all.
   - Five or more photos on desktop: 40px of padding each side so the arrows sit
     beside the thumbnails, not on top of them; the four thumbnails shrink to fit
     the space between (FlexSlider sizes them from the padded-down width). */
.mflexthumbs:not(.mill-thumbs-ready) {
    visibility: hidden;
}
.mflexthumbs.mill-thumbs-single {
    display: none !important;
}
.mflexthumbs.mill-thumbs-arrows {
    padding: 0 40px;
}
/* Thumbnails narrow from 100px to about 92px inside the padding. The 100px min-height
   from the base rule above is kept on purpose: it holds the strip open while lazy
   thumbnails are still loading (without it the strip collapses to a 1px line);
   object-fit keeps the narrower photos from stretching to fill that height. */
.mflexthumbs.mill-thumbs-arrows ul.slides img {
    min-width: 0;
    width: 100%;
    object-fit: contain;
}

.mflexthumbs  .flex-direction-nav .flex-prev{
	left: 0;
}

.mflexthumbs  .flex-direction-nav .flex-next{
	right: 0;
}

.elementor-widget .dt-product-thumbs .slides li:not(.flex-active-slide) {
    opacity: 1 !important;
}

/* Added by Jadon - 2026.09: the arrow list is now an absolutely positioned, zero-height
   band across the middle of the strip; each arrow (40px, margin-top -20px from
   flexslider.css) hangs off it so both chevrons sit centered on the thumbnails. */
.mflexthumbs ul.flex-direction-nav {
    display: block;
    z-index: 80;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    margin: 0 !important;
}

/* Added by Jadon - 2026.09: mobile / tablet (768px and under). The strip is no longer a
   FlexSlider there (see initialize_slider in millwest-public.js); it is a plain row that
   scrolls sideways with a finger. No arrows, no scrollbar, active photo underlined. */
.mflexthumbs.mill-thumbs-scroll > ul.slides {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* No scroll-snap on purpose (Added by Jadon - 2026.09): snapping cut flicks short
       and made the strip feel sticky. Plain overflow scrolling gives the browser's own
       momentum: a faster swipe travels farther and coasts to a stop. */
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.mflexthumbs.mill-thumbs-scroll > ul.slides::-webkit-scrollbar {
    display: none;
}
.mflexthumbs.mill-thumbs-scroll > ul.slides > li {
    flex: 0 0 auto;
    width: 100px;
    margin-right: 2px; /* gap between thumbnails; desktop uses FlexSlider's itemMargin */
}
.mflexthumbs.mill-thumbs-scroll .flex-direction-nav {
    display: none;
}

/* Added by Jadon - 2026.09: main photo arrows on mobile / tablet (768px and under).
   The main slider (.mflexslider) still drew FlexSlider's stock arrows there: the
   flexslider-icon font, 40px, black with a text shadow (the child theme's 600px block
   only shrinks them to 25px). They now use the same plain icomoon chevrons, size and
   primary color as the desktop thumbnail-strip arrows above (.mflexthumbs rules), so the
   two galleries match. Only the look changes; the arrow positions set by the child theme
   (li.flex-nav-prev / li.flex-nav-next) are left alone. Desktop main-photo arrows are
   untouched. */
@media (max-width: 768px) {
    .mflexslider .flex-direction-nav a {
        opacity: 1 !important;
        padding-top: 7px;          /* same glyph offset as the thumbnail arrows */
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0;
        text-shadow: none;
    }
    .mflexslider .flex-direction-nav a:before {
        font-family: icomoon-the7-font !important;
        font-size: 24px !important;
        color: var(--e-global-color-primary) !important;
        text-shadow: none;
        padding-top: 0;            /* cancels the 10px the child theme adds at 600px */
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
    }
    .mflexslider .flex-direction-nav a.flex-prev:before {
        content: '\f014';
    }
    .mflexslider .flex-direction-nav a.flex-next:before {
        content: '\f015';
    }

    /* Added by Jadon - 2026.09: guard rail for portrait photos on a phone. The main photo
       box now follows each photo's height (millFitSliderHeight in millwest-public.js), and
       a portrait lifestyle shot at full phone width would run about 560px tall and push
       the price and Add to Cart off the screen. Cap it at the width of the screen (a
       square) and let object-fit letterbox the photo inside; landscape photos are shorter
       than that already, so they are untouched. The child theme forces the img width
       (410px !important, max-width 100%), which is why the cap is a max-height on the img
       rather than an aspect-ratio on the slide. */
    .mflexslider ul.slides li img {
        max-height: 100vw;
        object-fit: contain;
    }
}

/* Added by Jadon - 2026.09: mobile full-screen photo viewer (PhotoSwipe, loaded by the
   block at the end of millwest-public.js at 768px and under; its root element is
   #mill-pswp). Keep it above the theme's sticky header, menus and the admin bar (99999)
   so the viewer always covers the whole screen, whatever z-index the WooCommerce copy
   of photoswipe.css ships with. */
@media (max-width: 768px) {
    .pswp {
        z-index: 100000;
    }

    /* Added by Jadon - 2026.09: the viewer's top bar. The7 (parent theme main.css) restyles
       PhotoSwipe for its own galleries: it shrinks every .pswp__button to 26px, floats it
       right with a 15px margin, drops to half opacity and strips the icon sprite with
       background: 0 0 !important, which left our close button drifting left of the corner
       and with no visible X. These rules are scoped to #mill-pswp so The7's own galleries
       are untouched: the close button is pinned to the top-right corner as a 44px tap
       target with an X drawn by two CSS bars (no sprite or icon font needed), the photo
       counter sits top-left, the spinner stays centered, and the zoom / fullscreen buttons
       are hidden (pinch and double-tap do the zooming on a phone). The7 also paints its
       own X on the button's ::before through a CSS mask (an SVG shape), which clipped our
       first bar to a sliver, so both bars clear that mask explicitly. */
    #mill-pswp .pswp__top-bar {
        height: 44px;
    }
    #mill-pswp .pswp__top-bar .pswp__button--close {
        position: absolute;
        top: 0;
        right: 0;
        width: 44px;
        height: 44px;
        margin: 0;
        float: none;
        opacity: 1;
        background: none !important;
        overflow: visible;
    }
    #mill-pswp .pswp__button--close::before,
    #mill-pswp .pswp__button--close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 22px;
        height: 2px;
        margin: -1px 0 0 -11px;
        background: #fff !important;             /* The7 sets background-color !important on ::before */
        border-radius: 1px;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);   /* keeps the X readable over a light photo */
        -webkit-mask: none !important;             /* The7's SVG mask would clip the bar */
        mask: none !important;
    }
    #mill-pswp .pswp__button--close::before {
        transform: rotate(45deg);
    }
    #mill-pswp .pswp__button--close::after {
        transform: rotate(-45deg);
    }
    #mill-pswp .pswp__button--zoom,
    #mill-pswp .pswp__button--fs {
        display: none !important;
    }

    /* Added by Jadon - 2026.09: SELECT button, same look as a.mill_select in the desktop
       Lightbox2 (white pill, Work Sans), placed in the top bar just left of the X.
       Shown / hidden per photo by the viewer block in millwest-public.js. */
    #mill-pswp .mill-pswp-select {
        position: absolute;
        top: 8px;
        right: 52px;
        left: auto;         /* a.mill_select carries left: -60% for the Lightbox2 layout */
        width: auto;
        padding: 6px 12px;
        line-height: 16px;
        font-size: 13px;
        letter-spacing: 0.5px;
        border-radius: 5px;
        background: #fefefe;
        color: var(--e-global-color-primary);
        text-decoration: none;
    }

    /* Added by Jadon - 2026.09: prev / next arrows. PhotoSwipe's default skin hides its
       arrows on touch screens (swipe only) and The7 restyles what is left (62px font and
       min-height, an SVG mask on ::before), so the viewer had no visible way to page
       through photos. They are shown again and drawn with the same icomoon chevrons
       (\f014 / \f015) and primary color as the gallery and thumbnail-strip arrows elsewhere
       on the page, a little larger (28px) with a soft white halo so they stay readable
       whether they land on a white product photo or the black viewer. 44px tap targets,
       vertically centered at the screen edges. Hidden when there is only one photo
       (PhotoSwipe adds pswp__ui--one-slide). The !important flags are needed because
       The7's own arrow rules use them. */
    #mill-pswp .pswp__button--arrow--left,
    #mill-pswp .pswp__button--arrow--right {
        display: block;
        visibility: visible;
        position: absolute;
        top: 50% !important;
        width: 44px !important;
        height: 44px !important;
        min-height: 0 !important;
        margin: -22px 0 0 !important;
        font-size: 24px !important;
        line-height: 44px !important;
        float: none;
        opacity: 1;
        background: none !important;
        overflow: visible;
    }
    #mill-pswp .pswp__button--arrow--left {
        left: 0;
    }
    #mill-pswp .pswp__button--arrow--right {
        right: 0;
    }
    #mill-pswp .pswp__button--arrow--left::before,
    #mill-pswp .pswp__button--arrow--right::before {
        content: '\f014' !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 44px !important;
        height: 44px !important;
        min-height: 0 !important;
        margin: 0;
        line-height: 44px !important;
        text-align: center;
        font-family: icomoon-the7-font !important;
        font-size: 28px !important;
        font-style: normal;
        font-weight: 400;
        color: var(--e-global-color-primary) !important;
        text-shadow: 0 0 2px #fff, 0 0 6px #fff, 0 0 10px #fff;   /* white halo for dark areas */
        background: none !important;
        -webkit-mask: none !important;   /* The7 masks arrow ::before too */
        mask: none !important;
        -webkit-font-smoothing: antialiased;
    }
    #mill-pswp .pswp__button--arrow--right::before {
        content: '\f015' !important;
    }
    #mill-pswp .pswp__ui--one-slide .pswp__button--arrow--left,
    #mill-pswp .pswp__ui--one-slide .pswp__button--arrow--right {
        display: none;
    }
    #mill-pswp .pswp__counter {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 44px;
        padding: 0 12px;
        line-height: 44px;
        font-size: 13px;
        color: #fff;
        opacity: 0.85;
    }
    #mill-pswp .pswp__preloader {
        position: absolute;
        top: 0;
        left: 50%;
        margin: 0 0 0 -22px;
        float: none;
    }

    /* Added by Jadon - 2026.09: full-page dimmer behind the viewer. PhotoSwipe's own
       dimmer only fills the viewer box, which matches the browser viewport at open time;
       when a phone's browser toolbar slides away the viewport grows and a strip of the
       page showed undimmed at the bottom. This element (added by the viewer block in
       millwest-public.js, shown while the viewer is open) sits just under the viewer and
       reaches a full screen past the top and bottom edges, so the page stays covered
       whatever the toolbar does. It is the only dimmer (the PhotoSwipe one is switched
       off below), so the whole screen gets one even, slightly see-through shade with no
       seam between the viewer box and the strip. It never takes taps. */
    #mill-pswp-backdrop {
        position: fixed;
        left: 0;
        right: 0;
        top: -100vh;
        bottom: -100vh;
        background: rgba(0, 0, 0, 0.9);   /* slightly see-through: the page shows faintly */
        z-index: 99999;                   /* just under the viewer (100000), above everything else */
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.3s ease;    /* fade out while the viewer closes */
        animation: millPswpFade 0.3s ease; /* fade in with the viewer */
    }
    #mill-pswp-backdrop.mill-pswp-backdrop-closing {
        opacity: 0;
    }
    #mill-pswp .pswp__bg {
        display: none;   /* the backdrop above does the dimming */
    }
    @keyframes millPswpFade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* Added by Jadon - 2026.09: no arrow when there is nothing to scroll to on that side.
   Both galleries run with animationLoop: false, so FlexSlider marks the prev arrow
   .flex-disabled on the first photo, the next arrow on the last photo, and both when
   every photo already fits (directionNav.update in jquery.flexslider.js). flexslider.css
   fades those out with opacity: 0 !important, but the opacity: 1 !important rules for
   the thumbnail strip (above) and the mobile main photo (above) are more specific and
   were winning, so a dead arrow stayed on screen. display: none outranks all of that,
   and FlexSlider takes the class off again as soon as there is somewhere to go. Applies
   to the main photo and the thumbnail strip, desktop and mobile alike. */
.mflexslider .flex-direction-nav a.flex-disabled,
.mflexthumbs .flex-direction-nav a.flex-disabled {
    display: none !important;
}

.mflexthumbs li.flex-active-slide {
    border-bottom: 1px solid var(--e-global-color-primary);
}


.m_loader{
	width: 128px;
    height: 128px;
    margin: 0 auto;
    margin-top: 35%;
}

div#lightbox {
    display: flex;
    flex-direction: column-reverse;
}

/* Spinner style */
.lazy-loading {
    background: url('../images/spinner.gif') center center no-repeat;
    background-size: 32px 32px; /* Adjust spinner size as needed */
    min-height: 100px; /* Set minimum height to show spinner before the image loads */
}

ul.flex-direction-nav li {
	list-style: none;
}

.e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a:hover {
    text-decoration: underline;
}

header.woocommerce-Address-title {
    position: relative;
}

header.woocommerce-Address-title a.edit {
	background: var(--e-global-color-secondary);
    padding: 10px 20px;
    margin-bottom: 25px;
    float: none !important;
    top: 50px;
    border-radius: 5px;
    right: 10px;
    text-decoration: none !important;
    font-family: "Work Sans", Sans-serif !important;
	font-weight: 500 !important;
}


header.woocommerce-Address-title a.edit:hover {
    background: var( --e-global-color-primary );
    color: #FFF !important;
}

.elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout-review-order-table .order-total th,.elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout-review-order-table .order-total td {
    border-top: none !important;
}

.elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout-review-order-table .tax-rate th,.elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout-review-order-table .tax-rate td {
    border-bottom: var(--order-summary-totals-divider-weight, 0) solid var(--order-summary-totals-divider-color, #69727d) !important;
}

.woocommerce-column--billing-address p.woocommerce-customer-details--phone {
    margin-top: 25px;
}



.m_login .elementor-icon::before{	
	content: '?';	
    position: absolute;
    z-index: 1;
    min-width: 1.6em;
    height: 1.6em;
    line-height: 1.5em;
    top: -.3em;
    background: #fff;
    color: var(--e-global-color-primary);
    border-radius: 100%;
    text-align: center;
    font-size: 10px;
    transition: all .3s;
}
body.logged-in .m_login .elementor-icon::before{
	content: attr(data-firstletter);
}

.mill_slides .text-container h3{
    color : #223651 !important;
    font-size: 26px !important
}
.mill_slides .text-container p{
    color : #223651 !important;
}

.millwest_price div {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    align-items: center;
}
.millwest_price p:after {
    content: "";
    width: 100%;
    height: 2px;
    background: #AA0812;
    display: block;
    transform: rotateZ(23deg);
    position: absolute;
    top: 5px;
}
.millwest_price p {
    font-size: 22px !important;
    margin-top: 10px;
}
.m_no_discount.millwest_price p{
	text-decoration: none;
	font-size: 40px !important;
	color: #2E6F40 !important; /* Added by Jadon - 2026.06 - non-discounted big price green */
}

/* Added by Jadon - 2026.06 - stronger override: the non-discounted price <p> carries
   WooCommerce's .price class which the theme styles; this out-ranks it so the price stays green. */
.millwest_div_orig_price .millwest_price.m_no_discount p.price{
	color: #2E6F40 !important;
}
.m_no_discount.millwest_price p:after{
	height: 0px;
}

.mill_show_price {
    display: flex;
    gap: 5px;
    justify-content: end;
    padding: 0 10px;
    font-family: "Work Sans", Sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: var(--e-global-color-primary);
}
.mill_show_price p.mill_org_price {
    position: relative;
}
.mill_org_price:after {
    content: "";
    width: 103%;
    height: 1px;
    background: #AA0812;
    display: block;
    transform: rotateZ(15deg);
    position: absolute;
    top: 13px;
}

.m_no_discount p.mill_org_price {
    display: none;
}

/* Option swatch that has not loaded yet: a plain light box the same size as the
   photo, no spinner. The spinner used to run on every swatch while the
   background loader worked through them, which read as the page being stuck.
   Updated by Jadon - 2026.10 */
img.mlazy {
    background: #f1f3f5;
    display: block;
}

img.milwest-main-img{
	background : none !important;
}

#mill-load-more-btn{
	font-family: "Work Sans", Sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1px;
}

form.cart {
    display: none !important;
}

.in-home-shipping ul {
    display: flex;
    flex-direction: column;
    align-items: self-end;
}

input.in-home {
    width: 75px;
    min-height: 25px !important;
    margin: 0 5px !important;
    padding: 3px 10px !important;
	font-family: "Work Sans", Sans-serif !important;
	font-weight: 500 !important;
	text-align: center;
}
input.in-home:disabled {
    background: #80808036;
    cursor: not-allowed;
}
button#place_order:disabled, a.checkout-button.disabled {
    background: grey !important;
}
span.in-home-text{
	font-family: "Work Sans", Sans-serif;
    font-weight: 500;
	display: flex;
	gap:5px;
}

li.in-home-error {
    color: #AA0812;
    float: right;
}

.min-ship-msg span {
    color: #AA0812;
}

.shipping-calculator-form{
	display:block !important; 
}

.shipping-calculator-form p#calc_shipping_country_field,
/* .shipping-calculator-form p#calc_shipping_state_field, */
.shipping-calculator-form p#calc_shipping_city_field {
    display: none !important;
}

.in-home-btn{
	width: 0;
	height: 0;
	opacity: 0;
}

#shipping_method li {
    width: 100%;
    display: flex;
	margin-bottom: 5px;
}

#shipping_method li label {
    width: 100%;
    display: flex;
    justify-content: space-between;
	font-size:16px;
}

.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table tr {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd !important;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    flex-direction: row;
}

.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table {
    display: flex;
    flex-direction: column;
}

.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table tr td {
    border: none !important;
}


.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table tr th {
    border: none !important;    
}


.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table tr.shipping {
    display: contents;
}

.woocommerce-checkout-review-order-table #shipping_method{
    margin-top:10px !important;
    margin-right: 10px;
}

.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table tr.order-total {
    border-bottom: none !important;
}

.elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout-review-order-table .tax-rate th, .elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout-review-order-table .tax-rate td{
    border-bottom: none !important;
}

.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals.shipping td:before {
    margin-bottom: 10px;
}

.woocommerce-checkout-review-order-table #shipping_method li label {
    font-size: 14px !important;
}

span.m_ohio_only {
    display: flex;
    font-size: 12px;
    color: #AA0812;
}

img:not([src]) {font-size: 0;}
img:not([src]):before {
  content: " ";
  display: block;
  background-color: #FFF;
  padding: 10px;
  position: absolute;
  outline: none;
  border: none;
}

.m_addcart span {
    font-family: "Work Sans", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: normal;
}

.millwest_collection li.current:last-child {
    display: inline-block !important;
}

#mill-child-products .m_single_container {
    margin-bottom: 50px;
    display: flex;
}

#mill-child-products h2.product_title a:hover, #mill-child-products .m_single_20 a:hover p {
    color: #AA0812;
}

.m_single_container {
    display: flex;
    flex-direction: row;
    gap: 0px 0px;
    row-gap: 0px;
    column-gap: 0px;
    flex-wrap: wrap;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    background: #ffffff;
}

.m_single_container p, .m_single_container h1 {
    margin-bottom: 0;
}

.m_single_box {
    display: flex;
    justify-content: center;
    align-self: auto;
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
}

.m_single_80 {
    display: flex;
    width: 80%;
    flex-direction: column;
    gap: 5px 5px;
    row-gap: 5px;
    column-gap: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
}

.m_single_20 {    
	display: flex;
    width: 20%;
    flex-direction: column;
    justify-content: center;
    gap: 5px 5px;
    row-gap: 5px;
    column-gap: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
	align-items: end;
}

.m_single_40 { 
	display: flex;
    width: 40%;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    z-index: 80; 
}

.m_single_60{
	display: flex;
    width: 60%;
    flex-direction: column;    
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
}

.m_single_container p.made_by {
	font-family: "Work Sans", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--e-global-color-primary);
}

.m_single_container h1.product_title, .m_single_container h2.product_title a{
	font-family: "Derivia", Sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 4px;
    color: var(--e-global-color-primary);
    line-height: 1.2em;
}

.m_single_container p.mill_skus{
	font-family: "Work Sans", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #505153;
}

.m_single_container .m_discount_btn{
	background-color: #AA0812;
    padding: 10px 15px 10px 15px;
    border-radius: 5px 5px 5px 5px;
}

.m_single_container .m_discount_btn{
	font-family: "Work Sans", Sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #FFFFFF;
}
.m_single_container .millwest_div_orig_price{
    display: flex;
    column-gap: 10px;
    align-items: center;
}
.m_single_container .millwest_div_orig_price p{
	font-family: "Work Sans", Sans-serif !important;
    font-weight: 300;
    letter-spacing: -1px;
	color: var(--e-global-color-primary);
    margin-top: -10px;
}

.millwest_price{
    position: relative;
    margin-top:10px;
}

.m_single_container p.m_lead_times {
    letter-spacing: 1px;
}

.m_single_container p.m_substitute_msg a {
    text-decoration: underline;
}

.m_single_container p.m_substitute_msg {
    width: 50%;
    text-align: right;
}

.m_single_others{
    display: flex;
    flex-direction: column;
    align-items : end;
    row-gap:5px;
    font-family: "Work Sans", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #505153;
    padding-right: 25px;
}

.m_single_others ul {
    list-style: none !important;
    margin: 0 !important;
    text-align: right;
}

li.millwest_instore a{
    text-decoration: none !important;
    color: #505153;
}

.in-home-shipping li {
    display: flex;
    align-items: center;
    column-gap: 5px;
    margin-right: -8px;
}

li.elementor-icon-list-item.millwest_instore {
    margin-top: 5px;
}

.mill_discount_container p {
    margin-bottom: 10px;
}

.m_single_container .mill_product_acc .m_accordion{
    height: 40px;
}

.m_single_container .mill_product_acc .m_accordion.active{
    height: auto;
}

.m_single_container .m_collection_tab{
    padding: 0;
}

.m_single_container .millwest_div_orig_price p.price {
    font-weight: 300 !important;
}

.mill_gallery_container {
    max-width: 448px;
}
.m_gallery_clone{
    width: 40%;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    z-index: 80; 
    display: none;
}
.m_single_gallery{
    justify-content: flex-start;
}
.m_single_breadcrumb{
    display: flex;
}
.m_single_container ol.breadcrumbs.text-small {
    margin: 0;
    font-family: "Work Sans", Sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #505153;
}
.breadcrumbs li a, .fancy-header .breadcrumbs li a{
     color: #505153;
}

.millwest_dis_price p{
    font-family: "Work Sans", Sans-serif;
    font-weight: 400 !important;
    letter-spacing: -1px;
    font-size: 40px;
    color: #2E6F40 !important;
}

.m_single_60 .m_accordion.m_accordion_collections {
    background: none;
    border-left-color: #FFF;
    border-right-color: #FFF;
    border-top-color: #FFF;
}

@media only screen and (max-width: 600px) {

    .m_single_container p.m_substitute_msg {
        width: 100%;
        text-align: left;
    }

    .m_single_20 {
        margin-top:0px !important;
    }

    .m_accordion_item h2{
        margin-bottom: 0px !important;
    }

    .m_accordion .m_collection_tab {
        font-size: 18px;
    }


    #mill-child-products .mill_gallery_container{
        max-width: 380px;
    }

    .m_single_box {
        flex-direction: column;
    }

    .m_single_box div {
        width: auto;
        max-width: 340px;
    }

    .millwest_price p:after{
        top: 5px;
    }

    .m_single_breadcrumb{
        display: none;
    }

    .m_single_box .mill_wrapper {
        padding: 0;
    }

    .m_single_container {
        padding: 10px;
    }
    .m_single_container .m_collection_tab{
        padding: 10px;
    }

    .m_single_others p, .m_single_others span {
        font-size: 13px;
    }

    .m_single_others {
        align-items: baseline;
    }

    .m_single_others ul{
        text-align: left;
    }

	/* Removed by Jadon - 2026.09: old phone-width arrow offset removed; the strip has no
	   arrows on mobile any more (see .mill-thumbs-scroll above). */

	a.mill_select {
		left: -60%;
	}
	.mill_slides {
		flex-direction: column-reverse;
		opacity: 0 !important;
		display: none;
	}
	
	.mill_slides .image-container {
		flex: 1 0 auto !important;
		flex-flow: wrap;	
	}

	.mill_slides.active img{
		max-height: 300px !important; 
    	height: 190px !important;
	}

	.mill_slides .text-container p{
		height: auto !important;
	}
	
	.mill_slides .text-container {
		padding-bottom: 50px;
	}
	.mill_slides.active{
		display:flex;
		margin-left:5%;
		margin-right:5%;
		opacity: 1 !important;
		flex: 1 0 90% !important;
	}

	.slideshow-container .slider_btn::before {
		top: 2px !important;
	}
	
	.slider_btn a {
		transform: rotate(0deg) !important;
		margin-left: 0px !important;
	}
	
	.mill_slides .slider_btn {
		margin: 0;
        margin-top: 0 !important;
        top: 85% !important;
        left: -40% !important;
        z-index: 3;
	}
	
	.slider_btn.rotate::before {
		transform: rotate(45deg);
	}

	.mill_slides.active .text-container {
		padding: 0px 5px 60px 5px !important;
	}

	.mill_slides .text-container h3{
		font-size: 18px !important;
  	  	text-align: center;
		margin-top:13px;
	}
}


/* Added by Jadon - 2026.10: change-animation overlay for the main photo (see
   millPhotoTransition in millwest-public.js). The overlay covers the viewport on a
   backdrop of the page colour (set in JS from the nearest solid background) and
   holds copies of the old and, for a slide, the new photo at their exact positions;
   JS fades it out (same-size photos) or slides the copies (different sizes), with
   the durations set there, while the real track has already switched underneath.
   The viewport becomes the positioning box; nothing else is positioned against it. */
.mflexslider .flex-viewport {
    position: relative;
}
.mflexslider .mill-xfade {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;            /* above the track, below the magnifier button (85) */
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
}
.mflexslider .mill-xfade img {
    position: absolute;
    display: block;
    max-width: none;
    max-height: none;
    object-fit: contain;
    will-change: transform;
}
.mflexslider .mill-xfade.is-fading {
    opacity: 0;
}