/* mmx-cms-global-footer.css | v1.0.07 */
/* Moved from corsetmaking.css (2026-08-24 Global Footer grid rebuild block, lines 230-317) into this
   component's own packaged CSS as part of Global Footer componentization. body.checkout-page ancestor
   selectors were converted to :host([data-checkout-page]) since Shadow DOM CSS cannot select an
   ancestor outside its own shadow tree - the host element carries a data-checkout-page attribute
   (set server-side in instance.mvt) instead of relying on the page body class. */

:host {
	display: block !important;
	width: 100%;
	margin: 0 !important;
}

/* Shadow DOM does not inherit the page's global anchor reset (Bootstrap/theme) -
   reset here so links don't fall back to the browser default underline */
a {
	text-decoration: none;
}

div.footer {width:100%; height:auto; margin:15px 0 0 0; padding:0; background-image:url('/Merchant2/graphics/footer-bg.png'); background-repeat:repeat-both;}

/* Shadow DOM does not inherit the page's Bootstrap .container class - replicating its
   behavior here (side padding, centered max-width per breakpoint) so link columns and
   content don't run edge-to-edge against the browser window.

   Uses max-width (not width) deliberately: some page templates (e.g. account/order-lookup
   screens) render this component inside a narrower content wrapper than the full page width.
   A fixed width driven only by viewport breakpoints would demand more space than such a
   parent actually has, overflowing past its edge. max-width still expands up to the normal
   breakpoint size on full-width pages, but shrinks to fit whatever space is actually
   available otherwise. */
div.footer-center {
	width: 100%;
	max-width: 100%;
	padding: 20px 15px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
@media (min-width: 768px) {
	div.footer-center { max-width: 750px; }
}
@media (min-width: 992px) {
	div.footer-center { max-width: 970px; }
}
@media (min-width: 1200px) {
	div.footer-center { max-width: 1170px; }
}

div.footer-newsletter-signup {width:100%; padding:10px; position:relative;}
div.footer-newsletter-signup p {color:var(--gray-footer-newsletter); font-family: 'Open Sans', sans-serif; font-size:18px; width:460px; margin:10px auto;}
div.footer-newsletter-form-wrapper {position:absolute; top:0; right:0;}
input.footer-newsletter-email-input {width:170px; height:15px; padding:13px 115px 13px 14px; box-sizing:content-box; border:1px solid var(--gold-border-muted); position:absolute; top:14px; right:10px;}
input.footer-newsletter-button {position:absolute; top:17px; right:15px;}
div.footer-newsletter-message {display: none;}
div.footer-newsletter-success {
	position: absolute;
	bottom: 6px;
	left: 0;
	right: 0;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--brand-gold-text);
	text-shadow: 1px 1px 2px #000000;
	display: none;
}

/* Info row: social / contact / payment */
/* align-items:start (not center) deliberately - social icons (single row, ~26px) and payment
   icons (now wrapping to two rows since Apple Pay/Amazon Pay were added, ~80px) have visibly
   different heights; centering emphasizes the mismatch with uneven empty space above/below the
   shorter column, while top-alignment lets both simply start flush at the same line */
div.footer-info-row {display:grid; grid-template-columns:repeat(3, 1fr); align-items:start; gap:20px; padding:20px 0; margin-top:10px;}

div.footer-social-icons ul {list-style:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; padding:0; margin:0;}
div.footer-social-icons ul li {margin:0;}
div.footer-social-icons ul li a {display:block; text-decoration:none;}
div.footer-social-icons img {width:26px; height:26px; display:block;}

div.footer-contact-info {text-align:center;}
div.footer-contact-info p {margin:0;}
div.footer-contact-info p a, span.footer-contact-phone-number {color:var(--gray-footer-contact); font-family: 'Open Sans', sans-serif; font-size:14px;}
div.footer-contact-info p a:hover {color:var(--brand-gold-text); text-decoration:none;}
p.footer-contact-announcement {margin:6px 0 0 0; font-family: 'Open Sans', sans-serif; font-size:13px; color:var(--gray-footer-contact);}

div.footer-payment-methods ul {list-style:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; padding:0; margin:0;}
div.footer-payment-methods ul li {margin:0;}
li.footer-payment-methods-break {flex-basis:100%; width:0; height:0; margin:0; padding:0; overflow:hidden;}
div.footer-payment-methods img {height:28px; width:auto; display:block;}

