/* mmx-cms-global-footer.css | v1.0.08 */
/* 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;
}

/* Advanced Settings: link_hover_style - "Color + Underline" adds underline as a second,
   color-independent hover signal (a standard accessibility pattern), on top of whatever
   hover color is in effect. Off by default to preserve current look. */
:host([data-hover-style="underline"]) a:hover {
	text-decoration: underline;
}

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; }
}

/* Newsletter bar: flexbox (not position:absolute) deliberately - a floating absolutely-positioned
   form only avoids overlapping the intro text at the specific widths it was manually tuned for.
   Flexbox lets the browser allocate space to each side naturally and wrap the form below the text
   once space runs out, eliminating the whole category of "overlaps at certain window sizes" bugs
   rather than adding more manually-tuned breakpoints. */
div.footer-newsletter-signup {width:100%; padding:10px 20px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px 20px; position:relative;}
div.footer-newsletter-signup p {color:var(--gray-footer-newsletter); font-family: 'Open Sans', sans-serif; font-size:18px; margin:0; flex:1 1 300px; min-width:0; text-align:center;}
div.footer-newsletter-form-wrapper {flex:0 0 auto;}
div.footer-newsletter-form {display:flex; align-items:center; gap:0;}
input.footer-newsletter-email-input {width:170px; height:15px; padding:13px 14px; box-sizing:content-box; border:1px solid var(--gold-border-muted); border-right:none;}
input.footer-newsletter-button {flex:0 0 auto;}
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(--footer-link-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;}

/* Advanced Settings: payment_icon_wrap - "Single Row (No Wrap)" also forces flex-wrap:nowrap
   so the row can't wrap even if genuinely too narrow, matching what the setting name promises -
   intended for stores confident they'll always have few enough icons to fit */
:host([data-payment-wrap="single_row"]) div.footer-payment-methods ul {flex-wrap:nowrap;}

/* 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(--footer-link-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(--footer-link-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(--footer-link-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(--footer-link-hover-color, var(--brand-gold-text)); text-decoration:none;}

/* Responsive */
@media (max-width:1199px) {
	div.footer-newsletter-signup p {font-size:16px;}
	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-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;}
}
/* Advanced Settings: mobile_link_columns - "2 Columns" option overrides the single-column
   default at this breakpoint, applied via a host attribute set from the Page Builder setting
   so it can be reverted instantly without a component reinstall */
@media (max-width:479px) {
	:host([data-mobile-columns="2"]) div.footer-links {grid-template-columns:repeat(2, 1fr); gap:20px 12px;}
}