/* Checkout content modal trigger links - fixed, non-editable, checkout-pages-only */
div.footer-checkout-content-modals {display:none;}
:host([data-checkout-page]) div.footer-checkout-content-modals {display:flex; align-items:center; justify-content:center;}
div.footer-checkout-content-modals ul {list-style:none; display:flex; flex-wrap:wrap; gap:15px; margin:0; padding:0;}
div.footer-checkout-content-modals ul li {margin:0;}
div.footer-checkout-content-modals ul li a {font-family: 'Montserrat', sans-serif; font-size:14px; color:var(--text-body);}
div.footer-checkout-content-modals ul li a:hover {color:var(--brand-gold-text); text-decoration:none;}

/* Link columns */
div.footer-links {display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:30px 20px; padding:30px 0 10px 0;}
div.footer-links ul {list-style:none; padding:0; margin:0;}
div.footer-links ul li span, div.footer-links ul li a, div.footer-links ul li p {font-family: 'Open Sans', sans-serif; font-size:14px; color:#707070}
div.footer-links ul li:first-of-type span, div.footer-links ul li:first-of-type a {color:var(--text-body); font-weight:bold;}
div.footer-links ul li a:hover {color:var(--brand-gold-text); text-decoration:none;}

/* Contact Us column: min-width floor (not a fixed width) gives the address enough room to
   avoid single-word orphan wraps (e.g. "8" wrapping alone) without fighting browser
   text-zoom/resize - the column still shrinks/grows normally within the grid */
ul.footer-contact-us-ul {min-width:200px;}

/* Contact Us column - restyled with labeled sub-blocks instead of one <br>-chained paragraph */
li.footer-contact-us-block {margin-top:14px;}
li.footer-contact-us-block:first-of-type {margin-top:10px;}
p.footer-contact-us-label {font-family: 'Open Sans', sans-serif; font-size:12px; font-weight:bold; text-transform:uppercase; letter-spacing:0.03em; color:var(--text-body); margin:0 0 4px 0;}
p.footer-contact-us-address {font-family: 'Open Sans', sans-serif; font-size:14px; color:#707070; line-height:1.6; margin:0;}
p.footer-contact-us-address a {font-family: 'Open Sans', sans-serif; font-size:14px; color:#707070; text-decoration:none;}
p.footer-contact-us-address a:hover {color:var(--brand-gold-text); text-decoration:none;}

/* Copyright */
div.footer-copyright {font-family: 'Open Sans', sans-serif; font-size:14px; color:#707070; text-align:center; padding-bottom:30px; white-space:nowrap;}

/* Checkout pages: hide newsletter / social icons / link columns entirely */
:host([data-checkout-page]) div.footer-newsletter-signup {display:none;}
:host([data-checkout-page]) div.footer-social-icons {display:none;}
:host([data-checkout-page]) div.footer-links {display:none;}
:host([data-checkout-page]) div.footer-info-row {grid-template-columns:1fr 1fr;}
:host([data-checkout-page]) div.footer-contact-info p {font-family: 'Montserrat', sans-serif; font-size:14px; color:var(--text-body);}
:host([data-checkout-page]) div.footer-contact-info p a {font-family: 'Montserrat', sans-serif; font-size:14px; color:var(--text-body);}
:host([data-checkout-page]) div.footer-contact-info p a:hover {color:var(--brand-gold-text); text-decoration:none;}

/* Responsive */
@media (max-width:1199px) {
	div.footer-newsletter-signup p {font-size:16px; width:100%; max-width:460px;}
	div.footer-payment-methods img {height:26px; width:auto;}
}
@media (max-width:979px) {
	div.footer-info-row {grid-template-columns:1fr; text-align:center; gap:16px;}
	div.footer-newsletter-signup p {width:100%; max-width:408px; text-align:center;}
	div.footer-newsletter-form-wrapper {position:relative; width:300px; margin:10px auto 0 auto;}
	input.footer-newsletter-email-input {position:static;}
	input.footer-newsletter-button {position:absolute; top:3px; right:5px;}
	div.footer-links {grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));}
	:host([data-checkout-page]) div.footer-info-row {grid-template-columns:1fr;}
}
@media (max-width:767px) {
	span.footer-contact-info-separator {display:none;}
	div.footer-newsletter-signup p {font-size:14px;}
	div.footer-links {grid-template-columns:repeat(2, 1fr); padding-left:20px; padding-right:20px;}
}
@media (max-width:479px) {
	div.footer-links {grid-template-columns:1fr; padding-left:20px; padding-right:20px;}
}